intro to user experience design for developers, carnegie apps hackathon 2014
DESCRIPTION
This workshop was aimed as an introduction to UX design for developers/designers who were students at a local 24 hour Hackathon competition. It covers the general idea of product creation, UX/UI Design, as well as some interesting productivity enhancing tools and resources for developers/designers.TRANSCRIPT
The UX stuffWhat makes something ‘usable’? 20 Jan 2014, CarnegieApps Hackathon Workshop !
Zaid Haque, @zaidhaque
Outline
• Basic UX design concepts
• Ten-minute graphic design fundamentals
• UI Design trends
• Tech specs for design
• Cool tools (web apps) + Frameworks
UX = User ExperienceWhat makes an ‘experience’? How can you leverage that to create a powerful app?
Cost
FormFunction
Parameters of creating a product
Money, Manpower, effort, etc.
Aesthetics, Beauty
Performance
Parameters of creating a product
Cost
FormFunction
Corporate Managers
Everyone has different views on what is important.
Parameters of creating a product
Cost
FormFunction
Software Engineers
Everyone has different views on what is important.
Parameters of creating a product
Cost
Form
Function
“Designers” - closer to Artists
Everyone has different views on what is important.
Parameters of creating a product
Cost
FormFunction
Try to balance these out!
The Design of Everyday Things
No, I didn’t pay him to advertise for me
Even CS people read this book!
Quotes
If everyday design were ruled by aesthetics, life might be more pleasing to the eye but less comfortable; if ruled by usability, it might be more comfortable but uglier. If cost or ease of manufacture dominated, products might not be attractive, functional, or durable. Clearly, each consideration has its place. Trouble occurs when one dominates all the others.
Use constraints so that the user feels as if there is only one possible thing to do — the right thing, of course
Assume that any error that can be made will be made. Plan for it.
UI is a tiny part of UX
Controller
ViewModel
User
UIUX
Things to think about
• What is your user thinking?
• Contextual awareness
• Information Architecture
• Terminology/wording
Graphic DesignThe shortest crash course ever
Typography
Sans-serif: Screen media, smaller type Serif: Print media, larger type
(P.S. Don’t use Comic Sans)
!
Use of Superlight and Bold type is a trend to keep in mind.
http://www.webdesignerdepot.com/2013/03/serif-vs-sans-the-final-battle/
Typography
Anatomy of Characters
http://www.fonts.com/content/learning/fontology/level-1/type-anatomy/anatomy
Colors
• Colors have a psychological effect!
• Choose red/yellow for vibrancy/activity, blue/green for calmness.
• Igniter colors
• Try to keep color blindness in mind
Colors
Visual Hierarchy
To create emphasis:
• Larger/bolder objects
• Vibrant/colorful objects
• Complex shapes
More importantly… make sure you are not using these ‘tools’ unintentionally.
You willnotice this
first.
UI TrendsIt’s kind of like fashion… except with screens instead of clothes.
Flat UIiOS7, Windows Metro
Intensive Graphics
Buttons/Links
Cool Tools
Tech Specs - iOS
• iPhone resolutions: 320x480, 640x960, 640x1136
• Retina display icons must be 2x old display
• Tab bar icons: 50x50px, 25x25 for old displays.
• More info: Apple Developer - Icon Sizes
Tech Specs - Android
• icons organized by “DPI” - dots per inch
• icon resolutions in mdpi, hdpi, xhdpi
• hdpi resolution = 1.5x mdpi
• xhdpi resolution = 2x mdpi
• 1dp = 1px @ mdpi (=1.5px @ hdpi, etc.)
• Standard action bar icon size: 32x32 dp.
• More info: Android Developer - Iconography
• Feel free to ask me for clarity during the Hackathon if needed!
Other resources
• uxmagazine.com
• smashingmagazine.com
• net.tutsplus.com, design.tutsplus.com
• medium.com
• http://developer.android.com/guide/topics/ui
• http://www.teehanlax.com/tools/iphone/
The UX stuffWhat makes something ‘usable’? 20 Jan 2014, CarnegieApps Hackathon Workshop !
Zaid Haque, @zaidhaque