05b Fundamentals of UX Workshop: Interface Design (for Understanding)

96
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

description

Covering interface design including layout, type, fonts, line and style

Transcript of 05b Fundamentals of UX Workshop: Interface Design (for Understanding)

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

Page 2: 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]

2PART TWO

DESIGNING FOR UNDERSTANDING

Page 3: 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]

WHAT IS THE SINGLE MOST IMPORTANT THING?

Page 4: 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]

Page 5: 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]

Page 6: 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]

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

Page 8: 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]

Page 9: 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]

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

Page 10: 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]

IN WHAT ORDER SHOULD I LOOK?

Page 11: 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]

LAYOUTOrder and Composition

Page 12: 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]

painting

Page 13: 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]

painting

Page 14: 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]

Page 15: 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]

Page 16: 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]

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/

Page 17: 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]

Page 18: 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]

Page 19: 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]

How do you read Amazon?

Page 20: 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]

WRITE THE TOP THREE THINGS USERS MUST DO, IN ORDER OF IMPORTANCEWHY?

Task: 10 min

20

Page 21: 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]

TYPE

Page 22: 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]

I am a serif font

I am sans-serif

Page 23: 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]

I am Times New Roman

Hey, I’m arial

Page 24: 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]

I am Comic SansI am the devil

Page 25: 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]

I am ImpactLOL

Page 26: 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]

Page 27: 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]

Display fonts aren’t readable

Use them only for titles.

(Hi, I’m Georgia, and I’m always welcome!)

Page 28: 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]

Page 29: 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]

Page 30: 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]

Page 31: 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]

My HacksTwo fonts only: a headline and a body

Three sizes only Huge, normal and legal

Leading like there is no tomorrow.

31

Page 32: 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]

COLOR

Page 33: 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]

Page 34: 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]

RESTRAINT

34

Page 35: 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]

Page 36: 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]

NATURE

Page 37: 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]

Page 38: 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]

Page 39: 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]

Page 40: 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]

Page 41: 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]

Page 42: 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]

IF PHOTO-HEAVY, USE LITTLE COLOR

Page 43: 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]

Page 44: 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]

Page 45: 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]

Page 46: 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]

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

/

Page 47: 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]

LET’S MAKE PALETTES AND FONT STRATEGIES!

47

Page 48: 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]

LINE

Page 49: 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]

WARM, HAND DRAWN LINES= ARTISANAL

Page 50: 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]

LINES GENTLY REINFORCE THE GRID = SCIENTIFIC

Page 51: 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]

SIMPLE LINED NAVIGATION = ARTWORK

Page 52: 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]

GRID EDGED WITH LINES=MODRIAN=MODERN

Page 53: 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]

RELATIONSHIPS

Page 54: 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]

WHICH PAIR OF PANTS ARE NOW

39.99?

Page 55: 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]

WHICH CAR IS 49.99?

Page 56: 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]

IF YOU ARE PUTTING BOXES AROUND THINGS TO MAKE IT CLEAR, YOU PROBABLY SHOULD START OVER

Page 57: 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]

DIFFERENCE & CONTRAST

Page 58: 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]

Page 59: 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]

PROGRESSION

Page 60: 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]

THIS IS A VERY TALL PAGE

Page 61: 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]

Page 62: 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]

Page 63: 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]

Page 64: 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]

Page 65: 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]

Page 66: 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]

Page 67: 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]

Page 68: 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]

This one too

Page 69: 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]

Page 70: 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]

Page 71: 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]

Page 72: 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]

Page 73: 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]

THIS IS A LONG PAGE

Page 74: 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]

Flipboard moves in a variety

of directions

Page 75: 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]

Page 76: 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]

Page 77: 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]

Even if you use the “wrong” gesture, Flipboard reacts

correctly.

Page 78: 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]

THEME

78

Page 79: 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]

WHAT DO YOU THINK ABOUT WHEN YOU THINK OF A PAINTING PROGRAM?

Page 80: 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]

80

Poetics: Control, power, precision

Page 81: 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]

81

Values: Lightweight, easy, sketchy, imprecise

Page 82: 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]

Page 83: 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]

WHAT DO YOU THINK OF WHEN YOU THINK OF WRITING?

Page 84: 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]

84

Power, control, precision,

Page 85: 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]

85

OmmWriterBeauty, peace, zen

Page 86: 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]

86

Page 87: 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]

WHAT DO YOU THINK OF WHEN YOU THINK OF SOCIAL?

Page 88: 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]

Page 89: 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]

Page 90: 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]

Page 91: 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]

Page 92: 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]

Page 93: 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]

Page 94: 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]

GRAPHIC DESIGN HACKS

Page 95: 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]

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

Page 96: 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]

CHEATSDesign PatternsLibrariesOdeskConference proceedings

You can’t buy taste