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/
Alternate views of all navigation states (hover, active/current page).