Take your stinking paws off my design you damn dirty developers

Transcript

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

   View Slide

2. speakerdeck.com/malarkey
   @malarkey
   

   View Slide

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

   View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

10. 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 Slide

11. View Slide

12. View Slide

13. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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. 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 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. 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 Slide

21. 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 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.
    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 Slide

23. 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 Slide

24. 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 Slide

25. 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 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.
    We often see line-height that’s too loose in boxes,
    narrow columns and sidebars.
    

    View 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.
    Again, our eyes must consciously search for the
    start of the next line,
    

    View Slide

28. 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 Slide

29. 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 Slide

30. 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 Slide

31. 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 Slide

32. 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 Slide

33. 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 Slide

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

    View Slide

35. 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 Slide

36. 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 Slide

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

    View Slide

38. 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 Slide

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

    View Slide

40. –
    An en dash
    

    View Slide

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

    View Slide

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

    View Slide

43. —
    An em dash
    

    View Slide

44. 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 Slide

45. 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 Slide

46. 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

50. "
    Here’s a double prime.
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

57. …
    An ellipsis
    

    View Slide

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

    View 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, 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 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, 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 Slide

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

    View 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, 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 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, 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 Slide

64. 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 Slide

65. 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 Slide

66. 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 Slide

67. 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 Slide

68. 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 Slide

69. 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 Slide

70. 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 Slide

71. 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 Slide

72. 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 Slide

73. 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 Slide

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

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

    View Slide

76. ©
    .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 Slide

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

    View Slide

78. 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

84. 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 Slide

85. 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 Slide

86. 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 Slide

87. 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 Slide

88. 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 Slide

89. View Slide

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

    View Slide

91. View Slide

92. View Slide

93. View Slide

94. View Slide

95. View Slide

96. View Slide

97. View Slide

98. View Slide

99. View Slide

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

     View Slide

101. View Slide

102. 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 Slide

103. 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 Slide

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

     View Slide

105. View Slide

106. View Slide

107. We often create colour palettes from photographic research.
     

     View Slide

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

     View Slide

109. View Slide

110. View Slide

111. View Slide

112. View Slide

113. View Slide

114. View Slide

115. View Slide

116. View Slide

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

     View Slide

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

     View Slide

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

     View Slide

120. View Slide

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

     View Slide

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

     View Slide

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

     View Slide

124. 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 Slide

125. 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 Slide

126. 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 Slide

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

     View Slide

128. 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 Slide

129. View Slide

130. View Slide

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

     View Slide

132. View Slide

133. View Slide

134. View Slide

135. View Slide

136. Thanks
     @malarkey
     

     View Slide