Intro to User Experience Design for Developers, Carnegie Apps Hackathon 2014
37 likes8,179 views
The workshop by Zaid Haque at the CarnegieApps Hackathon covers fundamental UX design concepts, emphasizing the balance between aesthetics, performance, function, and cost in creating usable products. It discusses the importance of user experience, contextual awareness, typography, color psychology, and the latest UI design trends while providing technical specifications for iOS and Android. Participants are encouraged to consider various perspectives and constraints in design to enhance usability.
Intro to User Experience Design for Developers, Carnegie Apps Hackathon 2014
- 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
- 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/
- 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.
- 23. UI Trends It’s kind of like fashion… except with screens instead of clothes.
- 24. Flat UI iOS7, Windows Metro
- 30. Buttons/Links
- 32. Cool Tools
- 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!
- 40. The UX stuff What makes something ‘usable’? 20 Jan 2014, CarnegieApps Hackathon Workshop ! Zaid Haque, @zaidhaque