ui/ux foundations - intro to design

148
UI/UX Foundations: Intro to Design Meg Kurdziolek & Karen Tang (TA: Trevor Daunt)

Upload: meg-dickey-kurdziolek

Post on 13-Apr-2017

203 views

Category:

Design


4 download

TRANSCRIPT

Page 1: UI/UX foundations - Intro to Design

UI/UX Foundations:Intro to Design

Meg Kurdziolek & Karen Tang (TA: Trevor Daunt)

Page 2: UI/UX foundations - Intro to Design

Your Goals

What would you like to learn today?

Page 3: UI/UX foundations - Intro to 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 - Intro to Design

Introductions

Which of these domains interests you?

Health Education

Kids/Families Travel

Page 5: UI/UX foundations - Intro to Design

Agenda09: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

Page 6: UI/UX foundations - Intro to Design

Design Process

Refine

BuildLearn

Page 7: UI/UX foundations - Intro to Design

Design Process

BuildLearn

Refine

Page 8: UI/UX foundations - Intro to Design

Storyboarding

Page 9: UI/UX foundations - Intro to 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 - Intro to Design

Storyboarding: Freytag’s Pyramid

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

Page 11: UI/UX foundations - Intro to Design

Personas

Page 12: UI/UX foundations - Intro to 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 - Intro to 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 - Intro to 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 - Intro to Design

https://boagworld.com/usability/adapting-empathy-maps-for-ux-design/

Page 16: UI/UX foundations - Intro to 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 17: UI/UX foundations - Intro to Design

A Parting Thought

Storyboards & Personas are good for capturing ideas…

but, best when coupled with research

Page 18: UI/UX foundations - Intro to Design

Storyboard Example

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

Page 19: UI/UX foundations - Intro to Design

Storyboard Example

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

Page 20: UI/UX foundations - Intro to 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 21: UI/UX foundations - Intro to Design

Sketching & Prototyping

Page 22: UI/UX foundations - Intro to 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 23: UI/UX foundations - Intro to 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 24: UI/UX foundations - Intro to Design

Sketching & Prototyping

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

Page 25: UI/UX foundations - Intro to Design

Design Studios & Critiques

Page 26: UI/UX foundations - Intro to 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 27: UI/UX foundations - Intro to 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 28: UI/UX foundations - Intro to 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 29: UI/UX foundations - Intro to Design

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.

Page 30: UI/UX foundations - Intro to Design
Page 31: UI/UX foundations - Intro to Design
Page 32: UI/UX foundations - Intro to Design
Page 33: UI/UX foundations - Intro to Design
Page 34: UI/UX foundations - Intro to 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.

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

Page 35: UI/UX foundations - Intro to Design

Journey Maps

Page 36: UI/UX foundations - Intro to 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 37: UI/UX foundations - Intro to 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 38: UI/UX foundations - Intro to 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 39: UI/UX foundations - Intro to 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 40: UI/UX foundations - Intro to 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 41: UI/UX foundations - Intro to Design

Example Journey Map

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

Page 42: UI/UX foundations - Intro to Design

Example Journey Map

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

Page 43: UI/UX foundations - Intro to Design

Example Journey Map

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

Page 44: UI/UX foundations - Intro to Design

Agenda09: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

Page 45: UI/UX foundations - Intro to Design

Lunch Time!

Page 46: UI/UX foundations - Intro to Design

Vote on Special Topics• Style Guides

• Voice & Tone

• Mobile Design

• Motion Design

• Voice UI (e.g. Alexa, Echo)

• Micro-interactions

• Typography

Page 47: UI/UX foundations - Intro to Design

Agenda09: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

Page 48: UI/UX foundations - Intro to Design

Design Process

BuildLearn

Refine

Page 49: UI/UX foundations - Intro to Design

Grids

Page 50: UI/UX foundations - Intro to Design

GridsTypes of grids

Web/Responsive grids

Golden Ratio

Page 51: UI/UX foundations - Intro to Design

Gridsorder out of chaos

http://thinkingwithtype.com/contents/grid

Page 52: UI/UX foundations - Intro to Design

Web Grids: Bootstrap12 columns

responsive

Page 53: UI/UX foundations - Intro to Design

Web Grids: Foundation12 columns, responsive

Page 54: UI/UX foundations - Intro to Design

Web Grids: 96016 columns 24 columns

Page 55: UI/UX foundations - Intro to Design

Golden Ratiobased on the ‘golden rectangle’ concept

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

Page 56: UI/UX foundations - Intro to Design

Golden Ratiobased on the ‘golden rectangle’ concept

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

Page 57: UI/UX foundations - Intro to Design

Golden Ratioa b

= 1.618

Page 58: UI/UX foundations - Intro to Design

Golden Ratioa b

= 1.618

Page 59: UI/UX foundations - Intro to Design
Page 60: UI/UX foundations - Intro to Design

Grids: Golden Ratio

Page 61: UI/UX foundations - Intro to Design

Grid: Column Widths

Page 62: UI/UX foundations - Intro to Design

Grids: Whitespace

http://www.indextwo.com/

aim for 45-75 characters/line

shorter lengths for mobile

line lengths

Page 63: UI/UX foundations - Intro to Design

Breaking the Grid

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

Page 64: UI/UX foundations - Intro to 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 65: UI/UX foundations - Intro to Design

Design Process

Learn

Refine

Build

Typography Grids Colors Style Guides Voice & Tone

Page 66: UI/UX foundations - Intro to Design

Colors

Page 67: UI/UX foundations - Intro to Design

Colors

Basic color theory (color wheel, shades/tints)

Color combinations (complementary, analogous, etc)

Color and typography

Page 68: UI/UX foundations - Intro to Design

Color Wheel

Page 69: UI/UX foundations - Intro to Design

Simple Color Wheel

Page 70: UI/UX foundations - Intro to Design

Primary Colors

Page 71: UI/UX foundations - Intro to Design

Secondary Colors

Page 72: UI/UX foundations - Intro to Design

Tertiary Colors

Page 73: UI/UX foundations - Intro to Design

Analogous Colors

Page 74: UI/UX foundations - Intro to 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 75: UI/UX foundations - Intro to Design

Color Wheel

Page 76: UI/UX foundations - Intro to 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 77: UI/UX foundations - Intro to Design

Clashing Colors

Vibrating Text?

Page 78: UI/UX foundations - Intro to 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 79: UI/UX foundations - Intro to Design

Color Illusions

Page 80: UI/UX foundations - Intro to 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 81: UI/UX foundations - Intro to Design

Design Process

Learn

Refine

Build

Grids Colors Style Guides

Page 82: UI/UX foundations - Intro to 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 83: UI/UX foundations - Intro to Design

Style Guides

Designer Developers

Page 84: UI/UX foundations - Intro to Design

Style Guide: Bootstrap

Page 85: UI/UX foundations - Intro to Design

Style Guide: Foundation

Page 86: UI/UX foundations - Intro to Design

Bootstrap, Foundation: consider it a starting point

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

Page 87: UI/UX foundations - Intro to Design

Bootstrap, Foundation: consider it a starting point

Page 88: UI/UX foundations - Intro to 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 89: UI/UX foundations - Intro to Design

US Digital Services

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

Page 90: UI/UX foundations - Intro to Design

Many Kinds of Style Guides

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

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

Page 91: UI/UX foundations - Intro to Design

Vote on Special Topics• Style Guides

• Voice & Tone

• Mobile Design

• Motion Design

• Voice UI (e.g. Alexa, Echo)

• Micro-interactions

• Typography

Page 92: UI/UX foundations - Intro to Design
Page 93: UI/UX foundations - Intro to 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 94: UI/UX foundations - Intro to 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 95: UI/UX foundations - Intro to 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 96: UI/UX foundations - Intro to Design

Special Topics

Mobile Design: Android’s Material Design

Evolving Design Patterns: Motion Design

Page 97: UI/UX foundations - Intro to 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 98: UI/UX foundations - Intro to Design

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

Page 99: UI/UX foundations - Intro to Design

Benefits of Animations

Naturally draws users’ attention

Can unobtrusively point users to the next step

Page 100: UI/UX foundations - Intro to Design

A Little Bit of Motion Goes a Long Way

Page 101: UI/UX foundations - Intro to Design

A Little Bit of Motion Goes a Long Way

Page 102: UI/UX foundations - Intro to Design

A Little Bit of Motion Goes a Long Way

Page 103: UI/UX foundations - Intro to Design

A Little Bit of Motion Goes a Long Way

Page 104: UI/UX foundations - Intro to Design

A Few Animation PrinciplesEasing vs. Linear Motion

Squash and Stretch

Exaggeration

Page 105: UI/UX foundations - Intro to Design

A Few Animation Principles

Easing vs. Linear Motion

Squash and Stretch

Exaggeration

Page 106: UI/UX foundations - Intro to Design

A Few Animation Principles

Page 107: UI/UX foundations - Intro to Design
Page 108: UI/UX foundations - Intro to Design

Special TopicsMobile Design: Android’s Material Design

Evolving Design Patterns: Motion Design

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

Page 109: UI/UX foundations - Intro to Design

Wearables: Design Challenges

Glanceable and meaningful

Micro-interactions

Privacy

Design for different contexts

Page 110: UI/UX foundations - Intro to Design

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

Page 111: UI/UX foundations - Intro to Design

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

Page 112: UI/UX foundations - Intro to Design

Design Process

Learn

Refine

Build

Typography Grids Colors Style Guides Voice & Tone

Storyboards Personas Critiques Journey Maps

Page 113: UI/UX foundations - Intro to 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 114: UI/UX foundations - Intro to Design

Thank you!

Meg Kurdziolek [email protected]

www.megkurdziolek.com

Karen Tang [email protected]

www.kptang.com

Page 115: UI/UX foundations - Intro to 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 116: UI/UX foundations - Intro to 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 117: UI/UX foundations - Intro to 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

Page 118: UI/UX foundations - Intro to Design

Design Process

BuildLearn

Refine

Storyboards Personas Critiques Journey Maps

Page 119: UI/UX foundations - Intro to Design

Design Process

Learn

Refine

Build

Typography Grids Colors Style Guides Voice & Tone

Page 120: UI/UX foundations - Intro to Design
Page 121: UI/UX foundations - Intro to Design

Typography

Letterform (anatomy of a letter)

Classifications (serif vs. sans serif)

Readability (line-height, tracking, kerning)

Typefaces

Page 122: UI/UX foundations - Intro to Design

Typography: Letterform

Bxhyascender heightcap height

x height

baseline

descender height

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

Page 123: UI/UX foundations - Intro to Design

SerifSans Serif

Typography: Classifications

Page 124: UI/UX foundations - Intro to Design

Sans Serif

Typography: Classifications

Serif

Page 125: UI/UX foundations - Intro to 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 126: UI/UX foundations - Intro to 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 127: UI/UX foundations - Intro to 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 128: UI/UX foundations - Intro to 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 129: UI/UX foundations - Intro to Design

Readability: TrackingTracking: the distance between character sequences

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

tracking

Page 130: UI/UX foundations - Intro to 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 131: UI/UX foundations - Intro to 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 132: UI/UX foundations - Intro to Design

tracking = letter spacingguideline: use more spacing for headlines

Page 133: UI/UX foundations - Intro to Design

Readability: KerningKerning: the amount of space between two characters

Wonderkerning

Page 134: UI/UX foundations - Intro to Design

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

http://type.method.ac/

Page 135: UI/UX foundations - Intro to Design
Page 136: UI/UX foundations - Intro to Design
Page 137: UI/UX foundations - Intro to Design

Typefacesmay consists of bold, italics, condensed, etc.

guideline: pick a typeface that matches your content

Page 138: UI/UX foundations - Intro to Design

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

Page 139: UI/UX foundations - Intro to Design

Typefaces: faux fontstip: faux fonts can adversely affect readability

faux

real

Page 140: UI/UX foundations - Intro to Design

Typefaces: faux fontstip: faux fonts can adversely affect readability

faux

real

Page 141: UI/UX foundations - Intro to 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 142: UI/UX foundations - Intro to Design

Mixing Typefaces

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

Page 143: UI/UX foundations - Intro to Design

Typeface Hierarchy

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

Page 144: UI/UX foundations - Intro to Design

Typography in Action: iOS 9 San Francisco

Page 145: UI/UX foundations - Intro to Design

Typography in Action: iOS 9 San Francisco

Page 146: UI/UX foundations - Intro to Design

Typography in Action: iOS 9 San Francisco

taller x-height

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

Page 147: UI/UX foundations - Intro to 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 148: UI/UX foundations - Intro to Design

Design Process

Learn

Refine

Build

Typography Grids Colors Style Guides Voice & Tone