Get the Look

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

@smcbride [email protected]

SEAN McBRIDE

SEAN McBRIDE Engineer & Web Developer

SEAN McBRIDE Engineer & Web Developer User Experience Web Developer

Star’s look

Star’s look Your look (On a budget)

Classic look

Classic look Your look (On the web)

HAND-PAINTED SIGNS

WOOD TYPE POSTERS

MAGAZINE SPREAD

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

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

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

Ideas Forms

Jonathan Hoeﬂer Pivot: AIGA Design Conference 15 October 2011

Idea DESIGN SYSTEM Form

DESIGN SYSTEM

The NY Times DESIGN SYSTEM

The NY Times DESIGN SYSTEM DESIGN SYSTEM

DESIGN SYSTEM

Bohemian Ensemble DESIGN SYSTEM

DESIGN SYSTEM Bohemian Ensemble DESIGN SYSTEM

Original Form

Original Form New Form

DESIGN SYSTEM Original Form New Form

Original Idea DESIGN SYSTEM Original Form New Form

Original Idea DESIGN SYSTEM Original Form DESIGN SYSTEM New Form

Hand-Painted SIGNS

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

DESIGN SYSTEM

Idea DESIGN SYSTEM

Idea PAINTING WOOD/BRICK THE ELEMENTS

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

Eye-catching Hand lettering Shades/shapes Weathered DESIGN SYSTEM

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

@font-face

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

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

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

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

@font-face <script src="http://use.typekit.com/rck3htg.js"></script> <script>try{Typekit.load();}catch(e){}</script>

from Veer from Underware

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

<head> ... <script src="http://use.typekit.com/rck3htg.js"></script> <script>try{Typekit.load();}catch(e){}</script> ... </head>

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

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

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

text-shadow

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

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

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

PROGRESSIVE ENHANCEMENT

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

Horizontal

Vertical

Blur

Color

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

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

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

CSS3 Masks – Uno cial Global Support – 36%

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

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

Transparent Image

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

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

Hand-painted sign

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

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

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

Wood Type Poster

www.leodis.net/playbills

DESIGN SYSTEM

Idea DESIGN SYSTEM

Idea PRINTING PAPER/INK MOVEABLE TYPE

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

DESIGN SYSTEM Overwhelming Typeface variety Hierarchy Full-width

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

@font-face

@font-face Many fonts File size

@font-face 144 Kb 6 fonts

from Barry Schwartz

from Veer from Wood Type Revival from Adobe

from Wood Type Revival

rgba color

rgba color background: #000;

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

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

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

CSS3 Colors – Recommendation Global Support – 75%

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

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

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

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

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

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

:before + content

:before + content h1:before { } h1:after { } <h1>Test</h1>

:before + content h1:before { } h1:after { } <h1>Test</h1>
Test

:before + content h1:before { content: "1"; } h1:after {
content: "2"; } <h1>Test</h1> Test

:before + content h1:before { content: "1"; } h1:after {
content: "2"; } <h1>Test</h1> 1Test2

:before + content h1:before { content: attr(data-one); } h1:after {
content: attr(data-two); } <h1 data-one="1" data-two="2">Test</h1> 1Test2

CSS Generated content – Recommendation Global Support – 88%

<strong class="chroma" data-content="Greater Number"> Greater Number </strong>

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

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

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

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

Wood type poster

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

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

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

MAGAZINE Spread

DESIGN SYSTEM

Idea DESIGN SYSTEM

Idea PRINTED BOOK PERIODICAL STANDARD SIZE

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

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

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

@font-face

from TypeTogether

from Phil’s Fonts / Darden

columns

columns column-count: 3;

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

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

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

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

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

ﬁttext.js

ttextjs.com

responsive design

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”

abookapart.com

Responsive design

Fluid layout Flexible images Media queries

Fluid layout

Fluid layout Horizontal measurements in %

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

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

Flexible images

Flexible images Scaling background image using background-size

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

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

Media queries

Media queries Overriding CSS properties in certain situations

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

Media queries Overriding CSS properties in certain situations Choosing breakpoints

CSS3 Media queries – Proposed Recommendation Global Support – 75%

1024px breakpoint Before After

640px breakpoint Before / After

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

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

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

Magazine spread

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

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

widths Magazine spread ttext.js – t headline to available space

widths Magazine spread ttext.js – t headline to available space responsive design – adapt to canvas

BOOK EARLY PRINTED

Not every design translates well

Form imitates another form

What part of the idea is still unique?

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

Original Form New Form

Original Idea DESIGN SYSTEM Original Form DESIGN SYSTEM New Form

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

Imitate a form

Imitate a form Translate an idea

Imitate a form Translate an idea Full use of medium

is hiring!

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

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

Get the Look

Get the Look

More Decks by Sean McBride

Other Decks in Design

Featured

Transcript