Sei sulla pagina 1di 149

THE

Great

Design
S TAT E O F

Your work is going to fill a


large part of your life, and the
only way to be truly satisfied
is to do what you believe is
great work. And the only way
to do great work is to love
what you do.
Steve Jobs

Im excited

to start working

on this project!

Six more

projects are also


kicking off?

How many

revisions? For
each screen size
in Photoshop?

Wait, isnt this

out of scope?

Did you just say

Internet
Explorer 8?

Ping!

Ping!

Ping!

Ping!

8 incoming
meeting requests?

Excitement

Time

Excitement

Time

complacency
noun | complacency | \km-pl-sn(t)-s\

a feeling of being satisfied with


how things are and not wanting
to try to make them better

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

If I had asked people


what they wanted,
they would have said

faster horses.
Henry Ford

If I had asked people


what they wanted,
they would have said

faster horses.
Henry Ford

best practices?
Above the Fold

best practices?
3-Click Rule

I fear that we're creating a


web the full of safe designs
because weredriven by
the need in some of us for
predictability, reliability
and forrepeatability

KLPA (Joshua Kulpa)

Andy Clarke,
Counting Stars: Creativity over Predictability

shape-outside

Is web design a

solved problem
?

craf t & create

Pragues new coffee scene Making bikes with bamboo


The enduring craft of screen printing Discover Riga
Hand-made soap Manhattans fashion collaborators
The sugar shacks of Quebec How to taste coffee

Artist
Spotlight

Digital Edition, Autumn 2016

craft & create

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

inte rvie w Elliot Jay Stocks


en
artw ork courtesy of Shyama Gold

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

words Jonny Akers


photographs Elliot Jay Stocks

id you always want to be an illust

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

creen printing in its basic form dates back over

orary designs, we use heavyweight paper stock, and

2,000 years. Whether it be cutting shapes from

metallic and neon inks to make clean, modern, alter-

banana leaves to make a stencil and forcing ink

native wedding stationery.

made from natural pigments through them, or making

passionate about, and one reason why Ive never

people all over the world have been using screen

ventured into automatic printing machines. I feel that

printing to reproduce imagery for quite some time.

once youre no longer pulling ink through the screen

I encountered screen printing for the first time in

80

by hand, the process is too commercial and loses part

2004 while studying a fine art degree in Leeds. After

of the magic of printmaking. While Im printing by

a brief introduction to the printmaking facilities,

hand, Im still in full control of the finished print, and

I used screen printing on and off throughout my

it contains more of the experience and skill that Ive

degree, but I never realised how involved Id become

obtained over the past 10 years.

with the process in the future.

And Im not alone in my passion for screen

Today I run a wedding stationery business called

printing by hand. Recently, theres been a huge revival

The Old Market Printing Co with my wife Charlotte.

for all things artisanal, with screen printing included.

With her hand-lettering, illustration, and contemp-

Various websites have emerged, selling rudimentary

1. theoldmarketprintingco.com

craft & create

1. shyamagolden.com

Making and printing by hand is something Im

frames stretched with human hair to form a mesh,

ENDURING CRAFTS

95

::first-letter {
.intro::first-letter
initial-letter
initial-letter: 7;
7
}

feature queries
@supports ( property: value )

@supports (property: value) {


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

CSS Blend Mode

CSS Blend Mode

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

dense - fill in holes earlier in the grid


if smaller items come up later

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

all together now


repeat( auto-fill, minmax( min size, max size ) )

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

by Rachel Smith, then Miriam, and definitely Stacy

resources
codepen.io/collection/XbwVGL

codepen.io/stacy

drafts.csswg.org/css-grid/

gridbyexample.com

igalia.github.io/css-grid-layout/

labs.jensimmons.com

css-tricks guide to grid

wishlist
CSS Regions and Exclusions

Were actually in the


process of building an
environment where well
spend most of our time for
the rest of our lives
Wilson Miner
When We Build

THE

Great

Design
S TAT E O F

Stacy Kvernmo
@StacyKvernmo

Potrebbero piacerti anche