Website Design Guide
Updated:

January 27, 2023

Website Design Guide

Some starter tips and a look at the tools I use for website design.

Updated:

January 27, 2023

Website Design Guide

Some starter tips and a look at the tools I use for website design.

Whether you’re creating your website from scratch or refreshing your site’s current design, here are some starter tips to get you on track to create a website design that works for your brand.

Here are the topics I will be going through:

What makes a good website?

Creating a website is more accessible today than ever before, the growth of website builders and template-driven platforms has given the power to create to anyone with some tech skills and a clear vision. 

Whether you are using a website builder or plan to hand-code your website, the same criteria should apply, so you end up with a website design that’s an excellent fit for your business or brand. 

First impressions are so important online. Most users will evaluate your website in a fraction of a second, so if you are not professional looking and extremely clear about what you offer, you will often be overlooked.

A good website design will have a simple to understand site structure and have great content that engages the customer and helps to drive organic traffic to your site. In addition, the site should be customer-centric, optimising the tasks that most users want to complete.

It goes without saying that your website should be responsive. Responsive website design refers to the ability of a website design to adapt to the constraints of the device used to consume the content. This advancement in website design was born through the increasing dominance of mobile device usage. 

Your website should look great on all devices. See this example showing responsive website design in action.
Your website should look great on all devices. See this example showing responsive website design in action. See more of this project.

What are useful goals for a website?

One of the first things you need to know about your website is its goals. To do this, you need to define what you want to achieve with your site and what is the expected customer journey. Although websites have some common goals, not all websites have the same primary goals.

A blog site may have a primary goal to get new active subscribers, an online store wants the customer to purchase a product, and membership sites might have registration as their primary goal.

Get your primary and secondary goals defined early in the website design process. These goals will inform all aspects of the design, including user experience and what type of platform to use.

The best website designs clearly understand their website goals.
The best website designs clearly understand their website goals.

Picking a website platform

One of the trickier things you need to decide when building a website is what platform you will use. Of course, website goals and functionality specifications will play a big part in finding the best platform. 

However, you also need to consider who will be updating the site, does it have specific hosting requirements, how easy it will be to add functionality etc. Every platform has its limitations, and understanding your website’s endgame is key to picking the right one for you. 

Most website builders have a core set of functionality and can install other third-party services as required, so you need to evaluate this when looking at costs.

The ease of use of DIY website builders is excellent, but there will be limitations from a branding point of view. You will generally use a pre-designed template that you can customise to work with your brand. There is a trade-off between easy to use and customisable at this point, and you soon find scenarios where you cannot get your content to look exactly the way you want it. At this stage, you may need some help from a web designer to get the template back in shape.

This can be a frustrating experience for some and is one of the reasons why many sites that start this way eventually transition away to a new platform that better suits the business needs.

This is why I started using Webflow. My clients want a state-of-the-art content management system, but they also want a unique website designed specifically to work with their brand. I find Webflow is a platform that can do just that.

There are many factors that will influence your choice of website platform. The key is to have a clear idea of your website’s needs and then assess the options.
There are many factors that will influence your choice of website platform. The key is to have a clear idea of your website’s needs and then assess the options.

Tips for your website design process

So, we know how important it is to have a website design in sync with our brand identity. But, there are also many technical aspects to the process such as platform choice, content management, integrations etc. The best website design takes all these aspects and aligns them to fit your website goals and strategy.

Here is an outline of steps for a typical website design process. As with all design projects, each website design is different but using this as a checklist is a good start:

1. Discovery:

  • Define website goals & strategy
  • Research (Audience and competitors)
  • Sitemap creation
  • Select a platform & service toolkit

2. Website design:

  • Branding & User Interface
  • Online style guide
  • Design layouts for key pages

3. Website production:

  • Add optimised content
  • Integrate third-party services
  • Create metadata and SEO basics

4. Add tracking and analytics as required
5. Publish site
6. Generate sitemap and submit to search console
7. Analyse and improve

What tools does DesignChief use for website design

As we can see, there are many parts to a website design process, from planning to production. I have built websites in many ways, using handcrafted HTML & CSS, hosted on static servers, to building using today’s more accessible tools and platforms, built for modularity and collaboration.

Here is a look at the main tools I currently use for each step:

1. Platforms:

  • Webflow (CMS, Ecommerce)
  • Foundation (Custom HTML & CSS)

2. Design:

  • Apple Notes - Sketching
  • Sketch - Design layouts and graphics
  • Adobe Illustrator - Graphics
  • Adobe Photoshop - Imagery

3. Code:

  • Visual Studio Code
  • CodeKit
  • Espresso

4. Support services:

  • Google (Analytics, Tag Manager, Search Console) 
  • Iubenda (GDPR compliance)
  • GitHub (Code management and asset hosting)
  • Fathom (Analytics)
  • Ahrefs (Search Engine Optimisation - SEO)
  • Chrome DevTools
Here is a look at my preferred website design toolkit. Always keen to try new tools, so this list changes all the time!
Here is a look at my preferred website design toolkit. Always keen to try new tools, so this list changes all the time!