$30 off During Our Annual Pro Sale. View Details »

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.

Ben Callahan

May 13, 2013
Tweet

More Decks by Ben Callahan

Other Decks in Design

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

    View Slide

  2. A Game of Riddles

    View Slide

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

    View Slide

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

    View Slide

  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?

    View Slide

  6. Windows.
    DMALL.ME/13DXV1H

    View Slide

  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?

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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 .

    View Slide

  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

    View Slide

  13. Style Tiles

    View Slide

  14. STYLETIL.ES

    View Slide

  15. STYLETIL.ES

    View Slide

  16. CASE STUDIES

    View Slide

  17. Client has a strong, but
    INCONSISTENT
    BRAND
    1

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  21. A LOT OF PINK

    View Slide

  22. View Slide

  23. Create One
    Style Tile

    View Slide

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

    View Slide

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

    View Slide

  26. HTML PROTOTYPE

    View Slide

  27. HTML PROTOTYPE

    View Slide

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

    View Slide

  29. TYPECAST.COM

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  33. View Slide

  34. Client has
    A NEW BRAND.
    2

    View Slide

  35. View Slide

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

    View Slide

  37. O MUSIC AWARDS 3

    View Slide

  38. +
    and add more hand-done elements
    FEEDBACK

    View Slide

  39. View Slide

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

    View Slide

  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

    View Slide

  42. Evolving your
    STYLE TILES
    3

    View Slide

  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

    View Slide

  44. View Slide

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

    View Slide

  46. View Slide

  47. Iteate on
    KEY MODULES

    View Slide

  48. ITERATIONS

    View Slide

  49. View Slide

  50. Above all, designers need to
    be nimble.

    View Slide

  51. Visual Inventoy
    & Element Collages

    View Slide

  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

    View Slide

  53. Visual inventory
    Design by reference

    View Slide

  54. Visual inventory
    Design by reference

    View Slide

  55. Visual inventory
    Design by reference

    View Slide

  56. Visual inventory
    Design by reference

    View Slide

  57. Visual inventory
    Design by reference

    View Slide

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

    View Slide

  59. Visual inventory
    Design by reference

    View Slide

  60. Visual inventory
    Design by reference

    View Slide

  61. Element Collages

    View Slide

  62. element collages
    RIF.SUPERFRIEND.LY

    View Slide

  63. element collages

    View Slide

  64. element collages

    View Slide

  65. element collages

    View Slide

  66. element collages

    View Slide

  67. element collages

    View Slide

  68. element collages

    View Slide

  69. “Electric”

    View Slide

  70. “Shape, book, heat, bubble”

    View Slide

  71. “Visual booklists”

    View Slide

  72. “Pages… themed in books”

    View Slide

  73. “Turn the page for step 2”

    View Slide

  74. View Slide

  75. “Turn the page for step 2”

    View Slide

  76. “Visual booklists”

    View Slide

  77. “Pages… themed in books”

    View Slide

  78. Turn poweful phases into visual hooks.

    View Slide

  79. Turn powerful phrases into visual hooks.

    View Slide

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

    View Slide

  81. View Slide


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

    View Slide

  83. Turn powerful phrases into visual hooks.

    View Slide

  84. Turn powerful phrases into visual hooks.

    View Slide

  85. Turn powerful phrases into visual hooks.

    View Slide

  86. Turn powerful phrases into visual hooks.

    View Slide

  87. Turn powerful phrases into visual hooks.

    View Slide

  88. Turn powerful phrases into visual hooks.

    View Slide

  89. Turn powerful phrases into visual hooks.

    View Slide

  90. Turn powerful phrases into visual hooks.

    View Slide

  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

    View Slide

  92. View Slide

  93. drbl.in/gXno

    View Slide

  94. View Slide


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

    View Slide

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

    View Slide

  97. We will replace presentations
    with conversations

    View Slide

  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

    View Slide

  99. Style Prototypes

    View Slide

  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

    View Slide

  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 /

    View Slide

  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 /

    View Slide

  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 /

    View Slide

  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”)

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  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 ?

    View Slide

  112. The Final Riddle

    View Slide

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

    View Slide

  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

    View Slide

  115. Group Improvisation

    View Slide

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

    View Slide