🎙 An Event Apart 🗺 San Francisco full-featured art direction ! @minamarkham #aeasf
Slide 1
Slide 2
hello. ! @minamarkham 🔗 mina.codes
Slide 3
Slide 4
Slide 5
twitter https://twitter.com/zeldman/status/1011969784014090240
Slide 6
https://twitter.com/MinaMarkham/status/1011971568929402881 twitter
Slide 7
slack.com
Slide 8
slackhq.com
Slide 9
what is… art direction?
Slide 10
“ Art direction combines art and design to evoke a cultural and emotional reaction. DAN MALL
Slide 11
Design is the how. Art direction is the why.
Slide 12
does it good? feel
Slide 13
art direction is… progressive. localized. cross-functional. inclusive. systematic.
Slide 14
art direction is… progressive.
Slide 15
“ With progressive enhancement, every user has their own experience of the site, rather than an experience that the designers and developers demand of them. ANDY BELL
Slide 16
default experience.
Slide 17
What is Progressive Enhancement and Why Should You Care?, https://www.shopify.com/partners/blog/what-is-progressive-enhancement-and-why-should-you-care
Slide 18
Slide 19
Slide 20
“ I build sites and applications that have to WORK everywhere, that support as many places as possible. But "look" the same. No. Not possible. RACHEL ANDREW
Slide 21
feature not a bug.
Slide 22
build markup first.
Slide 23
Slide 24
<header>
<nav>
<h2>
<h1>
<h2>
<a>
<a>
<a>
<figure>
<a> <h2> <h3>
<h3>
<a>
<h2>
<blockquote>
<a>
Slide 25
Slide 26
Slide 27
Slide 28
Slide 29
Slide 30
twitter https://twitter.com/AyIsaiah/status/1003007109842251777
Slide 31
CSS Grid Layout
Slide 32
@
Slide 33
Feature Queries (@supports)
Slide 34
Feature Query Manager
Slide 35
@supports (display: grid) { // code goes here }
Slide 36
@supports (display: grid) { display: grid; grid-template-columns: repeat(8, 4fr); > * { grid-column: 5 / span 4; } }
Slide 37
Slide 38
Slide 39
“ A complete mindset change is required here and it starts by remembering that you don’t build websites for yourself, you build them for others. ANDY BELL
Slide 40
art direction is… localized.
Slide 41
Bienvenue. Willkommen. Bienvenidos. ようこそ.
Slide 42
slack.com Initial launch in four languages: Spanish, German, French, and Japanese.
Slide 43
Slide 44
Slide 45
wrong Showing Western people having a conversation in Japanese is a strange experience.
Slide 46
localization not translation.
Slide 47
better In absence of Japanese models, we replaced the Western ones with colored blocks.
Slide 48
Slide 49
Slide 50
contextis everything
Slide 51
Slide 52
Slide 53
“ The witty remarks we make, the references to a familiar idiom — these are the kinds of things we are extra thoughtful about to build trust with our global users. ANCA GREVE, Localization Manager, Slack
Slide 54
Slide 55
Slide 56
Slide 57
“ The [hegemonic design gaze] dictates what “good”/“bad” design is—often from an aesthetic point of view, w/ little regard for utility, origin, or environment. AMELIE LAMONT
Slide 58
Slide 59
Slide 60
Slide 61
Slide 62
Slide 63
“ To make it authentically Disney and uniquely Chinese, I created the artworks featuring 5 legendary characters in the traditional Chinese paper cut style. YIYING LU
Slide 64
Slide 65
Slide 66
Slide 67
:lang()
Slide 68
:lang() :lang(ja) { font-family: ‘Yu Gothic’; outline-offset: .25rem; }
Slide 69
@supports (display: grid) { :lang(ja) { writing-mode: vertical-rl; :lang() grid-column: 3 / span 2; grid-row: 1 / span 8; } } headline
Slide 70
@supports (display: grid) { :lang(ja) { :lang() grid-column: 5 / span 4; grid-row: 5 / span 4; } } hero image
Slide 71
Slide 72
Slide 73
.c-hero__image { filter: grayscale(100%); mix-blend-mode: darken; }
Slide 74
Slide 75
Slide 76
art direction is… cross-functional.
Slide 77
engineer? wait. aren’t you an
Slide 78
Slide 79
“ When it comes to making web products, front-end development is more important than visual design. DAN MALL
Slide 80
Slide 81
pair designing.
Slide 82
“Move that 1px down.”
Slide 83
Victor Ng
Slide 84
Slide 85
😭
Slide 86
Slide 87
collaboration breeds creativity
Slide 88
collaboration breeds inclusivity
Slide 89
art direction is… inclusive.
Slide 90
“ Inclusive design is a process, not a result. KAT HOLMES
Slide 91
Slide 92
Slide 93
Slide 94
https://www.victorng.com/braille-pin
Slide 95
Slide 96
Michael Bierut
Slide 97
don’t remove defaults.
Slide 98
“ Removing the :focus outline is like removing the wheelchair ramp from a school because it doesn’t fit in with the aesthetic. DAVID GILBERTSON
Slide 99
design better defaults.
Slide 100
Slide 101
Slide 102
Slide 103
:focus { outline: thin solid @secondary-color; outline-offset: .25rem; }
Slide 104
:focus-visible { outline: thin solid @secondary-color; outline-offset: .25rem; } :focus:not(:focus-visible) { outline: none; } 🎉
Slide 105
Slide 106
:lang(ja):before { @supports (prefers-reduced-motion: reduce) { animation-duration: 1s; animation-iteration-count: infinite; animation-name: pulse; @media (prefers-reduced-motion: reduce) { animation: none; }}}
Slide 107
art direction is… systematic.
Slide 108
Slide 109
a design system is… components guidelines react patterns modules framework standards css styleguide voice typography spacing principles documentation colors editorial tools library
Slide 110
Design Systems — review of vocabulary and terms, https://varya.me/blog/design-systems-review/
Slide 111
Design Systems — review of vocabulary and terms, https://varya.me/blog/design-systems-review/
Slide 112
a design system at its foundation, a set of rules. is
Slide 113
Rules and creativity aren’t mutually exclusive. Rules can be broken.
Slide 114
page-specific CSS one-offs me
Slide 115
“There's a time and place for both types of work — illustrations as stock components, and illustrations as intentional, complex extensions of your specific brand. ALICE LEE
Slide 116
strict vs l o o s e
Slide 117
enable the snowflakes.
Slide 118
Slide 119
Slide 120
Slide 121
“ If you made everything the same, it was boring after the first year… PAULA SCHER
Slide 122
Slide 123
Slide 124
Slide 125
“ …If you changed it individually, the theater lost its identity. PAULA SCHER
Slide 126
familiar? sound
Slide 127
“ Take the color system and typography and translate it into a seasonal standards manual. PAULA SCHER
Slide 128
“ Each year, The Public Theater gets a new identity. PAULA SCHER
Slide 129
Slide 130
visual language per locale?
Slide 131
Slide 132
Slide 133
Slide 134
Slide 135
Slide 136
Slide 137
Slide 138
art direction is… progressively enhanced. localized by culture. a cross-functional partnership. inclusive by default. powered by design systems.
Slide 139
' @minamarkham 💻 mina.codes thanks!
