Downloaded 35 times
![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](https://image.slidesharecdn.com/uiuxfoundations-design-161005135717/75/UI-UX-foundations-Intro-to-Design-130-2048.jpg)
Uploaded byMeg Kurdziolek
UI/UX foundations - Intro to Design
The document outlines a workshop on UI/UX foundations led by Meg Kurdziolek and Karen Tang, focusing on essential design principles, tools, and methodologies including storyboards, personas, sketching, prototyping, and journey mapping. Participants are encouraged to engage with practical activities to better understand user experience design through exercises like creating personas and journey maps. The agenda includes various topics such as color theory, typography, and the importance of style guides, culminating in group reflections and Q&A.
More Related Content
Similar to UI/UX foundations - Intro to Design
UI/UX foundations - Intro to Design
- 1. UI/UX Foundations: Intro toDesign Meg Kurdziolek & Karen Tang (TA: Trevor Daunt)
- 2. Your Goals What wouldyou like to learn today?
- 3. Our Goals We wantyou 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. Introductions Which of thesedomains interests you? Health Education Kids/Families Travel
- 5. Agenda 09:00 - 09:20Breakfast 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.
- 7.
- 8.
- 9. Storyboarding A storyboard isa 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.
- 11.
- 12. Personas A persona isa 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. Facts majority of usersare 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. Basic Persona Name Picka 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.
- 16. Activity - Part1 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. A Parting Thought Storyboards& Personas are good for capturing ideas… but, best when coupled with research
- 18. Storyboard Example Courtesy ofAlysia Finger & AEDreams (http://aedreams.com/)
- 19. Storyboard Example Courtesy ofAlysia Finger & AEDreams (http://aedreams.com/)
- 20. Storyboard Example Courtesy ofAlysia Finger & AEDreams (http://aedreams.com/) Storyboards showing with parents involved with their children received more favorable reviews in A/B tests.
- 21.
- 22. Sketching & Prototyping Youshould 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. Sketching & Prototyping Low-Fidelityprototypes 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.
- 25. Design Studios &Critiques
- 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. How to Runa 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. How to Critique Thereis 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. 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.
- 34. Activity - Part2 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.
- 35.
- 36. Journey Maps A journeymap 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?
- 37. Basic Journey Map CustomerA 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
- 38. A simple example Rebeccasearches 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
- 39. The Golden Path TheGolden 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.”
- 40. Activity - Part3 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.
- 41.
- 42.
- 43.
- 44. Agenda 09:00 - 09:20Breakfast 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
- 45.
- 46. Vote on SpecialTopics • Style Guides • Voice & Tone • Mobile Design • Motion Design • Voice UI (e.g. Alexa, Echo) • Micro-interactions • Typography
- 47. Agenda 09:00 - 09:20Breakfast 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
- 48.
- 49.
- 50. Grids Types of grids Web/Responsivegrids Golden Ratio
- 51. Grids order out ofchaos http://thinkingwithtype.com/contents/grid
- 52. Web Grids: Bootstrap 12columns responsive
- 53. Web Grids: Foundation 12columns, responsive
- 54. Web Grids: 960 16columns 24 columns
- 55. Golden Ratio based onthe ‘golden rectangle’ concept https://www.flickr.com/photos/oddsmedsrud/4566766452/
- 56. Golden Ratio based onthe ‘golden rectangle’ concept https://www.flickr.com/photos/oddsmedsrud/4566766452/
- 57.
- 58.
- 60.
- 61.
- 62. Grids: Whitespace http://www.indextwo.com/ aim for45-75 characters/line shorter lengths for mobile line lengths
- 63.
- 64. Grid Guidelines Which gridsystem 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
- 65.
- 66.
- 67. Colors Basic color theory(color wheel, shades/tints) Color combinations (complementary, analogous, etc) Color and typography
- 68.
- 69.
- 70.
- 71.
- 72.
- 73.
- 74. Hue, Tints, Shades,Tones Tints: add to a pure hue Shades: add to a pure hue Tones: add to a pure hue hue
- 75.
- 76. Color Combinations Monochromatic shading/tinting ofsame 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
- 77.
- 78. Color Contrasts The quickbrown 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
- 79.
- 80. Color Tools Compose yourown 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
- 81.
- 82. 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.
- 83.
- 84.
- 85.
- 86. Bootstrap, Foundation: consider ita starting point http://www.zingdesign.com/5-reasons-not-to-use-twitter-bootstrap/
- 87. Bootstrap, Foundation: consider ita starting point
- 88.
- 89.
- 90. Many Kinds ofStyle Guides Front End Developers: http://ux.mailchimp.com/patterns/ Content Developers: http://styleguide.mailchimp.com/voice-and-tone/
- 91. Vote on SpecialTopics • Style Guides • Voice & Tone • Mobile Design • Motion Design • Voice UI (e.g. Alexa, Echo) • Micro-interactions • Typography
- 93. Voice & Tone Voice theidentity 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.
- 94. 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/
- 95.
- 96. Special Topics Mobile Design:Android’s Material Design Evolving Design Patterns: Motion Design
- 97. Material Design Adding depthto flat design A layered approach to building a UI https://www.google.com/design/spec/material-design/introduction.html
- 98.
- 99. Benefits of Animations Naturallydraws users’ attention Can unobtrusively point users to the next step
- 100. A Little Bitof Motion Goes a Long Way
- 101. A Little Bitof Motion Goes a Long Way
- 102. A Little Bitof Motion Goes a Long Way
- 103. A Little Bitof Motion Goes a Long Way
- 104. A Few AnimationPrinciples Easing vs. Linear Motion Squash and Stretch Exaggeration
- 105. A Few AnimationPrinciples Easing vs. Linear Motion Squash and Stretch Exaggeration
- 106. A Few AnimationPrinciples
- 108. Special Topics Mobile Design:Android’s Material Design Evolving Design Patterns: Motion Design What other areas are evolving? Wearable, IoT, robotics, … any others?
- 109. Wearables: Design Challenges Glanceableand meaningful Micro-interactions Privacy Design for different contexts
- 110.
- 111.
- 112. Design Process Learn Refine Build Typography Grids Colors Style Guides Voice& Tone Storyboards Personas Critiques Journey Maps
- 113. 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?
- 114. Thank you! Meg Kurdziolek meg.kurdziolek@gmail.com www.megkurdziolek.com KarenTang karen@kptang.com www.kptang.com
- 115. 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 DesignStudios 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/
- 116.
- 117. Great UX DesignBooks Don't Make Me Think by Steven Krug Design of Everyday Things by Don Norman About Face by Alan Cooper
- 118.
- 119.
- 121. Typography Letterform (anatomy ofa letter) Classifications (serif vs. sans serif) Readability (line-height, tracking, kerning) Typefaces
- 122. Typography: Letterform Bxhy ascender height capheight x height baseline descender height more anatomy: http://typedia.com/learn/only/anatomy-of-a-typeface/
- 123.
- 124.
- 125. Readability Tips (forweb) 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
- 126. Readability: Leading Leading: thedistance 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
- 127. 1 guideline: use 1.2-1.6times 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
- 128. guideline: use tallerheights 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.
- 129. Readability: Tracking Tracking: thedistance between character sequences Lorem ipsum dolor sit amet, consectetur adipiscing elit. tracking
- 130. tracking = letterspacing 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
- 131. tracking = letterspacing tracking: -15 tracking: 0 guideline: use less spacing for larger font sizes Letters do love one another Letters do love one another
- 132. tracking = letterspacing guideline: use more spacing for headlines
- 133. Readability: Kerning Kerning: theamount of space between two characters Wonderkerning
- 134. kerning hard to manipulate(on web), choose typeface wisely! http://type.method.ac/
- 137. Typefaces may consists ofbold, italics, condensed, etc. guideline: pick a typeface that matches your content
- 138.
- 139. Typefaces: faux fonts tip:faux fonts can adversely affect readability faux real
- 140. Typefaces: faux fonts tip:faux fonts can adversely affect readability faux real
- 141. 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
- 142.
- 143.
- 144. Typography in Action: iOS9 San Francisco
- 145. Typography in Action: iOS9 San Francisco
- 146. Typography in Action: iOS9 San Francisco taller x-height https://developer.apple.com/videos/play/wwdc2015-804/
- 147. 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/
- 148.