Please enable JavaScript.
Coggle requires JavaScript to display documents.
FRONT-END DESIGN CHECKLIST (DESIGN REQUIREMENTS (Forms and buttons…
FRONT-END DESIGN CHECKLIST
DESIGN REQUIREMENTS
Grid system
Grid: A grid is explicitly provided in the design, and the details of the grid are present in the technical specification (width, gutters, number of columns…).
Familiarity with the grid: Be familiar with the grid system you’ll use on your project. Most of the time, some options (like alignment, offsetting, nesting…) are ignored by the developer and tend to be replaced by manual padding or margin unnecessarily.
Build every templates first: Before working on each components of your website, you can
build every templates
used in the creatives only with the grid classes. Building the structure before everything else, will facilitate your work afterwards.
Colors
Naming colors: All colors used in the creatives are named ($gray-light, $gray-dark, $green) or accordingly with their use ($body-background, $body-copy, $text-paragraph…).
Color state: 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.
Color accessibility: All or the most important/used colors are accessible in the design to allow a fluid navigation on the website/webapp.
Fonts and texts
Fonts format: The fonts for desktop (TTF or OTF in general) and the webfonts, in WOFF, WOFF2 and TTF format were provided.
Fallback fonts: stacks were specified in a document (ideally the Style Guide) to the Front-End Developer.
Fonts weight: The total weight of the all webfonts don’t exceed 1-2 Mo (all variants included: italic, bold etc).
Avoid Lorem Ipsum: As far as possible, all texts are provided in the the proper language instead of dummy texts in English (Lorem Ipsum and affiliates).
Links and navigation
Links state: All links have a default, hover, focus, active and visited state clearly defined (the Style Guide is the best document to specified these).
Navigation state: Alternate views of all navigation states (hover, active/current page).
Images / Icons
Favicon image: A favicon image with at least 512px x 512px is provided in PNG format. The generation of all the others Favicons can be easily done with online tools.
Favicon generator
SVG format: All icons are provided in SVG format, each in the same square dimension, in black and in a separated folder.
Forms and buttons
Section title: Every section of the form possess a title (use as a legend html tag) and is clearly divided (using the fieldset html tag).
Inputs states: An example of the different states of all input fields were provided (at least focus and inactive/disabled state).
Error messages: All error messages were provided, the text (eventually in a separated document) the position and the color are clearly identifiable in the creatives and consistent. Some messages should be different according to the error.
Require/option indicator: All fields (input, checkbox, radio button, select...) possess an indicators of required/optional.
Primary and secondary buttons: The primary and secondary buttons are clearly identifiable and are used following common practices.
Button states: An example of the different states of a button were provided (Normal, hover, focused, pressed and inactive state).
Forms
Buttons-1
Buttons-2
Responsive Web Design
Tablet version: The tablet version of the design in most of cases should be provide too.
Mobile first: The mobile version of the design is provided before or at the same time of the desktop version.
Style Guide and component approach
Component thinking: All components designed on each page were created with the component based approach (Atomic Design).
Style Guide: A Style Guide needs to be provided listing all elements, components, styles, dimensions.
Delivery files
Files to provide: For all websites, the web designer needs to provide at least 2 PSD (mobile, desktop and eventually tablet) or at least 1 Sketch file which needs to be delivered with the dimension below (if you have Photoshop CC 2015 and above, I recommend using artboards).
Clean files: The creative files are cleaned before delivering to developers (empty and uneccessary layer needs to be removed to avoid large files).
Error pages: The 404 error (and eventually the page 500 error) page were designed.
Popins, popups and alert: All popins, popups and alert boxes were designed and can be enable throw layers of compositions.
ANALYSIS AND PRE-WORK PHASES
Paper Analysis
Structure of the pages: Define the structure of the pages, the headers, the sections, the articles, main, footer outlining these on at least one printed page.
Define headings: 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.
Find similar components: 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.
ll layout elements can be done with CSS: Most of the creative elements can today 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.
Pre-development phase
Plugins defined before start coding: According to the specifications, plugins needed were defined in an early stage. Having a pre-list of possible plugins before starting the development can help the developer to stay focus and not spend too much time in doing research during the development phase. Obviously, some plugins may not perfectly fit and will be changed accordingly.
Questions
Which version of Photoshop, Sketch is used? Some features are specific to some versions of Photoshop or Sketch. It is important to flag any issue regarding this as soon as possible.
Is the width of each PSD or artboard correct? In case some space is added on each side of the design, check the exact width of the website.
Are the creatives using too much “box-shadow”, “linear or radial gradient”…? Don’t forget the .... Effect which can have impacts on the browser painting performance.
Is a sitemap / breadcrumb provided to understand the architecture of all pages and their dependencies?
Does the website needs to have retina images?
DEVELOPMENT PHASE
Medias / Images: All medias can be cut and saved before starting the development phase. That can help you to avoid back and forth between your creative software and your code editor.
Image folder architecture: The image folder has a clear architecture where you arranged the layout's images. It is important to stay consistent between projects in general. Defining a structure for that folder and a naming convention can be helpful.
Image naming convention: A naming convention is used like adding prefixes to diferenciate types of images, all images used for background can be prefixed by
bg-
, icons by
icon-
, hero banners by
hero-
or
banner-
and so on.