ui/ux foundations part 1 - design

134
UI/UX Foundations: Intro to Design Meg Kurdziolek & Karen Tang

Upload: meg-dickey-kurdziolek

Post on 15-Apr-2017

2.120 views

Category:

Design


0 download

TRANSCRIPT

Page 1: UI/UX Foundations Part 1 - Design

UI/UX Foundations:Intro to Design

Meg Kurdziolek & Karen Tang

Page 2: UI/UX Foundations Part 1 - Design

Your Goals

What would you like to learn today?

Page 3: UI/UX Foundations Part 1 - Design

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

Page 4: UI/UX Foundations Part 1 - Design

Introductions

Which of these domains interests you?

Health Education

Civic/Government Kids/Families

Travel Weather

Page 5: UI/UX Foundations Part 1 - Design

Agenda09:00 - 09:20 Breakfast and Introductions09:20 - 10:20 Storyboards & Personas10:20 - 10:30 BREAK10:30 - 11:30 Sketching, Prototyping, Studios & Critiques11:30 - 11:40 BREAK11:40 - 12:15 Journey Maps & “The Golden Path”12:15 - 12:45 LUNCH12:45 - 01:10 Typography, Grids, Colors01:10 - 01:25 Style Guides, Voice & Tone01:25 - 01:45 Special Topics: Mobile Design, Motion Design01:45 - 02:00 Group reflections & wrap-up Q&A

Page 6: UI/UX Foundations Part 1 - Design

Design Process

Refine

BuildLearn

Page 7: UI/UX Foundations Part 1 - Design

Design Process

BuildLearn

Refine

Page 8: UI/UX Foundations Part 1 - Design

Storyboarding

Page 9: UI/UX Foundations Part 1 - Design

StoryboardingA 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

Page 10: UI/UX Foundations Part 1 - Design

Storyboarding - Freytag’s Pyramid

http://johnnyholland.org/2011/10/storyboarding-ux-part-1-an-introduction/

Page 11: UI/UX Foundations Part 1 - Design

Personas

Page 12: UI/UX Foundations Part 1 - Design

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

Page 13: UI/UX Foundations Part 1 - Design

Factsmajority 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.

Page 14: UI/UX Foundations Part 1 - Design

Basic PersonaName 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.

Page 15: UI/UX Foundations Part 1 - Design

Activity - Part 1Total 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.

Page 16: UI/UX Foundations Part 1 - Design

A Parting Thought

Storyboards and personas are good for capturing ideas…

but, best when coupled with research

Page 17: UI/UX Foundations Part 1 - Design

Storyboard Example

Courtesy of Alysia Finger & AEDreams (http://aedreams.com/)

Page 18: UI/UX Foundations Part 1 - Design

Storyboard Example

Courtesy of Alysia Finger & AEDreams (http://aedreams.com/)

Page 19: UI/UX Foundations Part 1 - Design

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.

Page 20: UI/UX Foundations Part 1 - Design

Sketching & Prototyping

Page 21: UI/UX Foundations Part 1 - Design

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

Page 22: UI/UX Foundations Part 1 - Design

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

Page 23: UI/UX Foundations Part 1 - Design

Sketching & Prototyping

http://www.olesiagraphic.com/chefgenie.html

Page 24: UI/UX Foundations Part 1 - Design

Design Studios & Critiques

Page 25: UI/UX Foundations Part 1 - Design

Design Studios & CritiquesDesign 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

Page 26: UI/UX Foundations Part 1 - Design

How to Run a Design StudioStep 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)

Page 27: UI/UX Foundations Part 1 - Design

How to CritiqueThere 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

Page 28: UI/UX Foundations Part 1 - Design

Activity - Part 2Total 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. Think: quick and ugly. Then each person has 1 minute to present their best ideas, and the group has 1 minute to comment. Discuss the best ideas and where you would like to take them next. (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.

Page 29: UI/UX Foundations Part 1 - Design

Journey Maps

Page 30: UI/UX Foundations Part 1 - Design

Journey MapsA 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?

Page 31: UI/UX Foundations Part 1 - Design

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

Page 32: UI/UX Foundations Part 1 - Design

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

Page 33: UI/UX Foundations Part 1 - Design

The Golden PathThe 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.”

Page 34: UI/UX Foundations Part 1 - Design

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.

Page 35: UI/UX Foundations Part 1 - Design

Example Journey Map

http://www.smashingmagazine.com/2015/01/all-about-customer-journey-mapping/

Page 36: UI/UX Foundations Part 1 - Design

Example Journey Map

http://uxmastery.com/5-alternatives-to-slide-decks-for-communicating-findings/

Page 37: UI/UX Foundations Part 1 - Design

Example Journey Map

http://www.servicedesigntools.org/tools/8

Page 38: UI/UX Foundations Part 1 - Design

Lunch Time!

Page 39: UI/UX Foundations Part 1 - Design

Agenda09:00 - 09:20 Breakfast and Introductions09:20 - 10:20 Storyboards & Personas10:20 - 10:30 BREAK10:30 - 11:30 Sketching, Prototyping, Studios & Critiques11:30 - 11:40 BREAK11:40 - 12:15 Journey Maps & “The Golden Path”12:15 - 12:45 LUNCH

12:45 - 01:10 Typography, Grids, Colors01:10 - 01:25 Style Guides, Voice & Tone01:25 - 01:45 Special Topics: Mobile Design, Motion Design01:45 - 02:00 Group reflections & wrap-up Q&A

Page 40: UI/UX Foundations Part 1 - Design

Design Process

BuildLearn

Refine

Page 41: UI/UX Foundations Part 1 - Design

Design Process

BuildLearn

Refine

Storyboards Personas Critiques Journey Maps

Page 42: UI/UX Foundations Part 1 - Design

Design Process

Learn

Refine

Build

Typography Grids Colors Style Guides Voice & Tone

Page 43: UI/UX Foundations Part 1 - Design
Page 44: UI/UX Foundations Part 1 - Design

Typography

Letterform (anatomy of a letter)

Classifications (serif vs. sans serif)

Readability (line-height, tracking, kerning)

Typefaces

Page 45: UI/UX Foundations Part 1 - Design

Typography: Letterform

Bxhyascender heightcap height

x height

baseline

descender height

more anatomy: http://typedia.com/learn/only/anatomy-of-a-typeface/

Page 46: UI/UX Foundations Part 1 - Design

SerifSans Serif

Typography: Classifications

Page 47: UI/UX Foundations Part 1 - Design

Sans Serif

Typography: Classifications

Serif

Page 48: UI/UX Foundations Part 1 - Design

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

Page 49: UI/UX Foundations Part 1 - Design

Readability: LeadingLeading: 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

Page 50: UI/UX Foundations Part 1 - Design

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

Page 51: UI/UX Foundations Part 1 - Design

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.

Page 52: UI/UX Foundations Part 1 - Design

Readability: TrackingTracking: the distance between character sequences

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

tracking

Page 53: UI/UX Foundations Part 1 - Design

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

Page 54: UI/UX Foundations Part 1 - Design

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

Page 55: UI/UX Foundations Part 1 - Design

tracking = letter spacingguideline: use more spacing for headlines

Page 56: UI/UX Foundations Part 1 - Design

Readability: KerningKerning: the amount of space between two characters

Wonderkerning

Page 57: UI/UX Foundations Part 1 - Design

kerninghard to manipulate (on web), choose typeface wisely!

http://type.method.ac/

Page 58: UI/UX Foundations Part 1 - Design

Typefacesmay consists of bold, italics, condensed, etc.

guideline: pick a typeface that matches your content

Page 59: UI/UX Foundations Part 1 - Design

http://julianhansen.com/index.php?/alternative-type-finder/

Page 60: UI/UX Foundations Part 1 - Design

Typefaces: faux fontstip: faux fonts can adversely affect readability

faux

real

Page 61: UI/UX Foundations Part 1 - Design

Typefaces: faux fontstip: faux fonts can adversely affect readability

faux

real

Page 62: UI/UX Foundations Part 1 - Design

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

Page 63: UI/UX Foundations Part 1 - Design

Mixing Typefaces

http://thinkingwithtype.com/contents/letter/#Mixing_Typefaces

Page 64: UI/UX Foundations Part 1 - Design

Typeface Hierarchy

https://designschool.canva.com/blog/design-rules/

Page 65: UI/UX Foundations Part 1 - Design

Typography in Action: iOS 9 San Francisco

Page 66: UI/UX Foundations Part 1 - Design

Typography in Action: iOS 9 San Francisco

Page 67: UI/UX Foundations Part 1 - Design

Typography in Action: iOS 9 San Francisco

taller x-height

https://developer.apple.com/videos/play/wwdc2015-804/

Page 68: UI/UX Foundations Part 1 - Design

Typography ToolsFont 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/

Page 69: UI/UX Foundations Part 1 - Design

Design Process

Learn

Refine

Build

Typography Grids Colors Style Guides Voice & Tone

Page 70: UI/UX Foundations Part 1 - Design

Grids

Page 71: UI/UX Foundations Part 1 - Design

GridsTypes of grids

Web/Responsive grids

Golden Ratio

Page 72: UI/UX Foundations Part 1 - Design

Gridsorder out of chaos

http://thinkingwithtype.com/contents/grid

Page 73: UI/UX Foundations Part 1 - Design

Web Grids: Bootstrap12 columns

responsive

Page 74: UI/UX Foundations Part 1 - Design

Web Grids: Foundation12 columns, responsive

Page 75: UI/UX Foundations Part 1 - Design

Web Grids: 96016 columns 24 columns

Page 76: UI/UX Foundations Part 1 - Design

Golden Ratiobased on the ‘golden rectangle’ concept

https://www.flickr.com/photos/oddsmedsrud/4566766452/

Page 77: UI/UX Foundations Part 1 - Design

Golden Ratiobased on the ‘golden rectangle’ concept

https://www.flickr.com/photos/oddsmedsrud/4566766452/

Page 78: UI/UX Foundations Part 1 - Design

Golden Ratioa b

= 1.618

Page 79: UI/UX Foundations Part 1 - Design

Golden Ratioa b

= 1.618

Page 80: UI/UX Foundations Part 1 - Design

Grids: Golden Ratio

Page 81: UI/UX Foundations Part 1 - Design

Grid: Column Widths

Page 82: UI/UX Foundations Part 1 - Design

Grids: Whitespace

http://www.indextwo.com/

aim for 45-75 characters/line

shorter lengths for mobile

line lengths

Page 83: UI/UX Foundations Part 1 - Design

Breaking the Grid

http://www.writingfordesigners.com/?p=14270

Page 84: UI/UX Foundations Part 1 - Design

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

Page 85: UI/UX Foundations Part 1 - Design

Design Process

Learn

Refine

Build

Typography Grids Colors Style Guides Voice & Tone

Page 86: UI/UX Foundations Part 1 - Design

Colors

Page 87: UI/UX Foundations Part 1 - Design

Colors

Basic color theory (color wheel, shades/tints)

Color combinations (complementary, analogous, etc)

Color and typography

Page 88: UI/UX Foundations Part 1 - Design

Color Wheel

Page 89: UI/UX Foundations Part 1 - Design

Simple Color Wheel

Page 90: UI/UX Foundations Part 1 - Design

Primary Colors

Page 91: UI/UX Foundations Part 1 - Design

Secondary Colors

Page 92: UI/UX Foundations Part 1 - Design

Tertiary Colors

Page 93: UI/UX Foundations Part 1 - Design

Analogous Colors

Page 94: UI/UX Foundations Part 1 - Design

Hue, Tints, Shades, Tones

Tints: add to a pure hue

Shades: add to a pure hue

Tones: add to a pure hue

hue

Page 95: UI/UX Foundations Part 1 - Design

Color Wheel

Page 96: UI/UX Foundations Part 1 - Design

Color CombinationsMonochromatic 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

Page 97: UI/UX Foundations Part 1 - Design

Clashing Colors

Vibrating Text?

Page 98: UI/UX Foundations Part 1 - Design

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

Page 99: UI/UX Foundations Part 1 - Design

Color Illusions

Page 100: UI/UX Foundations Part 1 - Design

Color ToolsCompose 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

Page 101: UI/UX Foundations Part 1 - Design

Design Process

Learn

Refine

Build

Typography Grids Colors Style Guides Voice & Tone

Page 102: UI/UX Foundations Part 1 - Design

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.

Page 103: UI/UX Foundations Part 1 - Design

Style Guides

Designer Developers

Page 104: UI/UX Foundations Part 1 - Design

Style Guide: Bootstrap

Page 105: UI/UX Foundations Part 1 - Design

Style Guide: Foundation

Page 106: UI/UX Foundations Part 1 - Design

Bootstrap, Foundation: consider it a starting point

http://www.zingdesign.com/5-reasons-not-to-use-twitter-bootstrap/

Page 107: UI/UX Foundations Part 1 - Design

Bootstrap, Foundation: consider it a starting point

Page 108: UI/UX Foundations Part 1 - Design

Style Guides Exampleshttp://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

Page 109: UI/UX Foundations Part 1 - Design

US Digital Services

https://playbook.cio.gov/designstandards/

Page 110: UI/UX Foundations Part 1 - Design

Many Kinds of Style Guides

Front End Developers: http://ux.mailchimp.com/patterns/

Content Developers: http://styleguide.mailchimp.com/voice-and-tone/

Page 111: UI/UX Foundations Part 1 - Design

Voice & ToneVoice

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.

Page 112: UI/UX Foundations Part 1 - Design

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/

Page 113: UI/UX Foundations Part 1 - Design

Style Guides Exampleshttp://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

Page 114: UI/UX Foundations Part 1 - Design

Special Topics

Mobile Design: Android’s Material Design

Evolving Design Patterns: Motion Design

Page 115: UI/UX Foundations Part 1 - 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

Page 116: UI/UX Foundations Part 1 - Design

https://dribbble.com/shots/1717947-Keynote-Animation-Material-Design

Page 117: UI/UX Foundations Part 1 - Design

Benefits of Animations

Naturally draws users’ attention

Can unobtrusively point users to the next step

Page 118: UI/UX Foundations Part 1 - Design

A Little Bit of Motion Goes a Long Way

Page 119: UI/UX Foundations Part 1 - Design

A Little Bit of Motion Goes a Long Way

Page 120: UI/UX Foundations Part 1 - Design

A Little Bit of Motion Goes a Long Way

Page 121: UI/UX Foundations Part 1 - Design

A Little Bit of Motion Goes a Long Way

Page 122: UI/UX Foundations Part 1 - Design

A Few Animation PrinciplesEasing vs. Linear Motion

Squash and Stretch

Exaggeration

Page 123: UI/UX Foundations Part 1 - Design

A Few Animation Principles

Easing vs. Linear Motion

Squash and Stretch

Exaggeration

Page 124: UI/UX Foundations Part 1 - Design

A Few Animation Principles

Page 125: UI/UX Foundations Part 1 - Design

Special TopicsMobile Design: Android’s Material Design

Evolving Design Patterns: Motion Design

What other areas are evolving? Wearable, IoT, robotics, … any others?

Page 126: UI/UX Foundations Part 1 - Design

Wearables: Design Challenges

Glanceable and meaningful

Micro-interactions

Privacy

Design for different contexts

Page 127: UI/UX Foundations Part 1 - Design

http://www.wired.com/2015/08/5-principles-designing-wearables/

Page 128: UI/UX Foundations Part 1 - Design

http://www.wired.com/2015/08/5-principles-designing-wearables/

Page 129: UI/UX Foundations Part 1 - Design

Design Process

Learn

Refine

Build

Typography Grids Colors Style Guides Voice & Tone

Storyboards Personas Critiques Journey Maps

Page 130: UI/UX Foundations Part 1 - Design

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?

Page 131: UI/UX Foundations Part 1 - Design

Thank you!

Meg Kurdziolek [email protected]

www.megkurdziolek.com

Karen Tang [email protected]

www.kptang.com

Page 132: UI/UX Foundations Part 1 - Design

ResourcesStoryboarding

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/

Page 133: UI/UX Foundations Part 1 - Design

ResourcesTypography 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

Page 134: UI/UX Foundations Part 1 - Design

Great UX Design Books

Don't Make Me Think by Steven Krug

Design of Everyday Things by Don Norman

About Face by Alan Cooper