1. GreatTHE
Design
S TATE O F

5. Steve Jobs
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.
‘‘

6. I’m excited
to start working
on this project!

7. Six more
projects are also
kicking off?

8. How many
revisions? For
each screen size
in Photoshop?

9. Wait, isn’t this
out of scope?

10. Did you just say
Internet
Explorer 8?

11. Ping!
Ping!
Ping!
Ping!

12. 8 incoming
meeting requests?

13. Time
Excitement

14. Time
Excitement

15. a feeling of being satisfied with
how things are and not wanting
to try to make them better
noun | com·pla·cen·cy | kəm-ˈplā-sən(t)-sē
complacency

16. ‘‘ Douglas Adams
I love the whooshing noise they
make as they go by.
I love deadlines.

17. Component
Design

18. Data-informed
vover
analytics | usability testing | a/b testing

19. If I had asked people
what they wanted,
they would have said
Henry Ford
faster horses.‘‘

20. If I had asked people
what they wanted,
they would have said
Henry Ford
faster horses.‘‘

21. Above the Fold
best practices?

22. 3-Click Rule
best practices?

23. KLPA (Joshua Kulpa)
Andy Clarke,
“Counting Stars: Creativity over Predictability”
‘‘
I fear that we're creating a
web the full of safe designs
because we’re driven by
the need in some of us for
predictability, reliability
and for repeatability …

29. shape-outside

35. ?
Is web design a
solved problem

37. Prague’s new coffee scene ◇ Making bikes with bamboo
The enduring craft of screen printing ◇ Discover Riga
Hand-made soap ◇ Manhattan’s fashion collaborators
The sugar shacks of Quebec ◇ How to taste coffee Digital Edition, Autumn 2016
craft & create
Artist
Spotlight
Shyama Golden
Shyama Golden,1
known for her huge,
humorous paintings, has transitioned from
being a graphic designer to an illustrator and,
more recently, from oil paints to the iPad.
interview Elliot Jay Stocks
artwork courtesy of Shyama Golden
D
id you always want to be an illustrator?
Yes—I’ve been drawing ever since I was really
little, but I studied graphic design when I went to col-
lege, and pretty much worked solely on graphic design
for 10 years after that. However, the school I went to
was really focused on studio art; it was more traditional,
I think, than most schools. I did a lot of screen printing
too, which I love because it uses both the problem-
solving skills of a designer and the drawing skill of an
illustrator. I stuck with graphic design for a really long
time, but there was always a part of me that wanted to
draw more.
Recently I’ve transitioned into doing that: these days
I do branding and identity design as a part-time job, and
spend most of my time doing illustration. Even with
80
1. shyamagolden.com
95
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 printing’s
origins and current incarnation.
craft & create
words Jonny Akers
photographs Elliot Jay Stocks
Enduring Crafts
Screen Printing
craft & create E N D U R I N G C R A F T S
S
creen printing in its basic form dates back over
2,000 years. Whether it be cutting shapes from
banana leaves to make a stencil and forcing ink
made from natural pigments through them, or making
frames stretched with human hair to form a mesh,
people all over the world have been using screen
printing to reproduce imagery for quite some time.
I encountered screen printing for the first time in
2004 while studying a fine art degree in Leeds. After
a brief introduction to the printmaking facilities,
I used screen printing on and off throughout my
degree, but I never realised how involved I’d become
with the process in the future.
Today I run a wedding stationery business called
The Old Market Printing Co1
with my wife Charlotte.
With her hand-lettering, illustration, and contemp-
orary designs, we use heavyweight paper stock, and
metallic and neon inks to make clean, modern, alter-
native wedding stationery.
Making and printing by hand is something I’m
passionate about, and one reason why I’ve never
ventured into automatic printing machines. I feel that
once you’re no longer pulling ink through the screen
by hand, the process is too commercial and loses part
of the magic of printmaking. While I’m printing by
hand, I’m still in full control of the finished print, and
it contains more of the experience and skill that I’ve
obtained over the past 10 years.
And I’m not alone in my passion for screen
printing by hand. Recently, there’s been a huge revival
for all things artisanal, with screen printing included.
Various websites have emerged, selling rudimentary
illustration Ed J Brown
1. theoldmarketprintingco.com

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

43. @supports (property: value) {
property: value;
}
@supports ( property: value )
feature queries

44. @supports (initial-letter: 7) {
.intro::first-letter {
initial-letter: 7;
}
}
initial letter

45. @supports (initial-letter: 7)
or (-webkit-initial-letter: 7) {
.intro::first-letter {
initial-letter: 7;
-webkit-initial-letter: 7;
}
}
initial letter

46. ::initial-letter::initial-letter

47. ::initial-letter::initial-letter

50. CSS Shapes

55. Shape-inside

57. CSSBlendMode

58. CSSBlendMode

59. Shape-inside

61. Clip path

62. Clip path

63. css filter

64. http://codepen.io/stacy/pen/86840fb6d32b941a73e5435f4f27d4e9?editors=1100

65. bennettfeely.com/image-effects
layered backgrounds

79. css “layout” methods
history
tables flexbox
floats grid

80. flexbox
or

87. implicit explicit

88. grid-template-columns
rows
size, size;
grid-template-columns:
1fr 2fr 1fr;

95. repeat( number of repitions, size )
repeat
grid-template-columns:
repeat(3, 1fr);

97. grid-column-start / grid-column-end | grid-column: value;
grid-column: 1 / 4;
grid-column

102. span
span number ;
grid-column: 1 / span 3;

104. -1
grid-column: 1 / -1;
-1 = value used to span the remaining row/column

105. grid-row-start / grid-row-end | grid-row: value;
grid-row
grid-row: 1 / 4;

110. grid-row-start / grid-column-start / grid-row-end / grid-column-end
grid-area
grid-area: 1/1/3/4;

112. [ line-name ] size [ line2-name another-name ] size
named lines
grid-column: line-name;

114. [ line-name ] size [ line2-name another-name ] size
grid-area: row-main /
col-large /
row-gallery /
col-small;
grid-area

115. “header”
“byline”
“content”
“aside”
“footer”;
grid-template-area

116. grid-template-area:
“header header header”
“content content byline”
“………………… aside ………………”
“footer footer footer”;
grid-template-area

117. header {
grid-area: header;
}
grid-area
name

122. size
grid-auto-rows:20vh;
grid-auto-columns
rows

123. dense - fill in holes earlier in the grid
if smaller items come up later
sparse | dense & row | column
grid-auto-flow

125. minmax
minmax( min size, max size )
grid-auto-rows:
minmax(100px,30vh);

126. auto-fill
repeat( auto-fill, size )
grid-template-columns:
repeat(auto-fill, 1fr);

127. all together now
repeat( auto-fill, minmax( min size, max size ) )
grid-template-rows:
repeat(auto-fill,
minmax(300px,1fr));

128. grid-gap
grid-column-gap | grid-row-gap: size
grid-gap:30px;
px, rem, em

130. start | end | center | stretch | space-around | space-between | space-evenly
justify-content: start;
justify-content

131. justify-items
start | end | center | stretch
justify-items: start;

132. justify-self
start | end | center | stretch
justify-self: start;

133. align-content
start | end | center | stretch | space-around | space-between | space-evenly
align-content: start;

134. align-items
start | end | center | stretch
align-self: start;

135. align-self
start | end | center | stretch
align-self: start;

137. .gallery {
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(auto-fill,
minmax(200px, 1fr));
grid-auto-rows: minmax(30vh, 190px);
}

138. display: grid;

139. grid-gap: 1rem;

140. grid-template-columns:
repeat(auto-fill,
minmax(200px, 1fr));

141. grid-auto-rows:
minmax(26vh, 190px);

145. by Rachel Smith, then Miriam, and definitely Stacy

146. igalia.github.io/css-grid-layout/gridbyexample.com
labs.jensimmons.com
codepen.io/stacy
resources
css-tricks guide to grid
drafts.csswg.org/css-grid/
codepen.io/collection/XbwVGL

147. wishlist
CSS Regions and Exclusions

148. Wilson Miner
“When We Build”
‘‘We’re actually in the
process of building an
environment where we’ll
spend most of our time for
the rest of our lives …

149. Stacy Kvernmo
@StacyKvernmo
GreatTHE
Design
S TATE O F