A checklist that intends to help both sides: designers to prepare their mockups for implementation and developers to review them and ensure the quality of the implementation
- All the color variations used in mockups belong to the palette, they are named (
$dark-base,$dark-transparent-08,$success-base) or accordingly to their use ($color-text-primary,$color-overlay-background,$success-text-color). - Different color states of some elements (buttons, links, form inputs, ...) are defined and work in the context of light/dark/colored background or the rules of usage are documented.
- All of the most used color combinations are accessible and have sufficient contrast ratio.
📖 Additional resources:
-
Fallback font stack should be specified in the Style Guide along with the generic keyword.
-
All the text styles used in mockups belong to the styleguide set of typography.
font-size+line-heightalways must be paired to provide the legibility, readability and maintain vertical rhythm. -
As far as possible, all texts are provided in the proper language instead of dummy texts in English (Lorem Ipsum).
💡 In the case of multilanguage content, think about how the layout can react if the content is longer than defined in the mockup.
📖 Additional resources:
- Web font optimization
- CSS Basics: Fallback Font Stacks for More Robust Web Typography
- Rhythm in Typography | improve legibility, readability, and visual hierarchy
- All icons are provided in SVG format, each in the same square dimension, in black color (
#000000). - All icons are named consistently and following the convention in lowercase using dashes to separate each word (e.g.
arrow-down.svg,icon-arrow-down.svg) - Before usage on the page all SVGs are optimized to get rid of unnecessary metadata and tags
📖 Additional resources:
-
A grid is explicitly provided in the design and and the details of the grid are present in the technical specification (width, gutters, number of columns, ...). All the elements follow the grid.
-
All the spaces (margins, paddings, gutters) follow the defined grid. Their values should be limited to some set (e.g
4px, 8px, 16px, 24px, 32px, 40px, ..., ).❗️The box-model should be taken into account as the rendering in browser and in design tools are different
- All the links have the following states clearly defined (the Style guide is the best document to specify this once and use consistenly):
- default
- hover (when mouseover)
- focus (from keyboard, probably the global pattern)
- active (when mousedown/pressed)
- visited (if needed)
- All the links are designed in accessible and usable way.
📖 Additional resources:
- All the buttons have the following states clearly defined:
- default
- hover (when mouseover)
- focus (from keyboard, probably the global pattern)
- active (when mousedown/pressed)
- disabled (when action is not available)
- loading (if needed)
- Alternate views of all navigation states are defined:
- hover
- focused (from keyboard, probably the global pattern)
- active/current page
📖 Additional resources:
- Proper Use of Buttons and Links
- Button UX Design: Best Practices, Types and States – UX Planet
- Buttons in Design Systems
- All forms have title to provide basic instructions and context.
- All the form fields (inputs, selects, checkboxes, radio buttons, etc.) have the following states clearly defined (the Style guide is the best document to specify this once and use consistenly):
- default
- hover (when mouseover, if needed)
- focus (when enter the data, from keyboard, probably the global pattern)
- active (when mousedown/pressed, if needed)
- disabled (when input is not available)
- error state with a clear message
- Indicators of required/optional fields are provided.
- Error state for the whole form with a clear message is defined (if needed).
- Primary and Secondary actions are provided with clear labels and are used following common practices.
- Buttons with built-in loading indicators are provided (if needed).
📖 Additional resources:
- Design for small and medium viewports are provided before or at the same time as the large viewport.
📖 Additional resources: