Good morning, we're back for day two of #Clarity2019! I'm live tweeting the sessions again, starting with @MinaMarkham on Full-Featured Art Direction for the Web!
Rules that govern how you create products for your specific brand. But note: rules and creativity are not mutually exclusive! Rules _can_ be broken is your use case evoke that.
@MinaMarkham@danmall “We can have a consistent foundation of tried-and-tested UI elements and have a more creative layer on top that is more expressive and innovative for that particular page.”
— @minamarkham #Clarity2019
@MinaMarkham@danmall Product Design lends itself more to a stricter design system while editorial leans more towards a loosely-defined one. Mina's aim is not to fight the edge cases but to support them with guidelines and principles that everyone agrees on. #Clarity2019
@MinaMarkham@danmall Reminder from Rachel Andrew: sites and applications have to WORK everywhere, and for everyone, but they don't have to LOOK the same (it's not possible).
There are still people aiming to accomplish that; it's time to stop. Be accessible, not identical. #Clarity2019
Sponge — HTML
Icing — CSS
Decorations — Javascript
“If you give people just the base, they still have cake! And some people even scrape the icing and decorations off their cake, anyway.” #Clarity2019
@MinaMarkham@danmall The best foundational approach for almost all cases: build a page with just HTML first, get the semantic elements identified for usability and accessibility, and only after that start adding layers of CSS, then JavaScript. #Clarity2019
@MinaMarkham@danmall “I don't mean NO Javascript, but there should not be blocking JS preventing people from doing what they came there to do. Blocking JS might break your page if it fails to load, or they have an ad blocker, or are on a slow network. Plan for THOSE experience.” #Clarity2019
@MinaMarkham@danmall This is building sites progressively, something you can test with MyBrowser.fyi: there are different tiers or layered experiences, which all work and feel designed no matter what your browser is set to allow. #clarity2019
@MinaMarkham@danmall Back at Hillary for America in 2015, Mina and her head designer Victor Ng did a process they called “pair designing” where she would build components in real time in a collaborative process while Victor designed them. #Clarity2019
@MinaMarkham@danmall In this process they built a rapport and identify more clearly what each other's goals and constraints were, and from working collaborative with support groups they found accessibility concerns, including adding braille to buttons! #Clarity2019
@MinaMarkham@danmall For the Hillary H→ logo, they had a fully accessible description read out by Michael Beirut to ensure everyone, even blind users, had a good sense for the brand. #Clarity2019#YxAccessibility
@MinaMarkham@danmall DON'T: remove the :focus outline because you don't like it.
DO: style the :focus outline to fit with your brand aesthetic.
@MinaMarkham@danmall Sometimes coworkers (*cough*designers, CTOs*cough*) may not like the outlines you design, but 1) insist on the accessibility requirement and 2) compromise where you can. #Clarity2019
@MinaMarkham@danmall The requirements from engineering to designers (of components) should include all of the following states:
• Default
• :focus
• :hover
• :active
A future `:focus-visible` pseudo-property to test for could allow users to force a visible :focus state if desired. #Clarity2019
@MinaMarkham@danmall “Making accessible components will not guarantee that your project is accessible! It just means your individual pieces are accessible.
It's very important you test not the component part, but the page-level construction as well.”
— @MinaMarkham
@MinaMarkham@danmall A weird experience of translation: showing western people having an (e.g.) English conversation in Japanese kanji. (“This feels strange,” said a Japanese coworker)
Instead of using western avatars with Japanese texts, they made the avatars colorful blocks. #Clarity2019
@MinaMarkham@danmall This led them to localize the representation (of the Slack product) by adding contextual data to the personas used across the website.
This then led them to ensure that Slack's iconic witty idioms and humor was localized to each language, too. #Clarity2019
@MinaMarkham@danmall Thinking about the level of care of localizing the context and layout of page made Mina think about applying that level of care to design and aesthetic. So she researched Japanese sites, and realized she was applying her Western lens to Japanese aesthetics. #Clarity2019
@MinaMarkham@danmall “This is what Amelie Lamont calls hegemonic design gaze: dictating design judgement from an aesthetic point of view with little regard for utility, origin, or environment.” #Clarity2019
@MinaMarkham@danmall “You have to recognize, respect, and infuse local customs into your design.”
This made Mina wonder: “Is it possible to have a visual language per locale?” #Clarity2019
@MinaMarkham@danmall The Public Theater in NYC had a conundrum: to establish an identity through visual design language, but not homogenize plays' posters. But conversely, allowing each poster to be unique to its play would remove the theater's identity. #Clarity2019
@MinaMarkham@danmall They solved it by “taking the color system and typography and translate those into a seasonal standards manual. Every year, The Public Theater gets a new identity.” #Clarity2019
@MinaMarkham@danmall On a technical level, Mina uses the `:lang()` pseudoclass to change look & feel, layout, and even adjust things like adding motion—but, conditionally, to ensure people who want less animation aren't forced into it! 😍 #Clarity2019
@MinaMarkham@danmall Cultural appropriation is something to be careful with. The distinction to do research on is cultural APPRECIATION versus appropriation. Trying to appeal to a particular market's culture requires respecting the significance behind each element of their culture. #Clarity2019
@MinaMarkham@danmall To sum up, art direction powered by design systems is:
• progressively enhanced default experiences,
• inclusive with smart defaults, and
• localized by culture.
@_dte Dan's origin story involved building a robot from a subscription magazine that sent out pieces one at a time, and after everyone had their completed robot the magazine shared pictures of how some people had customized their robot design, which he found really cool. #Clarity2019
@_dte Visualizations are an interesting way to illustrate the compound effects of an instruction: top row, lines are drawn with a linear instruction outward, creating a spiky feel; bottom row they're given a random direction, creating a smoky feel. #Clarity2019
@cascadesf@robbiedigi@ranliudesign We start the night with a fireside chat with Elena Lin, who volunteered at @CascadeSF, was a mechanical engineer, hacked her career and is now a Product Designer on Growth at @linkedin.
She started w/ engineering, but from going to design events in SF she found a passion for the process of envisioning and creating new products. (SAME) #GrowthDesignSeries#YxGrowthDesign
To me, the problem with Disney firing James Gunn from GOTG3 is that in doing so, they simultaneously legitimize (somewhat) Cernovich’s baseless conspiracy theory AND undermine the whole point of accountability in the first place.
Giving *any* kind of credibility to a man who has genuinely tried to sell “super serum” (don’t ask what’s in it), routinely conducts unethically, and profits off of peddling toxic conspiracy theories, is a huge mistake on Disney’s part.
And that’s not even the worst part.
Gunn is a fairly rare case of someone who made a bunch of bad “jokes”, got called out for them, and OWNED UP to them, apologized sincerely, and changed himself to be better.
We already *had* accountability for Gunn. He has become a better person*.
The greatest gift in season 2 of @WestworldHBO so far, for me, is Maeve's response to Dolores' rebellion: "And let me guess: yours is the only way to fight?" I think back to it almost every day.
This world is so full of conflict, it's easy to forget that we built it on love, on kindness, on the stories we told one another for hundreds of thousands of years.
We (rightly, don't get me wrong) point out how evil acts are slowly being used to normalize evil so that the envelope can be pushed, the Overton window shoved, and more and more freedoms taken from us all. Do we spend enough time on the opposite, though?