Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
Great
Design
S TAT E O F
Im excited
to start working
on this project!
Six more
How many
revisions? For
each screen size
in Photoshop?
out of scope?
Internet
Explorer 8?
Ping!
Ping!
Ping!
Ping!
8 incoming
meeting requests?
Excitement
Time
Excitement
Time
complacency
noun | complacency | \km-pl-sn(t)-s\
I love deadlines.
I love the whooshing noise they
make as they go by.
Douglas Adams
Component
Design
over
v
Data-informed
analytics | usability testing | a/b testing
faster horses.
Henry Ford
faster horses.
Henry Ford
best practices?
Above the Fold
best practices?
3-Click Rule
Andy Clarke,
Counting Stars: Creativity over Predictability
shape-outside
Is web design a
solved problem
?
Artist
Spotlight
Shyama Golden
1
huge,
Shyama Golden, known for her
ned from
humorous paintings, has transitio
strator and,
being a graphic designer to an illu
the iPad.
more recently, from oil paints to
Enduring Crafts
Screen Printing
With its origins seated deeply in the past, the process of screen printing
continues to intrigue people, with the craft seeing a revival in modern
times. Screen printer Jonny Akers walks us through screen printings
origins and current incarnation.
illustration Ed J Brown
rator?
I was really
Yes Ive been drawing ever since
t to colwen
I
n
whe
n
little, but I studied graphic desig
design
hic
grap
on
y
solel
lege, and pretty much worked
t to
wen
I
ol
scho
the
,
ever
for 10 years after that. How
tional,
tradi
more
was
it
art;
io
was really focused on stud
ting
prin
n
scree
of
lot
a
did
I
ols.
I think, than most scho
lemprob
the
both
uses
it
use
too, which I love beca
the drawing skill of an
solving skills of a designer and
design for a really long
illustrator. I stuck with graphic
of me that wanted to
time, but there was always a part
draw more.
g that: these days
Recently Ive transitioned into doin
-time job, and
part
a
n as
I do branding and identity desig
with
Even
on.
trati
spend most of my time doing illus
80
1. theoldmarketprintingco.com
1. shyamagolden.com
ENDURING CRAFTS
95
::first-letter {
.intro::first-letter
initial-letter
initial-letter: 7;
7
}
feature queries
@supports ( property: value )
initial letter
@supports (initial-letter: 7) {
.intro::first-letter {
initial-letter: 7;
initial letter
@supports (initial-letter: 7)
or (-webkit-initial-letter: 7) {
.intro::first-letter {
initial-letter: 7;
-webkit-initial-letter: 7;
}
}
::initial-letter
::initial-letter
CSS Shapes
Shape-inside
Shape-inside
Clip path
Clip path
css filter
http://codepen.io/stacy/pen/86840fb6d32b941a73e5435f4f27d4e9?editors=1100
layered backgrounds
bennettfeely.com/image-effects
history
css layout methods
tables
floats
flexbox
grid
flexbox
or
implicit
explicit
columns
grid-template- rows
size, size;
grid-template-columns:
1fr 2fr 1fr;
repeat
repeat( number of repitions, size )
grid-template-columns:
repeat(3, 1fr);
grid-column
grid-column-start / grid-column-end | grid-column: value;
grid-column: 1 / 4 ;
span
span number ;
grid-column: 1 / span 3;
-1
-1 = value used to span the remaining row/column
grid-column: 1 / -1;
grid-row
grid-row-start / grid-row-end | grid-row: value;
grid-row: 1 / 4 ;
grid-area
grid-row-start / grid-column-start / grid-row-end / grid-column-end
grid-area: 1/1/3/4;
named lines
[ line-name ] size [ line2-name another-name ] size
grid-column: line-name;
grid-area
[ line-name ] size [ line2-name another-name ] size
grid-area: row-main /
col-large /
row-gallery /
col-small;
grid-template-area
header
byline
content
aside
footer;
grid-template-area
grid-template-area:
header
content
footer
header
content
aside
footer
header
byline
footer;
grid-area
name
header {
}
grid-area: header;
columns
grid-auto- rows
size
grid-auto-rows: 20vh;
grid-auto-flow
sparse | dense & row | column
minmax
minmax( min size, max size )
grid-auto-rows:
minmax(100px, 30vh);
auto-fill
repeat( auto-fill, size )
grid-template-columns:
repeat(auto-fill, 1fr);
grid-template-rows:
repeat(auto-fill,
minmax(300px, 1fr));
grid-gap
grid-column-gap | grid-row-gap: size
grid-gap:30px;
px, rem, em
justify-content
start | end | center | stretch | space-around | space-between | space-evenly
justify-content: start;
justify-items
start | end | center | stretch
justify-items: start;
justify-self
start | end | center | stretch
justify-self: start;
align-content
start | end | center | stretch | space-around | space-between | space-evenly
align-content: start;
align-items
start | end | center | stretch
align-self: start;
align-self
start | end | center | stretch
align-self: start;
.gallery {
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(auto-fill,
minmax(200px, 1fr));
grid-auto-rows: minmax(30vh, 190px);
}
display: grid;
grid-gap: 1rem;
grid-template-columns:
repeat(auto-fill,
minmax(200px, 1fr));
grid-auto-rows:
minmax(26vh, 190px);
resources
codepen.io/collection/XbwVGL
codepen.io/stacy
drafts.csswg.org/css-grid/
gridbyexample.com
igalia.github.io/css-grid-layout/
labs.jensimmons.com
wishlist
CSS Regions and Exclusions
THE
Great
Design
S TAT E O F
Stacy Kvernmo
@StacyKvernmo