Web Design Checklist for Creative Businesses

Create the web design that you can be proud of by following this checklist.

The hard thing about crafting a great web design is that you don’t know what you want until you see what you don’t want. That’s why in this article, I’m going to outline the web design checklist so help you make sure that nothing falls through the crack.

What to expect?

  • This web design checklist is geared towards creative businesses who want to leverage your websites to generate more business opportunities.
  • This article will focus on single post page, because it’s the usually the first page that your visitors stumble into. If it doesn’t keep them for more than five minutes, let’s forget about homepage, work with me etc.
  • The article will be divided into different web design elements that a webmaster should have. I say should, not must, because web design is after all a subjective topic. But generally, if you have the items that I mention in order, you are good to go.

However, if you follow this web design checklist, you are good to go.

Simple first, fancy later.

Amy Porterfield

What’s the purpose of your web design

Whatever you call it, the single post page contains only one article, or entry. It looks something like this:

Single post page
A single post page on Design Portland

What is the purpose of the single post? Assuming that your content is solid, an optimal single post needs to:

  • Get visitors, especially first-timers to like what they see, obviously.
  • Give visitors every opportunity to share your content.
  • Nudge them to explore other awesome things you have to offer, or in the best scenario, to talk them into joining your email list.

Web design checklist for a single post

Typography

I think web typography is vastly underrated as a tool for crafting an amazing user experience. You generally only need to do it once, and you’ll continue to reap the benefits:

  • make your website copy a pleasure to read. Happy readers means higher convert rate.
  • communicate exactly what you want your readers to do.
  • make your paragraphs skimmable. Not everyone is in a mood for perusing every word of your article, so save them some precious time.

No matter how good your copywriting is, you won’t get your message across if it is set in tiny font size, long paragraphs, unsavory color pairing, ridiculous line height. All of those factors will put a strain on your readers’ eyes, and turn them off.

So where do you start? Check off all the web typography tips here, and basically remember to let your visitors do one thing at a time: read.

Sidebars.

If you want to stuff your sidebar with several sections of different information about you for fear of missing out, think again.

  • If your content is worth a visitor’s time, there’s no need to distract them with a random lead magnet, a monstrous signup form, or a Pinterest board of cat celebrities.
  • A sidebar is usually not placed at an absolute location on the browser window. That means when a visitor scrolls further down, she won’t be able to see your call to sign up. Good bye subscribers.
  • A human’s brain can store only so much information. I’d rather help my site visitors learn something new from my content than shovel some “Me me me” messages into their faces.

That being said, if you insist on using a sidebar, only include the absolute critical information like what Yoast did below. If possible, please limit your bio to less than 40 words. Make your bio short and sweet, but memorable. Quality over quantity, friends.

web design for a single post for Yoast
If this simple sidebar is good enough for Yoast, then it’s good enough for me.

Header menu

There are really not many guides out there telling you what to do with your header menu. I suspect the reason is each site is different and requires a very peculiar approach styling header menu, which in the end is not applicable to other sites.

Having said that, I think there is still some common denominators amongst great header menus.

  • It should contain navigation to all the categories that you want your visitors to check out.
  • It should ideally be interactive. That means visitors can hover over the header menu, and it will expand with extra information, allowing them to go to the category they want.
  • It is fixed to the top. Okay, this is optional. If you want a fixed header, make sure that it is not in stark contrast to the main article, and it doesn’t get in the way of the reading experience. Always give your readers more than one options, but be adamant about what you want them to do.
Web Design Checklist–Header Menu
Good example of interactive header menu

Going back to Home Polish case study again. I was at the end of their article, and I can still see the header menu because it is stickied. It gives me a lot of ideas as to what I can read next, but more importantly, it is subtle and not jarring. Talking about good user experience.

Footer menu

For many years, people often think of footer menu as just something we have to have, to protect their businesses, not something that a visitor should pay attention to. Think again.

A footer menu can be a critical part in helping and delighting your visitors. Let’s look at how Home Polish does it.

Generally speaking, a footer menu should include:

  • All those business and legal information to cover your butt, of course.
  • Social media handles and signup form. It never hurts to ask your visitors to stay in touch the second time.
  • Navigation menu to all the content that you want your readers to check out. This is a rehash of the header menu section.
  • Location and operating hours (optional). I’ve seen way too many business which skip this. It’s not a must, but it adds a touch of trustworthiness to your brand, and set the boundary. Just because you are an online business doesn’t mean you should omit this underrated section.

Signup forms

Where should your signup form go?

  • Within the flow of your post, like the middle or the end.
  • On a fixed sidebar that stays put even when a reader is scrolling down.

Signup form is a must-have for every content creator, including creative businesses. What is even more important, in my opinion, is where you place is.

This is all about timing. If a visitor has read the first paragraph, she is more likely to read the next one, so on and so forth, until the conclusion. That’s why you shouldn’t forget an embedded signup form at the end of your post.

If you want to show it earlier to your visitors, then the middle of your post is a good place. Anywhere earlier than that is not a good place to ask for your readers’ emails because you haven’t done enough to sell your awesomeness.

Earlier in this post, I said that I’m not a fan of regular sidebars which go away as readers scroll down. If you place your signup form there, it will have only a few minutes to work its magic. Too short.

The good news is that there is always a creative solution for every constraint. Let’s look at what Home Polish did.

The signup form is on the right of the article, no matter where you scroll. But did you notice another signup box at the footer menu? Yes, there is no rule which says you can only place one form on a web page. Always give your readers a final chance to get in touch with you.

Social media handles

Let’s look again at the single post page for Home Polish. They also place their social media handles on two locations, just like the signup form. One on the right sidebar, and one on the footer menu. There are giving their visitors no chance to slip away.

Social media sharing

Popular articles, no matter what their topics are, have one thing in common: they have a lot of shares, counting by at leasts thousands.

Did they go viral because they were shared by numerous people, or did they get shared because they were already popular, which suggests a certain level of authority? I don’t know, but in this information overload word, your content is destined to obscurity.

Therefore, the very least thing you can do as a content creator is to enable social share. Sharing has a compound effect, so give your readers an easy way to share your content. By enabling social shares, you are actually helping both your readers and you.

Call to action

I save this section for last because if there is only one thing you need to tick off in your web design checklist, it’s got to be a call to action.

As you scroll down the web page, what element stood out to you? The “BOOK YOUR DESIGNER” call to action, right? There are two interesting features about this CTA:

  • It’s not the biggest element on the website, but it’s always in the same place as you scroll down. You can’t miss it.
  • It disappears as you stop scrolling.

What do you do when you don’t scroll up or down? You probably pause to read, or to do something else.

I think the web designers were both strategic and very respectful of the readers. They know that they don’t need to shovel the CTA into the readers’ face if they are reading or busy with dozens of other tabs.

The call to action won’t be successful in those scenarios. By showing the CTA strategically only in scrolling behavior, the designers subtly dictate what the readers are supposed to do: Book the designers.

So what if you don’t want your readers to do booking? There are many other types of actions you can ask them to complete:

  • register their emails in exchange for a freebie opt-in, such as webinars, email courses, worksheet etc.
  • simply ask them to signup if they like what they are seeing. Believe it or not, there is still room for straightforward signup form if your content is high-quality.

Conclusion

To recap, below are seven elements you need to nail for your web design checklists:

  • typography
  • relevant sidebar
  • header menu
  • footer menu
  • email signup forms
  • social media handles
  • social shares
  • call to action

Is there anything else you are going to add to your web design checklist? Do you swear by a particular design element? What was your key learning from this blog post?

No go, carpe diem!

Leave a Reply

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