Get Your (Visual) Style On

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.

Fe8510ee8e06c36d02799dbf8f934b9c?s=128

Ben Callahan

May 13, 2013
Tweet

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

  22. None
  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
  33. None
  34. Client has A NEW BRAND. 2

  35. None
  36. •Hand-done •Memphis soul •Textures •Summer OMA 3

  37. O MUSIC AWARDS 3

  38. + and add more hand-done elements FEEDBACK

  39. None
  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
  44. None
  45. A style tile can be a stating point to creating

    a design system.
  46. None
  47. Iteate on KEY MODULES

  48. ITERATIONS

  49. None
  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”

  74. None
  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

  81. None
  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
  92. None
  93. drbl.in/gXno

  94. None
  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