The UIUX Design Checklist which can help user & developers to analyse and understand web designs and ensure the quality of their Frontend development for user experience.
Grid system |
Colors |
Typography |
Icons |
Links |
Images |
Forms |
Guide Guide is a plugin for Photoshop that can help you easily build your grid.
https://guideguide.me/ (https://guideguide.me/)
🛠 Bootstrap Grid System (https://getbootstrap.com/docs/4.0/layout/grid/) 🛠 Flexbox Grid (http://flexboxgrid.com/) 📖 Don't Overthink It Grids | CSS-Tricks (https://css-tricks.com/dont-overthink-it-grids/)
All colors used in the creatives are named ($color-blueLight, $color-blue, $color-blueDark,)
The different color state of some elements (like buttons, links, inputs...) are defined and worked in the context of a light or dark background and with a light or a dark text.
🛠 WCAG - Contrast Checker (https://contrastchecker.com/) 🛠 Color Safe - accessible web color combinations (http://colorsafe.co/) 🛠 Coolors.co - The super fast color schemes generator (https://coolors.co/)
Typography (font) are an essential part of every design, they shouldn’t be chosen without discernment. Always choose correct (Free or Licencse) font for a project.
Some webfonts are limited in terms of pageviews and can’t be hosted Understanding Webfont Licensing Structures: https://aeolidia.com/understanding-webfont-licensing-structures/
ℹ️ TTF format for desktop is not the same than TTF for Web.
📖 Using @font-face | CSS-Tricks : https://css-tricks.com/snippets/css/using-font-face/
All webfonts don’t exceed 1-2 Mb (all variants included: italic, bold etc).
Archive of freely downloadable fonts. https://dafont.com (https://dafont.com)
FontPair is a typography tool that inspires the creative community to design bette https://fontpair.co/ (https://fontpair.co/)
Material Icons font is by linking to the web font hosted on Google Fonts:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">Read more in our full usage guide: http://google.github.io/material-design-icons/#icon-font-for-the-web
https://www.materialpalette.com/icons (https://www.materialpalette.com/icons)
https://material.io/icons/ (https://material.io/icons/)
All icons are provided in SVG format, each in the same square dimension, in black and in a separated folder.
NOTE: Each icon name starts with icon- and is entirely in lowercase (without any space and using dashes to separate each word).
Example: icon-email.png
🛠 SVGOMG - SVGO's Missing GUI : https://jakearchibald.github.io/svgomg/
At least 512px X 512px is provided in PNG format.
Essential Image Optimization: https://images.guide/
https://freepik.com/ https://unsplash.com/ https://pixabay.com/
