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

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

Slide 2

hello. ! @minamarkham 🔗 mina.codes

Slide 3

Slide 4

Slide 5

slack.com

Slide 6

slackhq.com

Slide 7

what is… art direction?

Slide 8

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

Slide 9

Design is the how. Art direction is the why.

Slide 10

does it good? feel

Slide 11

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

Slide 12

art direction is… progressive.

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

default experience.

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 17

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

feature not a bug.

Slide 20

build markup first.

Slide 21

Slide 22

Slide 23

Slide 24

Slide 25

Slide 26

Slide 27

Slide 28

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

Slide 29

CSS Grid Layout

Slide 30

Slide 31

Feature Queries (@supports)

Slide 32

Feature Query Manager

Slide 33

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

Slide 34

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

Slide 35

Slide 36

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

art direction is… localized.

Slide 39

Bienvenue. Willkommen. Bienvenidos. ようこそ.

Slide 40

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

Slide 41

Slide 42

Slide 43

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

Slide 44

localization not translation.

Slide 45

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

Slide 46

Slide 47

Slide 48

contextis everything

Slide 49

Slide 50

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 53

Slide 54

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 57

Slide 58

Slide 59

Slide 60

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 63

Slide 64

Slide 65

:lang()

Slide 66

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

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

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

Slide 69

Slide 70

Slide 71

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

Slide 72

Slide 73

Slide 74

art direction is… cross-functional.

Slide 75

engineer? wait. aren’t you an

Slide 76

Slide 77

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

Slide 78

Slide 79

pair designing.

Slide 80

“Move that 1px down.”

Slide 81

Victor Ng

Slide 82

Slide 83

😭

Slide 84

Slide 85

collaboration breeds creativity

Slide 86

collaboration breeds inclusivity

Slide 87

art direction is… inclusive.

Slide 88

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

Slide 89

Slide 90

Slide 91

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

Michael Bierut

Slide 95

don’t remove defaults.

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

design better defaults.

Slide 98

Slide 99

Slide 100

Slide 101

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

Slide 102

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

Slide 103

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

art direction is… systematic.

Slide 106

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

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

Slide 109

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

Slide 110

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

Slide 111

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

Slide 112

page-specific CSS one-offs me

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