Eightyone Design Logo

Our Graphic Design Process – Part 2: Web design

Our Graphic Design Process - Part 2: Web design

In The Design Process – Part 1 we outlined the initial stages of the Design process. 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. We finished this process at the point where we were starting to realise our initial design sketches by hitting the computers. In this follow up blog post we continue with the design process we go through for a website design.

website design sketch

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. 

Using Photoshop to mock up website design ideas

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.

Constructing the website design in HTML

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.

Have your say

I am sure there are many variations on this website design process and by no means do we think ours is the definitive way of designing websites. 

Have you recently worked with a web design company? Was their website design process similar to our own? What improvements would you make to our process?

Or if you are a web designer then how does your design process differ to ours?

Posted by Steve

Share this: del.icio.us / Digg it / StumbleUpon / Tweet This / Share on Facebook

If you enjoyed this blog article you can subsribe to FREE updates from our graphic design blog by email or RSS

Posted on Monday, February 2nd, 2009 at 10:39 am
Posted In Web Design | Tags:

2 Responses to “Our Graphic Design Process – Part 2: Web design”

  • Dan Hauk says:

    Very nice post. I never thought of adding a limit to the amendment opportunities during the design concept. That is a great way to cut down on the frustration of the client making changes every time you talk to them.

    I think the feedback/criticism follow up is one of the most important aspects of the whole process.

  • lu says:

    Hi Dan,

    A limited number of amends definitely cuts down on the time it takes to amend a design and we find most clients are happy with two sets and stick to that. I agree that feedback and criticism is important, but sometimes you have to draw a line underneath it.

    Thanks for commenting!

Leave a Reply