SlideShare une entreprise Scribd logo
1  sur  148
Télécharger pour lire hors ligne
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
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
Lunch Time!
Vote on Special Topics
• Style Guides
• Voice & Tone
• Mobile Design
• Motion Design
• Voice UI (e.g. Alexa, Echo)
• Micro-interactions
• Typography
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
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 Little Bit of Motion Goes a Long Way
A Little Bit of Motion Goes a Long Way
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
Design Process
Learn
Refine
Build
Typography
Grids
Colors
Style Guides
Voice & Tone
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 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
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/
Design Process
Learn
Refine
Build
Typography
Grids
Colors
Style Guides
Voice & Tone

Contenu connexe

Tendances

Tendances (20)

The difference between ux and ui design
The difference between ux and ui designThe difference between ux and ui design
The difference between ux and ui design
 
UI UX in depth
UI UX in depthUI UX in depth
UI UX in depth
 
UX is not UI!
UX is not UI!UX is not UI!
UX is not UI!
 
UX/UI Design 101
UX/UI Design 101UX/UI Design 101
UX/UI Design 101
 
Demystifying User Experience
Demystifying User ExperienceDemystifying User Experience
Demystifying User Experience
 
Ui vs UX design
Ui vs UX designUi vs UX design
Ui vs UX design
 
UI & UX Design for Startups
UI & UX Design for StartupsUI & UX Design for Startups
UI & UX Design for Startups
 
Ux is not UI
Ux is not UIUx is not UI
Ux is not UI
 
User Research 101
User Research 101User Research 101
User Research 101
 
Fundamentals and practices of UX research
Fundamentals and practices of UX research Fundamentals and practices of UX research
Fundamentals and practices of UX research
 
UX Fundamentals for Beginners
UX Fundamentals for BeginnersUX Fundamentals for Beginners
UX Fundamentals for Beginners
 
Intro to UX: Enterprise UX
Intro to UX: Enterprise UXIntro to UX: Enterprise UX
Intro to UX: Enterprise UX
 
Basics in User Experience Design, Information Architecture & Usability
Basics in User Experience Design, Information Architecture & UsabilityBasics in User Experience Design, Information Architecture & Usability
Basics in User Experience Design, Information Architecture & Usability
 
UI UX DESIGN.pptx
UI UX DESIGN.pptxUI UX DESIGN.pptx
UI UX DESIGN.pptx
 
UI and UX Design for Startups - Matin Maleki
UI and UX Design for Startups - Matin MalekiUI and UX Design for Startups - Matin Maleki
UI and UX Design for Startups - Matin Maleki
 
UX - User Experience Design and Principles
UX - User Experience Design and PrinciplesUX - User Experience Design and Principles
UX - User Experience Design and Principles
 
UX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLESUX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLES
 
UX/UI Design and How It Works
UX/UI Design and How It WorksUX/UI Design and How It Works
UX/UI Design and How It Works
 
Ux design process
Ux design processUx design process
Ux design process
 
UI UX Introductory session
UI UX Introductory sessionUI UX Introductory session
UI UX Introductory session
 

En vedette

How to Craft A Memorable Special Appeal for Your Event
How to Craft A Memorable Special Appeal for Your EventHow to Craft A Memorable Special Appeal for Your Event
How to Craft A Memorable Special Appeal for Your Event
Vanessa Chase
 
Lean UX и дизайн-спринты: как построить ведущий продукт на рынке за пять дней
Lean UX и дизайн-спринты: как построить ведущий продукт на рынке за пять днейLean UX и дизайн-спринты: как построить ведущий продукт на рынке за пять дней
Lean UX и дизайн-спринты: как построить ведущий продукт на рынке за пять дней
CEE-SEC(R)
 
Getting to Produck Market Fit
Getting to Produck Market FitGetting to Produck Market Fit
Getting to Produck Market Fit
Danny Setiawan
 

En vedette (20)

Navigating Ambiguity: UX in Early-Stage Product Development
Navigating Ambiguity: UX in Early-Stage Product DevelopmentNavigating Ambiguity: UX in Early-Stage Product Development
Navigating Ambiguity: UX in Early-Stage Product Development
 
How to Craft A Memorable Special Appeal for Your Event
How to Craft A Memorable Special Appeal for Your EventHow to Craft A Memorable Special Appeal for Your Event
How to Craft A Memorable Special Appeal for Your Event
 
Creating A Culture Of Storytelling from NTEN's 2010 Nonprofit Technology Conf...
Creating A Culture Of Storytelling from NTEN's 2010 Nonprofit Technology Conf...Creating A Culture Of Storytelling from NTEN's 2010 Nonprofit Technology Conf...
Creating A Culture Of Storytelling from NTEN's 2010 Nonprofit Technology Conf...
 
SERVICE DESIGN AND UX TOOLS
SERVICE DESIGN AND UX TOOLS SERVICE DESIGN AND UX TOOLS
SERVICE DESIGN AND UX TOOLS
 
Prototyping for speed & scale
Prototyping for speed & scalePrototyping for speed & scale
Prototyping for speed & scale
 
Creating a Culture of Storytelling
Creating a Culture of StorytellingCreating a Culture of Storytelling
Creating a Culture of Storytelling
 
The 2015 Storytelling Non-Profit Virtual Conference
The 2015 Storytelling Non-Profit Virtual ConferenceThe 2015 Storytelling Non-Profit Virtual Conference
The 2015 Storytelling Non-Profit Virtual Conference
 
Story boarding
Story boardingStory boarding
Story boarding
 
Introduction to storytelling for experience design - Melbourne Geeknight, Feb...
Introduction to storytelling for experience design - Melbourne Geeknight, Feb...Introduction to storytelling for experience design - Melbourne Geeknight, Feb...
Introduction to storytelling for experience design - Melbourne Geeknight, Feb...
 
UXploration- Exploring Storytelling for Emotionally Engaging UX
UXploration- Exploring Storytelling for Emotionally Engaging UXUXploration- Exploring Storytelling for Emotionally Engaging UX
UXploration- Exploring Storytelling for Emotionally Engaging UX
 
Agile ux fullday-uxpa2016
Agile ux fullday-uxpa2016Agile ux fullday-uxpa2016
Agile ux fullday-uxpa2016
 
Lean UX и дизайн-спринты: как построить ведущий продукт на рынке за пять дней
Lean UX и дизайн-спринты: как построить ведущий продукт на рынке за пять днейLean UX и дизайн-спринты: как построить ведущий продукт на рынке за пять дней
Lean UX и дизайн-спринты: как построить ведущий продукт на рынке за пять дней
 
Storyboard for Animation and Video producation
Storyboard for Animation and Video producation Storyboard for Animation and Video producation
Storyboard for Animation and Video producation
 
Getting to Produck Market Fit
Getting to Produck Market FitGetting to Produck Market Fit
Getting to Produck Market Fit
 
Understanding the Power of Lean UX
Understanding the Power of Lean UXUnderstanding the Power of Lean UX
Understanding the Power of Lean UX
 
Integrate storytelling into design
Integrate storytelling into designIntegrate storytelling into design
Integrate storytelling into design
 
UX design for video animations
UX design for video animationsUX design for video animations
UX design for video animations
 
Introduction to storytelling for experience design
Introduction to storytelling for experience designIntroduction to storytelling for experience design
Introduction to storytelling for experience design
 
The Art of Storytelling
The Art of StorytellingThe Art of Storytelling
The Art of Storytelling
 
Startup/Digital Marketing 2.0: Growth Hacking Thru UX
Startup/Digital Marketing 2.0: Growth Hacking Thru UXStartup/Digital Marketing 2.0: Growth Hacking Thru UX
Startup/Digital Marketing 2.0: Growth Hacking Thru UX
 

Similaire à UI/UX foundations - Intro to Design

Thinking and working visually for software testers - Nordic Testing Days
Thinking and working visually for software testers - Nordic Testing DaysThinking and working visually for software testers - Nordic Testing Days
Thinking and working visually for software testers - Nordic Testing Days
Huib Schoots
 
PxS'12 - week 1 - Introduction
PxS'12 - week 1 - IntroductionPxS'12 - week 1 - Introduction
PxS'12 - week 1 - Introduction
hendrikknoche
 
(Socially Distanced) Participatory Design - Discovering Unmet Needs & New Sol...
(Socially Distanced) Participatory Design - Discovering Unmet Needs & New Sol...(Socially Distanced) Participatory Design - Discovering Unmet Needs & New Sol...
(Socially Distanced) Participatory Design - Discovering Unmet Needs & New Sol...
Jennifer Briselli
 
Introduction to Design Thinking
Introduction to Design ThinkingIntroduction to Design Thinking
Introduction to Design Thinking
Ammad Nasir
 

Similaire à UI/UX foundations - Intro to Design (20)

UI/UX Foundations Part 1 - Design
UI/UX Foundations Part 1 - DesignUI/UX Foundations Part 1 - Design
UI/UX Foundations Part 1 - Design
 
Thinking and working visually for software testers - Nordic Testing Days
Thinking and working visually for software testers - Nordic Testing DaysThinking and working visually for software testers - Nordic Testing Days
Thinking and working visually for software testers - Nordic Testing Days
 
LX Journey Mapping Workshop
LX Journey Mapping WorkshopLX Journey Mapping Workshop
LX Journey Mapping Workshop
 
PxS'12 - week 1 - Introduction
PxS'12 - week 1 - IntroductionPxS'12 - week 1 - Introduction
PxS'12 - week 1 - Introduction
 
Aurora design sprint activties-final
Aurora design sprint  activties-finalAurora design sprint  activties-final
Aurora design sprint activties-final
 
Design Sprint
Design SprintDesign Sprint
Design Sprint
 
What is UX v1
What is UX v1What is UX v1
What is UX v1
 
UX Design Process & Methods
UX Design Process & MethodsUX Design Process & Methods
UX Design Process & Methods
 
趨勢科技案例分享 - 與專家一起共舞 Design Sprint
趨勢科技案例分享 - 與專家一起共舞 Design Sprint趨勢科技案例分享 - 與專家一起共舞 Design Sprint
趨勢科技案例分享 - 與專家一起共舞 Design Sprint
 
(Socially Distanced) Participatory Design - Discovering Unmet Needs & New Sol...
(Socially Distanced) Participatory Design - Discovering Unmet Needs & New Sol...(Socially Distanced) Participatory Design - Discovering Unmet Needs & New Sol...
(Socially Distanced) Participatory Design - Discovering Unmet Needs & New Sol...
 
Design Process | Tool 02: Scenario - Tool 03: Wireframe
Design Process | Tool 02: Scenario - Tool 03: WireframeDesign Process | Tool 02: Scenario - Tool 03: Wireframe
Design Process | Tool 02: Scenario - Tool 03: Wireframe
 
Silent prototyping - going from analog to digital - Point Blank
Silent prototyping - going from analog to digital - Point BlankSilent prototyping - going from analog to digital - Point Blank
Silent prototyping - going from analog to digital - Point Blank
 
Nasdaq Pro/Design Masterclass at the Entrepreneurial Center
Nasdaq Pro/Design Masterclass at the Entrepreneurial CenterNasdaq Pro/Design Masterclass at the Entrepreneurial Center
Nasdaq Pro/Design Masterclass at the Entrepreneurial Center
 
Wearables - Design Sprint Playbook
Wearables - Design Sprint Playbook  Wearables - Design Sprint Playbook
Wearables - Design Sprint Playbook
 
3 Day Structure
3 Day Structure3 Day Structure
3 Day Structure
 
Design sprint slideshare
Design sprint slideshareDesign sprint slideshare
Design sprint slideshare
 
Introduction to Design Thinking
Introduction to Design ThinkingIntroduction to Design Thinking
Introduction to Design Thinking
 
Intro to Design (Lecture)
Intro to Design (Lecture)Intro to Design (Lecture)
Intro to Design (Lecture)
 
Berghs Product UX - 'Create '
Berghs  Product UX  - 'Create 'Berghs  Product UX  - 'Create '
Berghs Product UX - 'Create '
 
Experince Design Seminar // Hyper Island
Experince Design Seminar // Hyper IslandExperince Design Seminar // Hyper Island
Experince Design Seminar // Hyper Island
 

Dernier

如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
thubko
 
NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...
NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...
NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...
Amil baba
 
Evaluating natural frequencies and mode shapes.pptx
Evaluating natural frequencies and mode shapes.pptxEvaluating natural frequencies and mode shapes.pptx
Evaluating natural frequencies and mode shapes.pptx
joshuaclack73
 
如何办理(UAL毕业证书)伦敦艺术大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UAL毕业证书)伦敦艺术大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UAL毕业证书)伦敦艺术大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UAL毕业证书)伦敦艺术大学毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
Amil baba
 
100^%)( KATLEHONG))(*((+27838792658))*))௹ )Abortion Pills for Sale in Doha, D...
100^%)( KATLEHONG))(*((+27838792658))*))௹ )Abortion Pills for Sale in Doha, D...100^%)( KATLEHONG))(*((+27838792658))*))௹ )Abortion Pills for Sale in Doha, D...
100^%)( KATLEHONG))(*((+27838792658))*))௹ )Abortion Pills for Sale in Doha, D...
pillahdonald
 
挂科办理天主教大学毕业证成绩单一模一样品质
挂科办理天主教大学毕业证成绩单一模一样品质挂科办理天主教大学毕业证成绩单一模一样品质
挂科办理天主教大学毕业证成绩单一模一样品质
yzeoq
 
NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...
NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...
NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...
Amil baba
 

Dernier (20)

如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
 
Morgenbooster: Storytelling in Identity Design
Morgenbooster: Storytelling in Identity DesignMorgenbooster: Storytelling in Identity Design
Morgenbooster: Storytelling in Identity Design
 
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
 
NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...
NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...
NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...
 
Evaluating natural frequencies and mode shapes.pptx
Evaluating natural frequencies and mode shapes.pptxEvaluating natural frequencies and mode shapes.pptx
Evaluating natural frequencies and mode shapes.pptx
 
如何办理(UAL毕业证书)伦敦艺术大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UAL毕业证书)伦敦艺术大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UAL毕业证书)伦敦艺术大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UAL毕业证书)伦敦艺术大学毕业证成绩单本科硕士学位证留信学历认证
 
如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证
 
CADD 141 - Puzzle Cube Project - Product Photos
CADD 141 - Puzzle Cube Project - Product PhotosCADD 141 - Puzzle Cube Project - Product Photos
CADD 141 - Puzzle Cube Project - Product Photos
 
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
 
如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证
 
Naer VR: Advanced Research and Usability Testing Project
Naer VR: Advanced Research and Usability Testing ProjectNaer VR: Advanced Research and Usability Testing Project
Naer VR: Advanced Research and Usability Testing Project
 
The concept of motion graphics and its applications.
The concept of motion graphics and its applications.The concept of motion graphics and its applications.
The concept of motion graphics and its applications.
 
Game Pitch- Heroes of Niflheim (a mobile game).pdf
Game Pitch- Heroes of Niflheim (a mobile game).pdfGame Pitch- Heroes of Niflheim (a mobile game).pdf
Game Pitch- Heroes of Niflheim (a mobile game).pdf
 
Branding in the Psychedelic Landscape Report.pdf
Branding in the Psychedelic Landscape Report.pdfBranding in the Psychedelic Landscape Report.pdf
Branding in the Psychedelic Landscape Report.pdf
 
如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证
 
Real Smart Art Infographics by Slidesgo.pptx
Real Smart Art Infographics by Slidesgo.pptxReal Smart Art Infographics by Slidesgo.pptx
Real Smart Art Infographics by Slidesgo.pptx
 
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
 
100^%)( KATLEHONG))(*((+27838792658))*))௹ )Abortion Pills for Sale in Doha, D...
100^%)( KATLEHONG))(*((+27838792658))*))௹ )Abortion Pills for Sale in Doha, D...100^%)( KATLEHONG))(*((+27838792658))*))௹ )Abortion Pills for Sale in Doha, D...
100^%)( KATLEHONG))(*((+27838792658))*))௹ )Abortion Pills for Sale in Doha, D...
 
挂科办理天主教大学毕业证成绩单一模一样品质
挂科办理天主教大学毕业证成绩单一模一样品质挂科办理天主教大学毕业证成绩单一模一样品质
挂科办理天主教大学毕业证成绩单一模一样品质
 
NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...
NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...
NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...
 

UI/UX foundations - Intro to Design