intro to user experience design for developers, carnegie apps hackathon 2014

Click here to load reader

Post on 08-Sep-2014




0 download

Embed Size (px)


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.


  • The UX stuff What 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 Experience What makes an experience? How can you leverage that to create a powerful app?
  • Parameters of creating a product Aesthetics, Beauty Performance Function Form Cost Money, Manpower, effort, etc.
  • Parameters of creating a product Everyone has different views on what is important. Form Function Cost Corporate Managers
  • Parameters of creating a product Everyone has Function Form different views on what is important. Cost Software Engineers
  • Parameters of creating a product Form Everyone has different views on what is important. Function Designers - closer to Artists Cost
  • Parameters of creating a product Function Cost Try to balance these out! Form
  • The Design of Everyday Things
  • Even CS people read this book! No, I didnt pay him to advertise for me
  • 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 dothe 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 UX Model UI User View
  • Things to think about What is your user thinking? Contextual awareness Information Architecture Terminology/wording
  • Graphic Design The shortest crash course ever
  • Typography Sans-serif: Screen media, smaller type Serif: Print media, larger type (P.S. Dont use Comic Sans) ! Use of Superlight and Bold type is a trend to keep in mind.
  • Typography Anatomy of Characters fontology/level-1/type-anatomy/anatomy
  • 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
  • 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.
  • notice this You will first.
  • UI Trends Its kind of like fashion except with screens instead of clothes.
  • Flat UI iOS7, Windows Metro
  • Intensive Graphics
  • Buttons/Links
  • Cool Tools
  • Adobe Kuler
  • CSSMatic
  • ResizeMyBrowser
  • 960 Grid System
  • 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,
  • The UX stuff What makes something usable? 20 Jan 2014, CarnegieApps Hackathon Workshop ! Zaid Haque, @zaidhaque

View more