0345 200 26 50
Work for Daffodil   |   Client Area
Daffodil IT Support Sheffield
how to design a websiteBranding & Design 

How to design a website

 

All businesses need a website, but first you need to know how to design a website and what’s the best way to go about designing one? In this post we’ll take you through the process from helping you understand how to go about uncovering the purpose of your website, through to defining your brand and creating visual designs.

The basic approach to designing a website covers 8 steps:

  1. Understand your audience and outline the purpose of your website
  2. Define your brand
  3. Research design trends and preferred styling options
  4. Choose your platform (impacts on your design options)
  5. Plan your content
  6. Design mock-ups of key pages
  7. Implement the designs
  8. Test and iterate

 

The key steps to design a website

Understanding your audience and outlining the purpose of your website

 When we think of web design we think of fonts, colours and images, but the process starts with research. In order to design a successful website you need to understand the purpose the site is going to serve, who your audience is, how you want to talk to them and what it is you want them to do.

Understanding these things will inform your approach to the content and copy your users see, but also help you find the right visual style that speaks to them.

 

Defining your brand

If you already have an established brand you’re part way there, but you still need to consider how what you have will translate digitally. Some questions that you might want to ask yourself here are, if your brand font is web-safe and licensed for use online, how will your logo look on your website and how will it work across different digital mediums.

However, if you’re starting from scratch and don’t have your brand locked down that’s not a bad thing. Remember all that research from the first step? You can use that to help you understand what your brand should be and how to design a website around that style. At this point the main things to define are your logo, what typefaces you want to use, colours and tone of voice – and understanding the audience that your speaking to and the message you want to communicate will help you do this. A fully fleshed out brand would expand on these areas, but this is a good starting point.

 

Researching design trends and styling options

Here’s where we can start to think about how we want our website to look. As with all design, trends for websites come and go, but remember that just because a certain style is in fashion doesn’t mean it’s right for your website. Our earlier research should tell us who our users are, and if we’ve taken steps in this process such as creating personas, we may even have a good idea of their interests, needs and desires. We can use this to inform our design direction to ensure that we’re speaking to the right audience.

One useful method for gathering visual styles is to create a moodboard. Here we can look at components such as colour, typography, images, button styling and layout preferences. Gathering all this information in a visual format in a single space will allow you to start picking out themes that you like and make it easier to define your direction.

 

Choosing your platform

Here’s where things can often start to get a little complicated. You know you want a website, you’re getting an idea of how it might look, but before we start designing anything we need to think about how we’re going to build this. It’s important to think about this before we start designing our pages and layouts as how it’s going to be built and the options available to us will be limit the scope of your designs.

There are a few options to choose from here, all with positives and negatives.

  1. Basic site builders

    Basic site builders like Wix and SquareSpace are easy to use and come with built in themes that look great. But the themes are not bespoke and a good website should be responding to the specific needs of its users; something an off-the-shelf template is unlikely to do. These kinds of website builders also make it hard to export your content, so if you want to move away from them in the future as your business grows you’ll end up starting from scratch.

  2. Complex site builders

    There are more complex site builders such as Webflow that will allow you the make completely customisable designs from scratch using a visual interface, with no coding required. However, such solutions require a monthly account fee (on top of your hosting fee) and generally have quite a steep learning curve, as although you don’t have to write any code, you’re using a visual interface to create that same HTML and CSS behind the scenes, so an understanding of how code works is fundamental.

  3. Working with developers

    If you know how to develop your own website then you’re set, but if you don’t working with a developer or digital agency is often the most flexible and efficient way of achieving the results you’re looking for. It allows you to focus on the designs while an expert can take care of transforming that into a living breathing website.

 

Planning your content

Before we start making our designs there’s one more step we need to cover and that’s planning out the content for your website. We need to know what content is going to be on each page and a useful method for unpicking this information is ‘Card Sorting’. In its simplest form card sorting is listing all of the individual bits of content we want on our website (e.g. contact form, testimonials, staff profiles) and place them into piles of similar content. We can then organize the items in these individual piles into an order of importance, which gives us our layout with each pile representing a page and the order of importance determining a piece of content’s position on the page.

 

At this point is useful to also think about the copy you need for your site. People often leave this to the end of a project, but knowing what copy you need to allow for in your designs can stop any nasty surprises further down the line.

 

Mocking up your designs

Finally we’re at the point where we start to get creative can pull all the work we’ve done to this point into our designs. If you have the technical skill and already have a fixed idea of what you want it’s possible to design as you develop, but we recommend laying out your designs first so you can see how everything fits together and check that it aligns to your brand free from the technical work of development.

There are a number of tools that professionals use to design websites. These include:

  • Sketch App
  • Figma
  • Adobe UX
  • Photoshop
  • Framer X
  • Marvel App

 

These each have their pros and cons, but the most popular applications currently are Sketch app and Figma – which are also reasonably affordable options if you need to invest in new software for this step.

Depending on the scale of the site you need it may not be necessary to design all of the pages. If you have a large website it may be preferable to design only a few key pages that you expect all users to see (e.g. the home page) and then put together a style guide of reusable elements which can be mixed and matched to form the layout for the rest of the website.

No matter the size of your website it’s important to remember the importance of consistency when designing for web. When built, a website is developed around patterns, whether this be font sizes or repeating formats for components or sections these are all referenced in the code in a way which means consistency is a must. Setting out a style guide at the beginning of your design is a good way to ensure this.

 

Implementing your design

Here’s where we actually get to build our design. If you’re working with a basic site builder then your options for recreating your design may be quite limited – which is why it was important to understand these limitations before we started designing. If you’re working with a developer to bring your designs to life it’s important to make sure they have access to as much information as possible to enable them to translate your design for life on the web. Tools such as Invision and Zeplin are really useful for this kind of handover as depending on the software your created them in they can pull information and measurements from your design files for the developers to use.

 

Testing and Iterating

So now your website is up and your users are online, but the process doesn’t really end there. Obviously, you need to create new content to increase engagement and drive new users to your site, but you also need to take a step back and reflect on your site as a whole. Now you have users pouring through your pages that means you have data that allows you to look at their journey and spot any pain points that might be causing users to drop off. This allows you to look objectively at what you’ve made and see where there is potential for improvement; as web design isn’t just about making something that looks pretty. Remember at the start of this post when we talked about understanding your user’s needs? This is where you can test how successful you’ve been in that endeavour and iterate until you’ve nailed it.

 

What’s next

If you’d like to understand more about how to design a website or would like our help with your own web design projects, please feel free to give us a call to set up a consultation, no obligation. Call 0345 200 26 50 or email hello@daffodil-marketing.com.

You can also read our other related articles, such as ; How to choose a web development company  and what is good web design?

 

Related posts

Leave a Comment

Contact Us


Daffodil IT Headquarters
WFI House, 2 Queens Road
Sheffield,
South Yorkshire, S2 4DG

T: 0345 200 1185
E: info@daffodil-it.co.uk

    Copyright © 2016 Daffodil IT Ltd
    Company No: 8567514
    Design & Hosting: Daffodil IT

Bespoke IT Services for Small to Medium Businesses