This is the same Research and Development process we go through for every project we work on, regardless of whether the project is for print design, web design, clothing design or logo design.

We ensure we have received a brief from the client, we complete extensive research on the industry, competitors and target markets and ensure we have clear objectives and messages for the piece.

1. Initial Drafts

To explore ideas and design concepts when working on a web design, we use Photoshop to mock up the web page as it would be seen in the browser. As we class ourselves as ‘designers’ rather than web programmers we find photoshop a very intuitive tool in which we can quickly mock up the ideas we have achieved with our sketches. I know a lot of web designers / programmers use Illustrator, Fireworks or even jump straight in to the code to mock up web ideas but we find Photoshop the most flexible of them all when working on this kind of design project. Any vector based graphics or shapes can be imported as smart objects allowing us to explore all possibilities for the design.

One of the great things we find with photoshop is that using layer groups we can quickly create different versions of a design concept that may incorporate major or minor differences. This allows us to explore all our ideas within one project file.

Another reason for using Photoshop at this stage comes in to play later on in the process…

2. Present our design ideas to the client

Once we are happy with the design it is time to hand it over to the client for closer inspection and feedback. To present our web design concepts we create a static html page containing a hi-res jpeg or png of the visual created in Photoshop. This is uploaded to our servers and a link sent to the client.

We find that presenting the client with the design visual in a browser gives them a much better example of what the final outcome will be like. It also gives a much better impression of scale as they can see how it will look on a variation on screen sizes and ensures that the design will always be viewed at 100%, rather than being able to zoom in and out of a flat jpeg or pdf.

Depending on the project, a meeting may be held at the same time as the reveal of our initial concepts. However, our experience is that presenting the visual to client prior to the meeting allows for much greater time for reflection. It allows the client to have a meeting with other internal members of staff to critique the design concept, brainstorm ideas and have a much more concise list of changes and amendments to the design.

Any changes that are requested are then documented (either by ourselves or by the client) and a new visual is sent through to the client. Inline with our terms and conditions, the client is then permitted to make one more set of amendments to the design concept. We have added a limited set of amendments to our terms and conditions as we feel it helps the client be more incisive when compiling a list of changes. This eliminates a never ending list of changes and the constant ‘back and forth’ of the design. If further amendments are required after these, we then charge at an hourly rate for any time spent on the design concept.

3. Sign off and build

Once the client is happy and the visual has officially been ’signed off’ we then commence building the site. This begins with the building of a template page. Depending on the complexity of the website design, this stage of the process can take anything from a couple of days to a couple of weeks.

Earlier I mentioned another good reason for using Photoshop to mock up website design visuals. We now have a complete image template we can use to create the graphics that will make up the site. You can hide layers to reveal backgrounds or other website elements and you can make use of the very powerful slicing tools that come with the softwear to quickly create gifs, jpegs and pngs that will make up your website design.

Once the template page in constructed the rest of the site is built around this. Again, depending on the complexity of the design the time involved can vary.

Once complete, a version is uploaded to our server. The website then undergoes testing. This involves checking browser compatability and validating the site inline with the WC3 guidelines. The final stage of the testing process is to get friends, colleagues and fellow graphic designers to use the site and provide any feedback on site construction, layout and navigation. Any changes required after this stage are then put in to place.

4. Preview the website to the client

We then provide the client with the url of their test site and ask them to thoroughly critique the site and provide us with any further amendments and tweaks that are required.

Once the client is happy with the site it is put live and linked to their domain. At this stage we have one final check over the website to ensure all links, images and flash banners load and work properly before we inform the client of the site going live. We feel that even at this stage it is better if we catch any problems before handing over to the client.

5. Feedback

Once a reasonable amount of time has passed (usually a couple of months) we contact the client to discuss any feedback and criticism they have received. It is inevitable that there will be minor improvements made at this stage, but that’s part of the fun with live media.