UI/UX foundations - Intro to Design

UI/UX foundations - Intro to Design
UI/UX Foundations:  Intro to Design Meg Kurdziolek & Karen Tang (TA: Trevor Daunt)
Your Goals What would you like to learn today?
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
Introductions Which of these domains interests you? Health Education Kids/Families Travel
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
Design Process Refine BuildLearn
Design Process BuildLearn Refine
Storyboarding
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
Storyboarding: Freytag’s Pyramid http://johnnyholland.org/2011/10/storyboarding-ux-part-1-an-introduction/
Personas
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
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.
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.
https://boagworld.com/usability/adapting-empathy-maps-for-ux-design/
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.
A Parting Thought Storyboards & Personas are good for capturing ideas… but, best when coupled with research
Storyboard Example Courtesy of Alysia Finger & AEDreams (http://aedreams.com/)
Storyboard Example Courtesy of Alysia Finger & AEDreams (http://aedreams.com/)
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.
Sketching & Prototyping
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
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
Sketching & Prototyping http://www.olesiagraphic.com/chefgenie.html
Design Studios & Critiques
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
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)
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
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.
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.
Journey Maps
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?
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
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
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.”
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.
Example Journey Map http://www.smashingmagazine.com/2015/01/all-about-customer-journey-mapping/
Example Journey Map http://uxmastery.com/5-alternatives-to-slide-decks-for-communicating-findings/
Example Journey Map http://www.servicedesigntools.org/tools/8
Lunch Time!
Vote on Special Topics • Style Guides • Voice & Tone • Mobile Design • Motion Design • Voice UI (e.g. Alexa, Echo) • Micro-interactions • Typography
Design Process BuildLearn Refine
Grids
Grids Types of grids Web/Responsive grids Golden Ratio
Grids order out of chaos http://thinkingwithtype.com/contents/grid
Web Grids: Bootstrap 12 columns responsive
Web Grids: Foundation 12 columns, responsive
Web Grids: 960 16 columns 24 columns
Golden Ratio based on the ‘golden rectangle’ concept https://www.flickr.com/photos/oddsmedsrud/4566766452/
Golden Ratio based on the ‘golden rectangle’ concept https://www.flickr.com/photos/oddsmedsrud/4566766452/
Golden Ratio a b = 1.618
Golden Ratio a b = 1.618
Grids: Golden Ratio
Grid: Column Widths
Grids: Whitespace http://www.indextwo.com/ aim for 45-75 characters/line shorter lengths for mobile line lengths
Breaking the Grid http://www.writingfordesigners.com/?p=14270
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
Design Process Learn Refine Build Typography Grids Colors Style Guides Voice & Tone
Colors
Colors Basic color theory (color wheel, shades/tints) Color combinations (complementary, analogous, etc) Color and typography
Color Wheel
Simple Color Wheel
Primary Colors
Secondary Colors
Tertiary Colors
Analogous Colors
Hue, Tints, Shades, Tones Tints: add to a pure hue Shades: add to a pure hue Tones: add to a pure hue hue
Color Wheel
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
Clashing Colors Vibrating Text?
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
Color Illusions
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
Design Process Learn Refine Build Grids Colors Style Guides
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.
Style Guides Designer Developers
Style Guide: Bootstrap
Style Guide: Foundation
Bootstrap, Foundation: consider it a starting point http://www.zingdesign.com/5-reasons-not-to-use-twitter-bootstrap/
Bootstrap, Foundation: consider it a starting point
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
US Digital Services https://playbook.cio.gov/ designstandards/
Many Kinds of Style Guides Front End Developers: http://ux.mailchimp.com/patterns/ Content Developers: http://styleguide.mailchimp.com/voice-and-tone/
Vote on Special Topics • Style Guides • Voice & Tone • Mobile Design • Motion Design • Voice UI (e.g. Alexa, Echo) • Micro-interactions • Typography
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.
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/
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
Special Topics Mobile Design: Android’s Material Design Evolving Design Patterns: Motion Design
Material Design Adding depth to flat design A layered approach to building a UI https://www.google.com/design/spec/material-design/introduction.html
https://dribbble.com/shots/1717947-Keynote-Animation-Material-Design
Benefits of Animations Naturally draws users’ attention Can unobtrusively point users to the next step
A Little Bit of Motion Goes a Long Way
A Few Animation Principles Easing vs. Linear Motion Squash and Stretch Exaggeration
A Few Animation Principles Easing vs. Linear Motion Squash and Stretch Exaggeration
A Few Animation Principles
Special Topics Mobile Design: Android’s Material Design Evolving Design Patterns: Motion Design What other areas are evolving? Wearable, IoT, robotics, … any others?
Wearables: Design Challenges Glanceable and meaningful Micro-interactions Privacy Design for different contexts
http://www.wired.com/2015/08/5-principles-designing-wearables/
http://www.wired.com/2015/08/5-principles-designing-wearables/
Design Process Learn Refine Build Typography Grids Colors Style Guides Voice & Tone Storyboards Personas Critiques Journey Maps
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?
Thank you! Meg Kurdziolek meg.kurdziolek@gmail.com www.megkurdziolek.com Karen Tang karen@kptang.com www.kptang.com
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/
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
Great UX Design Books Don't Make Me Think by Steven Krug Design of Everyday Things by Don Norman About Face by Alan Cooper
Design Process BuildLearn Refine Storyboards Personas Critiques Journey Maps
Typography Letterform (anatomy of a letter) Classifications (serif vs. sans serif) Readability (line-height, tracking, kerning) Typefaces
Typography: Letterform Bxhy ascender height cap height x height baseline descender height more anatomy: http://typedia.com/learn/only/anatomy-of-a-typeface/
Serif Sans Serif Typography: Classifications
Sans Serif Typography: Classifications Serif
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
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
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 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. 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. 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. 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. Size: 12pt leading: 12pt (100%) Size: 12pt leading: 14.4pt (120%) Size: 12pt leading: 18pt (150%) Size: 12pt leading: 24pt (200%) 2 3 4
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.
Readability: Tracking Tracking: the distance between character sequences Lorem ipsum dolor sit amet, consectetur adipiscing elit. tracking
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
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
tracking = letter spacing guideline: use more spacing for headlines
Readability: Kerning Kerning: the amount of space between two characters Wonderkerning
kerning hard to manipulate (on web), choose typeface wisely! http://type.method.ac/
Typefaces may consists of bold, italics, condensed, etc. guideline: pick a typeface that matches your content
http://julianhansen.com/index.php?/alternative-type-finder/
Typefaces: faux fonts tip: faux fonts can adversely affect readability faux real
Typefaces: faux fonts tip: faux fonts can adversely affect readability faux real
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
Mixing Typefaces http://thinkingwithtype.com/contents/letter/#Mixing_Typefaces
Typeface Hierarchy https://designschool.canva.com/blog/design-rules/
Typography in Action: iOS 9 San Francisco
Typography in Action: iOS 9 San Francisco
Typography in Action: iOS 9 San Francisco taller x-height https://developer.apple.com/videos/play/wwdc2015-804/
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/

UI/UX foundations - Intro to Design

Check these out next

UI/UX foundations - Intro to Design

Recommended

More Related Content

Slideshows for you(20)

Viewers also liked(20)

Similar to UI/UX foundations - Intro to Design(20)

Recently uploaded(20)

UI/UX foundations - Intro to Design