Intro to User Experience Design for Developers, Carnegie Apps Hackathon 2014

6,802 views

Published on

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.

Published in: Technology, Design

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
  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
  13. Things to think about • • • • What is your user thinking? Contextual awareness Information Architecture Terminology/wording
  14. Graphic Design The shortest crash course ever
  15. 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/
  16. Typography Anatomy of Characters http://www.fonts.com/content/learning/ fontology/level-1/type-anatomy/anatomy
  17. 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
  18. Colors
  19. Visual Hierarchy To create emphasis: • • • Larger/bolder objects Vibrant/colorful objects Complex shapes More importantly… make sure you are not using these ‘tools’ unintentionally.
  20. notice this You will first.
  21. UI Trends It’s kind of like fashion… except with screens instead of clothes.
  22. Flat UI iOS7, Windows Metro
  23. Intensive Graphics
  24. Buttons/Links
  25. Cool Tools
  26. Adobe Kuler http://kuler.adobe.com/
  27. CSSMatic http://cssmatic.com/
  28. ResizeMyBrowser http://resizemybrowser.com/
  29. 960 Grid System http://960.gs/
  30. 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
  31. 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!
  32. 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/
  33. The UX stuff What makes something ‘usable’? 20 Jan 2014, CarnegieApps Hackathon Workshop ! Zaid Haque, @zaidhaque

×