Take your stinking paws off my design you damn dirty developers

1.

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

2.

speakerdeck.com/malarkey @malarkey

3.

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

4.

None

5.

None

6.

None

7.

None

8.

None

9.

None

10.

Elements Captions Headings Labels Legends Lists Paragraphs Quotations Small Tables
Classiﬁcations 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 classiﬁcations.

11.

None

12.

None

13.

None

14.

http://goo.gl/9jRbK

15.

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

16.

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

17.

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

18.

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

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.

20.

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.

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.

22.

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.

23.

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.

24.

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.

25.

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.

26.

ﬁlm directed by Franklin J. Schaﬀner, 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.

27.

ﬁlm directed by Franklin J. Schaﬀner, 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,

28.

ﬁlm directed by Franklin J. Schaﬀner, based on the 1963 French novel La Planète des singes by Pierre Boulle. Here’s that ‘too loose’ line-height again.

29.

ﬁlm directed by Franklin J. Schaﬀner, based on the 1963 French novel La Planète des singes by Pierre Boulle. Tightening line-height in narrow spaces can dramatically improve readability.

30.

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.

31.

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.

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.

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.

34.

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

35.

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.

36.

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.

37.

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

38.

Use a hyphen to break words over two lines. 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.

39.

short-lived Or to combine two or more words.

40.

– An en dash

41.

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

42.

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

43.

— An em dash

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 oﬀ me, you damn dirty ape!”

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 oﬀ me, you damn dirty ape!"

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.

47.

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

48.

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

49.

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

50.

" Here’s a double prime.

51.

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

52.

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

53.

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

54.

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

55.

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

56.

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

57.

… An ellipsis

58.

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

59.

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.

60.

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.

61.

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

62.

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.

63.

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.

64.

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,

65.

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.

66.

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.

67.

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.

68.

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.

69.

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.

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.

71.

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.

72.

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.

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.

74.

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

75.

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

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.

77.

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

78.

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

79.

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

80.

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

81.

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

82.

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

83.

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

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’

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?

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 workﬂow. Ours is based on a questionnaire shared by MailChimp.

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.

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

89.

None

90.

Pairoo chose Anne Hathaway and Ben Aﬄeck. To them Hathaway
signiﬁed contemporary elegance.

91.

None

92.

None

93.

None

94.

None

95.

None

96.

None

97.

None

98.

None

99.

None

100.

Evolve Beyond Gabrielle Beneﬁeld Flexible Contracts Outcome Delivery Hot Housing

101.

None

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.

103.

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

104.

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

105.

None

106.

None

107.

We often create colour palettes from photographic research.

108.

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

109.

None

110.

None

111.

None

112.

None

113.

None

114.

None

115.

None

116.

None

117.

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

118.

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

119.

We should consider supporting colour diﬀerences with texture and other
distinguishing features.

120.

None

121.

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

122.

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

123.

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

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.

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.

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.

127.

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

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; } }

129.

None

130.

None

131.

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

132.

None

133.

None

134.

None

135.

None

136.

Thanks @malarkey

Take your stinking paws off my design you damn dirty developers

Take your stinking paws off my design you damn dirty developers

Want more?

Transcript