Get Your (Visual) Style On

Slide 1

Slide 1 text

Get Your (VISUAL) Style On A R T I F A C T C O N F E R E N C E

Slide 2

Slide 2 text

A Game of Riddles

Slide 3

Slide 3 text

There is a cabin on the side of a mountain. Three people are inside and they are dead. How did they die?

Slide 4

Slide 4 text

They were killed in a plane cash. * airplane cabin DMALL.ME/11FSIFO

Slide 5

Slide 5 text

There is an ancient invention still used in some pats of the world today that allows people to see through walls. What is it?

Slide 6

Slide 6 text

Windows. DMALL.ME/13DXV1H

Slide 7

Slide 7 text

A woman leaves home and makes three left turns. She returns home again. On the way, she passed two women with masks. Who were the two women?

Slide 8

Slide 8 text

The umpire and the catcher. DMALL.ME/13DXWSM

Slide 9

Slide 9 text

Too much abstaction and lack of context lead to misdirection. T H E P O I N T

Slide 10

Slide 10 text

Style Tiles H I G H L E V E L S N A P S H OT O F T H E LO O K A N D F E E L O F T H E S I T E

Slide 11

Slide 11 text

Element Collages A S P E C I F I C T Y P E O F S T Y L E T I L E T H AT A L LOW S YO U TO D E F E R C E RTA I N D E S I G N D E C I S I O N S U N T I L YO U ’ R E R E A DY TO TAC K L E T H E M .

Slide 12

Slide 12 text

Style Prototypes L I K E ST Y L E T I L ES, B U T I N T H E B ROW S E R

Slide 13

Slide 13 text

Style Tiles

Slide 14

Slide 14 text

STYLETIL.ES

Slide 15

Slide 15 text

STYLETIL.ES

Slide 16

Slide 16 text

CASE STUDIES

Slide 17

Slide 17 text

Client has a strong, but INCONSISTENT BRAND 1

Slide 18

Slide 18 text

“Here’s our guidelines. We have 25 band colors and 7 typefaces!

Slide 19

Slide 19 text

MENU SELECTION BY JOSE GARCES I M A G E S

Slide 20

Slide 20 text

MENU SELECTION BY JOSE GARCES I M A G E S 15 TYPEFACES!

Slide 21

Slide 21 text

A LOT OF PINK

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

Create One Style Tile

Slide 24

Slide 24 text

MENU SELECTION BY JOSE GARCES I M A G E S

Slide 25

Slide 25 text

MENU SELECTION BY JOSE GARCES I M A G E S

Slide 26

Slide 26 text

HTML PROTOTYPE

Slide 27

Slide 27 text

HTML PROTOTYPE

Slide 28

Slide 28 text

1. Deine typogaphy 2. Deine Key Modules 3. Deine Workhorse Modules 4. Deine Colors and Smaller components

Slide 29

Slide 29 text

TYPECAST.COM

Slide 30

Slide 30 text

MENU SELECTION BY JOSE GARCES I M A G E S MENU SELECTION BY JOSE GARCES I M A G E S MENU SELECTION BY JOSE GARCES I M A G E S MENU SELECTION BY JOSE GARCES I M A G E S

Slide 31

Slide 31 text

PRIMARY BUSINESS GOAL: Get more people to book seats using the website

Slide 32

Slide 32 text

PRIMARY BUSINESS GOAL: Get more people to book seats using the website

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

Client has A NEW BRAND. 2

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

•Hand-done •Memphis soul •Textures •Summer OMA 3

Slide 37

Slide 37 text

O MUSIC AWARDS 3

Slide 38

Slide 38 text

+ and add more hand-done elements FEEDBACK

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

PROS • Device-width agnostic • Modular • Facilitates conversation about band with the client • Quick

Slide 41

Slide 41 text

CONS • Out-of-context • Doesn’t capture all of the variety that a system may need • Can be unrealistic if it doesn’t take content and requirements into consideation

Slide 42

Slide 42 text

Evolving your STYLE TILES 3

Slide 43

Slide 43 text

• Reinforces the core meaning of the O Music Awards: the intersection of fans, music, and technology • Consider the O or circle as a cental design element OMA 4

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

A style tile can be a stating point to creating a design system.

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

Iteate on KEY MODULES

Slide 48

Slide 48 text

ITERATIONS

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

Above all, designers need to be nimble.

Slide 51

Slide 51 text

Visual Inventoy & Element Collages

Slide 52

Slide 52 text

Visual Inventoy CO N C E P T A N D A RT D I R E C T I O N . S TA RT Q U I C K LY A N D AT A H I G H L E V E L

Slide 53

Slide 53 text

Visual inventory Design by reference

Slide 54

Slide 54 text

Visual inventory Design by reference

Slide 55

Slide 55 text

Visual inventory Design by reference

Slide 56

Slide 56 text

Visual inventory Design by reference

Slide 57

Slide 57 text

Visual inventory Design by reference

Slide 58

Slide 58 text

Solve your own problems by using the successes and failures of others.

Slide 59

Slide 59 text

Visual inventory Design by reference

Slide 60

Slide 60 text

Visual inventory Design by reference

Slide 61

Slide 61 text

Element Collages

Slide 62

Slide 62 text

element collages RIF.SUPERFRIEND.LY

Slide 63

Slide 63 text

element collages

Slide 64

Slide 64 text

element collages

Slide 65

Slide 65 text

element collages

Slide 66

Slide 66 text

element collages

Slide 67

Slide 67 text

element collages

Slide 68

Slide 68 text

element collages

Slide 69

Slide 69 text

“Electric”

Slide 70

Slide 70 text

“Shape, book, heat, bubble”

Slide 71

Slide 71 text

“Visual booklists”

Slide 72

Slide 72 text

“Pages… themed in books”

Slide 73

Slide 73 text

“Turn the page for step 2”

Slide 74

Slide 74 text

No content

Slide 75

Slide 75 text

“Turn the page for step 2”

Slide 76

Slide 76 text

“Visual booklists”

Slide 77

Slide 77 text

“Pages… themed in books”

Slide 78

Slide 78 text

Turn poweful phases into visual hooks.

Slide 79

Slide 79 text

Turn powerful phrases into visual hooks.

Slide 80

Slide 80 text

Turn powerful phrases into visual hooks. RIF.SUPERFRIEND.LY/DESIGNS/ROUND2

Slide 81

Slide 81 text

No content

Slide 82

Slide 82 text

“ —T H E P E R F E C T C L I E N T ’ S R E AC T I O N TO A N E L E M E N T CO L L AG E Obviously this is not a website. But I see how it could be.”

Slide 83

Slide 83 text

Turn powerful phrases into visual hooks.

Slide 84

Slide 84 text

Turn powerful phrases into visual hooks.

Slide 85

Slide 85 text

Turn powerful phrases into visual hooks.

Slide 86

Slide 86 text

Turn powerful phrases into visual hooks.

Slide 87

Slide 87 text

Turn powerful phrases into visual hooks.

Slide 88

Slide 88 text

Turn powerful phrases into visual hooks.

Slide 89

Slide 89 text

Turn powerful phrases into visual hooks.

Slide 90

Slide 90 text

Turn powerful phrases into visual hooks.

Slide 91

Slide 91 text

“Obviously this is not a website. But I see how it could be one.” —The perfect client’s reaction to an element collage CLEARLEFT.COM/THINKS/VISUALDESIGNEXPLORATIONS

Slide 92

Slide 92 text

No content

Slide 93

Slide 93 text

drbl.in/gXno

Slide 94

Slide 94 text

No content

Slide 95

Slide 95 text

“ — PAU L L LOY D : S E N I O R V I S UA L D ES I G N E R , C L E A R L E F T It’s like giving your client a peek at all those hidden layers.”

Slide 96

Slide 96 text

“It’s like giving your client a peek at those hidden layers.” —Paul Lloyd: Senior Visual Designer, Clearleft

Slide 97

Slide 97 text

We will replace presentations with conversations

Slide 98

Slide 98 text

We must move away from the place where the client sits with arms crossed in the role of judge, and we take to the stage with song and dance in the role of auditioning talent. While both paties ind the showmanship of our caft titillating, the pactitioner’s is a stronger place than that of the peformer. It is this pactitioner’s position from which we must strive to opeate. Pactitioners do not present. Stars do not audition.” “ — B L A I R E N N S , DM A L L . M E / 1 3 E V RW D

Slide 99

Slide 99 text

Style Prototypes

Slide 100

Slide 100 text

Style Prototypes are... • like Style Tiles, but in the browser • coded in HTML & CSS • reviewed by clients in their browser of preference • able to show accuate web type • able to show accuate web color • able to show inteaction

Slide 101

Slide 101 text

Dress Responsively H T T P : // S PA R K B OX .G I T H U B.COM / D R -S T Y L E - P ROTOT Y P E /

Slide 102

Slide 102 text

Sparkbox v1 H T T P : // S PA R K B OX .G I T H U B. I O/ S T Y L E - P ROTOT Y P E /

Slide 103

Slide 103 text

Sparkbox v2 H T T P : // B U I L D I N G . S E ES PA R K B OX .COM / S T Y L E - P ROTOT Y P E /

Slide 104

Slide 104 text

Style Prototypes: The Good • set customer expectations early • easy and fast to build and modify • evolve into pattern libaries • eventually, the same HTML (think, “CSS Zen Garden”)

Slide 105

Slide 105 text

Style Prototypes: The Bad • can be diﬃcult if your designer doesn’t code • can’t look too much like a real site • may not know design direction until we experiment • not enough on their own

Slide 106

Slide 106 text

Design Progress vs Time T I M E P RO G R ESS

Slide 107

Slide 107 text

Design Progress vs Time How am I going to solve this problem? T I M E P RO G R ESS

Slide 108

Slide 108 text

Design Progress vs Time I’m going to spend 3 weeks reining this thing... T I M E P RO G R ESS

Slide 109

Slide 109 text

Two Design Activities Solving the Problem Reining the Solution T I M E

Slide 110

Slide 110 text

Timing and Discipline Recognizing when we reach this point Having the discipline to switch tools T I M E

Slide 111

Slide 111 text

Vote ST Y L E T I L E S ? E L E M E N T CO L L AG E S ? S T Y L E P ROTOT Y P E S ?

Slide 112

Slide 112 text

The Final Riddle

Slide 113

Slide 113 text

P H OTO C R E D I T: J AY M A I S E L

Slide 114

Slide 114 text

“Group improvisation is a challenge. Aside from the weighty technical problem of collective coherent thinking, there is the vey human, even social need for sympathy from all members to bend for the common result. — B I L L E VA N S — B I L L E VA N S

Slide 115

Slide 115 text

Group Improvisation

Slide 116

Slide 116 text

THANK YOU! Yesenia Perez-Cruz @yeseniaa Dan Mall @danielmall Ben Callahan @bencallahan