Clarity is one the few design/front-end focused conferences that i do recommend. A little bit about my background, I work full-time for Mercari in Tokyo, Japan.
https://www.clarityconf.com/
Design system is one the most-talked items in the past years, evolving from perfecting a UI component library to how we work together: the process, the tools and the people.
The fear of “being not good enough” is amplified when designers and developers looking at a bunch of pretty design systems out there. And then you look back at your critical teammates…
This is a never-ending process and the truth is nothing around design systems, the framework, the guidelines are mature enough to let you and your teammates work with 100% ease and 0% fear. Below are the 3 parts takeaway that i found useful and match my beliefs:
1.Tooling
2. Reconsidering Design System (technics, accessibility, collaboration)
3. What is next.
Some of the talks are very dense and require web knowledge so please look at the attached materials.
1. Tooling
The current tooling landscape is a little nightmarish since many of them are doing the same things.
Figma, Invision DSM, Interplay, Abstract are the tools that bridge that gap between static design & code.
Figma (I have switched to Figma from Sketch for 1+year)
Compact design workflow: create UI, prototype and manage hand-off.
Pros: real-time app, shared component system, features, good pricing, decent Sketch import.
Cons: no animation feature, confusing app interface, version control requires extra work.
Invision DSM
Syncing up Sketch and actual code with the styles and tokens provided. Live Components, Storybook integration, sketch symbol library turning into better component library interface within Craft Manager and separate web-view.
Interplay
Supporting React & Vue, Figma & Sketch plugin at this moment. Keeping design & code in sync. The work-flow starts with developers generating a library interface from the component code repository. Designers then can work with the coded components directly via plugins. Providing documentation interface as well (this looks quite good to me).
Abstract
Github for designers. Great version control for all the Sketch files. Better developer hand-off than Zeplin in my opinion (measuring layers & distance/margin feature). Interface is a little complicated.
2. Reconsidering Design Systems
Dan Eden, Design Lead from Facebook considered design system works as building things for people who build things, and the distribution of design systems involves tools, resources, guidance, support and most importantly, the people.
Stef. Sullivan Rewis & Brandon Ferrua from SalesforceUX gave a dense talk on the importance of standardizing your web components: “Our ecosystem is odd because our customers build on this stuff, too. So to remain agnostic as a framework, we build blueprints, not components”.
Lightning Design System from Salesforce has introduced the concept of “Design Tokens”, which will be increasingly popular in my opinion. Design system tokens are supposed to be used across platforms, and are specified as primitive & component tokens in term of how customizable the token is.
Link to the slides
Designing Standard Systems https://t.co/MqLj7SQjlR?amp=1
Harry Roberts gave advices on improving web performance to deliver better experiences, knowledge on resource hints such as DNS-prefetching and prerendering relationship. Check his blog for more implementation tips
https://csswizardry.com/2019/08/lazy-pre-browsing-with-prefetch/
a). Accessibility for Design Systems
I love Marcy Sutton’s talk “Garbage Pail Components”, about the current horrible landscape of accessibility (a11y)on the web. Marcy is the Head of learning for Gatsby JS and started a great conversation ahead of many good talks on accessible and inclusive product design and development. Accessibility is not a plus one for your design system, it should be a baseline and to start a11y with your components is recommended. We have the responsibility to acknowledge the pain of different audiences with different needs. Many big players in the industries already popularized and educated us the need of a11y for digital products.
However generalization and assumption of people with disabilities (temporary/permanent) are rather dangerous, since the smartphone price will go down and many people from different economies and countries will have more access to the internet.
The current a11y guidelines are associated with Eurocentrism and “white supremacy”. Localization in your own culture/country for accessibility is crucial.
In short, here are the assumptions to avoid in web component form for better a11y:
- No focus styles
- Lack of keyboard access
- Poor contrast, font size
- Inability to zoom
- No screen reader (assistive technology support)
- Autoplaying motion
- Cryptic, unlabeled icons
- No captions/alt/descriptions
b). Subvert the status quo
Mina Markham at Slack talked about balancing rules & creativity for design systems, and her passion for inclusivity & accessibility: Art direction, powered by Design systems should be progressively enhanced default experience, inclusive with smart defaults, localized by culture. I have worked in Tokyo in the past 8 years and often heard remarks on Japanese popular digital apps and websites having a bad design taste with little space but overwhelming text & images. The truth is, many of us have gotten used to the Eurocentric design and workflow. Mina gave an excellent example on localizing the Japanese Slack product with extra care on details that reflect the culture.
“Design is not bad, context is everything.” Join Mina on the change.org campaign on making Beyonce website more accessible and lawsuit-proof.
https://gizmodo.com/beyonce-com-lawsuit-reminds-us-how-shitty-the-web-is-fo-1831493336
In the spirit of “subverting the status quo” of the current white supremacy of the tech world, Tatiana Mac’s talk received a lot of love from the attendees. “Tech multiples building hate at scale”. Again, “Clarity is a design systems conference focused on how we work together”. And Tatiana revised Brad Frost’s Atomic Design System into Atom, Organism (product registration), Being (products), Ecosystem (our industry) and World (our society). Design Systems should not introduce bad patterns driven by systemic flaws, but inclusionary ecosystem that do not speak to gender, race and minority bias. It is quite early for her talk to be uploaded, but do go check it won’t disappoint you.
c). Collaboration
Teresa Aguilera and Nicole Torgersen from Gap Inc., shared the road to fuel growth in your design system team through trust and partnership. Culture in your team will shift as Design System is built. In the early stage, many organizations got dragged into “police state”, when people are over-critical of each other and team health can be damaged by excessive monitoring.
As an opening speaker, Denise Jacobs suggested putting Team work over Creativity when designers and developers work together (the usual scene when Designer and Developer keep on tossing their parts over the wall and assume the work is done). Many of us have the fear of being not good enough, and posting ideas often do not happen in public space.
Team health should be a measure of success when it comes to design system. “90% it is about the people, 10% is about the work”
3. What is next
As design system is still young and lacking maturity, inspirations and diverse point of views are much needed for everyone involved in the community to grow together.
I often found most of the design systems rigid and lacking personality. The users of our digital products will benefit from better design consistency no doubt, but most of the benefits the system offers are for our organization.
Rune Madsen and Martin Bravo from Design Systems International asked us to consider making workflows and tools rather than guidelines. Code then is a material to make functional prototypes. How many of us have applied the principles of color elevation palette, primary/secondary/dark mode buttons, the so-called object-oriented system culture to our first design system?
The duo argued that this thinking often lacks the point of view and principles will eventually create more work to do and to scale your brand.
They defined a much broader idea of design system:
- Code is a material
- Visual identities as dynamic entities
- Design through functional prototypes
- Deliver workflows & tools that benefit the users as well
- Our tool must evolve, to reduce the workloads and to make our source of truth more dynamic
Check their e-book Programming Design Systems
Some excerpt from the e-book that i found interesting
Thousands of design systems have been created over the years, from the New York Transit Authority Graphics Standards Manual to Google’s Material Design. Most Fortune 500 companies are recognizable for a reason: they have defined strict rules for use of typography and color across their product line.
Google’s Material Design document was created to help explain the ideas behind the company’s visual language. This includes rules for use of color, layering, and animation.
That is to say, there is not a “system for everyone” when talking about open-source design systems on the market. However, I still recommend open-source libraries for in-house tools and small organizations that requires minimal branding and resources.
Ethan Marcotte, the father of responsive web design on stage. The talk that got a standing ovation at the end, in a room filled with professionals and leaders from top-tier tech companies from around the world.
The anatomy of a letter component
Web developer has the power to decide who has the access to read the web content. This is the example of different paddings around the “M” capital letter that can decide the accuracy of screenreader.
We have more power to influence and change behavior of our users than we think.
“Design can encode racist and sexist biases”
I still love the web. Web is the foundation of many innovative and creative products. “We envision a world where all people are empowered by the Web… The Web’s capabilities will multiply, and play an increasingly vital role in reducing poverty and conflict, improving healthcare and education, reversing global warming, spreading good governance and addressing all challenges, local and global”.
But the web feels a little bit darker now.
Ethan compared the industrialization of the sewing machine as a tool invented to liberate women and reduce poverty at first, to exploitation of cheap labor by advancing automation, to our current World Wide Web.
Advocacy, Adoption to Institutionalization are the current 3-steps pattern of the Web’s growth.
From Amazon’s Rekognition facial detection, Google’s Dragonfly Search engine for China to Facebook’s data breach.
The pursuit of scale and AI-powered will take away a vast amount of jobs, and creating even more cheap labors along the way. It is happening. Ethan talked about a story of a company that produces training datas for Machine Learning algorithms of some of the most powerful tech companies in the work. And each of them makes 9$ per day on average. Eventually when the AI model is perfected, they will lose their job. The workers are forced to train the algorithms that may replace them.
A lot of us, workers of the Web, do not have bad intention. A lot of us are told what to do. But we have the power to influence and shift the web into the right path together.
A very powerful talk that i used to watch online earlier this year for a different conference that made me shift my focus into improving accessibility for digital products. But to be one of Ethan’s real-time audiences at Clarity was very surreal and inspiring. Watch below.
And i like to quote Dan Eden’s tweet to sum things up
