Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Take your stinking paws off my design you damn dirty developers

Andy Clarke
January 30, 2014

Take your stinking paws off my design you damn dirty developers

Andy Clarke

January 30, 2014
Tweet

More Decks by Andy Clarke

Other Decks in Design

Transcript

  1. Take your stinking
    paws off my design
    you damn dirty
    developers
    Andrew Clarke
    McrFRED January 2014

    View full-size slide

  2. speakerdeck.com/malarkey
    @malarkey

    View full-size slide



  3. Take your stinking
    paws off me you
    damn dirty ape

    View full-size slide

  4. Elements
    Captions
    Headings
    Labels
    Legends
    Lists
    Paragraphs
    Quotations
    Small
    Tables
    Classifications
    Alerts
    Comments
    Copyright information
    Dates and times
    Form text (error, help)
    Pull quotes (marks)
    Intro paragraphs
    Related article summaries
    Related article titles
    It can help designers and developer to design type styles for common elements and classifications.

    View full-size slide

  5. http://goo.gl/9jRbK

    View full-size slide

  6. 21
    a
    24
    a
    36
    a
    48
    a
    14
    a
    16
    a
    18
    a
    12
    a
    11
    a
    10
    a

    View full-size slide

  7. 21
    a
    24
    a
    36
    a
    48
    a
    14
    a
    16
    a
    18
    a
    12
    a
    11
    a
    10
    a

    View full-size slide

  8. 21
    a
    24
    a
    36
    a
    48
    a
    14
    a
    16
    a
    18
    a
    12
    a
    11
    a
    10
    a

    View full-size slide

  9. Decide on type sizes before opening Photoshop
    by testing on devices.

    View full-size slide

  10. Planet of the Apes is a 1968 American science fiction film directed by Franklin J. Schaffner, based on the 1963 French novel La Planète
    des singes by Pierre Boulle. The film stars Charlton Heston, Roddy McDowall, Maurice Evans, Kim Hunter and Linda Harrison. It was
    the first in a series of five films made between 1968 and 1973, all produced by Arthur P. Jacobs and released by 20th Century Fox.
    The film tells the story of an astronaut crew who crash-land on a strange planet in the distant future. Although the planet appears
    desolate at first, the surviving crew members stumble upon a society in which apes have evolved into creatures with human-like
    intelligence and speech. The apes have assumed the role of the dominant species and humans are mute creatures wearing animal
    skins.
    The film was released on February 8, 1968, in the United States and was a commercial success, gaining $32,589,624 at the
    international box office. The film was groundbreaking for its prosthetic makeup techniques by artist John Chambers, and was well
    received by critics and audiences, launching a film franchise, including four sequels, as well as a short-lived television show,
    animated series, comic books, and various merchandising.
    The original series was followed by Tim Burton’s remake Planet of the Apes in 2001 and the reboot Rise of the Planet of the Apes in
    2011. In 2001, Planet of the Apes was selected for preservation in the United States National Film Registry by the Library of Congress
    as being “culturally, historically, or aesthetically significant.”
    The measure
    The measure’s the name given to the width of a body of type. This type is too wide to read comfortably.

    View full-size slide

  11. Planet of the Apes is a 1968 American science fiction film directed by Franklin J. Schaffner, based on the
    1963 French novel La Planète des singes by Pierre Boulle. The film stars Charlton Heston, Roddy
    McDowall, Maurice Evans, Kim Hunter and Linda Harrison. It was the first in a series of five films made
    between 1968 and 1973, all produced by Arthur P. Jacobs and released by 20th Century Fox.
    The film tells the story of an astronaut crew who crash-land on a strange planet in the distant future.
    Although the planet appears desolate at first, the surviving crew members stumble upon a society in
    which apes have evolved into creatures with human-like intelligence and speech. The apes have
    assumed the role of the dominant species and humans are mute creatures wearing animal skins.
    The film was released on February 8, 1968, in the United States and was a commercial success, gaining
    $32,589,624 at the international box office. The film was groundbreaking for its prosthetic makeup
    techniques by artist John Chambers, and was well received by critics and audiences, launching a film
    franchise, including four sequels, as well as a short-lived television show, animated series, comic books,
    and various merchandising.
    Increasing the type size also alters the measure. This type is still uncomfortable to read for long periods.

    View full-size slide

  12. An optimum measure is 2-3 alphabets or 52-78 characters (including spaces.) This measure is 57 characters.
    Planet of the Apes is a 1968 American science fiction film
    directed by Franklin J. Schaffner, based on the 1963
    French novel La Planète des singes by Pierre Boulle. The
    film stars Charlton Heston, Roddy McDowall, Maurice
    Evans, Kim Hunter and Linda Harrison. It was the first in a
    series of five films made between 1968 and 1973, all
    produced by Arthur P. Jacobs and released by 20th
    Century Fox.

    View full-size slide

  13. Planet of the Apes is a 1968 American science fiction film directed by Franklin J. Schaffner, based on the
    1963 French novel La Planète des singes by Pierre Boulle. The film stars Charlton Heston, Roddy
    McDowall, Maurice Evans, Kim Hunter and Linda Harrison. It was the first in a series of five films made
    between 1968 and 1973, all produced by Arthur P. Jacobs and released by 20th Century Fox.
    The film tells the story of an astronaut crew who crash-land on a strange planet in the distant future.
    Although the planet appears desolate at first, the surviving crew members stumble upon a society in
    which apes have evolved into creatures with human-like intelligence and speech. The apes have
    assumed the role of the dominant species and humans are mute creatures wearing animal skins.
    The film was released on February 8, 1968, in the United States and was a commercial success, gaining
    $32,589,624 at the international box office. The film was groundbreaking for its prosthetic makeup
    techniques by artist John Chambers, and was well received by critics and audiences, launching a film
    franchise, including four sequels, as well as a short-lived television show, animated series, comic books,
    and various merchandising.
    To improve readability, we should always also adjust line-height when we alter the measure.

    View full-size slide

  14. Planet of the Apes is a 1968 American science fiction film directed by Franklin J. Schaffner, based on the
    1963 French novel La Planète des singes by Pierre Boulle. The film stars Charlton Heston, Roddy
    McDowall, Maurice Evans, Kim Hunter and Linda Harrison. It was the first in a series of five films made
    between 1968 and 1973, all produced by Arthur P. Jacobs and released by 20th Century Fox.
    The film tells the story of an astronaut crew who crash-land on a strange planet in the distant future.
    Although the planet appears desolate at first, the surviving crew members stumble upon a society in
    which apes have evolved into creatures with human-like intelligence and speech. The apes have
    assumed the role of the dominant species and humans are mute creatures wearing animal skins.
    The film was released on February 8, 1968, in the United States and was a commercial success, gaining
    $32,589,624 at the international box office. The film was groundbreaking for its prosthetic makeup
    techniques by artist John Chambers, and was well received by critics and audiences, launching a film
    franchise, including four sequels, as well as a short-lived television show, animated series, comic books,
    and various merchandising.
    When line-height isn’t optimal—either too loose or too tight—we need to concentrate to find
    the start of the next line.

    View full-size slide

  15. Planet of the Apes is a 1968 American science fiction film directed by Franklin J. Schaffner, based on the
    1963 French novel La Planète des singes by Pierre Boulle. The film stars Charlton Heston, Roddy
    McDowall, Maurice Evans, Kim Hunter and Linda Harrison. It was the first in a series of five films made
    between 1968 and 1973, all produced by Arthur P. Jacobs and released by 20th Century Fox.
    The film tells the story of an astronaut crew who crash-land on a strange planet in the distant future.
    Although the planet appears desolate at first, the surviving crew members stumble upon a society in
    which apes have evolved into creatures with human-like intelligence and speech. The apes have
    assumed the role of the dominant species and humans are mute creatures wearing animal skins.
    The film was released on February 8, 1968, in the United States and was a commercial success, gaining
    $32,589,624 at the international box office. The film was groundbreaking for its prosthetic makeup
    techniques by artist John Chambers, and was well received by critics and audiences, launching a film
    franchise, including four sequels, as well as a short-lived television show, animated series, comic books,
    and various merchandising.
    Here’s that ‘too tight’ line-height again.

    View full-size slide

  16. Planet of the Apes is a 1968 American science fiction film directed by Franklin J. Schaffner, based on the
    1963 French novel La Planète des singes by Pierre Boulle. The film stars Charlton Heston, Roddy
    McDowall, Maurice Evans, Kim Hunter and Linda Harrison. It was the first in a series of five films made
    between 1968 and 1973, all produced by Arthur P. Jacobs and released by 20th Century Fox.
    The film tells the story of an astronaut crew who crash-land on a strange planet in the distant future.
    Although the planet appears desolate at first, the surviving crew members stumble upon a society in
    which apes have evolved into creatures with human-like intelligence and speech. The apes have
    assumed the role of the dominant species and humans are mute creatures wearing animal skins.
    The film was released on February 8, 1968, in the United States and was a commercial success, gaining
    $32,589,624 at the international box office. The film was groundbreaking for its prosthetic makeup
    techniques by artist John Chambers, and was well received by critics and audiences, launching a film
    franchise, including four sequels, as well as a short-lived television show, animated series, comic books,
    and various merchandising.

    View full-size slide

  17. Planet of the Apes is a 1968
    American science fiction film
    directed by Franklin J.
    Schaffner, based on the 1963
    French novel La Planète des
    singes by Pierre Boulle.
    We often see line-height that’s too loose in boxes,
    narrow columns and sidebars.

    View full-size slide

  18. Planet of the Apes is a 1968
    American science fiction film
    directed by Franklin J.
    Schaffner, based on the 1963
    French novel La Planète des
    singes by Pierre Boulle.
    Again, our eyes must consciously search for the
    start of the next line,

    View full-size slide

  19. Planet of the Apes is a 1968
    American science fiction film
    directed by Franklin J.
    Schaffner, based on the 1963
    French novel La Planète des
    singes by Pierre Boulle.
    Here’s that ‘too loose’ line-height again.

    View full-size slide

  20. Planet of the Apes is a 1968
    American science fiction film
    directed by Franklin J.
    Schaffner, based on the 1963
    French novel La Planète des
    singes by Pierre Boulle.
    Tightening line-height in narrow spaces can
    dramatically improve readability.

    View full-size slide

  21. Planet of the Apes is a 1968 American science fiction film
    directed by Franklin J. Schaffner, based on the 1963
    French novel La Planète des singes by Pierre Boulle. The
    film stars Charlton Heston, Roddy McDowall, Maurice
    Evans, Kim Hunter and Linda Harrison. It was the first in a
    series of five films made between 1968 and 1973, all
    produced by Arthur P. Jacobs and released by 20th
    Century Fox.
    Reversing out
    It’s important to write different styles for reversed-out content. Here’s a normal paragraph of text.

    View full-size slide

  22. Planet of the Apes is a 1968 American science fiction film
    directed by Franklin J. Schaffner, based on the 1963
    French novel La Planète des singes by Pierre Boulle. The
    film stars Charlton Heston, Roddy McDowall, Maurice
    Evans, Kim Hunter and Linda Harrison. It was the first in a
    series of five films made between 1968 and 1973, all
    produced by Arthur P. Jacobs and released by 20th
    Century Fox.
    When reversing out (eg white text on black) this text becomes more difficult to read.

    View full-size slide

  23. So increase line-height, in this case from 1.3 to 1.4.
    Planet of the Apes is a 1968 American science fiction film
    directed by Franklin J. Schaffner, based on the 1963
    French novel La Planète des singes by Pierre Boulle. The
    film stars Charlton Heston, Roddy McDowall, Maurice
    Evans, Kim Hunter and Linda Harrison. It was the first in a
    series of five films made between 1968 and 1973, all
    produced by Arthur P. Jacobs and released by 20th
    Century Fox.

    View full-size slide

  24. Also, increase the ‘tracking’ (spacing) between words. We can do that using CSS.
    Planet of the Apes is a 1968 American science fiction
    film directed by Franklin J. Schaffner, based on the
    1963 French novel La Planète des singes by Pierre
    Boulle. The film stars Charlton Heston, Roddy
    McDowall, Maurice Evans, Kim Hunter and Linda
    Harrison. It was the first in a series of five films made
    between 1968 and 1973, all produced by Arthur P.
    Jacobs and released by 20th Century Fox.

    View full-size slide

  25. p {
    line-height : 1.3; }
    .reversed p {
    line-height : 1.4;
    word-spacing : 1rem; }

    View full-size slide

  26. Planet of the Apes is a 1968 American science fiction film
    directed by Franklin J. Schaffner, based on the 1963
    French novel La Planète des singes by Pierre Boulle. The
    film stars Charlton Heston, Roddy McDowall, Maurice
    Evans, Kim Hunter and Linda Harrison. It was the first in a
    series of five films made between 1968 and 1973, all
    produced by Arthur P. Jacobs and released by 20th
    Century Fox.
    Another thing to remember; sans-serif typefaces generally require looser line-height.

    View full-size slide

  27. Planet of the Apes is a 1968 American science fiction film
    directed by Franklin J. Schaffner, based on the 1963
    French novel La Planète des singes by Pierre Boulle. The
    film stars Charlton Heston, Roddy McDowall, Maurice
    Evans, Kim Hunter and Linda Harrison. It was the first
    in a series of five films made between 1968 and 1973, all
    produced by Arthur P. Jacobs and released by 20th
    Century Fox.
    Whereas serif typefaces generally benefit from tighter line-height.

    View full-size slide

  28. -
    Typographically correct dashes
    Let’s turn our attention to using typographically correct glyphs. We’ll start with a common hyphen.

    View full-size slide

  29. Use a hyphen to break words over two lines.
    Planet of the Apes is a 1968 American scie-
    nce fiction film directed by Franklin J.
    Schaffner, based on the 1963 French novel
    La Planète des singes by Pierre Boulle. The
    film stars Charlton Heston, Roddy
    McDowall, Maurice Evans, Kim Hunter and
    Linda Harrison. It was the first in a series of
    five films made between 1968 and 1973, all
    produced by Arthur P. Jacobs and relea-
    sed by 20th Century Fox.

    View full-size slide

  30. short-lived
    Or to combine two or more words.

    View full-size slide


  31. An en dash

    View full-size slide

  32. Pages 90–100
    Use an en dash to denote a range.
    Ages 9–10
    May–August 1967
    Earth–Mars

    View full-size slide

  33. HTML: – –
    Mac: Alt + -
    Windows: Alt + 0150
    Use an en dash to denote a range.

    View full-size slide


  34. An em dash

    View full-size slide

  35. Use an em dash to denote a pause, or a separate train of thought within a sentence.
    Taylor is recaptured by
    gorillas and — his injured
    throat now healed — shouts
    “Take your stinking paws off
    me, you damn dirty ape!”

    View full-size slide

  36. Separate em dashes with hair spaces or no spaces at all depending on the typeface.
    (This slide contains a deliberate mistake. More on that in just a moment.)
    Taylor is recaptured by
    gorillas and — his injured
    throat now healed — shouts
    "Take your stinking paws off
    me, you damn dirty ape!"

    View full-size slide

  37. HTML: — —
    Mac: Alt + Shift + -
    Windows: Alt + 0151
    Use an em dash to denote a pause, or a separate train of thought within a sentence.

    View full-size slide

  38. Hairspace   one-tenth to one-
    sixteenth of an em
    Thinspace   one-fifth of an em
    Here are the typographically correct entities for spaces.

    View full-size slide

  39. Two adjacent em dashes can be used to indicate missing letters in a word.
    ape sh——

    View full-size slide

  40. '
    Typographically correct quote marks
    Let’s talk about something else that I go ape sh—— about. This is a prime.

    View full-size slide

  41. "
    Here’s a double prime.

    View full-size slide

  42. 5' 11" (distance)
    Use single and double primes for feet and inches. (This is the standing height of a gorilla.)

    View full-size slide

  43. 5' 11" (time)
    A single prime can also denote minutes while a double prime can denote seconds.

    View full-size slide

  44. " "
    But what primes should not—no, not ever—denote are quotations.

    View full-size slide

  45. “ ”
    Quotes are generally curly, they look like sixes and like nines.

    View full-size slide

  46. HTML: “ “
    Mac: Alt + [
    Windows: Alt + 0147
    These are the correct entities for double ‘curly’ quotes.
    HTML: ” ”
    Mac: Alt + Shift + [
    Windows: Alt + 0148


    View full-size slide

  47. HTML: ‘ ‘
    Mac: Alt + ]
    Windows: Alt + 0145
    And the correct entities for single ‘curly’ quotes.
    HTML: ’ ’
    Mac: Alt + Shift + ]
    Windows: Alt + 0146


    View full-size slide


  48. An ellipsis

    View full-size slide

  49. HTML: … …
    Mac: Alt + ;
    Windows: Alt + 0133
    An ellipsis is not three periods. It just isn’t.

    View full-size slide

  50. Planet of the Apes is a 1968 American science fiction film directed by
    Franklin J. Schaffner, based on the 1963 French novel La Planète des singes
    by Pierre Boulle. The film stars Charlton Heston, Roddy McDowall, Maurice
    Evans, Kim Hunter and Linda Harrison. It was the first in a series of five films
    made between 1968 and 1973, all produced byArthur P. Jacobs and released
    by 20th Century Fox.
    The film tells the story of an astronaut crew who crash-land on a strange
    planet in the distant future. Although the planet appears desolate at first, the
    surviving crew members stumble upon a society in which apes have evolved
    into creatures with human-like intelligence and speech. The apes have
    assumed the role of the dominant species and humans are mute creatures
    wearing animal skins.
    All too often in body text, we see paragraphs that are too loosely spaced. That’s because
    margin-bottom’s been set at a full line’s height. In this case that’s 1.5em.

    View full-size slide

  51. Planet of the Apes is a 1968 American science fiction film directed by
    Franklin J. Schaffner, based on the 1963 French novel La Planète des singes
    by Pierre Boulle. The film stars Charlton Heston, Roddy McDowall, Maurice
    Evans, Kim Hunter and Linda Harrison. It was the first in a series of five films
    made between 1968 and 1973, all produced byArthur P. Jacobs and released
    by 20th Century Fox.
    The film tells the story of an astronaut crew who crash-land on a strange
    planet in the distant future. Although the planet appears desolate at first, the
    surviving crew members stumble upon a society in which apes have evolved
    into creatures with human-like intelligence and speech. The apes have
    assumed the role of the dominant species and humans are mute creatures
    wearing animal skins.
    In long-form text, can improve readability by reducing margin-bottom to half of one line.

    View full-size slide

  52. p {
    margin-bottom : 1.5em;
    }
    article > p {
    margin-bottom : .75em;
    }
    Reduce margin-bottom by half for long-form text, for example within articles.

    View full-size slide

  53. Planet of the Apes is a 1968 American science fiction film directed
    by Franklin J. Schaffner, based on the 1963 French novel La
    Planète des singes by Pierre Boulle. The film stars Charlton
    Heston, Roddy McDowall, Maurice Evans, Kim Hunter and Linda
    Harrison. It was the first in a series of five films made between
    1968 and 1973, all produced byArthur P. Jacobs and released by
    20th Century Fox.
    The film tells the story of an astronaut crew who crash-land on a
    strange planet in the distant future. Although the planet appears
    desolate at first, the surviving crew members stumble upon a
    society in which apes have evolved into creatures with human-
    like intelligence and speech. The apes have assumed the role of
    the dominant species and humans are mute creatures wearing
    animal skins.
    The film was released on February 8, 1968, in the United States
    and was a commercial success, gaining $32,589,624 at the
    international box office.
    Planet of the Apes is a 1968 American science fiction film directed
    by Franklin J. Schaffner, based on the 1963 French novel La
    Planète des singes by Pierre Boulle. The film stars Charlton
    Heston, Roddy McDowall, Maurice Evans, Kim Hunter and Linda
    Harrison. It was the first in a series of five films made between
    1968 and 1973, all produced byArthur P. Jacobs and released by
    20th Century Fox.
    The film tells the story of an astronaut crew who crash-land on a
    strange planet in the distant future. Although the planet appears
    desolate at first, the surviving crew members stumble upon a
    society in which apes have evolved into creatures with human-
    like intelligence and speech. The apes have assumed the role of
    the dominant species and humans are mute creatures wearing
    animal skins.
    The film was released on February 8, 1968, in the United States
    and was a commercial success, gaining $32,589,624 at the
    international box office.
    Here’s a comparison, a full line’s height between paragraphs on the left, a half line on the right.

    View full-size slide

  54. Planet of the Apes is a 1968 American science fiction film directed by
    Franklin J. Schaffner, based on the 1963 French novel La Planète des singes
    by Pierre Boulle. The film stars Charlton Heston, Roddy McDowall, Maurice
    Evans, Kim Hunter and Linda Harrison. It was the first in a series of five films
    made between 1968 and 1973, all produced byArthur P. Jacobs and released
    by 20th Century Fox.
    The film tells the story of an astronaut crew who crash-land on a strange
    planet in the distant future. Although the planet appears desolate at first, the
    surviving crew members stumble upon a society in which apes have evolved
    into creatures with human-like intelligence and speech. The apes have
    assumed the role of the dominant species and humans are mute creatures
    wearing animal skins.
    Designers might also choose to indent, rather than space. Never do both and
    never indent the first paragraph in any section.

    View full-size slide

  55. Planet of the Apes is a 1968 American science fiction film directed by
    Franklin J. Schaffner, based on the 1963 French novel La Planète des singes
    by Pierre Boulle. The film stars:
    • Charlton Heston as George Taylor
    • Roddy McDowall as Cornelius
    • Kim Hunter as Zira
    • Maurice Evans as Dr. Zaius
    The film was released on February 8, 1968, in the United States and was a
    commercial success, gaining $32,589,624 at the international box office.
    Let’s talk about the typographic detail that causes the most arguments
    between me and my clients. Look at the unordered list above,

    View full-size slide

  56. Planet of the Apes is a 1968 American science fiction film directed by
    Franklin J. Schaffner, based on the 1963 French novel La Planète des singes
    by Pierre Boulle. The film stars:
    • Charlton Heston as George Taylor
    • Roddy McDowall as Cornelius
    • Kim Hunter as Zira
    • Maurice Evans as Dr. Zaius
    The film was released on February 8, 1968, in the United States and was a
    commercial success, gaining $32,589,624 at the international box office.
    See how, when your eye’s finished reading a line, it takes a fraction longer to
    find the start of the next as the list isn’t flush with the left reading edge.

    View full-size slide

  57. Planet of the Apes is a 1968 American science fiction film directed by
    Franklin J. Schaffner, based on the 1963 French novel La Planète des singes
    by Pierre Boulle. The film stars:
    • Charlton Heston as George Taylor. Heston was an American actor and
    • Roddy McDowall as Cornelius. Roderick Andrew Anthony Jude "Roddy"
    • Kim Hunter as Zira. Hunter was an American film, theatre, and television
    • Maurice Evans as Dr. Zaius. Evans was an English actor noted for his
    The film was released on February 8, 1968, in the United States and was a
    commercial success, gaining $32,589,624 at the international box office.
    political activist. As a Hollywood star he appeared in 100 films over the
    course of 60 years.
    McDowall was an English actor, director, photographer and voice artist.
    actress. She won both an Academy Award and a Golden Globe Award.
    interpretations of Shakespearean characters.
    Longer sentences inside lists only make matters worse.

    View full-size slide

  58. Planet of the Apes is a 1968 American science fiction film directed by
    Franklin J. Schaffner, based on the 1963 French novel La Planète des singes
    by Pierre Boulle. The film stars:
    • Charlton Heston as George Taylor. Heston was an American actor and
    • Roddy McDowall as Cornelius. Roderick Andrew Anthony Jude "Roddy"
    • Kim Hunter as Zira. Hunter was an American film, theatre, and television
    • Maurice Evans as Dr. Zaius. Evans was an English actor noted for his
    The film was released on February 8, 1968, in the United States and was a
    commercial success, gaining $32,589,624 at the international box office.
    political activist. As a Hollywood star he appeared in 100 films over the
    course of 60 years.
    McDowall was an English actor, director, photographer and voice artist.
    actress. She won both an Academy Award and a Golden Globe Award.
    interpretations of Shakespearean characters.
    These tiny decisions make reading more difficult.

    View full-size slide

  59. Planet of the Apes is a 1968 American science fiction film directed by
    Franklin J. Schaffner, based on the 1963 French novel La Planète des singes
    by Pierre Boulle. The film stars:
    • Charlton Heston as George Taylor. Heston was an American actor and
    political activist. As a Hollywood star he appeared in 100 films over the
    course of 60 years.
    • Roddy McDowall as Cornelius. Roderick Andrew Anthony Jude "Roddy"
    McDowall was an English actor, director, photographer and voice artist.
    • Kim Hunter as Zira. Hunter was an American film, theatre, and television
    actress. She won both an Academy Award and a Golden Globe Award.
    • Maurice Evans as Dr. Zaius. Evans was an English actor noted for his
    interpretations of Shakespearean characters.
    The film was released on February 8, 1968, in the United States and was a
    commercial success, gaining $32,589,624 at the international box office.
    Instead, preserve a clean left reading edge by placing markers in the margin.

    View full-size slide

  60. Planet of the Apes is a 1968 American science fiction film directed by
    Franklin J. Schaffner, based on the 1963 French novel La Planète des singes
    by Pierre Boulle. The film stars:
    • Charlton Heston as George Taylor. Heston was an American actor and
    political activist. As a Hollywood star he appeared in 100 films over the
    course of 60 years.
    • Roddy McDowall as Cornelius. Roderick Andrew Anthony Jude "Roddy"
    McDowall was an English actor, director, photographer and voice artist.
    • Kim Hunter as Zira. Hunter was an American film, theatre, and television
    actress. She won both an Academy Award and a Golden Globe Award.
    • Maurice Evans as Dr. Zaius. Evans was an English actor noted for his
    interpretations of Shakespearean characters.
    The film was released on February 8, 1968, in the United States and was a
    commercial success, gaining $32,589,624 at the international box office.
    This makes reading easier and the page looks better too.

    View full-size slide

  61. ul, ol {
    list-style-position : inside;
    margin : 3em 0; }
    @media(min-width:48em) {
    ul, ol {
    list-style-position : outside;
    margin : 1.4em 0; }
    }
    However don’t place markers in the margins on small screens. There, margins are usually too narrow.

    View full-size slide

  62. Planet of the Apes is a 1968 American science
    fiction film directed by Franklin J. Schaffner, based
    on the 1963 French novel La Planète des singes by
    Pierre Boulle. The film stars:
    • Charlton Heston as George Taylor
    • Roddy McDowall as Cornelius
    • Kim Hunter as Zira
    • Maurice Evans as Dr. Zaius
    The film was released on February 8, 1968, in the
    United States and was a commercial success,
    gaining $32,589,624 at the international box office.
    Instead, double top and bottom margins.

    View full-size slide

  63. Planet of the Apes is a 1968 American science fiction film directed by
    Franklin J. Schaffner, based on the 1963 French novel La Planète des singes
    by Pierre Boulle. The film stars:
    • Charlton Heston as George Taylor. Heston was an American actor and
    political activist. As a Hollywood star he appeared in 100 films over the
    course of 60 years.
    • Roddy McDowall as Cornelius. Roderick Andrew Anthony Jude "Roddy"
    McDowall was an English actor, director, photographer and voice artist.
    • Kim Hunter as Zira. Hunter was an American film, theatre, and television
    actress. She won both an Academy Award and a Golden Globe Award.
    • Maurice Evans as Dr. Zaius. Evans was an English actor noted for his
    interpretations of Shakespearean characters.
    The film was released on February 8, 1968, in the United States and was a
    commercial success, gaining $32,589,624 at the international box office.
    Then change those margins at a wider breakpoint.

    View full-size slide

  64. Planet of the Apes © 20th Century Fox.
    Let’s move onto some typography details, in particular the copyright symbol from the site’s footer.

    View full-size slide

  65. of the Apes © 20th Centu
    Notice how the outer circle sits on the baseline, making the inner ‘c’ appear too high.
    We can fix that with a little baseline shift.

    View full-size slide

  66. of the Apes © 20th Centu
    Shift the copyright symbol to slightly below the baseline, part way between the circle and inner ‘c.’

    View full-size slide

  67. ©
    .copy {
    position : relative;
    top : .08em; }
    This is precisely what CSS relative positioning was intended to achieve. This
    technique does require an extra element, but the devil is always in the details.

    View full-size slide

  68. of the Apes © 20th Centu
    of the Apes © 20th Centu
    Compare the original, non-shifted symbol (above) with the baseline shifted alternative (below.)

    View full-size slide

  69. Charlton Heston
    ( )
    Notice how the large parentheses fall below the baseline and have a strange relationship to the
    letter ‘C?’ We can fix that with baseline shift too.

    View full-size slide

  70. Charlton Heston
    ( )
    Shift the parentheses up to just below the baseline and reduce their size.
    By how much will depend on the typeface.

    View full-size slide

  71. (
    Charlton Heston
    )
    .parenthesis {
    position : relative;
    font-size : 88%;
    top : -.08em; }
    This technique does require an extra element.

    View full-size slide

  72. Charlton Heston
    ( )
    Charlton Heston
    ( )
    Compare the original, non-shifted parentheses (above) with the baseline shifted alternatives (below.)

    View full-size slide

  73. Pages 90–100
    Pages 90–100
    Has it ever bugged you that a dash sits a little too close to the baseline?

    View full-size slide

  74. Pages 90—100
    .dash {
    position : relative;
    top : -.08em; }
    Let’s shift those too.

    View full-size slide

  75. Brand Name
    By Author's Name
    Design Persona
    Let’s talk about how we start a design process. We often work with clients on a ‘design persona interview’

    View full-size slide

  76. Overview
    Write an overview of the brand personality.
    If your brand were a person, who would it
    be?
    Maybe you have a mascot which already is the visual
    representation of the brand personality. If so, describe its traits
    and how that relates to the personality you want to convey.
    Start by asking who our personality would be?

    View full-size slide

  77. Overview
    Freddie Von Chimpenheimer IV is the face
    of MailChimp, and the embodiment of the
    brand personality. Freddie's stout frame
    communicates the power of the application,
    and his always on the go posture lets people
    know this brand means business.
    Freddie always has a kind smile that welcomes users and
    makes them feel comfortable and at home. The cartoon style
    lets people know that MailChimp offers a fun, and informal
    experience. Freddie like to crack jokes, but when the
    situation is serious, the funny business is out the window.
    MailChimp often surprises users with a funny easter egg, or
    a link to a goofy YouTube video. Fun is around every corner,
    but never in the way of the workflow.
    Ours is based on a questionnaire shared by MailChimp.

    View full-size slide

  78. Brand Traits
    FUN but not childish
    FUNNY but not goofy
    POWERFUL but not complicated
    HIP but not alienating
    List 5-7 traits that best describe your brand along with a trait
    that you want to avoid. This will help those designing and
    writing for this design persona create a consistent personality
    while avoiding the traits that would take your brand in the
    wrong direction.
    Here are some examples:
    Asking about ‘traits’ is amazingly helpful in understanding how a customer feels about their brand.

    View full-size slide

  79. Visual Lexicon
    COLOR
    Describe the color palette the design team might use when
    creating the interface. What types of color would be used
    and why?
    TYPOGRAPHY
    Describe the kinds of typography the design team might use
    when creating the interface. What type faces would be used
    and why?
    GENERAL STYLE NOTES
    Provide general notes about design style, textures, imagery,
    and other elements that may be important to shaping the
    design persona.
    These brand traits are clues to visual attributes that we can bring into our design ‘atmosphere.’

    View full-size slide

  80. Pairoo chose Anne Hathaway and Ben Affleck. To them Hathaway signified contemporary elegance.

    View full-size slide

  81. Evolve Beyond
    Gabrielle Benefield
    Flexible Contracts
    Outcome Delivery
    Hot Housing

    View full-size slide

  82. Here’s a technique that I’ve been using since, well,
    forever. Make two strips, one black, one white,
    each 200x50px or a multiple of.

    View full-size slide

  83. 100%
    100%
    75% 50% 25%
    25%
    50%
    75%
    Overlay four squares filled with your chosen
    colour onto both strips. Then change the opacity
    of each square to create a ‘tint.’

    View full-size slide

  84. Use a limited colour palette and use tints to create a
    harmonious scheme from only one or two colours.

    View full-size slide

  85. We often create colour palettes from photographic research.

    View full-size slide

  86. 100% 75% 50% 25%
    This technique has served us for over a decade.

    View full-size slide

  87. Compare the interaction colours on the left with the same colours as seen by a person
    with ‘deuteranopia.’

    View full-size slide

  88. Next compare those interaction colours on the left with the same colours as seen by
    a person with ‘protanopia.’

    View full-size slide

  89. We should consider supporting colour differences with texture and other distinguishing features.

    View full-size slide

  90. Gridset helps to teach that we often need more than one grid.

    View full-size slide

  91. So we should think carefully about how we design different grids for different breakpoint classifications.

    View full-size slide

  92. Especially at the smallest sizes as it’s a mistake to think that small screens only require one column.

    View full-size slide

  93. Related to layout; it’s important to keep proportions relative to the screen or viewport size.
    Planet of the Apes is a 1968
    American science fiction film
    directed by Franklin J. Schaffner,
    based on the 1963 French novel La
    Planète des singes by Pierre Boulle.
    The film stars Charlton Heston,
    Roddy McDowall, Maurice Evans,
    Kim Hunter and Linda Harrison. It
    was the first in a series of five films
    made between 1968 and 1973, all
    produced byArthur P. Jacobs and
    released by 20th Century Fox.

    View full-size slide

  94. For example, don’t forget to increase both margins and padding as sizes become larger.
    The film tells the story of an astronaut crew who crash-land on
    a strange planet in the distant future. Although the planet
    appears desolate at first, the surviving crew members stumble
    upon a society in which apes have evolved into creatures with
    human-like intelligence and speech.
    Planet of the Apes is a 1968 American science fiction film
    directed by Franklin J. Schaffner, based on the 1963 French
    novel La Planète des singes by Pierre Boulle. The film stars
    Charlton Heston, Roddy McDowall, Maurice Evans, Kim Hunter
    and Linda Harrison. It was the first in a series of five films made
    between 1968 and 1973, all produced byArthur P. Jacobs and
    released by 20th Century Fox.

    View full-size slide

  95. The film tells the story of an astronaut crew who crash-land on a strange
    planet in the distant future. Although the planet appears desolate at first, the
    surviving crew members stumble upon a society in which apes have evolved
    into creatures with human-like intelligence and speech.
    Planet of the Apes is a 1968 American science fiction film directed by
    Franklin J. Schaffner, based on the 1963 French novel La Planète des singes
    by Pierre Boulle. The film stars Charlton Heston, Roddy McDowall, Maurice
    Evans, Kim Hunter and Linda Harrison. It was the first in a series of five films
    made between 1968 and 1973, all produced byArthur P. Jacobs and released
    by 20th Century Fox.
    Layout can influence many aspects of a design, from proportions right back to typography.

    View full-size slide

  96. .content {
    padding : 0 5%; }
    @media(min-width:48em) {
    .content {
    padding : 0 10%; }
    }
    @media(min-width:64em) {
    .content {
    padding : 0 15%; }
    }

    View full-size slide

  97. p {
    font-size : 1.8rem; }
    @media(min-width:64em) {
    p {
    font-size : 2.1rem; }
    .secondary {
    font-size : 1.8rem; }
    .tertiary {
    font-size : 1.6rem; }
    }

    View full-size slide


  98. Get your stinking
    paws ‘on’ my design
    you damn dirty
    developers

    View full-size slide

  99. Thanks
    @malarkey

    View full-size slide