Design Quality Components
A crafted balance of brand essence and science
Too often digital designers are required to move fast and details are forgotten. Hopefully we can all agree that handing off a text box centered within a rounded rectangle is not quality button, so what is? A quality component feels like the company and works as intended every time for all users — a crafted balance of brand essence and science.
To keep a high quality bar, here is the checklist we follow:
Research
Before you start, understand your brand’s values to the same degree as you understand mobile best practices (Material Design and Apple’s HIG.) Is your brand approachable or sophisticated, fun or serious?
Reach out to your company’s user research team to see if there has been research done related to it and audit all existing designs living in design and code. Agree on it’s name and the root problem it is trying to solve.
Hierarchy
Design the component in relationship to other components around it. Should it feel above, below, or at the same level as others?
Size, type, elevation and color are our major players in hierarchy and brand. Primary components should feel the most branded — while secondary should feel below or at the same level as each other. In a light app, larger colorful / darker colors, bold type and a higher elevation are recognized as primary. Smaller components with muted colors, medium or regular type, and low to flat elevation are read as secondary.
A base component, like button, can have both primary and secondary versions of itself. By providing these options for reusable components, you create a more flexible system.
Type and color are also our major players in terms of legibility. Most phones are held 12" from the user’s face. At that distance, type needs to meet or be above 15pt and a 4.5:1 contrast ratio of type to background color in order to comply with WCAG Level AA guidelines.
Our design system provides an accessible color spectrum, legible type set, leveled elevation system, and a collection of recommended sizes (built on 8s.)
For more on color, read my teammate Kevyn’s Re-approaching Color post.
Structure
Keep in mind visual variety and localization when determining a component’s shape and scale.
We’ve all be trained that sharp corners feel more serious and rounded more friendly, but that doesn’t mean you should repeat the same corner type on every component. It’s important to diversify your library with a variety of like-shapes to improve visual scanning and avoid an unintended perception. For example, too many pill shaped components may push a brand from ‘friendly’ to ‘childish.’
Our design system provides spec’ing symbols including spacers, centering, and tap targets to indicate how a component should be built and scale.
Learn more & get the Sketch file in my Constraint Layout (for Designers) post.
Interactivity
Don’t forget essential states and animations that can breathe life and communicate status.
State changes communicate the component’s status to the user. They should be visually similar and distinguishable from each other. A button press state reconfirms their action, while a disabled state indicates that a different action needs to be done in order to move forward. Different types of component require different states, so research with your engineer upfront is important.
How a component animates between states and enters and exits the screen can have a powerful or subtle nod to brand perception. Simple, fast opacity changes can make the app feel utilitarian, while a flooding fill is more playful. A quality component requires curves and duration for enter, exit, and state change animations.
For a full list on states to design for, check out Material Design.
Last thoughts
Test the success of your component by placing it in a majority of the screens you collected during the audit.
Once you get approval from stakeholders, create your own documentation around hierarchy, structure, interactivity and usage of a component is key to helping other designers and engineers understand your intentions.
I’m Linzi Berry, currently design systems manager at Lyft. I sweat the details so you don’t have to. Please subscribe!
