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

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

Design Process

Refine

BuildLearn

Design Process

BuildLearn

Refine

Storyboarding

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

Storyboarding: Freytag’s Pyramid

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

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

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.

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.

https://boagworld.com/usability/adapting-empathy-maps-for-ux-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.

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

Storyboards showing with parents involved with their children received more favorable reviews in A/B tests.

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

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

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

Design Studios & Critiques

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

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)

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

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

Journey Maps

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?

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

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

11:30 - 11:40 BREAK

12:15 - 12:45 LUNCH

12:45 - 01:00 Grids & Colors

Lunch Time!

Vote on Special Topics• Style Guides

• Voice & Tone

• Mobile Design

• Motion Design

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

• Micro-interactions

• Typography

11:30 - 11:40 BREAK

12:15 - 12:45 LUNCH

12:45 - 01:00 Grids & Colors

Design Process

BuildLearn

Refine

GridsTypes of grids

Web/Responsive grids

Golden Ratio

Gridsorder out of chaos

http://thinkingwithtype.com/contents/grid

Web Grids: Bootstrap12 columns

responsive

Web Grids: Foundation12 columns, responsive

Web Grids: 96016 columns 24 columns

Golden Ratiobased on the ‘golden rectangle’ concept

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

Golden Ratiobased on the ‘golden rectangle’ concept

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

Golden Ratioa b

= 1.618

Golden Ratioa 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

Refine

Typography Grids Colors Style Guides Voice & Tone

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

Color Wheel

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

Clashing Colors

Vibrating Text?

Color Contrasts

The quick brown fox jumps over the lazy dog

Color Illusions

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

Design Process

Refine

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

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

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

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 PrinciplesEasing vs. Linear Motion

Squash and Stretch

Exaggeration

A Few Animation Principles

Easing vs. Linear Motion

Squash and Stretch

Exaggeration

A Few Animation Principles

Special TopicsMobile 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/

Design Process

Refine

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

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/

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/

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

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

Design Process

Refine

Typography

Letterform (anatomy of a letter)

Classifications (serif vs. sans serif)

Readability (line-height, tracking, kerning)

Typefaces

Typography: Letterform

Bxhyascender heightcap height

x height

baseline

descender height

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

SerifSans Serif

Typography: Classifications

Sans Serif

Typography: Classifications

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

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.

Size: 12pt leading: 12pt

(100%)

Size: 12pt leading: 14.4pt

(120%)

(150%)

(200%)

guideline: use taller heights for longer lines

leading = line-height

(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: TrackingTracking: 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.

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

tracking = letter spacingguideline: use more spacing for headlines

Readability: KerningKerning: the amount of space between two characters

Wonderkerning

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

http://type.method.ac/

Typefacesmay consists of bold, italics, condensed, etc.

guideline: pick a typeface that matches your content

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

Typefaces: faux fontstip: faux fonts can adversely affect readability

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

taller x-height

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

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/

Design Process

Refine

ui/ux foundations - intro to design

Design

ui, ux portfolio

ux / ui สำหรับเว็บไทย

ui & ux engineering

uiデザインとuxの超基礎「ui design & ux for...

ui/ux portfolio

meetup ux ui

sketching - ux/ui

balltune ux ui

ux & ui 1

ux & ui design

design thinking & ux/ui

ux,ui & wireframes

hor raphael - ux/ui designer · 2020. 3. 11. · hor...

05 ui & ux

ui & ux public

ui/ux foundations - research

ux – ui introduction.pdf

co to jest ux? -...

ux user experience ... mobile apps - ui & ux

ux ui wearables