Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours. ×

UI/UX foundations - Intro to Design

Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Prochain SlideShare
UI/UX Foundations - Research
UI/UX Foundations - Research
Chargement dans…3
×

Consultez-les par la suite

1 sur 148 Publicité

UI/UX foundations - Intro to Design

Télécharger pour lire hors ligne

Intro to UX Design workshop, taught by Meg Kurdziolek and Karen Tang.
Topics: Storyboards, Personas, Journey Maps, Sketching, Prototyping, Design Critiques, Grids, Colors, Typography....
Workshop conducted 9/17/2016

Intro to UX Design workshop, taught by Meg Kurdziolek and Karen Tang.
Topics: Storyboards, Personas, Journey Maps, Sketching, Prototyping, Design Critiques, Grids, Colors, Typography....
Workshop conducted 9/17/2016

Publicité
Publicité

Plus De Contenu Connexe

Diaporamas pour vous (20)

Les utilisateurs ont également aimé (20)

Publicité

Similaire à UI/UX foundations - Intro to Design (20)

Plus récents (20)

Publicité

UI/UX foundations - Intro to Design

  1. 1. UI/UX Foundations:
 Intro to Design Meg Kurdziolek & Karen Tang (TA: Trevor Daunt)
  2. 2. Your Goals What would you like to learn today?
  3. 3. Our Goals We want you to… feel confident when talking to designers describe why an interface may not “feel right” understand common themes & UX terms understand basic design principles
  4. 4. Introductions Which of these domains interests you? Health Education Kids/Families Travel
  5. 5. Agenda 09:00 - 09:20 Breakfast and Introductions 09:20 - 10:20 Storyboards & Personas 10:20 - 11:30 Sketching, Prototyping, Studios & Critiques 11:30 - 11:40 BREAK 11:40 - 12:15 Journey Maps & “The Golden Path” 12:15 - 12:45 LUNCH 12:45 - 01:00 Grids & Colors 01:00 - 01:50 Special Topics (up to you!) 01:50 - 02:00 Group reflections & wrap-up Q&A
  6. 6. Design Process Refine BuildLearn
  7. 7. Design Process BuildLearn Refine
  8. 8. Storyboarding
  9. 9. Storyboarding A storyboard is a powerful design tool because it… conveys the “big picture” idea in just a few pictures combines many design elements (personas, requirements, solutions, etc.) into one coherent story has assets that can be shared, tested, and collaborated on makes you think through & articulate the problem and solution requirements
  10. 10. Storyboarding: Freytag’s Pyramid http://johnnyholland.org/2011/10/storyboarding-ux-part-1-an-introduction/
  11. 11. Personas
  12. 12. Personas A persona is a powerful design tool because it… turns data into motivating, easily remembered assets helps clarify design goals helps evaluate success has assets that can be shared, tested, & collaborated on makes you think about & investigate who your users are
  13. 13. Facts majority of users are male, 35 to 45 years old, and make between $60 to $80k annually return users check website 1 to 3 times a day homepage bounce rate of 30% Facts Persona Persona Freddy the First Time User 40 year old male, has a small budget of disposable income. Moderately tech-savvy. Uses a PC laptop and owns an Android. Enjoys to golf, and frequently checks the weather. He found the website by searching for “Weather in Pittsburgh” on Google. Scenario: Design an interface where new users can quickly find current weather conditions and forecasts.
  14. 14. Basic Persona Name Pick a memorable yet distinct name. Picture Headshot photo that you will be able to recognize. Quote The most salient detail summarized into one quote. (If they could ask for one thing…) Skills Domain skills your persona brings to the table. (Novice or expert? Tech-savvy or not?) Goals Goals your persona fulfills by using your product. (end goals, experience goals, life goals) Habits A typical day for your persona. (hobbies, sports, activities, habits) Must Do/Never What product absolutely MUST DO and MUST NEVER do.
  15. 15. https://boagworld.com/usability/adapting-empathy-maps-for-ux-design/
  16. 16. Activity - Part 1 Total Time: 32 minutes Start (8 mins): Brainstorm existing problems in your chosen domain. Discuss your ideas and pick the one you would like to design an application for today. Storyboard (8 minutes) Individually: Describe how your application will solve this problem for a target user in the form of two storyboards. (Just need to be 3 tiles: Initial Problem, Struggle, Happy conclusion) (8 minutes) Everyone present their storyboards to the group, discuss common themes. As a group, create one 3 to 6-tile storyboard. Persona (8 minutes) Develop a persona for the main character in your storyboard.
  17. 17. A Parting Thought Storyboards & Personas are good for capturing ideas… but, best when coupled with research
  18. 18. Storyboard Example Courtesy of Alysia Finger & AEDreams (http://aedreams.com/)
  19. 19. Storyboard Example Courtesy of Alysia Finger & AEDreams (http://aedreams.com/)
  20. 20. Storyboard Example Courtesy of Alysia Finger & AEDreams (http://aedreams.com/) Storyboards showing with parents involved with their children received more favorable reviews in A/B tests.
  21. 21. Sketching & Prototyping
  22. 22. Sketching & Prototyping You should always start with a sketch, because… • your first idea is never the final solution • you can focus on concepts before details • you can start testing and refining faster
  23. 23. Sketching & Prototyping Low-Fidelity prototypes are rough representations of a design concept. Allows you to validate and improve upon the design early in the process. High-Fidelity prototypes closely resemble the final solution. Allows you to “last-minute” test a design before it is finalized. Low-Fidelity High-Fidelity
  24. 24. Sketching & Prototyping http://www.olesiagraphic.com/chefgenie.html
  25. 25. Design Studios & Critiques
  26. 26. Design Studios & Critiques Design Studios & Critiques are useful because… it encourages you to take chances and explore radical ideas it’s intensive. You generate and explore lots of design solutions in a short amount of time. it allows everyone to participate in design it facilitates team alignment (and makes good UX *everyone’s* responsibility) it enables everyone to learn through (constructive) criticism
  27. 27. How to Run a Design Studio Step 1: Decide who you are designing for and what problem you want to solve Step 2: Sketch as many ideas as possible within a set time limit. Step 3: Review sketches with the group, identify the best ideas, and repeat Step 2. (Tools: Paper, pencils, and a timer)
  28. 28. How to Critique There is something good about every idea, even if it is not the solution for the current problem You critique the idea, not the person Method to try: Dot voting Everyone is given three “dots” Place your dots on the designs you like best
  29. 29. Activity Warm-up Total time: 10 minutes Goal: To get in the mindset of sketching. • We’ll show you a UI, and you’ll get 1-2 minutes to sketch it out. Remember, go for the essence of the UI and focus on conveying the product’s main features.
  30. 30. Activity - Part 2 Total time: 30 minutes Round 1: Sketch 5 minutes, Critique 10 minutes Goal: Sketch as many concepts as possible. Don’t draw an entire interface - just the bare minimum to convey the idea. • Each person has 1 minute to present their best ideas • Group has 1 minute to comment. Say 1 thing you like and 1 thing you worry about. Use your dots! Round 2: Sketch 5 minutes, Critique 10 minutes Goal: Pick the ideas you liked the best from Round 1 and sketch 1 or 2 new prototypes. The sketches should still be rough, but more complete. Then regroup and discuss.
  31. 31. Journey Maps
  32. 32. Journey Maps A journey map is a diagram of a complete customer experience: from initial contact to completed task. A journey map should answer the following questions: What is the customer’s goal? What is their initial approach to solving the problem? What questions do they need answered? What is each step they need to take? How do they know they are on the right path?
  33. 33. Basic Journey Map Customer A persona or type of customer. Process The process the customer is trying to complete. Touch Points & Interactions Where & how the customer interacts with the product or service. Customer Thoughts What the customer is thinking and feeling along the way
  34. 34. A simple example Rebecca searches for “toddler snow pants” on Google and clicks first result She selects “Boys”- >”Winter” from the side navigation She scrolls through the options and sees one pair she likes. She selects the size and color and adds it to the shopping cart She clicks on the shopping cart and clicks “Check-out” Discovery Research Choose Purchase
  35. 35. The Golden Path The Golden Path (n.)- the customer journey that ~90% of users will take through your product. Synonym: the most common user scenario. In a sentence: “We have to make sure the golden path for our new photo upload tool is rock-solid. Lets run a few more usability studies and make sure we’ve made it as intuitive as possible.”
  36. 36. Activity - Part 3 Total Time: 15 minutes With your group, create a simple journey map outlining how a first time user would discover and successfully use your design.
  37. 37. Example Journey Map http://www.smashingmagazine.com/2015/01/all-about-customer-journey-mapping/
  38. 38. Example Journey Map http://uxmastery.com/5-alternatives-to-slide-decks-for-communicating-findings/
  39. 39. Example Journey Map http://www.servicedesigntools.org/tools/8
  40. 40. Agenda 09:00 - 09:20 Breakfast and Introductions 09:20 - 10:20 Storyboards & Personas 10:20 - 11:30 Sketching, Prototyping, Studios & Critiques 11:30 - 11:40 BREAK 11:40 - 12:15 Journey Maps & “The Golden Path” 12:15 - 12:45 LUNCH 12:45 - 01:00 Grids & Colors 01:00 - 01:50 Special Topics (up to you!) 01:50 - 02:00 Group reflections & wrap-up Q&A
  41. 41. Lunch Time!
  42. 42. Vote on Special Topics • Style Guides • Voice & Tone • Mobile Design • Motion Design • Voice UI (e.g. Alexa, Echo) • Micro-interactions • Typography
  43. 43. Agenda 09:00 - 09:20 Breakfast and Introductions 09:20 - 10:20 Storyboards & Personas 10:20 - 11:30 Sketching, Prototyping, Studios & Critiques 11:30 - 11:40 BREAK 11:40 - 12:15 Journey Maps & “The Golden Path” 12:15 - 12:45 LUNCH 12:45 - 01:00 Grids & Colors 01:00 - 01:50 Special Topics (up to you!) 01:50 - 02:00 Group reflections & wrap-up Q&A
  44. 44. Design Process BuildLearn Refine
  45. 45. Grids
  46. 46. Grids Types of grids Web/Responsive grids Golden Ratio
  47. 47. Grids order out of chaos http://thinkingwithtype.com/contents/grid
  48. 48. Web Grids: Bootstrap 12 columns responsive
  49. 49. Web Grids: Foundation 12 columns, responsive
  50. 50. Web Grids: 960 16 columns 24 columns
  51. 51. Golden Ratio based on the ‘golden rectangle’ concept https://www.flickr.com/photos/oddsmedsrud/4566766452/
  52. 52. Golden Ratio based on the ‘golden rectangle’ concept https://www.flickr.com/photos/oddsmedsrud/4566766452/
  53. 53. Golden Ratio a b = 1.618
  54. 54. Golden Ratio a b = 1.618
  55. 55. Grids: Golden Ratio
  56. 56. Grid: Column Widths
  57. 57. Grids: Whitespace http://www.indextwo.com/ aim for 45-75 characters/line shorter lengths for mobile line lengths
  58. 58. Breaking the Grid http://www.writingfordesigners.com/?p=14270
  59. 59. Grid Guidelines Which grid system should I use? it’s important that you use one, any will do Where do I place my content? consider whitespace, golden ratio, grid breaks Can there be too much white space? not a common complaint
  60. 60. Design Process Learn Refine Build Typography Grids Colors Style Guides Voice & Tone
  61. 61. Colors
  62. 62. Colors Basic color theory (color wheel, shades/tints) Color combinations (complementary, analogous, etc) Color and typography
  63. 63. Color Wheel
  64. 64. Simple Color Wheel
  65. 65. Primary Colors
  66. 66. Secondary Colors
  67. 67. Tertiary Colors
  68. 68. Analogous Colors
  69. 69. Hue, Tints, Shades, Tones Tints: add to a pure hue Shades: add to a pure hue Tones: add to a pure hue hue
  70. 70. Color Wheel
  71. 71. Color Combinations Monochromatic shading/tinting of same hue Analogous choose one hue to accent, others hues to support Complementary high contrast, use to accent Split Complementary less tension than complementary, good starting point Triadic tends to be vibrant, two uses for accent Double Complementary watch for warm & cool colors, lots of potential variations
  72. 72. Clashing Colors Vibrating Text?
  73. 73. Color Contrasts The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog
  74. 74. Color Illusions
  75. 75. Color Tools Compose your own palette and explore community palettes https://color.adobe.com http://paletton.com/ Palette generator https://coolors.co/app/ Extract colors from images http://www.colr.org Color blindness simulator http://colorfilter.wickline.org
  76. 76. Design Process Learn Refine Build Grids Colors Style Guides
  77. 77. Style Guides Style guide (n): a set of standards for the design of documents (apps, sites, etc.) that establishes and enforces style to improve communication.
  78. 78. Style Guides Designer Developers
  79. 79. Style Guide: Bootstrap
  80. 80. Style Guide: Foundation
  81. 81. Bootstrap, Foundation: consider it a starting point http://www.zingdesign.com/5-reasons-not-to-use-twitter-bootstrap/
  82. 82. Bootstrap, Foundation: consider it a starting point
  83. 83. Style Guides Examples http://www.yelp.com/styleguide http://primercss.io/ http://www.starbucks.com/styleguide/ https://www.lightningdesignsystem.com http://ux.mailchimp.com/patterns https://playbook.cio.gov/designstandards
  84. 84. US Digital Services https://playbook.cio.gov/ designstandards/
  85. 85. Many Kinds of Style Guides Front End Developers: http://ux.mailchimp.com/patterns/ Content Developers: http://styleguide.mailchimp.com/voice-and-tone/
  86. 86. Vote on Special Topics • Style Guides • Voice & Tone • Mobile Design • Motion Design • Voice UI (e.g. Alexa, Echo) • Micro-interactions • Typography
  87. 87. Voice & Tone Voice the identity and personality of your brand. Should be consistent across all aspects of your product. Remember: People come to your site for the content, so don’t leave it for last. Tone choice of language for a particular situation or audience. Should vary depending on the context.
  88. 88. MailChimp: Voice & Tone Style Guide “MailChimp’s voice is human. It’s familiar, friendly, and straightforward…” MailChimp is… Fun but not silly Confident but not cocky Smart but not stodgy Informal but not sloppy Helpful but not overbearing Expert but not bossy Weird but not inappropriate http://mailchimp.com/about/brand-assets/
  89. 89. Style Guides Examples http://www.yelp.com/styleguide http://primercss.io/ http://www.starbucks.com/styleguide/ https://www.lightningdesignsystem.com http://ux.mailchimp.com/patterns https://playbook.cio.gov/designstandards
  90. 90. Special Topics Mobile Design: Android’s Material Design Evolving Design Patterns: Motion Design
  91. 91. Material Design Adding depth to flat design A layered approach to building a UI https://www.google.com/design/spec/material-design/introduction.html
  92. 92. https://dribbble.com/shots/1717947-Keynote-Animation-Material-Design
  93. 93. Benefits of Animations Naturally draws users’ attention Can unobtrusively point users to the next step
  94. 94. A Little Bit of Motion Goes a Long Way
  95. 95. A Little Bit of Motion Goes a Long Way
  96. 96. A Little Bit of Motion Goes a Long Way
  97. 97. A Little Bit of Motion Goes a Long Way
  98. 98. A Few Animation Principles Easing vs. Linear Motion Squash and Stretch Exaggeration
  99. 99. A Few Animation Principles Easing vs. Linear Motion Squash and Stretch Exaggeration
  100. 100. A Few Animation Principles
  101. 101. Special Topics Mobile Design: Android’s Material Design Evolving Design Patterns: Motion Design What other areas are evolving? Wearable, IoT, robotics, … any others?
  102. 102. Wearables: Design Challenges Glanceable and meaningful Micro-interactions Privacy Design for different contexts
  103. 103. http://www.wired.com/2015/08/5-principles-designing-wearables/
  104. 104. http://www.wired.com/2015/08/5-principles-designing-wearables/
  105. 105. Design Process Learn Refine Build Typography Grids Colors Style Guides Voice & Tone Storyboards Personas Critiques Journey Maps
  106. 106. Feedback & QA Questions? Comments? Are there topics you wished we spent more time on? How do you see some of these topics applying to your current work?
  107. 107. Thank you! Meg Kurdziolek meg.kurdziolek@gmail.com www.megkurdziolek.com Karen Tang karen@kptang.com www.kptang.com
  108. 108. Resources Storyboarding http://johnnyholland.org/2011/10/storyboarding-ux-part-1-an-introduction/ http://johnnyholland.org/2011/10/storyboarding-ux-part-2-creating-your- own/ Personas http://www.ux-lady.com/diy-user-personas/ Sketching & Prototyping http://www.usability.gov/how-to-and-tools/methods/prototyping.html Design Studios https://zapier.com/blog/run-a-design-studio/ Journey Maps http://www.smashingmagazine.com/2015/01/all-about-customer-journey-mapping/ http://conversionxl.com/customer-journey-maps-better-website-retention/
  109. 109. Resources Typography http://designinstruct.com/tools-basics/the-basics-of-typography/ http://www.thinkingwithtype.com http://practicaltypography.com/ http://webtypography.net/ Grids https://getbootstrap.com http://foundation.zurb.com http://960.gs
  110. 110. Great UX Design Books Don't Make Me Think by Steven Krug Design of Everyday Things by Don Norman About Face by Alan Cooper
  111. 111. Design Process BuildLearn Refine Storyboards Personas Critiques Journey Maps
  112. 112. Design Process Learn Refine Build Typography Grids Colors Style Guides Voice & Tone
  113. 113. Typography Letterform (anatomy of a letter) Classifications (serif vs. sans serif) Readability (line-height, tracking, kerning) Typefaces
  114. 114. Typography: Letterform Bxhy ascender height cap height x height baseline descender height more anatomy: http://typedia.com/learn/only/anatomy-of-a-typeface/
  115. 115. Serif Sans Serif Typography: Classifications
  116. 116. Sans Serif Typography: Classifications Serif
  117. 117. Readability Tips (for web) Font size: start around 16px, larger than print Line height: use 1.3-1.6 times the font size, use taller heights for longer lines, smaller heights for shorter lines Tracking: Use default in lowercase, more space in uppercase Kerning: Larger text makes kerning errors more obvious
  118. 118. Readability: Leading Leading: the distance from baseline to baseline Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris cursus mauris tortor, ac tristique ante viverra a. Mauris non magna quis neque tristique lacinia nec at odio. leading
  119. 119. 1 guideline: use 1.2-1.6 times the font size leading = line-height The distance from the baseline of one line of type to another is called line spacing. It is also called leading, in reference to the strips of lead used to separate lines of metal type. The default setting in most layout and imaging software is 120 percent of the type size. Thus 10-pt type is set with 12 pts of line spacing. Designers play with line spacing in order to create distinc- tive typographic arrangements. Reducing the standard distance creates a denser typographic color, while risking collisions between ascenders and descenders. Expanding the line spacing creates a lighter, more open text block. As leading increases, lines of type become independent graphic elements rather than parts of an overall visual shape and texture. The distance from the baseline of one line of type to another is called line spacing. It is also called leading, in reference to the strips of lead used to separate lines of metal type. The default setting in most layout and imaging software is 120 percent of the type size. Thus 10-pt type is set with 12 pts of line spacing. Designers play with line spacing in order to create distinc- tive typographic arrangements. Reducing the standard distance creates a denser typographic color, while risking collisions between ascenders and descenders. Expanding the line spacing creates a lighter, more open text block. As leading increases, lines of type become independent graphic elements rather than parts of an overall visual shape and texture. The distance from the baseline of one line of type to another is called line spacing. It is also called leading, in reference to the strips of lead used to separate lines of metal type. The default setting in most layout and imaging software is 120 percent of the type size. Thus 10-pt type is set with 12 pts of line spacing. Designers play with line spacing in order to create distinc- tive typographic arrangements. Reducing the standard distance creates a denser typographic color, while risking collisions between ascenders and descenders. Expanding the line spacing creates a lighter, more open text block. As leading increases, lines of type become independent graphic elements rather than parts of an overall visual shape and texture. The distance from the baseline of one line of type to another is called line spacing. It is also called leading, in reference to the strips of lead used to separate lines of metal type. The default setting in most layout and imaging software is 120 percent of the type size. Thus 10-pt type is set with 12 pts of line spacing. Designers play with line spacing in order to create distinc- tive typographic arrangements. Reducing the standard distance creates a denser typographic color, while risking collisions between ascenders and descenders. Expanding the line spacing creates a lighter, more open text block. As leading increases, lines of type become independent graphic elements rather than parts of an overall visual shape and texture. Size: 12pt leading: 12pt (100%) Size: 12pt leading: 14.4pt (120%) Size: 12pt leading: 18pt (150%) Size: 12pt leading: 24pt (200%) 2 3 4
  120. 120. guideline: use taller heights for longer lines leading = line-height Size: 12pt leading: 14.4pt (120%) Size: 12pt leading: 14.4pt (120%) The distance from the baseline of one line of type to another is called line spacing. It is also called leading, in reference to the strips of lead used to separate lines of metal type.The default setting in most layout and imaging software is 120 percent of the type size. The distance from the baseline of one line of type to another is called line spacing. It is also called leading, in reference to the strips of lead used to separate lines of metal type.The default setting in most layout and imaging software is 120 percent of the type size.Thus 10-pt type is set with 12 pts of line spacing. Designers play with line spacing in order to create distinctive typographic arrangements. Reducing the standard distance creates a denser typographic color, while risking collisions between ascenders and descenders. Expanding the line spacing creates a lighter, more open text block. As leading increases, lines of type become independent graphic elements rather than parts of an overall visual shape and texture.
  121. 121. Readability: Tracking Tracking: the distance between character sequences Lorem ipsum dolor sit amet, consectetur adipiscing elit. tracking
  122. 122. tracking = letter spacing Letters do love one another. However, due to their anatomical differences, some letters have a hard time achieving intimacy...[for example] capital letters, being square and conservative, prefer to keep a little distance from their neighbors. Letters do love one another. However, due to their anatomical differences, some letters have a hard time achieving intimacy...[for example] capital letters, being square and conservative, prefer to keep a little distance from their neighbors. Letters do love one another. However, due to their anatomical differences, some letters have a hard time achieving intimacy...[for example] capital letters, being square and conservative, prefer to keep a little distance from their neighbors. tracking: -20 tracking: 0 tracking: +20 added tracking can make text appear more roomy
  123. 123. tracking = letter spacing tracking: -15 tracking: 0 guideline: use less spacing for larger font sizes Letters do love one another Letters do love one another
  124. 124. tracking = letter spacing guideline: use more spacing for headlines
  125. 125. Readability: Kerning Kerning: the amount of space between two characters Wonderkerning
  126. 126. kerning hard to manipulate (on web), choose typeface wisely! http://type.method.ac/
  127. 127. Typefaces may consists of bold, italics, condensed, etc. guideline: pick a typeface that matches your content
  128. 128. http://julianhansen.com/index.php?/alternative-type-finder/
  129. 129. Typefaces: faux fonts tip: faux fonts can adversely affect readability faux real
  130. 130. Typefaces: faux fonts tip: faux fonts can adversely affect readability faux real
  131. 131. Mixing Typefaces no hard & fast rules: trial & error it’s OK to mix typography, even serif with sans serif within the same line: use similar x-heights across lines: also vary size, weight, or style
  132. 132. Mixing Typefaces http://thinkingwithtype.com/contents/letter/#Mixing_Typefaces
  133. 133. Typeface Hierarchy https://designschool.canva.com/blog/design-rules/
  134. 134. Typography in Action: iOS 9 San Francisco
  135. 135. Typography in Action: iOS 9 San Francisco
  136. 136. Typography in Action: iOS 9 San Francisco taller x-height https://developer.apple.com/videos/play/wwdc2015-804/
  137. 137. Typography Tools Font discovery, comparison https://www.google.com/fonts https://typekit.com/fonts http://www.fontsquirrel.com https://www.typetester.org/ Testing out font pairs: http://fontpair.co/ http://webfont-test.com/ Try out a font on a live site http://typewonder.com/ http://ffffallback.com/ Explore type hierarchy http://type-scale.com/
  138. 138. Design Process Learn Refine Build Typography Grids Colors Style Guides Voice & Tone

×