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

    There is a cabin on the side of a mountain.

    Three people are inside and they are dead. How did they die?
  3. 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?
  4. 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?
  5. 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
  6. 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 .
  7. 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
  8. 22.
  9. 28.

    1. Deine typogaphy 2. Deine Key Modules 3. Deine Workhorse

    Modules 4. Deine Colors and Smaller components
  10. 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
  11. 33.
  12. 35.
  13. 39.
  14. 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
  15. 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
  16. 44.
  17. 46.
  18. 49.
  19. 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
  20. 74.
  21. 81.
  22. 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.”
  23. 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
  24. 92.
  25. 94.
  26. 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.”
  27. 96.

    “It’s like giving your client a peek at those hidden

    layers.” —Paul Lloyd: Senior Visual Designer, Clearleft
  28. 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
  29. 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
  30. 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 /
  31. 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 /
  32. 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 /
  33. 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”)
  34. 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
  35. 107.

    Design Progress vs Time How am I going to solve

    this problem? T I M E P RO G R ESS
  36. 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
  37. 110.
  38. 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 ?
  39. 113.

    P H OTO C R E D I T: J

    AY M A I S E L
  40. 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