Design Bit blog by Anthony Brewitt - a web designer, blog designer, Wordpress designer and marketing philosopher. Designbit showcases Anthony’s talents and shares his web design know-how.

Make ContactHire Me

Web Design Process Overview

January 22nd, 2009, Category: Design Process Misc

I thought it may be interesting to some designers to learn how I undertake a typical web design project, all my projects follow a methodology. This methodology is a step by step guide that I have created to produce a successful website, my process is split into 4 linear steps:

Phase 1: Strategy

I Listen carefully to you and ask questions to determine your specification, for example: what your business goals are and how the website fits in with your overall Marketing Strategy.

Who your users are and what they need to get done, what should users type into Google to find you, I clarify this with keyword research.

I identify brand principles, company style of communication, brand colors, logo, language etc.

Phase 2: Plan

From my fact finding in I create a few graphs and charts to record this data; sitemap to show web page layout, siteframe to show usability/calls to action, mood board and graphical mock up that represents your branding.

I ensure users goals are identified and their calls to actions planned out in the siteframe.

Using information architecture I map out your content for ease of navigation and usability and plan what technologies will be used in the project.

Phase 3: Build

A database is setup to store your data, a CMS so you can manage the website, programming languages and graphics create your custom theme, this is bolted into the CMS,.

Navigation structure is set up and content added with the correct keyword density.

Web forms and calls to action are added, analytics for your web stats and finishing touches like a favicon and email boxes. The validity of the programming languages, content code, special features and email forms all need to be tested for better performance , stability and robustness.

I test that your website displays correctly across a myriad of web browsers and that images are web safe.

Phase 4: Promote

In depth keyword research and Search Engine Optimization can finely tune your website performance for its keywords.

I usually let the analytics software collate data for a few months and from these finds we can tweak the websites usability to improve conversions.

Email campaigns and social marketing can help bring in return visitors and keep them involved and updated.

Missing Steps?

This is an overview but from this you can get a feeling of my work flow, the order in which I undertake my tasks and the main documents, techniques and graphs I use to plan and implement the design.

I know lots of designers whom just use an organic process, but personally I find I can create a greater quality build with my check points in place.

Do you see any missing steps I could add or techniques that would improve my process?

  • http://www.theodin.co.uk THEODIN

    This is very insightful. Im currently trying to work out a perfect project process that I can apply to any project. I think one of the most important lessons I learned was to make wireframes in the design process. Thanks for the post!

  • http://designbit.co.uk Anthony

    @ODIN, I have only recently started using wireframes and honestly dont know what I did before them!

  • http://www.webdesignsupermarket.com Aaron

    Good post, a lot of clients (and maybe a lot of designers also) don’t seem to understand how important steps 1 & 2 are to the success and relevance of a business but there we go!

  • http://d30web.com Nick

    Steps 1 and 2 are vital . If you cut corners on phase 1 & 2 you will spend more time on phase 4.

    If you fail to plan you plan to fail.

  • http://designbit.co.uk Anthony Brewitt

    Very true Nick, a great product follows a great plan.

  • Antonio

    Thank you very much! it is a great plan and very sensefull i worked to this project http://networkeritalia.com/ with some friend of mine and i have noticed that a lot of our mistakes cames from a wrong plan schedule thank you you tough me a lot.

  • http://www.albertobonetti.it 0uno

    phase 5: getting paid :-)
    hi everyone tks 4 sharing

  • http://www.platoon.in Platoon

    Wow!… Awesome!… Design bit site information is very helpful to know about web design overviews. The four step methodologies are interesting to designers to learn how can undertake a typical web design project. I developed “PLATOON” site for web design Technologies, is a leading Web Design and Development service provider,to cater complete internet solutions right from basic web design to advanced web application using the latest technologies in World Wide Web. Log on and check it out..

  • http://www.adeointernetmarketing.com Allen – Montreal

    We work in the same way. We work in 2 ways find out what the client wants and tell him what he needs.

  • http://www.crearedesign.co.uk Jenny Pilley

    It is so useful to work by a process and even better when your process works for you. Customers feel more confident in your skills when you work by a strategy and it seems that yours is organised to the last detail.

  • http://www.contussupport.com Thiaghu

    Thanks for information, the list of 4 linear steps is great.
    These Phases should produce a successful website…

  • http://www.wakensys.com ibooso

    This process is really useful thanks for sharing your knowledge…

  • http://www.logicdesign.co.uk Keith

    Good article. very usefull thanks..

  • http://www.esenseinternet.com Lancaster Web

    Sometimes, however much planning you put into a project, the client will want to make changes at the very last minute. Some changes that are fundamental to the structure of the entire site.

    How to you handle this? Do you start again and charge them double, or do you just try and get the project finished and put it down to a bad experience?

  • http://www.allwebservices.co.uk Allweb

    Great post i will certainly keep coming back to have a look at this post.

    I do agree above i think its all about what the client wants as they could change there mind at the last minute.

    Each stage you complete through the design process, get a signature therefore if they do change they mind you could charge them.

    Thanks for this post

  • http://www.tag.si Spletni Oglasnik

    I use different approach. My first step before start design web page is keyword research. Then I meet the client.

  • http://www.crearedesign.co.uk Mike

    That’s a good methodology you have. Do you approach every client the same way or does it depend on the size of the business?

  • http://www.webdesigncolchester.net Design Colchester

    Anthony, can you update this to give your experience with wireframes? I’ve never used them but would love to know how they can help practically?

  • http://designeroftheweb.com/2009/10/presentation-for-web-design-students/ Freelance Presentation | designer of the web

    [...] Posts:Web Design From ScratchThe Web Design ProcessEvaluate Your Process and ResultsTHE [...]

  • http://www.webdevelopmentcompany.com/ Cheryl

    Great tips! I agree with another commentor however, Step 5, get paid for your web design! Thanks for the excellent information.

  • http://designbit.co.uk Anthony

    @Mike; the design process definitely varies according to the timespan and budget of a project, you have to tailor the process for the project.

  • http://www.absolute-design.co.uk Umang

    Hi all, I agree, wireframes have completely streamlined things for me too. Don’t know what i did without them. Excellent Info!

  • http://www.design.tomgirling.co.uk Tom Girling

    I have a question sheet that I use when talking to a client with boxes to fill in the most important inf0 – this way I know I have all the info I need before I start planning….then designing/building.
    I also think that its important to work out design ideas on paper first before doing any design work on screen….it the layout doesn’t work on paper in a quick 30sec sketch – then spending a few hours on it in photoshop isn’t going to work either!

    I also agree with the above – the process does also alter a bit depending on the client, timespan & budget, so some give & take is required in your planning process!

  • http://www.peryearhosting.com Blada

    Great Post. I would love to read more in future. keep up the good work.

  • http://designbit.co.uk Anthony

    @Tom – I have been moving lots of my early planning over to paper for quite some time now, it’s a great way to work.

  • http://www.start-retail-business.com Joana Fraile

    This is a very fascinating post, I was looking for this knowledge. Just so you know I found your web site when I was checking for blogs like mine, so please check out my site sometime and leave me a comment to let me know what you think.

  • http://www.maxgo.co.uk maxgo web designer

    This article is very informative. Like the others have mentioned, Phase 1 and 2 are vital in order to produce a professional ,usable website based on the client requirements. We at Maxgo have created a form to obtain as much info and data from clients before the planning stage. We then create a few designs and allow customers to choose from it.

  • http://www.swebdizajn.com Sweb

    As in any process of development (or whatever), planning to take away nearly half of the time. Blueprint and implementation may differ, but all we have outlined, we are trying to bring to perfection. You will agree: paper, pencil and eraser … to start …

  • Anonymous

    After much work I am now able undertake 30% of a project on paper, which my eyes appreciate.

  • http://twitter.com/ragewebdesign Nick Baldwin

    A great post, if I get a client to agree a longer project starting on paper – I know its going to be a great website!