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.
10. Even CS people read this book!
No, I didn’t pay him to advertise for me
11. 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.
12. UI is a tiny part of UX
Controller
UX
Model
UI
User
View
13.
14. Things to think about
•
•
•
•
What is your user thinking?
Contextual awareness
Information Architecture
Terminology/wording
16. 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/
18. Colors
•
•
Colors have a psychological effect!
•
•
Igniter colors
Choose red/yellow for vibrancy/activity,
blue/green for calmness.
Try to keep color blindness in mind
20. Visual Hierarchy
To create emphasis:
•
•
•
Larger/bolder objects
Vibrant/colorful objects
Complex shapes
More importantly… make sure you are not
using these ‘tools’ unintentionally.
37. 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
38. 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!