How to design a website in 8 easy steps

There is much more to designing a website than you might first think. When you look around its not hard to see some websites that stand out for their better design and easy to understand messages and content.

We take you through the 7 steps for how to design a website.

1. Identify your site's purpose

When I work with clients the first thing I'm trying to understand, apart from what their business is about, is why do they want a new website design and what are they hoping the website will do for them?

2. Define the scope of the project

Defining the scope of your new website design is critical if you want to mark your against milestones and tick boxes to show you are progressing your project. Something called 'scope creep' can easily happen where, as you are working through the project, you see new things to add or change along the way. Each of these changes can extend out the time it takes to complete your project. In a commercial environment, extending the time it takes to deliver a project means the cost of the project goes up and the deadline has to be adjusted outward. You should always try where ever possible to stick to your original project scope and jot great ideas down on white board for consideration once completed.

3. Mapping out your site and Wireframing

Mapping out your site sounds like a no brainer, especially when all you want to do is jump right in and start building amazing looking webpages. But the smartest thing you can do early on is step away from the keyboard and pick up a pen/pencil and paper. Carrying on from the site purpose and scope definition you are at that point where you need to clarify the site structure. Starting with the homepage, consider what other high level pages you will need branching off. What should the topics of these being, what layout of the page and so on. I like to have a page dedicated to each topic for purposes of better Search Engine Optimisation but often a client will want to reduce costs, at least initially, and will opt to place lots of topics onto something like a 'Services' page. This is fine but be aware that with so many different items being described, it does get confusing for a search engine to work out what your page is all about. If this happens I believe its best to make the Service page describe what your high level service is, ie: a plumber provides plumbing services, so we'd describe this. Then when we get to the sub-services, drain clearage, water heater replacement, tap repair, 24 hour emergency service and so on, then I would keep the summary of each of these to a minimum and talk to the client about expanding each of these out eventually to their own separate page.

Once you have this down on paper, start sketching out boxes on your paper to show how you would like the sections to be layed out. Scribble notes to yourself about what features you want, ie: bold <h1> Title, and even feel free to set down what fonts and font styles you will want. Keeping in mind you usually won't want more than two font families on a site, Serif fonts are fine for heading texts but Sans Serif are clearer and easier to read on body/paragraph text.

4. Creating your content

You should know have some very clear ideas in your mind about what content you want on each page and how the layout of each page.

With your writing, keep in mind that you want to make it interesting and descriptive for humans, but be sure to identify what your keywords are for the topic and make sure to use these a few times through out your text. This helps the search engines to understand better what the page is all about.

5. Getting visual

Page layout is all about making things interesting to the eye, so you don't lose your visitor too quickly, but also providing easy, readable material they can digest. This means getting it right with what images and/or icons you will need.

Now is the time to start bringing all these images and icons together to fit in and around your writing copy. With images, its always best if you can provide these yourself. For starters this is one of the cheapest options out there but also it means you own the copyright to the images. If you would prefer stock images then check out unsplash.com for a great supply of high quality free images.

6. Building the site

Here at Forte Web Design we use WordPress. With well over 30% of the internet using WordPress its a safe bet that this content management system platform is robust and secure. But with so many other options out there for web design you may have different ideas. We live in a great time that there is so much choice!

Start laying down your website pages, one by one. This should be a fast process since you will have plenty of paper diagrams and notes to go from. Make sure the header of your site conveys important information like your business logo and contact details. And that there is a menu bar or menu icon making it easy for the visitor to navigate your site. Also be sure to add a footer section at the bottom as this is an opportunity to place a lot of this information at the bottom. You don't really want your visitor to have to scroll to the top of page to get your number.

7. Testing

Now comes the fun part! Test your site from the highest level pages to the lowest. Click on all of the links and make sure they behave as they are suppose to. Check the font sizes, weights and colours across all pages for consistency and also keep an eye on overall site design so that there is a consistent look and feel across the site.

A key tip I always follow is to grab a pad and pen then write down my changes for correction later. This means I'm not stop/starting the analytical process and keeps my brain more in the 'now' of testing.

Once you're happy with how it all looks and works, view it on a tablet and then on a mobile phone. Does it still look and behave as expected? If not, fix these issues. When you think you are really ready, ask a friend or two. Its likely they will use a different browser to you and a device with a different viewport size. Any feedback that they can provide is worthwhile. You'd rather a friend point out the faults than a potential customer.

8. Website launch

Once you believe everything is working as it should be, go ahead and advertise the fact. The search engines will eventually get links to your site and crawl it for information to be indexed, or you can speed up the process either by creating an account with Google Web Master (Bing have a similar tool) and then submitting your sitemap for indexing. Premium SEO plugins can also submit the sitemap on your behalf.

If you want to fast track exposure to your new site, paid advertising is always a good way to start. This gets your site out there for everyone to see.

Ready to start work on your new site?

Contact us today
© 2023 Forte Web Design. All rights reserved.