Web Design Checklist For Clients

Easy to Follow, 15 Point, Checklist For Getting Started

No matter how big or small a website is, these steps are true for every website. Set yourself, and website project, up for success with a solid start and strong finish.

Web Design Checklist by Dustin

Website Branding

1

Logo File

Preferred Format: SVG
Alternate Format: Ai, EPS, PNG

PRO TIP:

  • Avoid using PNG versions of your logo. They can often look grainy and unprofessional.
  • Instead, use SVGs (or vector files) that will maintain perfect clarity at any rendered size.
  • Have your logo professionally designed because it is the face of your company and first impression for customers.

2

Business Tagline

EXAMPLES:
Lay’s: “Betcha Can’t Eat Just One.”
BMW: “The Ultimate Driving Machine.”
L’Oreal: “Because You’re Worth It.”

PRO TIP:

  • Keep it short and sweet. Simple.
  • Make it functional. Should quickly describe your product or service offering.
  • Avoid being too vague; like: “I want that.”
  • Not every tagline needs alliteration, a clever rhyme, or a pun.

3

Style Guide

SHOULD INCLUDE:

  • Approved usage of the logo
  • Color palette with HEX & RGB codes
  • Examples of color usage (because some combinations just don’t look good)
  • Examples of word choice and tone
  • Approved Fonts & Font Alternatives

PRO TIP:

4

Description of Target Audience

Some products and/or services can be aimed at several types of groups or people (think: Apple products), but being too vague will leave potential customers confused about how what you are offering fits into their life.

PRO TIP:

  • Clearly defining your preferred target audience can make for stronger messaging in how your product/service can improve their lives by solving a problem.
  • Messaging should always be focused around how you will make your customer the hero, not how great you are and the amazing things you have done. It’s a turn-off.

5

List of Competitors

If your target audience is shopping the competitor, we want to take a look at who you are viewing as competition so we can adopt what they are doing well and attempt to improve upon it.

PRO TIP:

  • Not sure who your competitors are? Google your product or service and see who is ranking on page 1 – they’re your competition.
  • Understand the pain points of your target audience if any of your competitors are solving it.
  • Know what your competitors are doing, but don’t copy them. Not if you can help it. 

6

How Are You Different From Your Competitors

It is NOT enough to simply say you are better or assume that potential customers will trust your business or your product. Really sweat over this list because it will define your business and be the core reasons you’ve got skin the game.

The more and better you can articulate this, the better your web developer can create a website that embodies the ethos of your brand. 

PRO TIP:

  • What you’re offering might be better, but it isn’t about you. It’s about solving a problem for your customer. 
  • Help your customers envision themselves as the hero by being their guide.
  • Your story and journey can be shared on the About Us page. This is a great page to establish history and crediblity for your brand.

FAQs

What makes good branding on a website?

Good branding on a website is the one that maintains consistency throughout the entire site, and jives with all other elements and platforms your brand uses.

There are times where one or all of these things will ‘depart’ from the standard, but when implemented correctly, everything should look and feel like they all belong together – siblings if you will.

If you already have print designs or other designs done for different purposes, share them with your web developer so they can get a sense of what has been and possibly incorporate it into the website.

What is branding on a website?

Branding on a website includes many, if not all, of the elements that were produced when creating your brand profile. It’ll include, but not limited to: the logo, specific colors, specific use of images or text.

The goal is to ensure that your website is an extension of all other collateral pieces you have: Business card, letterhead, advertisements, commercials, and so on.

How do I brand a new website?

The short answer is: deliver your style guide to your web developer. They will implement the standards you have already set to ensure consistency in your brand identity (and throughout the website).

Design & Development

7

List of Websites for Design Inspiration

The aim here is for the web developer is to get a sense of what is appealing to you and what you feel would resonate with your brand. A list of websites will be particularly vital if you don’t already have other designs done for advertisements, brochures, flyers, etc.

PRO TIP:

  • Create a list of 3-5 sites that you really like.
  • Make notes specifically about what you like. It can be as simple as the way a button looks.
  • Share these findings with your developer and confirm what is possible, what isn’t, or what might take a lot of extra time and effort. Something could delay a project unnecessarily.

    8

    Features or Functionality Your Website Needs

    Think about your dream website, your “Unicorn” website, that has everything and does everything you are dreaming of. Now write it down and share it with your web developer.

    Depending on what you want or need done might be achieved in a series of phases. For example, phase 1 might be announcing a product to gauge interest. Phase 2 would add eCommerce functionality to allow purchases.

    Also, depending on what you have in mind, the developer can plan for growth in a certain area and build the foundation now to allow for that to happen more easily.

    PRO TIP:

    • Be willing to spend money on premium plugins, especially if it represents a core functionality of your website.
    • Have discussions with your developer about what you would like to do with the website, they might have solutions or recommendations all ready in place for that.
    • Always test and review your website so that you know what the experience is like and can catch any potential issues. 

    FAQs

    How do you design a website?

    There are a lot of ways a website can be built. Here at Cobalt Graphics, we leverage the WordPress platform with the Divi Theme. We believe in this approach because all of our clients can benefits from the ever growing and ever helpful support community. 

    Where can I find website design?

    Everywhere you look online you’ll find website design. There are good examples and bad examples. Some examples that are really user friendly and some that have a lot left to be desired.

    It is important to remember that beauty is in the eye of the beholder. What resonates with you might not with another. When crafting a website design, it is common to pull elements from several different websites to create your own unique(ish) look.

    Website Content

    9

    Images

    Whether it is stock images, or your own photos, you will want to start collecting these into one place and organzing them in a way that is easy for a ‘stranger’ to know what the image is for and where it could go.

    PRO TIP:

    • Use your own, real-life, photos instead of stock photos.
    • Hire a photographer to  capture photos of your team, your location, and your products.
    • Rename your images to be more meaningful, like “executive-team-lunch.jpg”. Don’t leave “IMG_3021.jpg” as the filename because it is too vague.
    • Send HiRes image files. This allows the developer flexibility on where images can be used and avoid any pixelation once the image is placed.
    • Ask your designer if they have access to a stock photo site you can look through.

    10

    Specific Graphics or Icons

    Here we are looking for graphics that represent awards, memberships, certifications, etc. Only you know what these are and should be added to the image folder.

    Preferred Format: SVG
    Alternate Format: PNG

    PRO TIP:

    • Graphics need to have a transparent background. This allows flexiblity with how these can placed in a design.

    11

    Text

    Text content is vital to any website. If you don’t have an existing website where content can be pulled from, you need to start Word doc and begin typing anything that comes to mind. Content can always be refined, but it is difficult to design a website when there is nothing to go off of.

    NOTE: Unless web designers provide content creation services, don’t assume that they will fill any content gaps or correctly convey your product or service. Producing as much of your own content is your best bet.

    PRO TIP:

    • Work with your developer on establishing a Wireframe/Sitemap. This will serve as a guide to filling in any content gaps.
    • Content doesn’t have to be perfect. Most likely you will want to change and tweak things once you see it in the design.
    • To get the most mileage out of your content, hiring a SEO expert to analyze your existing site or provide recommendations on phrases to use could be game changing. Ask us more about this!

    12

    Social Media Profile Links

    Pretty simple, make sure your web developer has the correct links to your different social media profiles.

    For active social media channels, we can display a ‘Social Wall’ on your website that displays a combined feed of all your recent posts. Is a fun way to show updates and easy for visitors to see what you’re doing on social media.

    PRO TIP:

    • Social media platforms are great, but are something you don’t control or own. Find ways to encourage followers/fans to visit your website as much as possible.
    • Consistent traffic from social media to your website can increase your domain authority by means of “social proof.”

    FAQ

    What are examples of website content?

    Website content is a collection of images, graphics and text. All of these should communicate a product, service or intent of the business. 

    There are good, better, and best ways of implementing website content. Website visitors will quickly judge your [business] based on how effective you are in communicating your messsage. 

    Website Management

    13

    Login Information

    Developers will need account access to certain things to complete development or integration of 3rd-party platforms. Here are some examples:
    – Current Hosting
    – Domain Registration
    – Payment gateway (eCommerce Sites Only)
    – Social media profiles (optional)
    – Email marketing platform

    PRO TIP:

    • Don’t share passwords unless there is no other way. Many platforms allow you to add users (preferred) to your account.

    14

    File Sharing Plan

    This is especially helpful when sharing large files (images) or several documents back and forth. The goal is to avoid burdening email. Some developers will have project management software that will allow you to upload all of these files.

    PRO TIP:

    • GoogleDrive: Storage already included with most Google Accounts.
    • DropBox: Popular but can require additional fees for businesses
    • WeTransfer: Perfect to send large files that people can download to their computer. 

    15

    Google Products: Add as a User

    This goes hand-in-hand with providing access for developers, but this is often overlooked. If you already have Google Analytics, Google Search Console, or Google Tag Manager already setup, you can add them as a user so they can access these profiles from within their own account.

    PRO TIP:

    • Except for Gmail, you should be able to add users to any google product.
    • If you don’t have any of these created, ask your developer to create them for you and add you as a user/owner of the profile.

    FAQ

    Why is website management important?

    Website management is an active effort of knowing the logins to everything and who has access to them. Providing access in the form of users make it easier to grant and remove them as needed.

    Avoid your own horror story of losing access by creating a plan and solution that doesn’t involve employees being the ‘sole owner’ of vital website systems or disgruntled people from holding your website hostage.