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.

1. The UX stuff
What makes something ‘usable’?
20 Jan 2014, CarnegieApps Hackathon Workshop
!
Zaid Haque, @zaidhaque

2. Outline
•
•
•
•
•
Basic UX design concepts
Ten-minute graphic design fundamentals
UI Design trends
Tech specs for design
Cool tools (web apps) + Frameworks

3. UX = User Experience
What makes an ‘experience’? How can you
leverage that to create a powerful app?

4. Parameters of
creating a product
Aesthetics,
Beauty
Performance
Function
Form
Cost
Money, Manpower,
effort, etc.

5. Parameters of
creating a product
Everyone has
different views
on what is
important.
Form
Function
Cost
Corporate Managers

6. Parameters of
creating a product
Everyone has
Function
Form
different views
on what is
important.
Cost
Software Engineers

7. Parameters of
creating a product
Form
Everyone has
different views
on what is
important.
Function
“Designers” - closer to Artists
Cost

8. Parameters of
creating a product
Function
Cost
Try to balance these out!
Form

9. The
Design of
Everyday
Things

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

14. Things to think about
•
•
•
•
What is your user thinking?
Contextual awareness
Information Architecture
Terminology/wording

15. Graphic Design
The shortest crash course ever

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/

17. Typography
Anatomy of
Characters
http://www.fonts.com/content/learning/
fontology/level-1/type-anatomy/anatomy

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

19. Colors

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.

21. notice this
You will
first.

23. UI Trends
It’s kind of like fashion…
except with screens instead of clothes.

24. Flat UI
iOS7, Windows Metro

27. Intensive Graphics

30. Buttons/Links

32. Cool Tools

33. Adobe Kuler
http://kuler.adobe.com/

34. CSSMatic
http://cssmatic.com/

35. ResizeMyBrowser
http://resizemybrowser.com/

36. 960 Grid System
http://960.gs/

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!

39. 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/

40. The UX stuff
What makes something ‘usable’?
20 Jan 2014, CarnegieApps Hackathon Workshop
!
Zaid Haque, @zaidhaque