Full-Featured Art Direction for the Web
A presentation at An Event Apart San Francisco 2018 in in San Francisco, CA, USA by Mina Markham
🎙 An Event Apart 🗺 San Francisco full-featured art direction ! @minamarkham #aeasf
hello. ! @minamarkham 🔗 mina.codes
twitter https://twitter.com/zeldman/status/1011969784014090240
https://twitter.com/MinaMarkham/status/1011971568929402881 twitter
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/
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!
Now that we have the tools to superpower our layouts, we can start to reimagine how we approach art direction and design on the web. By taking advantage of technologies, some new and some overlooked, we can create a progressively-enhanced design that’s powered by feature queries; one that’s localized for an increasingly global audience. In this talk drawn from her work for Slack and other properties, Mina walks through her process for enhancing design and shows how little changes lead to big design payoffs.
for free. You
can too.
Resources
The following resources were mentioned during the presentation or are useful additional information.
