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/)

⚠️ If you want to ensure that the grid and the width of the devices are respected, you may want to generate yourself a PSD template and that you will send it to the Web Designer.

🛠 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/

https://www.xdguru.com/