Slide 1
Slide 1 text
No content
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
Get the
LOOK
Use font-face & CSS3 Like the Stars
@smcbride – [email protected] – seanmcb.com/get-the-look
Slide 6
Slide 6 text
SEAN
McBRIDE
Slide 7
Slide 7 text
SEAN
McBRIDE
Engineer & Web Developer
Slide 8
Slide 8 text
SEAN
McBRIDE
Engineer & Web Developer
User Experience Web Developer
Slide 9
Slide 9 text
?
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
Star’s look
Slide 13
Slide 13 text
Star’s look
Your look
(On a budget)
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
Classic look
Slide 16
Slide 16 text
Classic look
Your look
(On the web)
Slide 17
Slide 17 text
HAND-PAINTED
SIGNS
Slide 18
Slide 18 text
WOOD TYPE POSTERS
Slide 19
Slide 19 text
MAGAZINE
SPREAD
Slide 20
Slide 20 text
CSS3
Slide 21
Slide 21 text
CSS3
@font-face
@media
background-size
:before/:after
column-count
rgba
text-shadow
transform
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
Examples on GitHub
github.com/seanami/get-the-look-examples
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
“How do I translate a
CLASSIC LOOK
into a web page?”
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
Ideas Forms
Slide 28
Slide 28 text
Jonathan
Hoefler
Pivot: AIGA Design Conference
15 October 2011
Slide 29
Slide 29 text
Idea DESIGN
SYSTEM
Form
Slide 30
Slide 30 text
DESIGN
SYSTEM
Slide 31
Slide 31 text
DESIGN
SYSTEM
Slide 32
Slide 32 text
The NY
Times
DESIGN
SYSTEM
Slide 33
Slide 33 text
The NY
Times
DESIGN
SYSTEM
DESIGN
SYSTEM
Slide 34
Slide 34 text
The NY
Times
DESIGN
SYSTEM
DESIGN
SYSTEM
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
DESIGN
SYSTEM
Slide 39
Slide 39 text
Bohemian
Ensemble
DESIGN
SYSTEM
Slide 40
Slide 40 text
DESIGN
SYSTEM
Bohemian
Ensemble
DESIGN
SYSTEM
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
Original
Form
Slide 43
Slide 43 text
Original
Form
New
Form
Slide 44
Slide 44 text
Original
Form
New
Form
Slide 45
Slide 45 text
DESIGN
SYSTEM
Original
Form
New
Form
Slide 46
Slide 46 text
Original
Idea
DESIGN
SYSTEM
Original
Form
New
Form
Slide 47
Slide 47 text
Original
Idea
DESIGN
SYSTEM
Original
Form
DESIGN
SYSTEM
New
Form
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
Hand-Painted
SIGNS
Slide 50
Slide 50 text
No content
Slide 51
Slide 51 text
No content
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
No content
Slide 54
Slide 54 text
blog.typekit.com/2011/07/19/shading-with-css-text-shadows
Slide 55
Slide 55 text
No content
Slide 56
Slide 56 text
No content
Slide 57
Slide 57 text
DESIGN
SYSTEM
Slide 58
Slide 58 text
Idea DESIGN
SYSTEM
Slide 59
Slide 59 text
Idea
PAINTING
WOOD/BRICK
THE ELEMENTS
Slide 60
Slide 60 text
Eye-catching
Hand lettering
Shades/shapes
Weathered
PAINTING
WOOD/BRICK
THE ELEMENTS
Slide 61
Slide 61 text
Eye-catching
Hand lettering
Shades/shapes
Weathered
DESIGN
SYSTEM
Slide 62
Slide 62 text
Eye-catching
Hand lettering
Shades/shapes
Weathered
DESIGN
SYSTEM
Slide 63
Slide 63 text
Eye-catching
Hand lettering
Shades/shapes
Weathered
FONT-FACE
TEXT-SHADOW
MASK (WEBKIT)
Slide 64
Slide 64 text
No content
Slide 65
Slide 65 text
No content
Slide 66
Slide 66 text
@font-face
Slide 67
Slide 67 text
@font-face Web fonts – Working Draft Global Support – 89%
Slide 68
Slide 68 text
@font-face Web fonts – Working Draft Global Support – 89%
caniuse.com
Slide 69
Slide 69 text
No content
Slide 70
Slide 70 text
@font-face
@font-face {
font-family: 'my-family';
src: url('/url/of/font.woff');
style: normal;
weight: 400;
}
Slide 71
Slide 71 text
@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;
}
Slide 72
Slide 72 text
@font-face
try{Typekit.load();}catch(e){}
Slide 73
Slide 73 text
No content
Slide 74
Slide 74 text
from Veer
from Underware
Slide 75
Slide 75 text
No content
Slide 76
Slide 76 text
No content
Slide 77
Slide 77 text
No content
Slide 78
Slide 78 text
.sign h1 .name {
transform: rotate(-12deg);
}
CSS3 Transform
Slide 79
Slide 79 text
No content
Slide 80
Slide 80 text
No content
Slide 81
Slide 81 text
...
try{Typekit.load();}catch(e){}
...
Slide 82
Slide 82 text
No content
Slide 83
Slide 83 text
No content
Slide 84
Slide 84 text
.sign h1 .name {
font: 400 normal 20em/1 cursive;
}
.sign h1 .welcome, .sign h2 {
font: 400 normal 7em/1 sans-serif;
}
Slide 85
Slide 85 text
.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;
}
Slide 86
Slide 86 text
No content
Slide 87
Slide 87 text
No content
Slide 88
Slide 88 text
.sign h1 .name:first-letter {
font-size: 1.2em;
}
Slide 89
Slide 89 text
No content
Slide 90
Slide 90 text
No content
Slide 91
Slide 91 text
text-shadow
Slide 92
Slide 92 text
text-shadow
text-shadow: 2px 4px 6px #000;
Slide 93
Slide 93 text
text-shadow
text-shadow: 2px 4px 6px #000;
text-shadow: 2px 4px 0 #000, 4px 8px 0 #fff, ...;
Slide 94
Slide 94 text
CSS3 Text-shadow – Working Draft Global Support – 61%
Slide 95
Slide 95 text
No content
Slide 96
Slide 96 text
No content
Slide 97
Slide 97 text
No content
Slide 98
Slide 98 text
PROGRESSIVE
ENHANCEMENT
Slide 99
Slide 99 text
.sign h1 .name {
text-shadow: -8px 8px 0 #b06955;
}
Slide 100
Slide 100 text
.sign h1 .name {
text-shadow: -8px 8px 0 #b06955;
}
Horizontal
Slide 101
Slide 101 text
.sign h1 .name {
text-shadow: -8px 8px 0 #b06955;
}
Vertical
Slide 102
Slide 102 text
.sign h1 .name {
text-shadow: -8px 8px 0 #b06955;
}
Blur
Slide 103
Slide 103 text
.sign h1 .name {
text-shadow: -8px 8px 0 #b06955;
}
Color
Slide 104
Slide 104 text
No content
Slide 105
Slide 105 text
No content
Slide 106
Slide 106 text
.sign h1 .name {
text-shadow: -3px 3px 0 #393431,
-8px 8px 0 #b06955;
}
Slide 107
Slide 107 text
No content
Slide 108
Slide 108 text
No content
Slide 109
Slide 109 text
.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;
}
Slide 110
Slide 110 text
No content
Slide 111
Slide 111 text
No content
Slide 112
Slide 112 text
No content
Slide 113
Slide 113 text
No content
Slide 114
Slide 114 text
No content
Slide 115
Slide 115 text
No content
Slide 116
Slide 116 text
No content
Slide 117
Slide 117 text
mask
Slide 118
Slide 118 text
mask
mask: url(mask.png) no-repeat center top;
Slide 119
Slide 119 text
CSS3 Masks – Uno cial Global Support – 36%
Slide 120
Slide 120 text
mask
mask: url(mask.png) no-repeat center top;
Slide 121
Slide 121 text
mask
-webkit-mask: url(mask.png) no-repeat center top;
mask: url(mask.png) no-repeat center top;
Slide 122
Slide 122 text
No content
Slide 123
Slide 123 text
Transparent Image
Slide 124
Slide 124 text
No content
Slide 125
Slide 125 text
.sign {
background: #000 url(images/wood.png) 4.5em 0;
}
Slide 126
Slide 126 text
No content
Slide 127
Slide 127 text
PROGRESSIVE
ENHANCEMENT
Slide 128
Slide 128 text
No content
Slide 129
Slide 129 text
No content
Slide 130
Slide 130 text
.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;
}
Slide 131
Slide 131 text
No content
Slide 132
Slide 132 text
No content
Slide 133
Slide 133 text
No content
Slide 134
Slide 134 text
Hand-painted sign
Slide 135
Slide 135 text
@font-face – hand-lettered look
Hand-painted sign
Slide 136
Slide 136 text
@font-face – hand-lettered look
text-shadow – sign painter’s shade
Hand-painted sign
Slide 137
Slide 137 text
@font-face – hand-lettered look
text-shadow – sign painter’s shade
mask – weathered, wooden texture
Hand-painted sign
Slide 138
Slide 138 text
Get the
LOOK
Use font-face & CSS3 Like the Stars
@smcbride – [email protected] – seanmcb.com/get-the-look
Slide 139
Slide 139 text
No content
Slide 140
Slide 140 text
Wood
Type
Poster
Slide 141
Slide 141 text
No content
Slide 142
Slide 142 text
No content
Slide 143
Slide 143 text
No content
Slide 144
Slide 144 text
No content
Slide 145
Slide 145 text
No content
Slide 146
Slide 146 text
No content
Slide 147
Slide 147 text
No content
Slide 148
Slide 148 text
www.leodis.net/playbills
Slide 149
Slide 149 text
DESIGN
SYSTEM
Slide 150
Slide 150 text
Idea DESIGN
SYSTEM
Slide 151
Slide 151 text
Idea
PRINTING
PAPER/INK
MOVEABLE TYPE
Slide 152
Slide 152 text
Overwhelming
Typeface variety
Hierarchy
Full-width
PRINTING
PAPER/INK
MOVEABLE TYPE
Slide 153
Slide 153 text
DESIGN
SYSTEM
Overwhelming
Typeface variety
Hierarchy
Full-width
Slide 154
Slide 154 text
DESIGN
SYSTEM
Overwhelming
Typeface variety
Hierarchy
Full-width
Slide 155
Slide 155 text
FONT-FACE
TEXT-SHADOW
RGBA COLOR
PSEUDO-ELEMENTS
Overwhelming
Typeface variety
Hierarchy
Full-width
Slide 156
Slide 156 text
No content
Slide 157
Slide 157 text
No content
Slide 158
Slide 158 text
No content
Slide 159
Slide 159 text
@font-face
Slide 160
Slide 160 text
@font-face
Many fonts File size
Slide 161
Slide 161 text
@font-face
144 Kb
6 fonts
Slide 162
Slide 162 text
from Barry Schwartz
Slide 163
Slide 163 text
from Veer
from Wood Type Revival
from Adobe
Slide 164
Slide 164 text
from Wood Type Revival
Slide 165
Slide 165 text
from Wood Type Revival
Slide 166
Slide 166 text
from Wood Type Revival
Slide 167
Slide 167 text
from Wood Type Revival
Slide 168
Slide 168 text
No content
Slide 169
Slide 169 text
rgba color
Slide 170
Slide 170 text
rgba color
background: #000;
Slide 171
Slide 171 text
rgba color
background: rgba(0, 0, 0, 1);
Slide 172
Slide 172 text
rgba color
background: rgba(0, 0, 0, 0.5);
Slide 173
Slide 173 text
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);
Slide 174
Slide 174 text
CSS3 Colors – Recommendation Global Support – 75%
Slide 175
Slide 175 text
rgba color
color: #999;
color: rgba(0, 0, 0, 0.5);
Slide 176
Slide 176 text
rgba color
color: #999;
color: rgba(0, 0, 0, 0.5); PROGRESSIVE
ENHANCEMENT
Slide 177
Slide 177 text
rgba color
color: #999;
color: rgba(0, 0, 0, 0.5);
Slide 178
Slide 178 text
No content
Slide 179
Slide 179 text
.para4 .condensed {
color: #5d608f;
}
Slide 180
Slide 180 text
.para4 .condensed {
color: #5d608f;
text-shadow: 0.02em 0.02em 0 rgba(217, 20, 43, 0.75);
}
Slide 181
Slide 181 text
No content
Slide 182
Slide 182 text
No content
Slide 183
Slide 183 text
.para4 .condensed {
color: #5d608f;
color: rgba(45, 57, 128, 0.75);
text-shadow: 0.02em 0.02em 0 rgba(217, 20, 43, 0.75);
}
Slide 184
Slide 184 text
No content
Slide 185
Slide 185 text
No content
Slide 186
Slide 186 text
No content
Slide 187
Slide 187 text
No content
Slide 188
Slide 188 text
:before + content
Slide 189
Slide 189 text
:before + content
h1:before {
}
h1:after {
}
Test
Slide 190
Slide 190 text
:before + content
h1:before {
}
h1:after {
}
Test
TestSlide 191
Slide 191 text
:before + content
h1:before {
content: "1";
}
h1:after {
content: "2";
}
Test
TestSlide 192
Slide 192 text
:before + content
h1:before {
content: "1";
}
h1:after {
content: "2";
}
Test
1Test2Slide 193
Slide 193 text
:before + content
h1:before {
content: attr(data-one);
}
h1:after {
content: attr(data-two);
}
Test
1Test2Slide 194
Slide 194 text
CSS Generated content – Recommendation Global Support – 88%
Slide 195
Slide 195 text
No content
Slide 196
Slide 196 text
Greater Number
Slide 197
Slide 197 text
$(function() {
$('.chroma').each(function() {
$(this).attr('data-content', $(this).text());
});
});
Slide 198
Slide 198 text
No content
Slide 199
Slide 199 text
No content
Slide 200
Slide 200 text
.chroma:before {
color: #999;
content: attr(data-content);
font-family: "delittle-chromatic-inlay";
}
Slide 201
Slide 201 text
No content
Slide 202
Slide 202 text
No content
Slide 203
Slide 203 text
.chroma {
position: relative;
}
.chroma:before {
color: #999;
display: block;
content: attr(data-content);
font-family: "delittle-chromatic-inlay";
position: absolute;
width: 100%;
}
Slide 204
Slide 204 text
No content
Slide 205
Slide 205 text
No content
Slide 206
Slide 206 text
.chroma:before {
color: #999;
display: block;
content: attr(data-content);
font-family: "delittle-chromatic-inlay";
position: absolute;
top: 0.065em;
width: 100%;
}
Slide 207
Slide 207 text
No content
Slide 208
Slide 208 text
No content
Slide 209
Slide 209 text
.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;
}
Slide 210
Slide 210 text
No content
Slide 211
Slide 211 text
No content
Slide 212
Slide 212 text
No content
Slide 213
Slide 213 text
No content
Slide 214
Slide 214 text
PROGRESSIVE
ENHANCEMENT
Slide 215
Slide 215 text
No content
Slide 216
Slide 216 text
Wood type poster
Slide 217
Slide 217 text
@font-face – variety of quirky styles
Wood type poster
Slide 218
Slide 218 text
@font-face – variety of quirky styles
rgba color – texture, double-printing
Wood type poster
Slide 219
Slide 219 text
@font-face – variety of quirky styles
rgba color – texture, double-printing
:before + content – chromatic type
Wood type poster
Slide 220
Slide 220 text
Get the
LOOK
Use font-face & CSS3 Like the Stars
@smcbride – [email protected] – seanmcb.com/get-the-look
Slide 221
Slide 221 text
No content
Slide 222
Slide 222 text
MAGAZINE
Spread
Slide 223
Slide 223 text
No content
Slide 224
Slide 224 text
No content
Slide 225
Slide 225 text
No content
Slide 226
Slide 226 text
No content
Slide 227
Slide 227 text
No content
Slide 228
Slide 228 text
DESIGN
SYSTEM
Slide 229
Slide 229 text
Idea DESIGN
SYSTEM
Slide 230
Slide 230 text
Idea PRINTED BOOK
PERIODICAL
STANDARD SIZE
Slide 231
Slide 231 text
Elegance
High-contrast type
Photos / color
Full use of page
PRINTED BOOK
PERIODICAL
STANDARD SIZE
Slide 232
Slide 232 text
DESIGN
SYSTEM
Elegance
High-contrast type
Photos / color
Full use of page
Slide 233
Slide 233 text
DESIGN
SYSTEM
Elegance
High-contrast type
Photos / color
Full use of page
Slide 234
Slide 234 text
FONT-FACE
COLUMN-COUNT
BACKGROUND-SIZE
RESPONSIVE
Elegance
High-contrast type
Photos / color
Full use of page
Slide 235
Slide 235 text
No content
Slide 236
Slide 236 text
No content
Slide 237
Slide 237 text
@font-face
Slide 238
Slide 238 text
from TypeTogether
Slide 239
Slide 239 text
from Phil’s Fonts / Darden
Slide 240
Slide 240 text
No content
Slide 241
Slide 241 text
columns
Slide 242
Slide 242 text
columns
column-count: 3;
Slide 243
Slide 243 text
columns
column-count: 3;
column-width: 30em;
Slide 244
Slide 244 text
columns
column-count: 3;
column-width: 30em;
column-gap: 2em;
column-rule: 1px solid #ccc;
column-span: all;
Slide 245
Slide 245 text
CSS3 Multiple column layout – Candidate Recommendation Global Support – 58.91%
Slide 246
Slide 246 text
columns
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
Slide 247
Slide 247 text
No content
Slide 248
Slide 248 text
.text {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
column-gap: 1em;
}
Slide 249
Slide 249 text
No content
Slide 250
Slide 250 text
No content
Slide 251
Slide 251 text
No content
Slide 252
Slide 252 text
fittext.js
Slide 253
Slide 253 text
No content
Slide 254
Slide 254 text
No content
Slide 255
Slide 255 text
No content
Slide 256
Slide 256 text
ttextjs.com
Slide 257
Slide 257 text
No content
Slide 258
Slide 258 text
No content
Slide 259
Slide 259 text
$(function() { $('.heading h1').fitText(5.7) });
Slide 260
Slide 260 text
No content
Slide 261
Slide 261 text
No content
Slide 262
Slide 262 text
No content
Slide 263
Slide 263 text
responsive design
Slide 264
Slide 264 text
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”
Slide 265
Slide 265 text
No content
Slide 266
Slide 266 text
No content
Slide 267
Slide 267 text
No content
Slide 268
Slide 268 text
abookapart.com
Slide 269
Slide 269 text
No content
Slide 270
Slide 270 text
Responsive design
Slide 271
Slide 271 text
Fluid layout
Flexible images
Media queries
Slide 272
Slide 272 text
Fluid layout
Slide 273
Slide 273 text
Fluid layout
Horizontal measurements in %
Slide 274
Slide 274 text
Fluid layout
Horizontal measurements in %
FitText.js for full-width heading
Viewport meta tag for mobile devices
Slide 275
Slide 275 text
Fluid layout
Horizontal measurements in %
FitText.js for full-width heading
Viewport meta tag for mobile devices
Slide 276
Slide 276 text
Flexible images
Slide 277
Slide 277 text
Flexible images
Scaling background image using background-size
Slide 278
Slide 278 text
Flexible images
Scaling background image using background-size
html {
background: #00a3b0 url(images/background.jpg)
no-repeat top center;
background-size: cover;
}
Slide 279
Slide 279 text
CSS3 Background-image options – Candidate Rec Global Support – 74%
Slide 280
Slide 280 text
Media queries
Slide 281
Slide 281 text
Media queries
Overriding CSS properties in certain situations
Slide 282
Slide 282 text
Media queries
Overriding CSS properties in certain situations
@media screen and (max-width: 400px) {
.heading h2 {
font-size: 2em;
}
}
Slide 283
Slide 283 text
Media queries
Overriding CSS properties in certain situations
Choosing breakpoints
Slide 284
Slide 284 text
CSS3 Media queries – Proposed Recommendation Global Support – 75%
Slide 285
Slide 285 text
1024px breakpoint
Before After
Slide 286
Slide 286 text
640px breakpoint
Before / After
Slide 287
Slide 287 text
.text {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
margin: 0 40% 2em 5%;
}
Slide 288
Slide 288 text
.text {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
margin: 0 40% 2em 5%;
}
Slide 289
Slide 289 text
.text {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
margin: 0 40% 2em 5%;
}
Slide 290
Slide 290 text
.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;
}
}
Slide 291
Slide 291 text
.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;
}
}
Slide 292
Slide 292 text
Magazine spread
Slide 293
Slide 293 text
@font-face – elegant, high-contrast
Magazine spread
Slide 294
Slide 294 text
@font-face – elegant, high-contrast
columns – shorten lines at wide widths
Magazine spread
Slide 295
Slide 295 text
@font-face – elegant, high-contrast
columns – shorten lines at wide widths
Magazine spread
ttext.js – t headline to available space
Slide 296
Slide 296 text
@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
Slide 297
Slide 297 text
No content
Slide 298
Slide 298 text
BOOK
EARLY PRINTED
Slide 299
Slide 299 text
No content
Slide 300
Slide 300 text
No content
Slide 301
Slide 301 text
No content
Slide 302
Slide 302 text
No content
Slide 303
Slide 303 text
No content
Slide 304
Slide 304 text
Not every design
translates well
Slide 305
Slide 305 text
No content
Slide 306
Slide 306 text
Form imitates
another form
Slide 307
Slide 307 text
What part of the idea
is still unique?
Slide 308
Slide 308 text
No content
Slide 309
Slide 309 text
“How do I translate a
CLASSIC LOOK
into a web page?”
Slide 310
Slide 310 text
No content
Slide 311
Slide 311 text
Original
Form
New
Form
Slide 312
Slide 312 text
Original
Idea
DESIGN
SYSTEM
Original
Form
DESIGN
SYSTEM
New
Form
Slide 313
Slide 313 text
CSS3
Slide 314
Slide 314 text
CSS3
@font-face
@media
background-size
:before/:after
column-count
rgba
text-shadow
transform
Slide 315
Slide 315 text
CSS3
@font-face
@media
background-size
:before/:after
column-count
rgba
text-shadow
transform
PROGRESSIVE
ENHANCEMENT
Slide 316
Slide 316 text
CSS3
@font-face
@media
background-size
:before/:after
column-count
rgba
text-shadow
transform
Slide 317
Slide 317 text
No content
Slide 318
Slide 318 text
Imitate a form
Slide 319
Slide 319 text
Imitate a form
Translate an idea
Slide 320
Slide 320 text
Imitate a form
Translate an idea
Full use of medium
Slide 321
Slide 321 text
No content
Slide 322
Slide 322 text
is hiring!
Slide 324
Slide 324 text
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