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

hello. ! @minamarkham 🔗 mina.codes

slack.com

slackhq.com

what is… art direction?

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

Design is the how. Art direction is the why.

does it good? feel

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

art direction is… progressive.

“ 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

default experience.

What is Progressive Enhancement and Why Should You Care?, https://www.shopify.com/partners/blog/what-is-progressive-enhancement-and-why-should-you-care

“ 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

feature not a bug.

build markup first.

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

CSS Grid Layout

@

Feature Queries (@supports)

Feature Query Manager

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

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

“ 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

art direction is… localized.

Bienvenue. Willkommen. Bienvenidos. ようこそ.

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

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

localization not translation.

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

contextis everything

“ 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

“ 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

“ 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

:lang()

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

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

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

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

art direction is… cross-functional.

engineer? wait. aren’t you an

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

pair designing.

“Move that 1px down.”

Victor Ng

😭

collaboration breeds creativity

collaboration breeds inclusivity

art direction is… inclusive.

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

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

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

Michael Bierut

don’t remove defaults.

“ Removing the :focus outline is like removing the wheelchair ramp from a school because it doesn’t fit in with the aesthetic. DAVID GILBERTSON

design better defaults.

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

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

: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; }}}

art direction is… systematic.

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

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

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

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

page-specific CSS one-offs me

“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

strict vs l o o s e

enable the snowflakes.

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

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

familiar? sound

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

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

visual language per locale?

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

’ @minamarkham 💻 mina.codes thanks!