Kamran Ahmed
2 years ago
parent
d4a5aa02c2
commit
3670d053c3
26 changed files with 80 additions and 26 deletions
@ -1 +1,3 @@ |
||||
# Spacing |
||||
|
||||
Horizontal and vertical rhythm plays a big role in a layout. You should provide easy methods for adding space between interface elements independent of your grid. |
||||
|
||||
@ -1 +1,3 @@ |
||||
# Breakpoints |
||||
|
||||
Predefine the screen sizes and orientations your grid will adapt to. |
||||
|
||||
@ -1 +1,3 @@ |
||||
# Grid |
||||
|
||||
Every layout should sit on a grid that brings order and hierarchy to the interface. Define a grid separately for mobile, tablet and desktop devices with columns, gutters, and margins so your interface can adapt to any platform easily. |
||||
|
||||
@ -1 +1,3 @@ |
||||
# Units |
||||
|
||||
Units are the most granular building blocks for layout. Defining a set of values with consistent increments (such as 4, 8, 12 and 16 for a 4-point system) will provide you with the foundation when you’re designing your grid and spacing values. |
||||
|
||||
@ -1 +1,3 @@ |
||||
# Layout |
||||
|
||||
A well thought out layout goes a long way. Consistent use of a grid and spacing makes it easier for your users to scan the user interface and grasp the content. |
||||
|
||||
@ -1 +1,3 @@ |
||||
# Guidelines |
||||
|
||||
Provide guidelines on how and when to use the colours in your palette, what to keep in mind when working with them and how not to use them. |
||||
|
||||
@ -1 +1,3 @@ |
||||
# Dark mode |
||||
# Dark Mode |
||||
|
||||
Preparing a dark mode version of your colour palette will allow your design system to adapt to dark mode and respect what your user wants to see. |
||||
|
||||
@ -1 +1,3 @@ |
||||
# Functional colors |
||||
# Functional Colors |
||||
|
||||
Besides your brand colours, make sure to have colours defined and made into variables for functions like disabled states, backgrounds, actions and high contrast text. |
||||
|
||||
@ -1 +1,3 @@ |
||||
# Accessibility |
||||
|
||||
Make sure to have accessible pairings between the main colours in your palette. More importantly, make sure that your background and text colours have at least an AA standard contrast ratio between them. |
||||
|
||||
@ -1 +1,3 @@ |
||||
# Color |
||||
|
||||
Not only an efficient way to showcase your brand, but also an efficient way to communicate with your users. Colour palettes created with purpose over aesthetics in mind can help you create intuitive design patterns by adding meaning to your interface. |
||||
|
||||
@ -1 +1,3 @@ |
||||
# Accessibility |
||||
|
||||
For icons that convey a meaning or serve a function, add the necessary support for screen readers. You can skip this for decorative icons. |
||||
|
||||
@ -1 +1,3 @@ |
||||
# Style |
||||
|
||||
Make sure that your icon family makes visual sense as a whole. Picking an outlined or filled style and sticking with it will lead to better visual consistency and predictability. |
||||
|
||||
@ -1 +1,3 @@ |
||||
# Naming |
||||
|
||||
Name your icons based on what they are, not what they represent. For instance, a trash icon should be named trash, not delete. You can still add related keywords to improve discoverability. |
||||
|
||||
@ -1 +1,3 @@ |
||||
# Grid relation |
||||
# Grid Relation |
||||
|
||||
Draw your icons in a bounding box that plays well with your grid. This makes for a better pairing with other UI elements. A good example of this would be icons with bounding boxes paired with text. |
||||
|
||||
@ -1 +1,3 @@ |
||||
# Sizes |
||||
|
||||
Provide different sizes for icons that correlate to your grid. Provide a minimum size and remove unnecessary detail for your icons for smaller sizes. |
||||
|
||||
@ -1 +1,3 @@ |
||||
# Keywords |
||||
|
||||
Adding keywords will improve the discoverability of each icon and provide a better user experience for anyone using your system. |
||||
|
||||
@ -1 +1,3 @@ |
||||
# Reserved icons |
||||
# Reserved Icons |
||||
|
||||
Reserving icons that represent common actions will prevent their use in any other context. System icons for navigation or adding and deleting are a good example. This leads to a more intuitive user experience. |
||||
|
||||
@ -1 +1,3 @@ |
||||
# Guidelines |
||||
|
||||
Provide guidelines on how and when to use icons, what to keep in mind when working with them and how not to use them. |
||||
|
||||
@ -1 +1,3 @@ |
||||
# Iconography |
||||
|
||||
Icons are symbols that represent functionality or content. They’re especially recognisable and helpful in user interfaces since their meaning can be understood at a glance. hough they can be used just for decoration, their full potential can be realised when they’re used meaningfully and consistently. |
||||
|
||||
@ -1 +1,3 @@ |
||||
# Responsiveness |
||||
|
||||
Desktop devices can usually afford to have bigger font sizes compared to mobile devices. Creating a typography scale that adapts to the viewport size will help with a more meaningful hierarchy and layout. |
||||
|
||||
@ -1 +1,3 @@ |
||||
# Grid relation |
||||
# Grid Relation |
||||
|
||||
Font sizes and leading should match your grid to allow better pairing between text and other UI elements. A good example of this is text paired with icons with bounding boxes. |
||||
|
||||
@ -1 +1,3 @@ |
||||
# Readability |
||||
|
||||
Optimising the letter spacing (tracking), line height (leading) and line length for your typography scale will help with the readability of text. |
||||
|
||||
@ -1 +1,3 @@ |
||||
# Performance |
||||
|
||||
Custom fonts need to be downloaded before they can be displayed, especially on the web. Make sure that you have sensible fallbacks and fast loading time for your typography assets. Using system fonts solves this performance problem. |
||||
|
||||
@ -1 +1,3 @@ |
||||
# Guidelines |
||||
|
||||
Provide guidelines on how and when to use the pairings in your typography scale, what to keep in mind when working with them and how not to use them. |
||||
|
||||
@ -1 +1,3 @@ |
||||
# Typography |
||||
|
||||
Typography is one of the main ways you surface content in products. A clear hierarchy and contrasting styles in your typography scale will make things easier to read and help with the overall structure of your product. It’s also an opportunity to visualise your brand character and presence. |
||||
|
||||
@ -1 +1,5 @@ |
||||
# Design tokens |
||||
# Design Tokens |
||||
|
||||
Variables that store values for the base layer of your design system, like colour and typography. They’re used in components, so changes on this level will resonate throughout the whole system. |
||||
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://xd.adobe.com/ideas/principles/design-systems/what-are-design-tokens/'>What Are Design Tokens?</BadgeLink> |
||||
|
||||
Loading…
Reference in new issue