Website design process - a 10 step guide to getting it right first time

Following on from our popular article – The Website Development Process: A 6 Step Guide, we thought we’d cover the Website Design Process in a bit more detail.

Collect ideas

There will be a strong temptation to dive right in and start designing things for your client so that you can demonstrate you are keen to progress the project. Resist this temptation and take some time out to collect some outline ideas of what it is you are trying to achieve. Ask your client if they have collected ideas on what sort of design layout and feel they want for their new website design. Do they want a clean professional look, something cool and funky, something more functional with a specific layout or search features or specific filters for e-commerce etc. Ask your client if they have seen other sites that they liked, and also disliked. This will give you a good idea of the sort of website design to aim for.

Logo design (if required)

Your client may already have a logo for their brand or business, in which case you can skip this step. If they do have an existing logo then you will want to incorporate the ‘feel’ of this into their design. You will of course also need to know the colours that are being used in the logo. You can use these as a basis on which to allow the colours to flow nicely throughout the rest of the website. Brand is really important so the new design should focus strongly on your clients brand.

Home page mock up

First of all you will want to design some static mock ups in Photoshop (or similar) and share these with your client. Focus only on the home page at this point because until you’ve nailed this aspect of the design there is little point spending time on any other internal page mock ups – unless you are very sure you’ve likely nailed it already. It’s worth setting up a sub domain of your own website to show off your mock ups, such as client.domain.com/client1 – this is a nice professional way of sharing your ideas. As your web design work will not be responsive or interactive at this point, be sure to let your client know otherwise they may not be too impressed!

Once your client is happy with their new design, make sure you have a formal sign off process. Nobody likes to talk about money but as a designer, time is your business and how you earn money. So any future changes are going to take you a lot of time to go back and rework so just make this clear to your client so you know where you both stand.

Internal page mock up

With the home page design signed off you can move on to designing your internal pages. There may be a number of different templates to design but they may follow the same look and feel. Focus on the key layout or layouts and present these to your client for sign off and approval before moving the project on.

Category page (e-commerce)

If you are working on an e-commerce project such as Magento for example, you will want to create some Category Page mock ups. You should already have a wireframe or sitemap to work through from the pre design stage of the project so you will know what category pages you are designing. This is where layout and functionality come into play with your web design work. You are now having to balance design flare with good UI and page layout first and foremost. Take some products or product details from your client and mock up the category page for your client and this will help steer your web development team once the design is cut up and wrapped around your chosen e-commerce platform. Again, ensure you have a formal sign off with your client.

Products page (e-commerce)

This is the next level down the stack in terms of e-commerce web design. Your product pages need to look nice, be functional and have great UI. Think about your favourite e-commerce websites and how they are designed and presented to the user. Be sure to take any product variations into account and how these might be presented to the user in a nice clean interface. Don’t forget to get it signed off….

Check out page (if non standard)

Not the final, final step in e-commerce design but a critical part of it anyway. The e-commerce check out is leaning the most towards function rather than design but it still needs to follow brand. In fact, this is really important as you want a clear association with your brand throughout the entire website design process. As this is where your website user is parting with their money, you want to make sure they are still enjoying the experience through well thought out UI and page layout. You know what I’m going to say…. client sign off!

Contact page design

An often overlooked part of a website but probably one of the most important, especially if you are using funnels or just want to encourage website users to get in touch – which you should! This page needs to be clear, easy to use and understand – especially important if there are lots of options. It should of course represent your brand so make sure that is featured. I guess what I’m saying is don’t skimp on design for your contact page. It’s likely to be one of the busier pages on a website so make sure it does your client and your website design justice!

Rest of pages signed off

With everything taken into consideration in the points above, make sure any other pages your are designing are part of your workflow and sign off process. Stay organised with your website design process and reap the rewards of smooth workflow and happy satisfied clients.

Designs cut up and project moves to development

Now all your designs and templates are signed off, you can hand the project over to your web development or e-commerce team to cut up the design and wrap them around your chosen CMS or e-commerce platform.

Web-Feet are a Digital Marketing Agency near Southampton in Hampshire in the UK. We specialise in Coaster CMS website design and development. Our e-commerce platform of choice is Magento and we can offer a full suite of Digital Marketing services. We specialise in actionable, data driven SEO practices to ensure we deliver results based on real data and not guesswork. If you want to get in touch to discuss any of our services, please do. If you enjoyed this post please feel free to share it and leave comments below. Thanks for reading.