05b Fundamentals of UX Workshop: Interface Design (for Understanding)
-
Upload
christina-wodtke -
Category
Design
-
view
645 -
download
0
description
Transcript of 05b Fundamentals of UX Workshop: Interface Design (for Understanding)
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
DESIGNING INTERFACE
Designing the User Experience: THE FUNDAMENTALS
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
2PART TWO
DESIGNING FOR UNDERSTANDING
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
WHAT IS THE SINGLE MOST IMPORTANT THING?
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Hierarchy gives clarityLaw of Focal Point
The idea that a point of interest, something emphasised or different will catch and hold the viewers attention
(Chang, 2002).
LOOK
LOOK
LOOK
LOOK
LOOK
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
IN WHAT ORDER SHOULD I LOOK?
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
LAYOUTOrder and Composition
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
painting
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
painting
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Comics are read in the west left to
right, like a page. However, good
artists add visual elements to help
you flow.
http://samkieth.blogspot.com/
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
How do you read Amazon?
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
WRITE THE TOP THREE THINGS USERS MUST DO, IN ORDER OF IMPORTANCEWHY?
Task: 10 min
20
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
TYPE
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
I am a serif font
I am sans-serif
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
I am Times New Roman
Hey, I’m arial
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
I am Comic SansI am the devil
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
I am ImpactLOL
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Display fonts aren’t readable
Use them only for titles.
(Hi, I’m Georgia, and I’m always welcome!)
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
My HacksTwo fonts only: a headline and a body
Three sizes only Huge, normal and legal
Leading like there is no tomorrow.
31
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
COLOR
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
RESTRAINT
34
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
NATURE
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
IF PHOTO-HEAVY, USE LITTLE COLOR
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
CHEATERS TRICKS
• One color, with variations. One accent. Period
• Use a generator site
http://www.colourlovers.com/
• Use nature
http://boxesandarrows.com/natural-selections-c
olors-found-in-nature-and-interface-design
/
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
LET’S MAKE PALETTES AND FONT STRATEGIES!
47
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
LINE
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
WARM, HAND DRAWN LINES= ARTISANAL
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
LINES GENTLY REINFORCE THE GRID = SCIENTIFIC
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
SIMPLE LINED NAVIGATION = ARTWORK
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
GRID EDGED WITH LINES=MODRIAN=MODERN
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
RELATIONSHIPS
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
WHICH PAIR OF PANTS ARE NOW
39.99?
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
WHICH CAR IS 49.99?
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
IF YOU ARE PUTTING BOXES AROUND THINGS TO MAKE IT CLEAR, YOU PROBABLY SHOULD START OVER
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
DIFFERENCE & CONTRAST
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
PROGRESSION
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
THIS IS A VERY TALL PAGE
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
This one too
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
THIS IS A LONG PAGE
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Flipboard moves in a variety
of directions
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Even if you use the “wrong” gesture, Flipboard reacts
correctly.
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
THEME
78
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
WHAT DO YOU THINK ABOUT WHEN YOU THINK OF A PAINTING PROGRAM?
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
80
Poetics: Control, power, precision
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
81
Values: Lightweight, easy, sketchy, imprecise
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
WHAT DO YOU THINK OF WHEN YOU THINK OF WRITING?
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
84
Power, control, precision,
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
85
OmmWriterBeauty, peace, zen
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
86
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
WHAT DO YOU THINK OF WHEN YOU THINK OF SOCIAL?
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
GRAPHIC DESIGN HACKS
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
MINIMALIST DESIGNOnly use one font. Preferably Helvetica. Only use three, all very different. Perhaps a fourth for footer text.Only use one color, with variations, and one “accent” color.Turn on the grid (if you are using Photoshop, etc)Never align center.Don’t use stock photography, unless you have awesome taste. It has no soul.Have a hierarchy
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
CHEATSDesign PatternsLibrariesOdeskConference proceedings
You can’t buy taste