Full-Featured Art Direction for the Web

A presentation at Pixel Up! in March 2019 in Cape Town, South Africa by Mina Markham

Slide 1

Slide 1

🎙 An Event Apart 🗺 San Francisco full-featured art direction ! @minamarkham #aeasf

Slide 2

Slide 2

hello. ! @minamarkham 🔗 mina.codes

Slide 3

Slide 3

Slide 4

Slide 4

Slide 5

Slide 5

slack.com

Slide 6

Slide 6

slackhq.com

Slide 7

Slide 7

what is… art direction?

Slide 8

Slide 8

“ Art direction combines art and design to evoke a cultural and emotional reaction. DAN MALL

Slide 9

Slide 9

Design is the how. Art direction is the why.

Slide 10

Slide 10

does it good? feel

Slide 11

Slide 11

art direction is… progressive. localized. cross-functional. inclusive. systematic.

Slide 12

Slide 12

art direction is… progressive.

Slide 13

Slide 13

“ 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 14

Slide 14

default experience.

Slide 15

Slide 15

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 16

Slide 16

Slide 17

Slide 17

Slide 18

Slide 18

“ 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 19

Slide 19

feature not a bug.

Slide 20

Slide 20

build markup first.

Slide 21

Slide 21

Slide 22

Slide 22

<header> <nav> <h2> <h1> <h2> <a> <a> <a> <figure> <a> <h2> <h3> <h3> <a> <h2> <blockquote> <a>

Slide 23

Slide 23

Slide 24

Slide 24

Slide 25

Slide 25

Slide 26

Slide 26

Slide 27

Slide 27

Slide 28

Slide 28

twitter https://twitter.com/AyIsaiah/status/1003007109842251777

Slide 29

Slide 29

CSS Grid Layout

Slide 30

Slide 30

@

Slide 31

Slide 31

Feature Queries (@supports)

Slide 32

Slide 32

Feature Query Manager

Slide 33

Slide 33

@supports (display: grid) { // code goes here }

Slide 34

Slide 34

@supports (display: grid) { display: grid; grid-template-columns: repeat(8, 4fr); > * { grid-column: 5 / span 4; } }

Slide 35

Slide 35

Slide 36

Slide 36

Slide 37

Slide 37

“ 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 38

Slide 38

art direction is… localized.

Slide 39

Slide 39

Bienvenue. Willkommen. Bienvenidos. ようこそ.

Slide 40

Slide 40

slack.com Initial launch in four languages: Spanish, German, French, and Japanese.

Slide 41

Slide 41

Slide 42

Slide 42

Slide 43

Slide 43

wrong Showing Western people having a conversation in Japanese is a strange experience.

Slide 44

Slide 44

localization not translation.

Slide 45

Slide 45

better In absence of Japanese models, we replaced the Western ones with colored blocks.

Slide 46

Slide 46

Slide 47

Slide 47

Slide 48

Slide 48

contextis everything

Slide 49

Slide 49

Slide 50

Slide 50

Slide 51

Slide 51

“ 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 52

Slide 52

Slide 53

Slide 53

Slide 54

Slide 54

Slide 55

Slide 55

“ 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 56

Slide 56

Slide 57

Slide 57

Slide 58

Slide 58

Slide 59

Slide 59

Slide 60

Slide 60

Slide 61

Slide 61

“ 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 62

Slide 62

Slide 63

Slide 63

Slide 64

Slide 64

Slide 65

Slide 65

:lang()

Slide 66

Slide 66

:lang() :lang(ja) { font-family: ‘Yu Gothic’; outline-offset: .25rem; }

Slide 67

Slide 67

@supports (display: grid) { :lang(ja) { writing-mode: vertical-rl; :lang() grid-column: 3 / span 2; grid-row: 1 / span 8; } } headline

Slide 68

Slide 68

@supports (display: grid) { :lang(ja) { :lang() grid-column: 5 / span 4; grid-row: 5 / span 4; } } hero image

Slide 69

Slide 69

Slide 70

Slide 70

Slide 71

Slide 71

.c-hero__image { filter: grayscale(100%); mix-blend-mode: darken; }

Slide 72

Slide 72

Slide 73

Slide 73

Slide 74

Slide 74

art direction is… cross-functional.

Slide 75

Slide 75

engineer? wait. aren’t you an

Slide 76

Slide 76

Slide 77

Slide 77

“ When it comes to making web products, front-end development is more important than visual design. DAN MALL

Slide 78

Slide 78

Slide 79

Slide 79

pair designing.

Slide 80

Slide 80

“Move that 1px down.”

Slide 81

Slide 81

Victor Ng

Slide 82

Slide 82

Slide 83

Slide 83

😭

Slide 84

Slide 84

Slide 85

Slide 85

collaboration breeds creativity

Slide 86

Slide 86

collaboration breeds inclusivity

Slide 87

Slide 87

art direction is… inclusive.

Slide 88

Slide 88

“ Inclusive design is a process, not a result. KAT HOLMES

Slide 89

Slide 89

Slide 90

Slide 90

Slide 91

Slide 91

Slide 92

Slide 92

https://www.victorng.com/braille-pin

Slide 93

Audio, read by Michael Bierut:

The Hillary for America logo is based on a perfect square grid: 3 squares tall and 3 squares wide. The middle squares are removed from the top and bottom rows, revealing the capital H letterform. An arrow sits across the crossbar of the H pointing forward.

https://www.victorng.com/hillary-h

Slide 94

Slide 94

Michael Bierut

Slide 95

Slide 95

don’t remove defaults.

Slide 96

Slide 96

“ 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 97

Slide 97

design better defaults.

Slide 98

Slide 98

Slide 99

Slide 99

Slide 100

Slide 100

Slide 101

Slide 101

:focus { outline: thin solid @secondary-color; outline-offset: .25rem; }

Slide 102

Slide 102

:focus-visible { outline: thin solid @secondary-color; outline-offset: .25rem; } :focus:not(:focus-visible) { outline: none; } 🎉

Slide 103

Slide 103

Slide 104

Slide 104

: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 105

Slide 105

art direction is… systematic.

Slide 106

Slide 106

Slide 107

Slide 107

a design system is… components guidelines react patterns modules framework standards css styleguide voice typography spacing principles documentation colors editorial tools library

Slide 108

Slide 108

Design Systems — review of vocabulary and terms, https://varya.me/blog/design-systems-review/

Slide 109

Slide 109

Design Systems — review of vocabulary and terms, https://varya.me/blog/design-systems-review/

Slide 110

Slide 110

a design system at its foundation, a set of rules. is

Slide 111

Slide 111

Rules and creativity aren’t mutually exclusive. Rules can be broken.

Slide 112

Slide 112

page-specific CSS one-offs me

Slide 113

Slide 113

“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 114

Slide 114

strict vs l o o s e

Slide 115

Slide 115

enable the snowflakes.

Slide 116

Slide 116

Slide 117

Slide 117

Slide 118

Slide 118

Slide 119

Slide 119

“ If you made everything the same, it was boring after the first year… PAULA SCHER

Slide 120

Slide 120

Slide 121

Slide 121

Slide 122

Slide 122

Slide 123

Slide 123

“ …If you changed it individually, the theater lost its identity. PAULA SCHER

Slide 124

Slide 124

familiar? sound

Slide 125

Slide 125

“ Take the color system and typography and translate it into a seasonal standards manual. PAULA SCHER

Slide 126

Slide 126

“ Each year, The Public Theater gets a new identity. PAULA SCHER

Slide 127

Slide 127

Slide 128

Slide 128

visual language per locale?

Slide 129

Slide 129

Slide 130

Slide 130

Slide 131

Slide 131

Slide 132

Slide 132

Slide 133

Slide 133

Slide 134

Slide 134

Slide 135

Slide 135

Slide 136

Slide 136

art direction is… progressively enhanced. localized by culture. a cross-functional partnership. inclusive by default. powered by design systems.

Slide 137

Slide 137

’ @minamarkham 💻 mina.codes thanks!