Home

Awesome

Front-End Design Checklist

<h2 align="center">Front-End Design Checklist</h2> <p align="center"> <em> The Design Checklist for Front-End Developers is an exhaustive list of elements which can help developers to analyse and understand web designs and ensure the quality of their Front-End development.</em> </p>

PRs Welcome Join the chat at https://gitter.im/Front-End-Checklist/Front-End-Design-Checklist CC0

Table of Contents


The Design Checklist for Front-End Developers is an exhaustive list of elements which Web Designers and Front-End Developers need to take into consideration to facilitate their collaboration. The following elements are a mix between known practices and new elements based on a long experience analysing web designs.

In case you are looking for a list of all elements you need to have/to test before launching your site/HTML page to production, take a look on the → Front-End Checklist.

How to use the Design Checklist?

When comes the moment where developers discover new web designs, before converting them to code, some important elements may be missing. The Front-End Design Checklist is a tool for Front-End developers and Web Designers which aim to help both to work in a seamlessly way.

You can share that checklist to Web Designers to ensure time will be saved at the delivery time or you can use it to review all elements delivered by the creative team and ensure everything is correct before digging into the code integration.

Why you need to use the Design Checklist?


1. - Design requirements

Designing a website or a webapp requires following some rules and taking into consideration that the project is not only a graphic project but a web project too. The next sections are crucial for any web project.

1.1 - Grid system

Grid system

<div class="container">
  <div class="row">
    <div class="col-sm">
      <!-- Let empty at first -->
    </div>
    <div class="col-sm">
      <!-- Let empty at first -->
    </div>
    <div class="col-sm">
      <!-- Let empty at first -->
    </div>
  </div>
</div>

⚠️ 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:

⬆ back to top

1.2 - Colors

Colors

Color Swatches

Additional Resources:

⬆ back to top

1.3 - Fonts and texts

Fonts

Fonts are an essential part of every design, they shouldn’t be chosen without discernment. Choosing the wrong font for a project could have financial and legal impacts.

It is recommended to ask your client to buy these fonts to avoid possible future issues and take into consideration the condition of use. Some webfonts are limited in terms of pageviews and can’t be hosted (Understanding Webfont Licensing Structures).

Additional Resources:

⬆ back to top

1.4 - Links and navigation

Links and navigation

1.5 - Images / Icons

Images

Additional Resources:

⬆ back to top

1.6 Forms and buttons

Forms

Additional Resources:

⬆ back to top

1.7 - Responsive Web Design

Responsive

⚠️ The pixel perfect notion is today in a certain way deprecated. Today, it’s impossible to have a design that worked the same facing the multitude of the screen sizes.

Additional Resources:

⬆ back to top

1.8 - Style Guide and component approach

Styleguide

⚠️ In the case where the Style Guide is missing, it's a good practice to build yourself a living Style Guide to facilitate your work. Some CMS like Drupal, for example, have plugins that allow to develop a living Style Guide using Pattern Lab.

Additional Resources:

In the case of an existing project:

Sometimes, the creative team needs to add new pages or modules in an existing project. They should have or create a list of all existing elements and try to use what is already there. Having a Style Guide already created can save hours and ensure consistency of the project.

⬆ back to top

1.9 - Delivery files

Delivery files

Additional Resources:

Specific rules for PSD file:

⬆ back to top

2. - Analysis and pre-work phases

Analysis and phases

Before starting the analysis and the pre-work phases and after receiving the creative files, you need to check some important elements:

⬆ back to top

2.1 - Paper analysis

Paper Analysis

It is recommended printing some (or all) of the pages you have on an A3 format (or A4 if you don’t have this format). Because of the height of the page. you’ll probably need to print some designs on multiple pages.

I can’t imagine a better way to start than analysing creatives on a paper with a pencil (or different colourful pencils chosen to highlight different type of information).

  1. Define the structure of the pages, the headers, the sections, the articles, main, footer outlining these on at least one printed page.

  2. Find all the headings that structured a page, ensure the H1 is not on the logo and that the logical order is followed. Most of the time, the H1 for the homepage will be hidden with CSS but needs to keep its legitimate meaning. That analysis should be done with the help of a SEO specialist in case you have one in your team.

  3. Try to find and regroup similar components giving them an individual name regarding their functionality and not just their context. For example, naming a tab system “

  4. Most of the creative elements can be done using CSS. Today, it is not recommended to create any layout element using images. Any simple graphical element like buttons or borders should be done in CSS to avoid performance or scalability issues.

  5. Find some possible lack of coherence, in case a Styleguide was not provided by the creative team, it’s your responsibility to ensure that every graphic element belong to a possible category (Buttons, Typography, Sliders…). It’ll help you to create your own CSS / Sass architecture or to identify which component you’ll need from an identified CSS Framework.

⚠️ After the paper analysis phase, you can invite the creative team to use a tool like InVision, to facilitate the communication and exchange between the creative team and the developers. The possibility to comment directly on pages can be a time-saver and allow to keep a history of modifications and decisions.

2.2 - Pre-development phase

Additional Resources:

⬆ back to top

3. - Validation

The validation phase is when everything seems to be ready to be integrated. The client, in general, validate the creatives without waiting for any approval from the technical team. As exposed in the Design Checklist, it is essential that developers ensure the quality of the delivery before starting to code.

4. - Development phase

.
└── images
    ├── background
    ├── banners
    ├── icons
    └── layout

5. - Before production

Before launching your website, be sure to review all your pages using the Front-End Checklist!

⬆ back to top


Translations

The Front-End Checklist is also available in other languages. Thanks for all translators and their awesome work!

Support

If you have any question or suggestion, don't hesitate to use Gitter or Twitter:

Author

David Dias

Contributors

This project exists thanks to all the people who contribute!

License

CC0

All icons are provided by Icons8

⬆ back to top