UI UX Design

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

Grid Systems

Guide Guide plugin

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.

Additional Resources:

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

Colors

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.

Additional Resources:

🛠 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

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/

Size limit :

All webfonts don’t exceed 1-2 Mb (all variants included: italic, bold etc).

Dafont

Archive of freely downloadable fonts. https://dafont.com (https://dafont.com)

FontPair

FontPair is a typography tool that inspires the creative community to design bette https://fontpair.co/ (https://fontpair.co/)

Icons

Material Icons

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

Icon

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

Resources:

🛠 SVGOMG - SVGO's Missing GUI : https://jakearchibald.github.io/svgomg/

Images

favicon image

At least 512px X 512px is provided in PNG format.

Essential Image Optimization: https://images.guide/

Stock Images Resources

https://freepik.com/ https://unsplash.com/ https://pixabay.com/

XD Resources, UI kits & Tutorials

https://www.xdguru.com/

Links

Alternate views of all navigation states (hover, active/current page).