Checklist: All you Need to Create a Website

The all-you-need-to-check list for any base of a website by your favorite digital designer

So, I wanted to share with you this checklist that I’ve used in so many projects. It really helps me organize my ideas and improves my efficiency.

Let me start by saying that I don’t write down or print the checklist every time I create a website… just took advantage of my girlfriend’s beautiful handwriting for visual purposes, hehe. One thing you’ll like about this article, is that there’s more than one checklist. It covers many processes: the information gathering, organizing the information, the design checklist and the development checklist. So, it’s not purely technical, nor purely advise-driven.

It’s changed throughout the years, and I’ve added and removed a lot of items, but this is exactly the one I’m using right now (September 28, 2015). I also added some useful tips if you’re starting as a freelancer. Anyway, I hope you find my checklist Useful.


Checklist 1: Basic Information Gathering

This is what you ask your client

  • Personal/Company information.
  • Is the website for a company, service or product? Or is it more like a personal project?
  • Do you want a blog in it? Or just show some information?
  • What do you do? Or what is the company, product or service?
  • Do you have a website already? If you do, would you like a refreshment or a complete make-over?
  • Do you have a Domain? (example: www.website.com)
  • Do you have a Web Host? (example: Hostgator or Godaddy)
  • Are you satisfied with your current brand identity; logo, stationery and other graphic resources? (if the client answers no, please refer him/her to a graphic designer)
  • What email(s), do you want to use as contact.
  • If you want a blog:
    • What categories are you covering?
    • What special functions do you want the blog to have?
    • Do you want to profit from it? Or is it just for personal satisfaction?
    • Who’s going to administrate/write in it? Please provide full names and emails.

If the communication continues and you reach an agreement, it’s time to prepare all the info gathered, and ask for what’s missing.


Checklist 2: Preparing the Assets

Organizing everything the right way will boost your efficiency

  • BEFORE YOU DO ANYTHING ELSE, ask your client prepare all the static information that goes in the website, such as the “about” or “product” info. Again, I advise you try as hard as you can not to start working on the project until they have all the information ready.
  • Agree wether you’re going to use stock photos, or if your client is going to use/produce the photos for the project, you should refer a photographer or take the photos yourself if you have the skills. I always encourage my clients to take the second.
  • Make a sketch of every page.
  • Prepare the Logo for the website.
  • Create a png sprite for all the icons and other graphic assets.
  • Create a thorough plan of the structure of the website so you can program all it’s features in a coherent code-wise manner. You should, of course, reach an agreement with your client on the features the website is going to have before doing said plan.
  • Create a subdomain on your server for the development of the site. NEVER agree to work directly on the other part’s server. Also don’t transfer the website until you get paid in full or at least, if the client seems trusty, agree on a date after you upload the website to their server, but only if you got a payment in advance. Use your best judgment here, just try no to transfer your work or any part of it until you get paid any amount (preferably 50%) of the agreed cost.
  • This optional, but highly encouraged… INSTALL WORDPRESS, WORK WITH WORDPRESS, LIVE BY WORDPRESS… even if you’re not going to add a blog to the site.

Now that everything is agreed and prepared (and hopefully the client already payed for the 50% of the project), let’s get into the actual checklist.


Checklist 3: Website Design

Sketch EVERYTHING first. You’ll thank yourself later

  • Generic
    • Color Palette
    • Choose Font
    • Logo
    • Favicon
    • Social Icons
    • Buttons


  • Desktop/Laptop View (≥1025px)
    • Nav
    • Content (for every template, including the blog)
    • Footer


  • Tablet View (1024px – 641px)
    • Nav
    • Content (for every template, including the blog)
    • Footer


  • Phone View (≥640px)
    • Nav
    • Content (for every template, including the blog)
    • Footer


Checklist 4: Website Development

You’re ready for the moment of truth, my friend

This checklist is based on the structure I use for my websites (for example, I try always to include the Social Media Icons anywhere on the nav, but of course, that’s not the only way to do it), everything should be covered regardless of the structure used though.


  • Head/Meta Info
    • Page Title
    • Responsive Viewport
    • Favicon
    • Charset
    • Stylesheet
    • Call jQuery Library
    • WordPress Head
    • Font Script
    • Scripts


  • Basic Structure
    • Nav
      • Logo
      • Social
        • Facebook
        • Twitter
        • Instagram
        • Pinterest
      • Menus
        • Animate Sub-Menus


  • Footer
    • Copyright


  • Templates
    • Home
    • About
    • Contact
      • Form
    • 404 Page


  • Blog
    • Create Functions
      • Allow Theme Support
      • Allow Featured Image
      • Allow Widgets
    • Feed
      • Post Preview
        • Title
        • Date
        • Featured Image
        • Text Preview
        • Categories
        • Tags
        • Read More
      • Ad
      • Navigation/Ajax Loading
    • Sidebar/Blog Navigation
      • Categories
      • Tags
      • Search
      • Archives
      • Featured
      • Ad
    • Single/Inside the Post
      • Title
      • Date
      • Featured Image
      • Text Preview
      • Categories
      • Tags
      • Comments
        • Comment Submit Form
        • Comment
          • Handle Replies
      • Ad


  • Responsiveness
    • Desktop View
    • Tablet View
    • Phone View


  • SEO
    • SEO by Yoast Plugin
    • Define Keywords
    • Meta Description
    • Check Heading Hierarchy
    • Check Alts and Titles
    • Resolve WWW Redirect
    • XML Sitemap
    • Install Analytics

Now that the checklist is over, you should run an SEO test to see if there’s anything that needs to be fixed. SEO Site Checkup works for me!

Ant that’s it folks! Thanks for reading, and let me know if you found the checklist useful leaving a comment bellow.


Views: 633