The Ultimate Web Design and Development Checklist

visit live site →

Phew, finally done! You’ve worked so hard on a Web Design and Development Project in Webflow and you are all excited and set to deliver the project to the client. Before that, you need to make sure you have all the key elements in place before you deliver the website to the client.

Here is a checklist that I follow to check if I have completed all elements of the website in terms of design and code. You can use this checklist as a guide to your Webflow Projects too! This does not pertain just to Webflow but can be used as an outline for your other Web Design projects as well!


Design Elements and UI

I know from experience that whenever I work on a project, I tend to check all design elements a thousand million times, but even then I miss small and basic design requirements. To make sure I don’t struggle with this(many times becomes so overwhelming!), I have created a pre-launch checklist for the very same purpose.


Be sure to check the following:

Logo

A logo is the main image of the company or the brand -Make sure it is of high resolution and resized to the perfect size for your project. The image should not be pixelated and should work well on all screen sizes. There are many other small aspects when considering the logo’s placement on the header of the website as well as the footer. We would talk about spacing and how it affects the look of the website below. 

If you are placing your logo on the left of the navigation menu, make sure your logo is placed with the same left spacing as the right spacing of the menubar/ hamburger menu on the website. If the logo is to be placed in the center of the web page, make sure there is an equal spacing on the top of the navigation bar as the bottom.

Color Palette

A color palette needs to be picked out for a web project and make sure you adhere to the colors on that palette. For eg., all H1 headings could follow the same style(font, classes, spacing, etc) and the same color. If the client already has branding guidelines for color, make sure the website follows those guidelines.

Make sure to use global swatches - makes using colors very easy!


Typography

Make sure your fonts are consistent. If you are using more than one font, check which elements use which font. If the Headings are in Montserrat, make sure all headings across the site use the same font. It helps to select the body under the navigator menu in Webflow and set its font to Poppins if that is your body font. This way, you do not have to select fonts and sizes every time you drag a paragraph element.

Create a Style Guide for your Web Project as it helps defines all styles - Headings, Paragraphs, List Items, Rich Text Elements, Blog elements, etc. Also, make sure your headings have a hierarchy that makes sense — i.e., don’t skip from H1 to H3.


Spacing

Make sure spacing is consistent across the site. All custom headings will have a padding of 10px, above and below it. All paragraph elements have a margin of 10px below them.

All grids on the website will have a 20px row and column width. All my sections will have a padding of 60px on the top and bottom.

Make note of the fact that all elements need to be legible and readable by the user.

Shadows

Drop shadows, Box Shadows - all have to have the light source consistent on each one. Also make sure to use the same blur, opacity, and spread values on each of the elements be it div blocks or images.


Images

All images should be sharp and non-pixelated. If images are huge in file size, use an image compressor such as https://imagecompressor.com/ to compress them into manageable sizes. This way your site loads faster and users are not annoyed by how slow the site loads. Remove.bg is a great site to remove backgrounds from images. This way, you have a nice transparent background for your images and you can use them anywhere. A quick speed test using Pingdom is a very helpful resource to see if you’ve optimized your images sufficiently. All images should have alt texts to be compatible with screen readers.

Images work better when placed inside a div block. This way, the div block’s size can be adjusted for placement and a better-looking page. Images also resize well when inside a div block. This particularly helps when working on mobile-responsiveness.


Favicon

A favicon is a 16×16 pixel icon that serves as branding for your website. Visitors can locate your website tab easier with a favicon when they have multiple tabs open. Or it accompanies a bookmark. Usually a favicon is a small clear image or mostly text on a background. Favicons may or may not be logos just in a smaller size!

Make sure your website has a favicon uploaded into the Site settings of your Webflow project.


Webclip

Webclips are also known as touch icons and are used in places like Safari’s bookmarks. They are 32x32 px in size. 

Make sure you also have a  Webclip for your project set under the same tab as the favicon. 

Webflow Badge

Make sure to turn off the 'Display Webflow Badge' option, if you do not want the badge to appear on the bottom right corner of your web pages.

Code and Classes

Creation of a Style Guide

This is the part that becomes important when it comes to coding and development inside of Webflow. I could work on the creation of the site before doing this. But that becomes a drastic blunder. I do agree that sometimes the Brand Style Guide needs to be modified when I start developing the site. But ideally, I would like to have the Style Guide in place before I start to code. Why? The purpose of the Style Guide is to have colors, fonts, heading and text styles, image sizes, UI components, blog post formats, etc. designed before we get our hands wet with the code. Doing this not only establishes sizes, fonts, and colors for each element but helps to define classes all in one place. If I need to change anything on the headlines or buttons, I would have to edit only in one place -  the Style Guide and it updates the entire site immediately.

Another reason to define the Style Guide first is to avoid redundant classes. A heading can be left-aligned and I can add an extra class called ‘text-center’ to align the text to the center. This way if there are places where I have to use the heading that is aligned to the left, I would just have to keep it a heading. If I want to center align it on a page, I can add the class, ‘text-center’. Simple, right?


Additional Checks

All of the above are visual checks for elements on your website. Now let’s take a look at how we can make your site look consistent across all browsers and devices.


Cross-browser Compatibility

A fact is that even though your website looks stunning on a Google Chrome browser, it may not on Firefox or Edge or even Safari. A good web designer makes sure the website looks good on all browsers. 

Things to look for while checking for cross-browser compatibility.

  • Logo - The logos sometime look funky on other browsers. So check for logo sizes, resolution and spacing.
  • Headings - Check for how these headings are rendered across the site.
  • Colors
  • Images - Same as Logos. Check for resizing issues as well!

Cross-device Compatibility

When I look at certain websites on the desktop or on my laptop, they look absolutely stunning. But when I open up the same website on my phone, half the page gets cutoff. A website should look really good on a mobile as it is on a desktop or laptop screen. That’s the best part of Webflow, right?

Webflow has the feature of seeing your web page on all screen sizes and allows to customise it for each size. Make sure you’re seeing your website rendering well on a small screen size. I usually check up to 300px as most phone sizes have screens  above that width. I also literally use all the devices in my house - husband’s, kids’ to check for cross-device compatibility. Nothing like the real thing, right? You’d be surprised how much you’d just have to work on this part!

Header or Navigation Menu

Remember to check your Navigation menu to see if the alignment on the links is correct and if you have used equal padding. Make sure to use flexbox properties or grid properties to align all elements horizontally and vertically.


  • Logo - The Logo’s placement on the Navigation Menu is a key factor in determining whether the site is thoroughly tested on all browsers and screen sizes. Make sure the logo image is of high resolution and if the spacing on the left and right of the menu is the same. Also make sure to check that the Brand Logo is linked to the home page.
  • Navigation Links - The navigation links should have all padding properties set. The link color, color on various states specially ‘Hover’ state should be set. Also make sure you have a transition set on these navigation links. Make sure all pages are linked and opening in the same window.
    Here’s a nice rule of thumb - External pages direct to a new tab. Internal pages open in the same tab.
  • Mobile - Make sure your navigation menu is mobile responsive. Most mobile screens have Hamburger menus in place. Make sure to check the padding around the icon and if equidistant from the right as the Logo is from the left.

Forms

You would have to check if all the form fields are mobile-responsive and if the submitted information goes to the right place. Form submissions by default can be seen on Webflow Settings page under the tab called ‘Forms’. 
Additionally, form submissions can be directed and collected in Mailchimp as well!


Footer

A footer is a common symbol on each page just like the header/navigation menu. So it is enough if you test just one page’s footer. I prefer dividing my footer into div blocks and then using flex property to align them into columns and rows. Links will be added in each div block.

Another way to have a neat and aligned footer is to use grids. This way, the content is neatly aligned horizontally and vertically. The content inside is usually in a smaller size than the body of the site.

  • Logo - The brand logo is usually placed inside the footer as well and when clicked, should direct to the Home page. Also make sure the Logo is visible(use dark logo on a dark background) and aligned to the top.
  • Social Media - Make sure your social media links are correct and open them in a new tab. You do not want to lose your visitors by directing them outside of the site. Check to see if they are working.
  • Footer Links - Make sure your footer links also have all settings applied including connected links, setting all states specifically the ‘hover’ state. Also make sure to add copyright text if applicable.

Spelling

Content is key on the website and it is very unprofessional when your readers read through to find typos. Please read through the content to correct grammar and spelling mistakes on your website.

SEO

Make sure to optimize your website for SEO as this helps in Google searching and indexing your site.


  • Semantic Structure - Web crawlers crawl the website for certain info such as headings, meta descriptions, image alt texts etc. This helps Google understanding the content inside your website and index them so that when people search for something relevant to your site, your website shows up.  Use proper semantic structure while designing your website. 
    They can be as follows:
  1. Headings (H1-H6) - Hierarchy is important. A H1 tag for each page is super important!
  2. Paragraph tags
  3. ul/ol lists
  4. Header
  5. Footer
  6. Div blocks etc.


  • Meta SEO -
    Meta data can be found by clicking the gear icon next to the name of the page on the navigator menu. Do not forget to fill in the Meta title of the page and its meta description. A meta title will be seen on search engine result pages (SERPs). It also displays on the browser tab when people land on your page. Some best practices include:
  1. Making sure to define the page’s central topic.
  2. Keeping it under 70 characters in length (including spaces).
  3. Using relevant keywords.

        A meta description on the other hand gives more info about a page to Google. It shows up below your meta title in search results. Some best practices include:

  1. Including keywords that describe the page.
  2. Not going over 160 characters.
  • Open Graph Settings - Open Graph settings are useful for social media. It also has the same settings as Meta data but make sure to add an Open graph image that is not pixelated.

Analytics

Website analytics are another important element to set up before you launch your website. A Google Analytics account is completely free, and can be set up easily with this guide. Once set up, you’ll be able to track visitors and user engagement on your website almost instantly!

Hope you found this article very helpful! Feel free to use as your own in all your Webflow projects. If this was useful, please share this with your fellow web designers!


visit live site →

More Reading