click for English language website click for Spanish language website

The Web Design Process in a Nutshell

Web Design is a simple yet complex beast, easy to learn but impossible to master. Somewhat like riding a bike, any form of creative design can take years to really master or at least reach a competent level of proficiency. Web design is a vast and powerful tool, encompassing creativity, design, coding, graphic design and even audio/visual skills.

Hence a Web Designer has to be versatile, learn and adapt quickly, for as with any type of creative process, Web Design is one which is always changing year upon year. Here I attempt to summarise the approach I take to any project. Note this is never the same for each designer and not always the same for each project but hopefully can be a start.

Step 1: An Idea

As with anything creative, an idea gives birth to a website. This can be your own, one you think of in the middle of the night in a Eureka moment. Or perhaps it is in the form of a client brief.

Either way you know at least vaguely the type of website you want to produce. Try and get it down on paper in as much detail as possible. This can include everything and anything- early ideas for how you want it to look, what content you want it to feature, sections.

Step 2: Expanding Upon Your Idea and Researching

Now my favourite stage: research! Talk to your client first if you have one, make sure you agree on the length of time/hours/money. Make sure you always take a 10-20% deposit before you begin, this is effectively an honest agreement between yourself and the client that work is going to be carried out on time and professionally.

You need to devote plenty of time to research. Look at your existing competitors, note what they do well, what they do badly, how they could improve if you were re-designing that website.

During the research get some ideas of how your website will look visually. Try and come up with a draft on paper – maybe you like a certain style of logo from one website, a certain footer on another, a colour style on another.

As with any design or programming project, you can never be entirely original. Why re-invent the wheel after all? I'm sure you have noticed that websites re-use common features such as icons, layout styles especially and fonts and share common or similar designs.

Whilst you can obviously never plagiarise and copy a specific website, it is common practice to seek inspiration and gain ideas from a variety of sources.

Take the the time to learn the subject of your website. If you are designing a knitting website take time to learn more, maybe browse through magazines, publications and e-books. Get a feel for the subject matter and identify common or attractive design features wherever you look.

Recommended tools: pen and paper, the internet!

Step 3: Turning sketches into reality

By now you should have a good idea in your head about how you want your website to look, a rough idea of the content. Hopefully you can visualise your website in your head so open up your favourite Graphic Design software.

You need to turn your pen and paper sketches into a visual design on your computer. Begin by setting the layout- wire framing is often a good idea. This is a process where you draw outline boxes for where you want your content blocks to go (e.g. navigation, footer, header etc).

Then work on each box, often starting with the header and get designing! Take your time to decide on a good colour scheme, make sure the layout flows, there is plenty of white space and your target audience could easily and intuitively find their way around your website.

Take your time in this stage, once you are more than happy with the design and only then move onto the next stage. If you are working with a client, this may be a key milestone – make sure they are happy with the design so you don't lose time later in the project!

Recommended tools: Photoshop. Good free tools include: Gimp, Inkscape, Paint+

Step 4: From designing to building

Now is time to put your coding hat on. If you know HTML and CSS then great, go about turning your design into a website. I generally start with an HTML5 template, set page styles such as backgrounds and fonts, then build the layout blocks (container then a header, content, navigation, footer) then work on each block in more detail.

If you aren't a programmer there are always ways around this. Your hosting company may come with a visual design software, you could also try something like Wix. Maybe it is even the right time to sub-contract someone to turn your graphic into a website. There are plenty of freelance websites available for this such as Freelancer or UpWork.

Recommended tools: Good web building software such as Aptana or Notepad++. Or even Adobe Dreamweaver if you can afford it!

Step 5: Post production

Make sure the client is kept up to date with the design. Ask them to comment, anything that could be improved on, what they like etc.

Once they are happy, you can begin testing your website! Make sure you test your website on different browsers (especially the last few versions of Internet Explorer), different screen sizes and different Operating systems. The more the merrier!

If you are designing for other smaller systems such as iPads and Smart Phones then please read about Responsive Design – this is a big subject in it's own right! There are dozens of websites which quickly and easily let you test your website on different browsers and screen sizes.

It may also be worth running usability testing tools such as Loop 11 (http://www.loop11.com/) which will help identify any small usability issues you may have missed.

Recommended tools: online testing tools such as Nibbler or ScreenFly

Step 6: Finishing up!

Hopefully by now you have a fully working, functioning website! Now is the time to either hand over to the client or get running your website. Sorted!