Design System

Design System

Design System
Design System

Design System

Design systems are essential for businesses looking to document their design assets and continue building consistent, usable designs. Not only is this beneficial for the designers and developers at a company, but it allows others at the company to see and better understand how and why design decisions are made by having everything in one organized place.

What is a design system?

A design system is a documented catalog of components and styles used within a product, including how and why each should be implemented. It provides visual and experiential consistency within the framework of a common language while creating a product.
 

Importance of design system

Design system elements can also extend into other brand touchpoints beyond the actual product. When creating things such as email and social media content, it is common for design system elements to filter through and be used by other teams in ways that the product design team might not have intended. It’s important to remember that while your product team works hard to keep all of these design elements consistent and “on brand”, there are likely going to be times when marketing teams, for instance, might break design protocol for their advertising purposes.
eg. Google, Apple, Adobe, Atlassian etc
 

BENEFITS OF DESIGN SYSTEMS FOR EVERY MEMBER OF THE TEAM

  1. Scalability
  2. Maintainability
  3. Productivity
  4. Consistency
  5. Improved code and design quality
  6. Better knowledge sharing
  7. Closing the product gap
  8. Promoting the company’s product design philosophy and principles
     

Atomic design

One of the most commonly referred to explanations of how a design system works is with Brad Frost’s atomic design. Through this analogy, Frost breaks down the pieces of a design system using the same framework for understanding the makeup of things found in nature.
Frost’s atomic design starts with an understanding of user interface (UI) components, which he equates with atoms — the building blocks of matter. UI components are elements that can be combined to create the screens of a digital product and, ultimately, can develop a full-fledged design system.
So essentially, combining UI components create molecules and those molecules are then combined to create organisms. Organisms are combined to create templates which then become pages. Finally, a collection of pages is what becomes a website (or any other digital product like mobile and desktop applications).


Some examples -
https://m3.material.io/foundations/accessible-design/overview

List of components to be covered under the Design System:

Typography Guidelines

  • Limit the number of typefaces per website.
To maintain visual cohesion throughout your content, use no more than two different typefaces across your website.
  • Use a sans serif font for body text.
Typography experts generally agree that sans serif fonts are actually more readable in digital contexts. Our eyes follow web text better without the decorations.
  • Stick to standard fonts at first.
By choosing a web-safe font, you’ll ensure your text is easily readable for everyone through any digital means.
Readers are accustomed to seeing standard fonts online. They won’t be distracted by the appearance of the text, and will be able to scan it more quickly. Ultimately, typography should help the reader, not distract them from the content they want.
web-safe fonts tend to lack some inconvenient design flaws seen in other fonts. They also minimize instances in which two different characters are hard to distinguish, like “I” form “L” or “r” from “n”.
  • Size your text appropriately.
A common practice is to set all website text to a minimum size of 16px. This is the smallest font that most people can read without needing to zoom in.
On the subject of hierarchy, headings should always be larger than body text and decrease in size by H1, H2, H3, etc. This helps readers scan your pages for the target content. You might also elect to add varying weights to your headings for a greater contrast with body text.
Type Scale -https://m2.material.io/inline-tools/typography/
  • Don’t use all caps
”all caps” is unnecessary in nearly all contexts outside of decorative text, branding, and the occasional set of headings.
If you want to emphasize body or heading text, bold it. This lends the same effect while being more readable and visually pleasing.
  • Use colors carefully and intentionally.
Avoid bad pairing of text color and background color, in which the two do not contrast enough to maintain legibility.
Maintain contrast ratio of at least 4.5:1 for most text, and 3:1 for large, bolded text.
Free Tool to check the contrast between your font and background color. -
https://webaim.org/resources/contrastchecker/
  • Stay between around 40 and 80 characters per line.
Humans are picky readers — we favor lines of text that fall between 40 and 80 characters. Anything less forces our eyes to move to the next line too frequently, which distracts us. On the other end, any line length greater will bore readers, cause discomfort, and require more effort to find the start of a new line as the eye travels back to the left side of the text block.
These parameters provide some wiggle room for different page layouts and mobile-responsive designs. However we can aim for the sweet spot of 60-70 characters per line.
  • Provide sufficient spacing between lines.
Proper whitespace ensures that readers can easily follow single lines of text and return the next line after a line break.
  • Eliminate text animations.
Many visitors will think of this text as an unnecessary inconvenience, a gimmick, and/or an ad. Flashing images may also trigger photosensitive seizures.
The sole exception to this final rule is entrance or exit effects. These can be a fun way to build an experience for a visitor as they scroll. But, once the text appears, it should stay static.












 

Color Palette and Branding

  • Research your competitors brand colors
Research and audit your competitors’ brand colors. To increase brand recognition and a preference for your brand, look for ways you can differentiate yourself with color.
Since your product often appears among competitors—understanding why your competitors chose the brand colors they did can help your team make branding decisions that help you stand out.
  • Represent your business with the perfect brand colors
Pinpoint brand colors that reflect your brand identity so that your audience immediately recognizes your brand when they see your colors.
One way to brainstorm your brand color scheme is to create a mind map of all the significant aspects of your brand identity. Using your competitive analysis data, brand identity, and core values, brainstorm color ideas with your brand marketing team. Consider which characteristics best represent your brand personality and attract your target audience.
Use a color wheel or color palette generator to inspire your brand colors
https://www.canva.com/colors/color-wheel/
  • Color palette guidelines
A color palette is the full range of colors that a brand sets as their identity.

Primary color
Primary colors help consumers to quickly identify a brand. These are the core colors of the brand. Commonly, primary colors are incorporated into a company’s logo. A company has between 1-3 primary colors but there can be more if desired.

Secondary color
Secondary colors highlight and compliment the primary color or colors. They usually have a range of 1-6 colors. Companies can decide to have an infinity of secondary colors but we suggest limiting the color palette as it helps with recognition and consistency.

Tertiary color
A tertiary color is a third level of a color palette that combines primary and secondary colors. A favorable reference point for the use of these colors is 10% of the entire color palette. Even though tertiary colors are not used often, they are still useful in adding diversity to the palette. Charts and graphs are good examples of usage of both secondary and tertiary colors.

Extended palette
The extended palette consists of all the usable tints and shades of each color in the palette. They are all numbered for easy reference. Usage of these colors varies depending on the touch point, but they come in handy for illustrations and components in products.

Semantic color
The following guidelines outline when to use colors in a product. Semantic color helps users find people, identify status, see actions, locate help, and understand next steps. The consistent use of color keeps cognitive load low and makes for a unified and engaging user experience. In addition to the color usage guidelines for the web, there are also iOS and Android application color guidelines that augment the color guidelines for those platforms.

Black and white
Black and white can be easily overlooked in brand guidelines but it is worth noting these colors. Generally, black is primarily used as a text and background color while white provides contrast and clear spacing.
For digital use, pure black (#000000) is not recommended for backgrounds or text. Pure black overpowers surrounding objects and is straining on the eye on digital devices. Ultimately, pure black is not user-friendly and should be avoided.


Grayscale
A grayscale shows a variety of different shades of gray. The highest level of gray is black and the lightest shade is white. Having a grayscale, can help support primary colors.

Color proportions
A color proportion scale is a great way to demonstrate how much the colors should be used. This can be displayed in a circular diagram, rectangular layout, chart or in abstract shapes. The primary color is the largest color with the secondary color being a medium size and the tertiary color in the smallest form.
Here is the rule of thumb for showing color proportions:

3 colors: primary color ½; 2 secondary colors ¼ = 50:25:25
4 colors: 2 primary colors ⅓; secondary color ⅙; tertiary color 1/12 = 33:33:16:8

Color roles
Color roles describe the intention behind the color. For example, color roles are applied to buttons to differentiate between primary, secondary, warning, or dangerous actions.

 

Reusable Button Component


Buttons allow users to perform an action or to navigate to another page. They have multiple styles for various needs, and are ideal for calling attention to where a user needs to do something in order to move forward in a flow.
  • Accent
The accent button communicates strong emphasis and is reserved for actions that are essential to an experience.
  • Primary
The primary button is for medium emphasis
  • Secondary
The secondary button is for low emphasis
  • Negative
The negative button is for emphasizing actions that can be destructive or have negative consequences if taken. 
  • Disabled
A button in a disabled state shows that an action exists, but is not available in that circumstance. 
  • Orientation
A button group can be either horizontal or vertical in its orientation. By default, a button group is horizontal. Use the vertical option when horizontal space is limited.
  • Size
Button groups come in four different sizes: small, medium, large, and extra-large. The medium size is the default and most frequently used option. Use the other sizes sparingly; they should be used to create a hierarchy of importance within the page.
  • Button with icon
Button with icon is used where we want to show some actions in button itself

 

Form Components

  • Search field
A search field is used for searching and filtering items.
  • Switch
Switches allow users to turn an individual option on or off. They are usually used to activate or deactivate a specific setting.
  • Text field
Text fields allow users to input custom text entries with a keyboard. Various options can be shown with the field to communicate the input requirements.
  • Links
Links allow users to navigate to a different location. They can be presented inside a paragraph or as standalone text.
  • Radio Group
A radio group is a grouping of radio buttons that are related to each other. 
  • Checkboxes
Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected.
  • Toast
Toasts display brief, temporary notifications. They're meant to be noticed without disrupting a user's experience or requiring an action to be taken.
 

Navigation Patterns

  • Navigation bar
The navigation bar provides additional functionality by providing direct links to main sections in the contents including the index. To be a part of the webring, each site has a common navigation bar; it contains links
  • Drawer/Hamburger menu
Hamburger menu (three-striped icon), also called ‘Drawer,’ usually fits in secondary actions of the application.
  • Breadcrumb
Breadcrumbs show hierarchy and navigational context for a user’s location within an app.
  • Tabs
Tabs organize content into multiple sections and allow users to navigate between them. The content under the set of tabs should be related and form a coherent unit.
  • Footer
A website’s footer is an area located at the bottom of every page on a website, below the main body content. 
  • Notifications
Notification is any system update that we want to share with the user. Notifications provide relevant and timely information about some event. 
  • Pagination
Pagination is the process of splitting the contents of a website, or section of contents from a website, into discrete pages. This user interface design pattern is used so site visitors are not overwhelmed by a mass of data on one page. Page breaks are automatically set with the use of algorithms, based on cultural and semantic factors.
  • Cards
Cards group information into flexible containers to let users browse a collection of related items and actions. They show a taste of information and reveal more details upon interaction.
  • Carousel
displays more than one piece of content in the same place (one at a time)
  • Timepicker
Time pickers help users select and set a specific time
  • Favorites
Favorites are an easy way to distinguish preferred content from non-preferred content. Favoriting can be done in a list view or in a detailed view of the item itself. In one of the item’s top corners, the outline of a quick favorite link (typically a star or heart) can be seen. When you click on your favorite link.
  • Tags
Tags allow users to categorize content. They can represent keywords or people, and are grouped to describe an item or a search request.
  • Menus
Menus help users take actions, choose from a list of options, configure settings, and more. They can be placed in a transient container, like a popover or tray.
  1. Vertical Dropdown Menu
  2. Accordion Menu
  3. Horizontal Dropdown Menu
 

Iconography

Product icons are the visual expression of a brand’s products, services, and tools.

 

Brand expression

Product icons are the visual expression of a brand and product, including their services and tools. Icons communicate the core idea and intent of a...
Product icons are the visual expression of a brand and product, including their services and tools. Icons communicate the core idea and intent of a product in a simple, bold, and friendly way. While each icon is visually distinct, all product icons for a brand should be unified through concept and execution.
It can be defined by

Colour, Size, layout, spacing, stroke width, corner radius and gradients
 



Spacing


Spacing methods use baseline grids, keylines, padding, and incremental spacing to adjust ratios, containers, and touch targets.
 

Usage guidelines


Use spacing between components#
Spacing should be used to define the space between components.

Use spacing with responsive grids

 

Animation Guidelines

  • Ensure it adds value to the user experience
Animation of any kind should always improve the user experience and never detract from it. It should be relevant, functional, and add a little extra depth to the UI. 
  • Let users feel like they are in control
Animation helps users feel like they are more involved in a digital experience. One way to boost that feeling is by empowering them to control some of the animation themselves.  Allowing viewers to pause an animation video or minimize a chatbot to limit distractions is vital to ensuring a top-notch user experience.
  • Use it sparingly
At its core, animation is a distraction. It is meant to draw attention; therefore, if you cram your digital content full of whizzy moving parts, your visitors may experience cognitive overload. Confused by what they should focus their attention on, they may miss the point of your site entirely and leave empty-handed.
  • Leverage it for purposeful distraction
In today’s digital environment, people expect instant results. So what happens when your app or website needs a little time to process behind-the-scenes operations? Add a purposefully distracting animation! These handy inserts will keep your audience engaged while they wait for results and act as “proof” that there is work going on behind the scenes. Some businesses opt to use these “loading animations” to boost their product’s credibility even if they have no need for them—and use them as an additional branding opportunity.
  • Keep the interface natural
Any animation you add to your digital content should be smooth and seamless. Whether it’s a video, direct manipulation where users can move elements around a screen, an anchor link that gently brings you to a particular section of a page, or any other animation, don’t rush things! Jerky, quick movements are the antithesis of an effortless user experience. You don’t want to surprise people or make them anxious.
  • What are the different kinds of UI animation?
  1. Micro-interactions
  2. Loading and progress
  3. Navigation
  4. Storytelling and branding
     

Accessibility Standards

Accessibility: addresses discriminatory aspects related to equivalent user experience for people with disabilities. Web accessibility means that people with disabilities can equally perceive, understand, navigate, and interact with websites and tools. It also means that they can contribute equally without barriers.
Inclusion: is about diversity, and ensuring involvement of everyone to the greatest extent possible. In some regions this is also referred to as universal design and design for all. It addresses a broad range of issues including:
  1. accessibility for people with disabilities;
  2. access to and quality of hardware, software, and Internet connectivity;
  3. computer literacy and skills;
  4. economic situation;
  5. education;
  6. geographic location;
  7. culture;
  8. age, including older and younger people;
  9. and language.
Importance of accessibility
Principles for accessible design
Honor individuals
Universal default experiences rarely meet everyone’s needs. Introducing customizable features in a default experience allows room for individual adaptation.
Learn before, not after
eg. Input filed before submitting form we can show user that email ID is not matched or Password criteria is not matched

Web accessibility standards

Text alternatives for non-text content - ie. graphs, images
Captions and other alternatives for multimedia - Transcripts for videos
Content is easier to see and hear
  • Color is not used as the only way of conveying information or identifying content
  • Default foreground and background color combinations provide sufficient contrast
  • When users resize text up to 400% or change text spacing, no information is lost
  • Text reflows in small windows (“viewports”) and when users make the text larger
  • Images of text are resizable, replaced with actual text, or avoided where possible
  • Users can pause, stop, or adjust the volume of audio that is played on a website
  • Background audio is low or can be turned off, to avoid interference or distraction
Functionality is available from a keyboard, mouse
Users have enough time to read and use the content - Animation
Content does not cause seizures and physical reactions - Animation
Users can easily navigate, find content, and determine where they are - search, breadcrumb
Users can use different input modalities beyond keyboard - support activation by voice, avoid accidents provide undo functionality
Text is readable and understandable
Content appears and operates in predictable ways - placement of navigation objects should be same
Users are helped to avoid and correct mistakes - Descriptive instructions, error messages, and suggestions for correction
https://www.w3.org/WAI/fundamentals/accessibility-principles/
https://userway.org/

 

Documentation and Training Materials