Xenace Logo
Call Us: 0333 444 44 02
Email: info@xenace.com
  • Home
  • Blog
  • How To Design a Website the Right Way

How To Design a Website the Right Way

Designing a website might seem like a relatively easy thing to do, it's just visual, right? Wrong. Designing a website is so much more than the odd header image or small icons scattered around the page. The design of the website goes hand in hand with the build of the website, as whoever is building the website (a web developer) needs to be able to interpret the designs you have created.

On top of this, if there are moving parts to your design you need to ensure that the website developer is capable of making that happen. You can’t make promises to a client before you know what is and isn’t possible, so communication is key. Below are the 5 basic steps that need to be adhered to to make sure you are designing your website the right way. Whether you’re a Web Designer in Colchester or an Essex Web Design agency, these basic steps are always helpful to remember.


Image credit: Hey Paul Studios via Flickr


Of course before you even begin to create a website, you need to brainstorm ideas of what exactly you would like the design of the website to be saying to the visitor/customer. If you have a client you are doing the work for, you need to get as many ideas out of them as possible - they will have a vision of what they want and you need to try your best to make that happen. If they have other websites they like the design of then make sure to keep note of them and draw inspiration from them when creating your wireframe.

If you are building the website for yourself, you need to have a good think about the layout of the website, the colours you would like to use, the logo and usability (often forgotten at design stage). You will also need to make sure you know what pages you would like to create/include, as each will need their own design (usually based off of the homepage design). If you are selling a product or service, another thing to bare in mind is where to place your CTA (call to action) buttons - ie. Buy Now/Book Now.

following trends

Image credit: i_yudai via Flickr

Following Popular Trends

As a designer, you will want to create something new and unique; but that doesn’t mean you cannot follow popular design trends. Trends may come and go in day to day life, but when it comes to website design the trends tend to stick around for a while - making it easier for designers to create a website that lasts a couple of years before it becomes outdated.

These trends can be to do with colour or they can be to do with moving aspects of the website (such as parallax scrolling). Make sure that you pay attention to what rival websites are doing, see if there are specific colours used in specific areas of the website (such as the CTA buttons) or if they all like to use a certain style of hero image. It is always best to keep to trends, as well as creating unique parts to any website.


Image credit: baldiri via Flickr


Once you have a good idea of what you need the website to look like you then need to create wireframes to show them. A wireframe is a basic black and white version of the website with no colours or images, many people draw them on paper but it is better to create them digitally (so they can be sent to a client etc). This shows the basic idea of what you wish to create, so that the website developer can start building the site.

The colour and images for the website can be added in at a later date, it’s best to get the layout and function of the website nailed first so that the website developer can start on the creation of the website as you create final versions of the website design. If you/the client are happy with the wireframe then you can move onto a coloured version of the wireframe with pictures, what the website will look like exactly. Once you’ve nailed the colours and images you can move onto the next stage - testing.

website testing

Image credit: Serge Kij via Flickr

Test Site

Testing the website, for both design and development, is essential. If you are creating a website for a client, this needs to happen before you present them with the finished product. Testing the website is fairly simple, you can even ask friends and family to have a play around with the website to test it. If anyone finds any issues they can be resolved at this stage.

You need to make sure that you’re not just testing your website on a computer, you also need to make sure you test the website on both mobile phones and tablets. All websites need to be mobile optimised to rank well in Google, so make sure that your website is. If all is well and good after testing you can then put the website live (as up until now, it should be a dev site).

finish line

Image credit: Andrew Hurley via Flickr

Finished Product

Once you’re happy with the final product you need to then make sure that you put the website live. In some cases this can take a short while, but you should see it fully up and running within a few hours. With your live website, with it’s fantastic new design, you must also provide images for any social media platforms - the main ones being Twitter, Facebook and Google+. It is up to the designer to provide these, as they need to be crisp/clear images that coincide with the website.

And there you have it! We hope that this article has helped you, as a designer or even just a customer, to better understand what goes into designing a website the right way.

If you would like more advice about Colchester Web design please do not hesitate to get in touch, as we have our very own web design experts who may be able to help.

Latest Tweets
Contact Details
  • London (Head Office)
    71-75 Shelton Street
    Covent Garden
    London, WC2H 9JQ
  • Phone: 0203 890 5533
  • Essex Office
    Innovation Centre
    Boundary Road, Colchester
    Essex, CO4 3ZQ
  • Phone: 01206 911 363
  • Kent Office
    Media House, 99-101 High Street
    Kent, BR6 0LG
  • Phone: 01689 493 366
  • Email: info@xenace.com
  • Monday - Friday: 8:30 am - 6:00 pm
    Saturday - Sunday: Closed
Get in Touch
© 2021 Xenace Ltd. Terms & Conditions | Privacy Policy