Web Design Best Practices Checklist

Web Design Best Practices Checklist

Web design includes many interconnected skills.

In order to become successful, you must focus on a chosen few that are best suited for your personality. Then figure out ways to either outsource the rest, learn over time, or find clever methods to save time by building on other people’s work.

For me, I knew that even with a ton of experience using Adobe Photoshop and Illustrator, I was never going to be (nor did I want to be) a top-notch designer.

My area of focus started with code (HTML/CSS/jQuery) for building websites.

Then I expanded into WordPress. I tried building themes from scratch, and the process was long and tedious. I did learn A TON about how WordPress works with the PHP theme files.

But the end result didn’t look nearly as nice as a premium theme that I could buy for $50 and set up in 1 hour.

Be Effective & Efficient

Those are the types of trade-offs you need to make in order to become highly productive, especially at the beginning of your journey.

With 5+ years of experience building websites and closer to 15 years being fascinated by them, I have a holistic view of the entire website design process.

Here is my web design best practices checklist that you can implement to improve your process as a web designer.

#1 – Know Your Audience

Know Your Audience

This is where it all starts. People ask so many technical questions about a website without the context of who their ideal customer is, or their business industry.

The reality is that every unique audience will prefer a unique website experience. It’s up to you to understand this aspect of your business to really create a website that shines.

  • Who is your ideal customer? Be as specific as possible to better understand their demographic, interests and motivations.
  • What is the main goal of the website? This is what you want visitors to do, i.e. call you, fill out a form, buy your product, share with friends, visit your local establishment, etc.
  • What do other websites in your industry look like? Find several successful examples and note the features that you want to implement that will best serve your audience.

#2 – Content

Website Photo Content on a Laptop

You want to create your website design for the content, as opposed to dropping in content to a pre-made website template.

As the saying goes, content is king on the web, and it’s never been more true than today.

  • What is your best form of content? This can range from written text, to images, to audio/podcasts or even video, which usually provides the most engagement.
  • Are all internal and external links working? You can add this Chrome Browser extension to quickly check all the links on your web pages.
  • Have you edited and spell checked each page? Sometimes it’s a simple thing like a typo that can deter a potential customer from fully trusting you. You won’t get them all, but try using this web page spell checker.

#3 – Layout

Website Layout

Before I consider design specifics, I think more about the general layouts that I want.

For each page, understand the main purpose and place your content and buttons accordingly.

  • Does it pass the “5 Second Test”? When someone lands on your website, they should know who you are, what you do, and how to contact you in 5 seconds. Otherwise, they will leave.
  • Is the navigation consistent and easy to use? Make sure folks can return to the homepage easily, and get to your most important web pages in 1-2 clicks. For small business websites, this is often the most important user interface feature.
  • Do you have a clear call-to-action? Make sure this is in the user’s face (without being obtrusive) so it’s easy for them to make a decision instead of getting confused. For service businesses where a project can be $1,000+, I like to include a contact form on almost every page.
  • Is your best content featured on the homepage somewhere? Instead of showing your most recent posts or a Facebook plugin, build your layout to highlight pages that your visitors will enjoy the most.

Download Web Design Checklist

#4 – Design

Web Design and Creation

Once I have the layout sketched out, either on paper or in my head, I begin to implement this using WordPress.

Because I’m not a designer at heart, I tend to make small design changes with iterations. I value minimalism and subtlety when it comes to how the websites looks.

I’m not the best option to create something 100% custom from a vision, but I know I have a good eye for professional web design.

  • Do you have a consistent color scheme? We don’t want a rainbow. We want a coherent look that is both bold but also doesn’t overpower the content on the page. Find great color palettes and patterns here.
  • Is the website user experience friendly? Construct the design to guide the user throughout the website, both on page and from page-to-page.
  • Is the text on your website readable? Unless there is a good reason to choose custom colors, I stick with black text on a white background. What can I say, I like simplicity. Pay attention to text overlayed on a image, as that can cause readability issues.
  • Is there enough contrast on your call-to-action buttons? Choose a complementary color that stands out when you are directing a user to click on a button or another area of the website.

#5 – Responsive

Responsive Web Design

In today’s world, you need a mobile responsive web design to cater to people using their phone or tablet.

Plus, this is likely to become a more important factor in how Google ranks websites on mobile devices.

  • Do you need to pinch and zoom to read content on mobile? This is what we aim to avoid. Make sure the content width expands and contracts to the size of the browser window using CSS media queries. Most WordPress themes today already have responsiveness built-in.
  • Does the website look good on multiple devices? Use this tool to test the responsiveness on different sized screens.
  • Is your mobile website simplified? I advise against creating separate versions for desktop and mobile, but you may want to hide certain layout/content areas on mobile.

#6 – Social Proof

Social Proof Concert

It can be hard to stand out from your competitors, and even harder to develop trust with first time visitors to your website.

The easiest way to accomplish this is by providing social proof that you are a trustworthy person or business.

  • Do you have your social media accounts linked to your website? If you have an audience on another network, this is a great sign that people are listening to your message.
  • Do you have social media share buttons on your best content? If your content resonates with the reader, it’s your duty to make it easy for them to share with their friends and colleagues! Then people can see how many times each article or video is shared.
  • Do you have reviews, testimonials or success stories? The more personal, the better. A face-to-face video will work wonders compared to a short text review with only a first name. But anything is better than nothing.
  • Do you have an existing e-mail list? If you already have a fair number of subscribers, let people know they are joining a community of like-minded people when they sign-up or opt-in. I like MailChimp as a free e-mail marketing tool to start building your e-mail list.

Download Web Design Checklist

#7 – Testing

Website Testing Tools

Once you have the layout and design in place, you will want to test out a few things to make sure everything is working smoothly before launch.

  • Does your website load fast? You can test the time it takes to download each page, and see if there are any bottlenecks that you can easily fix.
  • Does your website look good in all browsers? In addition to testing out mobile devices for responsiveness, you want to test out different browsers on the same device to ensure they render your pages properly.

#8 – Measuring

Measurement and Tracking Your Traffic

After launch, it’s extremely important to measure the performance of traffic to your website.

You want to know how visitors are finding you, what they are doing once they get to your website, and use that information to make smarter business decisions down the road.

  • Do you have Google Analytics installed? Google Analytics will give you a ton of valuable insight about your traffic sources and how people are using your website.
  • Are you tracking conversions? Google Analytics allows you to track a conversion, which can be a sign-up or sale. Then you can directly attribute which marketing channels are providing the best results.
  • Are you tracking ROI for advertising? If you couple online advertising with conversion tracking, you can see exactly how much you spend and how much revenue is generated from your specific ads.

#9 – Optimizing

Optimize Your Website

Once the website has been out there for some time and you gather enough data, you can see the trends and make the necessary changes.

  • Are there too many steps to a conversion? If it takes 3 steps to reach a conversion, see if you can cut out a step and achieve the same result. Less is often better.
  • Are you ranking in Google? See if your website is getting traffic from keywords within Google. If so, do a bit of SEO tweaking to improve the on-page factors and rank higher. SerpFox is a great and simple tool to track your rankings for multiple keywords and phrases.
  • Are you A/B testing? I wouldn’t worry about this unless the website is high traffic. But if that’s the case, it makes sense to make 1 change to your current landing page or homepage, and see if that gives you statistically better results. Optimizely is a great tool to easily create tests such as this.

Download Web Design Checklist