A Simple Front End Design Checklist Handy for You

front end web design checklist

A design checklist ensures all points are taken into consideration by the creative team. It is always better to have a document where web designers and developers can rely on to ensure a better communication and lucidity in the way they interact.

You can share that checklist to Web Designers to make sure time-saving at delivery or you can use it to evaluate all elements delivered by the creative team and ensure everything is correct before digging into the code integration.
It is useful to have a checklist as it is easy to forget some important elements when you are pushing yourself to strict timelines. It is best to avoid discovering issues after the creative team is already working on another project.

1.Design requirements
Website designing or a web app development requires following some rules and understanding that the project is not only a graphics project but a web project too. Here are a few things that are crucial to a web project.

i. Grid System
ii.Colors
iii.Fonts and texts
iv.Links and navigation
v.Images / Icons
vi.Forms and buttons
vii.Responsive Web Design
viii.Style Guide and component approach

2.Analysis and pre-work phases
Before starting the analysis and the pre-work phases and after receiving the creative files, you need to check the following elements:
Which version of Photoshop, Sketch is used?
Is the width of each PSD or artboard correct?
Is a sitemap/breadcrumb provided to understand the architecture of all pages and their dependencies?
Does the website need to have retina images?

The pre-work phases include:
i. Paper analysis
ii. Pre-development phase

3.Validation
When everything is ready to be integrated it is time for implementation of validation. The client, in general, validates the creative elements without waiting for any approval from the technical team. As mentioned, it is crucial that developers ensure the quality of the delivery before they start the code.

4.Development phase
Saving all the media before starting the development phase can help you avoid going back and forth between your creative software and your code editor.
It is imperative to stay regular between projects in general. Defining a structure for that folder and a naming convention can be helpful.

admin 1 permalink

Leave a Reply

Your email address will not be published. Required fields are marked *