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 – Girls Who Code 2017

83 views

Published on

A very brief primer on design. Balancing beauty with usability to create great user experiences.

Published in: Design
  • Be the first to comment

  • Be the first to like this

Design – Girls Who Code 2017

  1. 1. Design
  2. 2. Design Tools Design Critique Design Research Design Management Design Systems Design Process Design Definition Design Execution Design Principles Designing with Data Design Thinking Design Ethics Portfolio Design Computational Design Packaging Design Branding Design Journey Design Advertising Design Digital Design Product Design Service Design AR / VR Design User Centered Design Type Design
  3. 3. “Design is not just what it looks and feels like. Design is how it works.” - Steve Jobs
  4. 4. Beauty Usability “Design is how it works.”“What it looks and feels like.”
  5. 5. Good design means that beauty and usability are in balance.
  6. 6. Delightful Desirable Useful Usable Beauty Usability
  7. 7. Usability “Don’t Make Me Think” - Steve Krug Wayfinding Feedback Affordance
  8. 8. Wayfinding Where am I? Where can I go? What’s nearby? How do I get out?
  9. 9. Feedback Status Completion Errors
  10. 10. CompletionStatus Errors
  11. 11. Affordance “What action (do I think) I can do?” Use conventions Use words Use metaphors
  12. 12. MetaphorsWordsConventions
  13. 13. Beauty “Good design is aesthetic.” - Dieter Rams Typography Color Balance
  14. 14. Typography Legibility + Readability Consider font family, weight, size & line length, height Emphasize important information
  15. 15. Label Label Label Label Label Label Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur pellentesque mi sed aliquet pulvinar. Nullam urna nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur pellentesque mi sed aliquet pulvinar. Nullam urna nunc, faucibus eget elit sit amet, tempus varius purus. Nulla eleifend eros sit amet sem vulputate vestibulum. Donec in metus velit. Sed eleifend turpis nulla, ut viverra sem dictum in. Phasellus enim leo, blandit id justo ac, dapibus molestie nisi.Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur pellentesque mi sed aliquet pulvinar. Nullam urna nunc, faucibus eget elit sit amet, tempus varius purus. Nulla eleifend eros sit amet sem vulputate vestibulum. Donec in metus velit. Sed eleifend turpis nulla, ut viverra sem dictum in. Phasellus enim leo, blandit id justo ac, dapibus molestie nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur pellentesque mi sed aliquet pulvinar. Nullam urna nunc, faucibus eget elit sit amet, tempus varius purus. Nulla eleifend eros sit amet sem vulputate vestibulum. Donec in metus velit. Sed eleifend turpis nulla, ut viverra sem dictum in. Phasellus enim leo, blandit id justo ac, dapibus molestie nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur pellentesque mi sed aliquet pulvinar. Nullam urna nunc, faucibus eget elit sit amet, tempus varius purus. Nulla eleifend eros sit amet sem vulputate vestibulum. Donec in metus velit. Sed eleifend turpis nulla, ut viverra sem dictum in. Phasellus enim leo, blandit id justo ac, dapibus molestie nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur pellentesque mi sed aliquet pulvinar. Nullam urna nunc, faucibus eget elit sit amet, tempus varius purus. Nulla eleifend eros sit amet sem vulputate vestibulum. Donec in metus velit. Sed eleifend turpis nulla, ut viverra sem dictum in. Phasellus enim leo, blandit id justo ac, dapibus molestie nisi.
  16. 16. Emphasis Font Family
  17. 17. Color Palette Meaning Contrast
  18. 18. Low ContrastMeaningPrimary + Secondary High Contrast
  19. 19. Symmetry Repetition Balance
  20. 20. BalanceRepetitionBalanceRepetition +
  21. 21. Consider… Wayfinding, Feedback & Affordance and you’ll make things work
  22. 22. Consider… Typography, Color & Symmetry and you’ll make things beautiful
  23. 23. Resources Apple developer.apple.com/ios/human-interface-guidelines Google material.io/guidelines Random material.io/color a.co/ifH5Dlq

×