Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Design Workshop I @ Cornell Tech

665 views

Published on

First of a series of workshops, aimed to give business managers and engineers an exposure to design concepts. This presentation covers User Experience Concepts, Graphic Design Fundamentals, UI Trends, Cool tools people can use, and an overview of iOS/Android technical specs for UI.

Published in: Design
  • Be the first to comment

Design Workshop I @ Cornell Tech

  1. 1. Design Workshop I Intro to UX and Graphic Design 8 Nov 2015, Cornell Tech at Cornell University #designworkshops on Slack Zaid Haque, @zaidhaque
  2. 2. About Me Red Dot Award: Bilingual Flight Info Display SystemMy Website
  3. 3. Designers are cursed. They hate everything.
  4. 4. Design is subjective. Taste varies from person to person
  5. 5. Outline • Basic UX design concepts • Ten-minute graphic design fundamentals • UI Design trends • Cool tools (web apps) + Frameworks • Tech specs for design
  6. 6. UX = User Experience What makes an ‘experience’? How can you leverage that to create a powerful app?
  7. 7. Cost FormFunction Product Parameters Money, Manpower, effort, etc. Aesthetics, Beauty Performance, Features
  8. 8. Cost FormFunction Corporate Managers Everyone has different views on what is important. Product Parameters
  9. 9. Cost Form Function Software Engineers Everyone has different views on what is important. Product Parameters
  10. 10. Cost Form Function “Designers” - closer to Artists Everyone has different views on what is important. Product Parameters
  11. 11. Cost FormFunction Try to balance these out! Product Parameters
  12. 12. The Design of Everyday Things
  13. 13. “ 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. “
  14. 14. UI is a tiny part of UX Controller ViewModel User UIUX
  15. 15. Things to think about • What is your user thinking? • Contextual awareness • Information Architecture • Terminology/wording
  16. 16. if you analyze the FUNCTION of an object, its FORM often becomes obvious. - F. A. Porsche
  17. 17. Graphic Design The shortest crash course ever
  18. 18. 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/
  19. 19. Typography Anatomy of Characters http://www.fonts.com/content/learning/ fontology/level-1/type-anatomy/anatomy
  20. 20. Colors • Colors have a psychological effect! • Choose red/yellow for vibrancy/activity, blue/green for calmness. • Igniter colors • Try to keep color blindness in mind
  21. 21. Colors
  22. 22. Colors #A10914 Less -> 0 1 2 3 4 5 6 7 8 9 A B C D E F <- More Red BlueGreen
  23. 23. Visual Hierarchy To create emphasis: • Larger/bolder objects • Vibrant/colorful objects • Complex shapes More importantly… make sure you are not using these ‘tools’ unintentionally.
  24. 24. You will notice this first.
  25. 25. Vector vs. Raster Different formats for different purposes .ai, .svg, .eps Scalable Vectors .jpg, .png, .gif not scalable Rasters
  26. 26. UI Trends It’s kind of like fashion… except with screens instead of clothes.
  27. 27. Flat UI iOS7, Windows 8, Google Material Design…
  28. 28. Intensive Graphics Increased bandwidth = more creativity
  29. 29. Buttons/Links Consistent with Flat UI. We’ll design some later.
  30. 30. Cool Tools
  31. 31. Adobe Color http://color.adobe.com/
  32. 32. FlatUIColors http://flatuicolors.com
  33. 33. CSSMatic http://cssmatic.com/
  34. 34. ResizeMyBrowser http://resizemybrowser.com/
  35. 35. 960 Grid System http://960.gs/
  36. 36. Tech Specs - iOS non-retina @1x retina @2x plus screens @3x Home Screen icon 60 x 60 120 x 120 180 x 180 Settings icons 29 x 29 58 x 58 87 x 87 Tab Bar icons 25 x 25 approximately 50 x 50 approximately 75 x 75 approximately Toolbar/Navigation 22 x 22 approximately 44 x 44 approximately 66 x 66 approximately More details: Apple Developer - Icon Sizes
  37. 37. 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 • It’s confusing. Ask me if you’re unsure.
  38. 38. Other resources • uxmagazine.com • smashingmagazine.com • net.tutsplus.com, design.tutsplus.com • http://dribbble.com • Android UI Guide • iOS Human Interface Design Research/Learning
  39. 39. Other resources • http://subtlepatterns.com - backgrounds • http://pexels.com - stock images • http://nounproject.com - iconography • http://pixeden.com - misc (paid, free) • http://graphicriver.net - premium graphics • http://themforest.net - premium themes Assets/downloads (mostly free)
  40. 40. Homework (?!) Write a critique of something (anything) from a design perspective. Post on #designworkshops http://critique.zaidhaque.com
  41. 41. Design Workshop I Intro to UX and Graphic Design 8 Nov 2015, Cornell Tech at Cornell University Zaid Haque, @zaidhaque https:// zaidhaque.typeform .com/to/olqrP0

×