Colours
Use colour to create structure, manage emphasis, signal important actions, and code content. To ensure that the palette is identical across all products, please use design tokens.
Primary (associate the product with the company's brand).
Secondary (highlight or complement the primary colour).
Neutrals (used for backgrounds, text colours, etc., and form the majority of your UI).
Semantic (help users convey messages e.g. green has a positive connotation).
πΒ Defining colours in your design system
πΒ Colour in Design Systems
πΒ Carbon UI colours
Typography
Typography and corporate font help to convey brand message and make it recognisable.
Choosing a font (select the most suitable fonts for your design).
Font pairs (combine character and legibility).
Typography settings (configure alignment, line heights and weights, case, letter spacing etc.).
πΒ Typography in UI Design
πΒ Pick Fonts
πΒ The Step-by-Step Guide for Pairing Fonts
Icons
Use icons to speed up object recognition and draw attention to an action, command, or section.
If you're not sure about an icon, you probably shouldn't use it at all.
Responsiveness (the flexibility in detail of the icons at varying sizes).
Style (the visual look of the icons β outlines, shadows, perspective, corners and colours).
Color (black and white, flat colours or gradients).
Sizing (use size gradation for appropriate scale e.g. small/medium/large or 16/24/48px).
Naming (clearly identify the meaning or function of the icon in its name).
πΒ 7 Principles of Effective Icon Design
πΒ A complete guide to iconography
Grids
Grids are a great framework to help designers quickly put together a clean, well-aligned interface, and help users to easily scan, read, and use those interfaces.
Consistency (to set up dimensions in the interface use a 8/4px grid).
Repeatable patterns (it should be easy for the user to find key information or actions).
Adaptive (as you shrink the window, things should change dynamically β text wrapping, and elements are getting narrower).
πΒ UI/UX Design: Setting Up Grids
πΒ Responsive grids and how to actually use them
πΒ Building Better UI Designs With Layout Grids
Components
Basic interface elements from which more complex components and screens are created.
Button
Base style (your default style, one of the following: fill, outline, underline).
Shape (visual properties of a button: padding, border, border radius, shadow).
Variants (each visual type to represent button structure e.g. primary and secondary buttons).
States (how the button changes based on the interaction).
Copy (instructional text that details what will happen if you click the button).
Text Field
Input field (interactive text field for user to enter their data into).
Label (stating what information the user is meant to provide).
Placeholder text (text inside the input field acting as an example of what you want the user to enter).
Data format (set text fields to allow the relevant text values e.g. numeric only for phone number).
Icon (a visual cue can help break up a long list of text fields).
Helper text (elaborate on the title of the text field incase a user struggles to know what to enter).
Dropdown
Input field (interactive text field for user to enter their data into).
Label (stating what information the user is meant to provide).
Control ( icon, button, or action that triggers menu display).
Options (indicate selected, disabled and available options).
Position (menus should be positioned next to (or in front of) the element that generates them).
Search
Input field (a clear container for a user to start typing in).
Label or placeholder text (identify the purpose of the field is for them to search).
Quick links, autocomplete and suggestions (as the user is typing, offer available links and phrases based on what they have entered so far).
Submit search button (a visible link to submit search and view results).
Previous searches (showing what a user has searched before can speed up their experience if they frequently search the same queries).
Appropriate visibility (search should be directly linked to what you are looking for, whether it's searching across the entire platform or in a specific area).
πΒ UX Best Practices for Using Search on Your Website
πΒ 5 important things you need to consider when designing for search
πΒ Best UX Practices for Search Box
Date Picker
Input field (interactive text field for user to enter their data into).
Label or placeholder text (identify the expected input format e.g. DD/MM/YYYY).
Switch-to-keyboard input icon (allow the user to toggle between text input and pop-up selection).
Year selection menu (a switcher to cycle through years)
Month pagination (a control to quickly change months).
Current date (let the user know what date it is today).
Selected date (indicate the userβs selection).
Avatar
Visualiser (show what the avatar looks like before posting or updating).
Placeholder image (if a user hasn't uploaded or added an avatar yet there should be a placeholder e.g. a default icon, or the user's initials).
Status change (online indication, editing, group etc.).
πΒ Design Better Avatars
πΒ Designing the Avatar: All you need to know
Tooltip
Information should be entirely relevant to what the tooltip is for, and elaborate on what is already visible
Information (keep content clear and concise).
Contrast (the background should be different from the underlying content).
Visibility (how a tooltip looks and shows).
Dismiss action (depending on how intrusive or extensive the tooltip is, a dismiss allows the user to feel more in control and allow the tooltip to feel more flexible and non-compulsory).
Checkbox
Clicking a checkbox shouldn't activate another element to appear, change or react β it confirms a change, it doesn't trigger it.
Label (Π΅ext associated with the checkbox).
Style (make sure checkbox is unique and stands out from other input options).
Clickability (consider what is clickable to make the checkbox active e.g. text label or container).
States (can be default, active and disabled).
Radio button
Utilise radio to surface all inputs options, only being able to select one.
Label (text associated with the radio input).
Grouping (there must be more than one radio option for the experience to work).
Default selection (start with a radio option selected).
Style (make sure radio is unique and stands out from other input options).
Clickability (consider what is clickable to make the radio option active (text label, container)).
States (radio can be default, active and disabled).
Toggle
A toggle should always be turning a function on or off, not between two opposing versions of a function e.g. hot or cold.
Context (explaining what the toggle will do).
State (how the control changes based on the interaction β default on/off, hover, disabled).
Animation (a clear visual change of the toggle switching between different states).
Label (chip, tag)
Container (containers hold all chip elements, and their size is determined by those elements).
Text (it can be an entity name, description, tag, action etc.).
Thumbnail (used to display an avatar, logo, or icon).
Remove icon
πΒ Material UI chips
Tabs
Consider arrangement of tabs to be ordered by popularity or familiarity.
Label (name of tab).
Pane (where the content for the active tab is displayed).
Usage (tabs should be used as a sibling view to filter parent information).
Style (how the active tab and inactive tabs differentiate visually).
Structure (parallel with each other, and spaced closely enough to appear connected).
States (Tabs can be active and inactive).
πΒ Tabs, Used Right
Toasts
Copy (the text in the toast).
Placement (toast should appear on the corners of the viewport, not as the focus).
Usage (toasts are triggered to appear after an action or event).
Variants (dictated by colour usually, variants affects the emotion of a message).
Length of appearance (toasts should be visible long enough to read but short enough to not obstruct other information for too long).
Dismissable (depending on the amount of content, a toast can be closed by a user (it should fade away shortly after appearing if it cannot be manually dismissed)).
Organisms
Navigation
Logo (reinforce your brand at the top level on every page).
Structure (ensure your most important links are available at the high level, and links that are a level deeper are relevant and impactful to more niche users).
Consistent location (usually located at the top of the page as it is the most accessible, but it should always appear at the same location on every page).
Visual contrast to rest of page (make it clear for a user to easily see where they can visit other pages).
Call to action (the primary action/s you want users to perform).
Mobile responsiveness (consider a design for the mobile version of the menu as the screen size difference is enormous and will definitely affect your layout).
Icons next to link (a visual cue can help break up lines of text).
Breadcrumbs (showing the current level and hierarchy of sections above the current page).
πΒ 5 Navigation Tips to Improve UX of your Product and Business
πΒ Best Practices for the UX of Navigation
Modal
On mobile, adapt the modal to full screen to gain more space.
Title (clear, simple text explaining the action of the modal).
Actionable item (a button or link to continue or close the event).
Close action (a way to exit the modal).
Responsiveness (consider the size of the modal on different device sizes, and whether a modal is suitable on all).
Background change behind modal (darken, blur or lighten β change the background behind the modal to bring focus to it).
Description (in case they require more information to understand how to make their decision).
Table
Table header (the value of each column to provide structure for the row content).
Row style (borders and contrasting background colours can be explored to differentiate).
Spacing (define the consistent padding for each row and the header).
Search (the ability to find a specific keyword or row).
Actions (performing a task based on the row and information seen e.g. view, edit, delete).
Filter and sort (allow users to customise what they want to see in the table and in which order).
Responsiveness (determine the structure on significantly smaller devices - whether the information collapses into an accordion for example).
Pagination (breakpoints in the table for digesting information in parts).
πΒ Design better data tables
πΒ Better UI Design: Proper Use of Tables
πΒ Modern Enterprise UI design β Part 1: Tables
Card
Style (consider default background, border, shadow).
Consistency (ensure you have one base style for all cards).
Spacing (a framework to sort your padding levels by)
Responsiveness (consider the structure of the content in all various screen sizes).
Content hierarchy (the primary action/s you want users to perform).
πΒ Best practices for designing cards
πΒ Designing Card-Based User Interfaces
File upload
Droppable area (theΒ block with the dashed border).
Upload control (button or link that allows to access more common file upload dialog).
Loaded items (indicate the number and state of files that have already been uploaded).
