Get Your (Visual) Style On

Yesenia Perez-Cruz, Dan Mall, and Ben Callahan’s presentation from the first Artifact Conference in Austin on May 13, 2013.

Transcript

1. Get Your (VISUAL) Style On A R T I F A C T C O N F E R E N C E
2. A Game of Riddles
3. There is a cabin on the side of a mountain. Three people are inside and they are dead. How did they die?
4. They were killed in a plane cash. * airplane cabin DMALL.ME/11FSIFO
5. 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?
6. Windows. DMALL.ME/13DXV1H
7. 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?
8. The umpire and the catcher. DMALL.ME/13DXWSM
9. Too much abstaction and lack of context lead to misdirection. T H E P O I N T
10. 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
11. 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 .
12. 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
13. Style Tiles
14. STYLETIL.ES
15. STYLETIL.ES
16. CASE STUDIES
17. Client has a strong, but INCONSISTENT BRAND 1
18. “Here’s our guidelines. We have 25 band colors and 7 typefaces!
19. MENU SELECTION BY JOSE GARCES I M A G E S
20. MENU SELECTION BY JOSE GARCES I M A G E S 15 TYPEFACES!
21. A LOT OF PINK
23. Create One Style Tile
24. MENU SELECTION BY JOSE GARCES I M A G E S
25. MENU SELECTION BY JOSE GARCES I M A G E S
26. HTML PROTOTYPE
27. HTML PROTOTYPE
28. 1. Deine typogaphy 2. Deine Key Modules 3. Deine Workhorse Modules 4. Deine Colors and Smaller components
29. TYPECAST.COM
30. 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
31. PRIMARY BUSINESS GOAL: Get more people to book seats using the website
32. PRIMARY BUSINESS GOAL: Get more people to book seats using the website
34. Client has A NEW BRAND. 2
36. •Hand-done •Memphis soul •Textures •Summer OMA 3
37. O MUSIC AWARDS 3
38. + and add more hand-done elements FEEDBACK
40. PROS • Device-width agnostic • Modular • Facilitates conversation about band with the client • Quick
41. 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
42. Evolving your STYLE TILES 3
43. • 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
45. A style tile can be a stating point to creating a design system.
47. Iteate on KEY MODULES
48. ITERATIONS
50. Above all, designers need to be nimble.
51. Visual Inventoy & Element Collages
52. 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
53. Visual inventory Design by reference
54. Visual inventory Design by reference
55. Visual inventory Design by reference
56. Visual inventory Design by reference
57. Visual inventory Design by reference
58. Solve your own problems by using the successes and failures of others.
59. Visual inventory Design by reference
60. Visual inventory Design by reference
61. Element Collages
62. element collages RIF.SUPERFRIEND.LY
63. element collages
64. element collages
65. element collages
66. element collages
67. element collages
68. element collages
69. “Electric”
70. “Shape, book, heat, bubble”
71. “Visual booklists”
72. “Pages… themed in books”
73. “Turn the page for step 2”
75. “Turn the page for step 2”
76. “Visual booklists”
77. “Pages… themed in books”
78. Turn poweful phases into visual hooks.
79. Turn powerful phrases into visual hooks.
80. Turn powerful phrases into visual hooks. RIF.SUPERFRIEND.LY/DESIGNS/ROUND2
82. “ —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.”
83. Turn powerful phrases into visual hooks.
84. Turn powerful phrases into visual hooks.
85. Turn powerful phrases into visual hooks.
86. Turn powerful phrases into visual hooks.
87. Turn powerful phrases into visual hooks.
88. Turn powerful phrases into visual hooks.
89. Turn powerful phrases into visual hooks.
90. Turn powerful phrases into visual hooks.
91. “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
93. drbl.in/gXno
95. “ — 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.”
96. “It’s like giving your client a peek at those hidden layers.” —Paul Lloyd: Senior Visual Designer, Clearleft
97. We will replace presentations with conversations
98. 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
99. Style Prototypes
100. 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
101. 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 /
102. 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 /
103. 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 /
104. 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”)
105. Style Prototypes: The Bad • can be difficult 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
106. Design Progress vs Time T I M E P RO G R ESS
107. Design Progress vs Time How am I going to solve this problem? T I M E P RO G R ESS
108. Design Progress vs Time I’m going to spend 3 weeks reining this thing... T I M E P RO G R ESS
109. Two Design Activities Solving the Problem Reining the Solution T I M E
110. Timing and Discipline Recognizing when we reach this point Having the discipline to switch tools T I M E
111. 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 ?
112. The Final Riddle
113. P H OTO C R E D I T: J AY M A I S E L
114. “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
115. Group Improvisation
116. THANK YOU! Yesenia Perez-Cruz @yeseniaa Dan Mall @danielmall Ben Callahan @bencallahan