The Professional Web Design Process

Planning

This is what I consider the most important stage, because this lays the foundations for the project. This stage requires a lot of client interaction and good attention to detail.

Requirement analysis
First we need to need to discover what your goals are and who your target audience is. Gather as much relevant information as possible and write a detailed list of required features.

Web Specification/Brief
This document outlines the information agreed upon in the previous point and will serve as a point of reference throughout the project.

Site Map
A site map is a guide for users to find a piece of information quickly. Rather than simply listing pages, draw out links and a hierarchy of page organisation. This is part of a skill known as Information Architecture (IA).

Content
Once we’ve decided upon what pages are needed and drawn out the structure in the site map, we need the content. I wrote an article about how important the content is and how much easier it makes the process if we have this in the planning stages.

Wireframes
This point closely relates to the design stage as we’re designing the structure of the site. Using simple shapes with no colour, fonts or even images we can easily focus on the IA (Information Architecture) and UX (User Experience). It’s much easier to make changes to a wireframe than it is to a design draft or a built website so it’s important we get this right in the planning stage to avoid further amends in the design and development stages.

Extras
There may be extra resources I require to complete the project, for example; photography, illustration, copywriting and/or specialist software. All of these need to be taken into account in the planning stage so I can charge appropriately and there’ll be no surprises at the end of the project.

NB: The design and development process can’t proceed until the web specification, site map and wireframes have been signed off and confirmed by you, the client.

Resources for this phase:

Google Docs – File sharing and collaborating
Drop Box – File Sharing
Mindmeister – Drawing site maps and brainstorming
Lovely Charts – Drawing site maps and wireframes
Mock Flow – Drawing wireframes
iStock – Stock imagery

Design

The second part of the web design process is the actual design itself. This where we take the wireframes and content from the planning stage and dress it up according to your brand guidelines.

Mock-ups
I design the necessary pages and elements with the Adobe Creative Suite which allows for relatively easy modifications so if you’re indecisive over colours or fonts etc., now is the time to experiment and deliver a few options.
Review and approval cycle
The design stage is all about experimenting with colours, fonts and imagery so there may be a lot of going back and forth with little tweaks here and there. It’s OK for faults to be made here, they’re all part of design process – sometimes, seeing something you don’t like could lead to something you do like.

Resources for this phase:

Kuler – Creating colour schemes
Type Tester – Screen type comparison

Development

Now for the technical phase, where all the planning and design mock ups becomes a reality.

Building the back-end/structure of the web site
I will set up the development framework (WordPress). Then create templates for specific pages (e.g. home, general content, blog, blog post, contact form).
Develop and test special features and interactivity
Here’s where the fancy elements get built, such as jQuery slideshows, social media widgets and more simple features such as contact forms and maps.
Fill with content
This is the slightly dull part. Populating pages with content. A careful eye for details is still important here as type layout is key to the website being easy to read and looking professional.
Front-end Development
Now that everything’s in place I can slice images from the designs and apply CSS to finish the website.
Testing
This is a vital and time consuming job. We have to make sure everything’s in working order, everything’s in the correct place and no mistakes such as typos have been made. I will test what I’m doing as I go along but it’s always good to double check everything at this stage, so check usability and the copy.

Resources for this phase:

Adobe Browser Lab – Check cross-browser compatibility
W3C Validator – HTML validation check

I hope this has helped you get a better idea of what’s involved in the web design process. But if you still have some questions or would like to contact me for a job then don’t hesitate to get in touch.