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

Get the Look

Get the Look

An expanded version of my Get the Look talk. The original version was given on Saturday, 10 March 2012 at SxSW. I take 3 real-life examples of iconic design styles and explore what it takes to translate the original design idea to the web. Along the way, I explore fun CSS3 properties and how they can be used for great typography online that respects our design roots. In the expanded version, I add more examples and CSS, and I also look at an example that didn't turn out so well.

Sean McBride

May 19, 2012
Tweet

More Decks by Sean McBride

Other Decks in Design

Transcript

  1. View Slide

  2. View Slide

  3. View Slide

  4. Get the
    LOOK
    Use font-face & CSS3 Like the Stars
    @smcbride – [email protected] – seanmcb.com/get-the-look

    View Slide

  5. View Slide

  6. SEAN
    McBRIDE

    View Slide

  7. SEAN
    McBRIDE
    Engineer & Web Developer

    View Slide

  8. SEAN
    McBRIDE
    Engineer & Web Developer
    User Experience Web Developer

    View Slide

  9. ?

    View Slide

  10. View Slide

  11. View Slide

  12. Star’s look

    View Slide

  13. Star’s look
    Your look
    (On a budget)

    View Slide

  14. View Slide

  15. Classic look

    View Slide

  16. Classic look
    Your look
    (On the web)

    View Slide

  17. HAND-PAINTED
    SIGNS

    View Slide

  18. WOOD TYPE POSTERS

    View Slide

  19. MAGAZINE
    SPREAD

    View Slide

  20. CSS3

    View Slide

  21. CSS3
    @font-face
    @media
    background-size
    :before/:after
    column-count
    rgba
    text-shadow
    transform

    View Slide

  22. View Slide

  23. Examples on GitHub
    github.com/seanami/get-the-look-examples

    View Slide

  24. View Slide

  25. “How do I translate a
    CLASSIC LOOK
    into a web page?”

    View Slide

  26. View Slide

  27. Ideas Forms

    View Slide

  28. Jonathan
    Hoefler
    Pivot: AIGA Design Conference
    15 October 2011

    View Slide

  29. Idea DESIGN
    SYSTEM
    Form

    View Slide

  30. DESIGN
    SYSTEM

    View Slide

  31. DESIGN
    SYSTEM

    View Slide

  32. The NY
    Times
    DESIGN
    SYSTEM

    View Slide

  33. The NY
    Times
    DESIGN
    SYSTEM
    DESIGN
    SYSTEM

    View Slide

  34. The NY
    Times
    DESIGN
    SYSTEM
    DESIGN
    SYSTEM

    View Slide

  35. View Slide

  36. View Slide

  37. View Slide

  38. DESIGN
    SYSTEM

    View Slide

  39. Bohemian
    Ensemble
    DESIGN
    SYSTEM

    View Slide

  40. DESIGN
    SYSTEM
    Bohemian
    Ensemble
    DESIGN
    SYSTEM

    View Slide

  41. View Slide

  42. Original
    Form

    View Slide

  43. Original
    Form
    New
    Form

    View Slide

  44. Original
    Form
    New
    Form

    View Slide

  45. DESIGN
    SYSTEM
    Original
    Form
    New
    Form

    View Slide

  46. Original
    Idea
    DESIGN
    SYSTEM
    Original
    Form
    New
    Form

    View Slide

  47. Original
    Idea
    DESIGN
    SYSTEM
    Original
    Form
    DESIGN
    SYSTEM
    New
    Form

    View Slide

  48. View Slide

  49. Hand-Painted
    SIGNS

    View Slide

  50. View Slide

  51. View Slide

  52. View Slide

  53. View Slide

  54. blog.typekit.com/2011/07/19/shading-with-css-text-shadows

    View Slide

  55. View Slide

  56. View Slide

  57. DESIGN
    SYSTEM

    View Slide

  58. Idea DESIGN
    SYSTEM

    View Slide

  59. Idea
    PAINTING
    WOOD/BRICK
    THE ELEMENTS

    View Slide

  60. Eye-catching
    Hand lettering
    Shades/shapes
    Weathered
    PAINTING
    WOOD/BRICK
    THE ELEMENTS

    View Slide

  61. Eye-catching
    Hand lettering
    Shades/shapes
    Weathered
    DESIGN
    SYSTEM

    View Slide

  62. Eye-catching
    Hand lettering
    Shades/shapes
    Weathered
    DESIGN
    SYSTEM

    View Slide

  63. Eye-catching
    Hand lettering
    Shades/shapes
    Weathered
    FONT-FACE
    TEXT-SHADOW
    MASK (WEBKIT)

    View Slide

  64. View Slide

  65. View Slide

  66. @font-face

    View Slide

  67. @font-face Web fonts – Working Draft Global Support – 89%

    View Slide

  68. @font-face Web fonts – Working Draft Global Support – 89%
    caniuse.com

    View Slide

  69. View Slide

  70. @font-face
    @font-face {
    font-family: 'my-family';
    src: url('/url/of/font.woff');
    style: normal;
    weight: 400;
    }

    View Slide

  71. @font-face
    @font-face {
    font-family: 'my-family';
    src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),
    url('myfont-webfont.woff') format('woff'),
    url('myfont-webfont.ttf') format('truetype'),
    url('myfont-webfont.svg#svgFontName') format('svg');
    style: normal;
    weight: 400;
    }

    View Slide

  72. @font-face

    try{Typekit.load();}catch(e){}

    View Slide

  73. View Slide

  74. from Veer
    from Underware

    View Slide

  75. View Slide

  76. View Slide

  77. View Slide

  78. .sign h1 .name {
    transform: rotate(-12deg);
    }
    CSS3 Transform

    View Slide

  79. View Slide

  80. View Slide


  81. ...

    try{Typekit.load();}catch(e){}
    ...

    View Slide

  82. View Slide

  83. View Slide

  84. .sign h1 .name {
    font: 400 normal 20em/1 cursive;
    }
    .sign h1 .welcome, .sign h2 {
    font: 400 normal 7em/1 sans-serif;
    }

    View Slide

  85. .sign h1 .name {
    font: 400 normal 20em/1 “corner-store”, cursive;
    }
    .sign h1 .welcome, .sign h2 {
    font: 400 normal 7em/1 “bello-caps”, sans-serif;
    }

    View Slide

  86. View Slide

  87. View Slide

  88. .sign h1 .name:first-letter {
    font-size: 1.2em;
    }

    View Slide

  89. View Slide

  90. View Slide

  91. text-shadow

    View Slide

  92. text-shadow
    text-shadow: 2px 4px 6px #000;

    View Slide

  93. text-shadow
    text-shadow: 2px 4px 6px #000;
    text-shadow: 2px 4px 0 #000, 4px 8px 0 #fff, ...;

    View Slide

  94. CSS3 Text-shadow – Working Draft Global Support – 61%

    View Slide

  95. View Slide

  96. View Slide

  97. View Slide

  98. PROGRESSIVE
    ENHANCEMENT

    View Slide

  99. .sign h1 .name {
    text-shadow: -8px 8px 0 #b06955;
    }

    View Slide

  100. .sign h1 .name {
    text-shadow: -8px 8px 0 #b06955;
    }
    Horizontal

    View Slide

  101. .sign h1 .name {
    text-shadow: -8px 8px 0 #b06955;
    }
    Vertical

    View Slide

  102. .sign h1 .name {
    text-shadow: -8px 8px 0 #b06955;
    }
    Blur

    View Slide

  103. .sign h1 .name {
    text-shadow: -8px 8px 0 #b06955;
    }
    Color

    View Slide

  104. View Slide

  105. View Slide

  106. .sign h1 .name {
    text-shadow: -3px 3px 0 #393431,
    -8px 8px 0 #b06955;
    }

    View Slide

  107. View Slide

  108. View Slide

  109. .sign h1 .name {
    text-shadow: -3px 3px 0 #393431,
    0 3px 0 #393431,
    -3px 0 0 #393431,
    -4px 4px 0 #b06955,
    -6px 6px 0 #b06955,
    -8px 8px 0 #b06955;
    }

    View Slide

  110. View Slide

  111. View Slide

  112. View Slide

  113. View Slide

  114. View Slide

  115. View Slide

  116. View Slide

  117. mask

    View Slide

  118. mask
    mask: url(mask.png) no-repeat center top;

    View Slide

  119. CSS3 Masks – Uno cial Global Support – 36%

    View Slide

  120. mask
    mask: url(mask.png) no-repeat center top;

    View Slide

  121. mask
    -webkit-mask: url(mask.png) no-repeat center top;
    mask: url(mask.png) no-repeat center top;

    View Slide

  122. View Slide

  123. Transparent Image

    View Slide

  124. View Slide

  125. .sign {
    background: #000 url(images/wood.png) 4.5em 0;
    }

    View Slide

  126. View Slide

  127. PROGRESSIVE
    ENHANCEMENT

    View Slide

  128. View Slide

  129. View Slide

  130. .sign h1 {
    -webkit-mask: url(images/wood.png) 4.5em 0;
    mask: url(images/wood.png) 4.5em 0;
    }
    .sign h2 {
    -webkit-mask: url(images/wood.png) -9.32em -6em;
    mask: url(images/wood.png) -9.32em -6em;
    }

    View Slide

  131. View Slide

  132. View Slide

  133. View Slide

  134. Hand-painted sign

    View Slide

  135. @font-face – hand-lettered look
    Hand-painted sign

    View Slide

  136. @font-face – hand-lettered look
    text-shadow – sign painter’s shade
    Hand-painted sign

    View Slide

  137. @font-face – hand-lettered look
    text-shadow – sign painter’s shade
    mask – weathered, wooden texture
    Hand-painted sign

    View Slide

  138. Get the
    LOOK
    Use font-face & CSS3 Like the Stars
    @smcbride – [email protected] – seanmcb.com/get-the-look

    View Slide

  139. View Slide

  140. Wood
    Type
    Poster

    View Slide

  141. View Slide

  142. View Slide

  143. View Slide

  144. View Slide

  145. View Slide

  146. View Slide

  147. View Slide

  148. www.leodis.net/playbills

    View Slide

  149. DESIGN
    SYSTEM

    View Slide

  150. Idea DESIGN
    SYSTEM

    View Slide

  151. Idea
    PRINTING
    PAPER/INK
    MOVEABLE TYPE

    View Slide

  152. Overwhelming
    Typeface variety
    Hierarchy
    Full-width
    PRINTING
    PAPER/INK
    MOVEABLE TYPE

    View Slide

  153. DESIGN
    SYSTEM
    Overwhelming
    Typeface variety
    Hierarchy
    Full-width

    View Slide

  154. DESIGN
    SYSTEM
    Overwhelming
    Typeface variety
    Hierarchy
    Full-width

    View Slide

  155. FONT-FACE
    TEXT-SHADOW
    RGBA COLOR
    PSEUDO-ELEMENTS
    Overwhelming
    Typeface variety
    Hierarchy
    Full-width

    View Slide

  156. View Slide

  157. View Slide

  158. View Slide

  159. @font-face

    View Slide

  160. @font-face
    Many fonts File size

    View Slide

  161. @font-face
    144 Kb
    6 fonts

    View Slide

  162. from Barry Schwartz

    View Slide

  163. from Veer
    from Wood Type Revival
    from Adobe

    View Slide

  164. from Wood Type Revival

    View Slide

  165. from Wood Type Revival

    View Slide

  166. from Wood Type Revival

    View Slide

  167. from Wood Type Revival

    View Slide

  168. View Slide

  169. rgba color

    View Slide

  170. rgba color
    background: #000;

    View Slide

  171. rgba color
    background: rgba(0, 0, 0, 1);

    View Slide

  172. rgba color
    background: rgba(0, 0, 0, 0.5);

    View Slide

  173. rgba color
    background: rgba(0, 0, 0, 0.5);
    color: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.5);
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);

    View Slide

  174. CSS3 Colors – Recommendation Global Support – 75%

    View Slide

  175. rgba color
    color: #999;
    color: rgba(0, 0, 0, 0.5);

    View Slide

  176. rgba color
    color: #999;
    color: rgba(0, 0, 0, 0.5); PROGRESSIVE
    ENHANCEMENT

    View Slide

  177. rgba color
    color: #999;
    color: rgba(0, 0, 0, 0.5);

    View Slide

  178. View Slide

  179. .para4 .condensed {
    color: #5d608f;
    }

    View Slide

  180. .para4 .condensed {
    color: #5d608f;
    text-shadow: 0.02em 0.02em 0 rgba(217, 20, 43, 0.75);
    }

    View Slide

  181. View Slide

  182. View Slide

  183. .para4 .condensed {
    color: #5d608f;
    color: rgba(45, 57, 128, 0.75);
    text-shadow: 0.02em 0.02em 0 rgba(217, 20, 43, 0.75);
    }

    View Slide

  184. View Slide

  185. View Slide

  186. View Slide

  187. View Slide

  188. :before + content

    View Slide

  189. :before + content
    h1:before {
    }
    h1:after {
    }
    Test

    View Slide

  190. :before + content
    h1:before {
    }
    h1:after {
    }
    Test
    Test

    View Slide

  191. :before + content
    h1:before {
    content: "1";
    }
    h1:after {
    content: "2";
    }
    Test
    Test

    View Slide

  192. :before + content
    h1:before {
    content: "1";
    }
    h1:after {
    content: "2";
    }
    Test
    1Test2

    View Slide

  193. :before + content
    h1:before {
    content: attr(data-one);
    }
    h1:after {
    content: attr(data-two);
    }
    Test
    1Test2

    View Slide

  194. CSS Generated content – Recommendation Global Support – 88%

    View Slide

  195. View Slide

  196. data-content="Greater Number">
    Greater Number

    View Slide

  197. <br/>$(function() {<br/>$('.chroma').each(function() {<br/>$(this).attr('data-content', $(this).text());<br/>});<br/>});<br/>

    View Slide

  198. View Slide

  199. View Slide

  200. .chroma:before {
    color: #999;
    content: attr(data-content);
    font-family: "delittle-chromatic-inlay";
    }

    View Slide

  201. View Slide

  202. View Slide

  203. .chroma {
    position: relative;
    }
    .chroma:before {
    color: #999;
    display: block;
    content: attr(data-content);
    font-family: "delittle-chromatic-inlay";
    position: absolute;
    width: 100%;
    }

    View Slide

  204. View Slide

  205. View Slide

  206. .chroma:before {
    color: #999;
    display: block;
    content: attr(data-content);
    font-family: "delittle-chromatic-inlay";
    position: absolute;
    top: 0.065em;
    width: 100%;
    }

    View Slide

  207. View Slide

  208. View Slide

  209. .para3 .chroma {
    color: #5d608f;
    color: rgba(45, 57, 128, 0.75);
    text-shadow: 0.04em 0.03em 0 rgba(199, 162, 12, 0.5);
    }
    .para3 .chroma:before {
    color: #dd434d;
    }

    View Slide

  210. View Slide

  211. View Slide

  212. View Slide

  213. View Slide

  214. PROGRESSIVE
    ENHANCEMENT

    View Slide

  215. View Slide

  216. Wood type poster

    View Slide

  217. @font-face – variety of quirky styles
    Wood type poster

    View Slide

  218. @font-face – variety of quirky styles
    rgba color – texture, double-printing
    Wood type poster

    View Slide

  219. @font-face – variety of quirky styles
    rgba color – texture, double-printing
    :before + content – chromatic type
    Wood type poster

    View Slide

  220. Get the
    LOOK
    Use font-face & CSS3 Like the Stars
    @smcbride – [email protected] – seanmcb.com/get-the-look

    View Slide

  221. View Slide

  222. MAGAZINE
    Spread

    View Slide

  223. View Slide

  224. View Slide

  225. View Slide

  226. View Slide

  227. View Slide

  228. DESIGN
    SYSTEM

    View Slide

  229. Idea DESIGN
    SYSTEM

    View Slide

  230. Idea PRINTED BOOK
    PERIODICAL
    STANDARD SIZE

    View Slide

  231. Elegance
    High-contrast type
    Photos / color
    Full use of page
    PRINTED BOOK
    PERIODICAL
    STANDARD SIZE

    View Slide

  232. DESIGN
    SYSTEM
    Elegance
    High-contrast type
    Photos / color
    Full use of page

    View Slide

  233. DESIGN
    SYSTEM
    Elegance
    High-contrast type
    Photos / color
    Full use of page

    View Slide

  234. FONT-FACE
    COLUMN-COUNT
    BACKGROUND-SIZE
    RESPONSIVE
    Elegance
    High-contrast type
    Photos / color
    Full use of page

    View Slide

  235. View Slide

  236. View Slide

  237. @font-face

    View Slide

  238. from TypeTogether

    View Slide

  239. from Phil’s Fonts / Darden

    View Slide

  240. View Slide

  241. columns

    View Slide

  242. columns
    column-count: 3;

    View Slide

  243. columns
    column-count: 3;
    column-width: 30em;

    View Slide

  244. columns
    column-count: 3;
    column-width: 30em;
    column-gap: 2em;
    column-rule: 1px solid #ccc;
    column-span: all;

    View Slide

  245. CSS3 Multiple column layout – Candidate Recommendation Global Support – 58.91%

    View Slide

  246. columns
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;

    View Slide

  247. View Slide

  248. .text {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
    -moz-column-gap: 1em;
    -webkit-column-gap: 1em;
    column-gap: 1em;
    }

    View Slide

  249. View Slide

  250. View Slide

  251. View Slide

  252. fittext.js

    View Slide

  253. View Slide

  254. View Slide

  255. View Slide

  256. ttextjs.com

    View Slide

  257. View Slide

  258. View Slide

  259. <br/>$(function() { $('.heading h1').fitText(5.7) });<br/>

    View Slide

  260. View Slide

  261. View Slide

  262. View Slide

  263. responsive design

    View Slide

  264. responsive design
    “The control which designers know in the print
    medium, and often desire in the web medium, is
    simply a function of the limitation of the printed page.
    We should embrace the fact that the web doesn’t have
    the same constraints, and design for this exibility.”
    John Allsopp, “A Dao of Web Design”

    View Slide

  265. View Slide

  266. View Slide

  267. View Slide

  268. abookapart.com

    View Slide

  269. View Slide

  270. Responsive design

    View Slide

  271. Fluid layout
    Flexible images
    Media queries

    View Slide

  272. Fluid layout

    View Slide

  273. Fluid layout
    Horizontal measurements in %

    View Slide

  274. Fluid layout
    Horizontal measurements in %
    FitText.js for full-width heading
    Viewport meta tag for mobile devices

    View Slide

  275. Fluid layout
    Horizontal measurements in %
    FitText.js for full-width heading
    Viewport meta tag for mobile devices
    content="width=device-width, initial-scale=1.0">

    View Slide

  276. Flexible images

    View Slide

  277. Flexible images
    Scaling background image using background-size

    View Slide

  278. Flexible images
    Scaling background image using background-size
    html {
    background: #00a3b0 url(images/background.jpg)
    no-repeat top center;
    background-size: cover;
    }

    View Slide

  279. CSS3 Background-image options – Candidate Rec Global Support – 74%

    View Slide

  280. Media queries

    View Slide

  281. Media queries
    Overriding CSS properties in certain situations

    View Slide

  282. Media queries
    Overriding CSS properties in certain situations
    @media screen and (max-width: 400px) {
    .heading h2 {
    font-size: 2em;
    }
    }

    View Slide

  283. Media queries
    Overriding CSS properties in certain situations
    Choosing breakpoints

    View Slide

  284. CSS3 Media queries – Proposed Recommendation Global Support – 75%

    View Slide

  285. 1024px breakpoint
    Before After

    View Slide

  286. 640px breakpoint
    Before / After

    View Slide

  287. .text {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
    margin: 0 40% 2em 5%;
    }

    View Slide

  288. .text {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
    margin: 0 40% 2em 5%;
    }

    View Slide

  289. .text {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
    margin: 0 40% 2em 5%;
    }

    View Slide

  290. .text {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
    margin: 0 40% 2em 5%;
    }
    @media screen and (max-width: 1024px) {
    .text {
    margin: 1em 5% 2em;
    }
    }

    View Slide

  291. .text {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
    margin: 0 40% 2em 5%;
    }
    @media screen and (max-width: 640px) {
    .text {
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1;
    }
    }
    @media screen and (max-width: 1024px) {
    .text {
    margin: 1em 5% 2em;
    }
    }

    View Slide

  292. Magazine spread

    View Slide

  293. @font-face – elegant, high-contrast
    Magazine spread

    View Slide

  294. @font-face – elegant, high-contrast
    columns – shorten lines at wide widths
    Magazine spread

    View Slide

  295. @font-face – elegant, high-contrast
    columns – shorten lines at wide widths
    Magazine spread
    ttext.js – t headline to available space

    View Slide

  296. @font-face – elegant, high-contrast
    columns – shorten lines at wide widths
    Magazine spread
    ttext.js – t headline to available space
    responsive design – adapt to canvas

    View Slide

  297. View Slide

  298. BOOK
    EARLY PRINTED

    View Slide

  299. View Slide

  300. View Slide

  301. View Slide

  302. View Slide

  303. View Slide

  304. Not every design
    translates well

    View Slide

  305. View Slide

  306. Form imitates
    another form

    View Slide

  307. What part of the idea
    is still unique?

    View Slide

  308. View Slide

  309. “How do I translate a
    CLASSIC LOOK
    into a web page?”

    View Slide

  310. View Slide

  311. Original
    Form
    New
    Form

    View Slide

  312. Original
    Idea
    DESIGN
    SYSTEM
    Original
    Form
    DESIGN
    SYSTEM
    New
    Form

    View Slide

  313. CSS3

    View Slide

  314. CSS3
    @font-face
    @media
    background-size
    :before/:after
    column-count
    rgba
    text-shadow
    transform

    View Slide

  315. CSS3
    @font-face
    @media
    background-size
    :before/:after
    column-count
    rgba
    text-shadow
    transform
    PROGRESSIVE
    ENHANCEMENT

    View Slide

  316. CSS3
    @font-face
    @media
    background-size
    :before/:after
    column-count
    rgba
    text-shadow
    transform

    View Slide

  317. View Slide

  318. Imitate a form

    View Slide

  319. Imitate a form
    Translate an idea

    View Slide

  320. Imitate a form
    Translate an idea
    Full use of medium

    View Slide

  321. View Slide

  322. is hiring!

    View Slide

  323. Get the
    LOOK
    seanmcb.com/get-the-look
    [email protected]
    @smcbride

    View Slide

  324. Fashion 1 by Stephen Drake
    4/5
    Hey there by Petra Cross
    6
    Flickr
    Image
    Credits
    Soda Crackers by Lane Pearman
    26
    Hand-Made Signs in Baltimore by Colin Dunn
    25
    Brooklyn Circus SF by Damon Styer
    27
    The Phoenix Pub by Damon Styer
    27
    Quiet by Damon Styer
    27
    Far West Harvest by Damon Styer
    28
    Hand-Made Signs in Baltimore by Colin Dunn
    31
    Glyphs hunter by Camil Tulcan
    69
    The a Mano / Dean... by Nick Sherman
    70
    On the press by Nick Sherman
    71
    Moldy kiss by Nick Sherman
    72
    Hamilton's Wood Type... by Nick Sherman
    73
    Modern Honors Bound by Nick Sherman
    73
    1987 Vogue layout spread by Nate Bolt
    106
    Responsive Web Design by Jason Santa Maria
    131
    Moldy kiss by Nick Sherman
    72
    Gutenberg Bible by NYC Wanderer
    144
    Gutenburg Press by Kill le
    145
    Gutenberg Bible, rubrication by vlasta2
    146
    Portion of an early parchment... by kladcat
    149

    View Slide