OK, I get it. You have an exciting new project starting up, and you can’t wait to crack open Photoshop (or your preferred graphic design program) and start thrashing out the design. STOP!!! A designer who is ill prepared WILL NOT achieve the best they can. There are certain things that must be done before you even think about opening Photoshop. Research and planning of a new website is the most important aspect of a project, and will breath life into your creative process.

Everyone has their own techniques for the research and preparation of a new website, this article will run through what I do and give you a basis for developing your research techniques, and there’s even a few handy tools thrown in!

The Brief

First up read the brief, then read it again. You’ll be surprised how much did not sink in first time! If the client has a current website, open this up and spend time exploring it – visit every page, get a feel for the company, who their target audience is, how they function, what they do, how they do it, where they do it. You then need to start dissecting the brief into tasty bite-size chunks…

The Sitemap

Personally I love creating sitemaps – as you dissect the brief and work out exactly what pages you will require and how they will link to each other you can already start to see the site working. An example sitemap of mine looks like this:

It’s straight forward, and you can see all of the pages that are required for the design easily. At this stage you can highlight potential problems, work out navigation and ensure that no pages are missing. This is not a ‘finalised’ sitemap by any means, so be prepared to change it as the design process progresses. I tend to construct mine from a Photoshop template I created – meaning I can easily drag and drop the elements about and when the development team receive the design, they know what to expect as it’s consistant from the last one. You can download my template here, or of course create your own. There are also some online tools which can be used for creating sitemaps such as:

Creately

Slickplan

(There are any others, suggest your favorites in comments for others to make use of!)

We need a montage…!

The montage is an ESSENTIAL part of the design process. Opening a large Photoshop canvas and constructing a collection of images from online is always a good start. You can take screenshots of competitors sites to get a feel for the industry, collect images of related items and tools of thier trade and anything else related you can think of. You may have leaflets, business cards, brochures etc from your client also, so by printing out your Photoshop Moodboard you can collect all these bits of information together.

The purpose of the mood board is effectively to spam it with anything that comes to mind in relation to their industry. From this mood board you can start to get a feel for colour schemes, and what direction you want to head in with the actual design of the site.

Review

So far you have your brief, your sitemap and your montage. Print it all out, this next part’s easier without having to flick between windows on screen and printed versions will be in front of you throughout the project. Read the brief again, review the sitemap, and take another look at the mood board. Make notes of what you need to put on the homepage – is it going to differ from the rest of the site? Will the homepage have template elements eg: banners, menus, forms etc which will be consistant page by page? I tend to make two columns at this stage – template elements & homepage elements.

The template elements will be the consistent parts of each page – the header, footer, sidebars, banners etc – this will however vary from project to project. Your homepage elements are what make up the rest of your homepage – for example an introduction to the site/company, signup/login areas and calls to action, unique banners for homepage, latest news, twitter feed etc – basically anything you wish to get across on the homepage without crowding and bombarding the user.

Starting the design

Now your ready to open Photoshop and start the design right? WRONG! Your not there yet – now you need to work out the layout on paper before you do anything else. It’s nice and easy to thrash out ideas, move elements around and come up with a basic layout on paper first. You may get through a few layouts before you find one that works – by doing this on paper first you save yourself a lot of time and have a much clearer idea before you start.

Recap

So, we now have our sitemap detailing all of the pages, sub pages and how they link to each other. We also have a ‘mood board’ or ‘montage’ to grab inspiration from and get you in the right frame of mind for the project. You also have knowledge of the industry and your clients competitors, and some lovely drawings of a layout to base the design on.

You may now open Photoshop. (Once you have read the brief again, of course)

Hopefully this article has given you some insight into the preparation needed to create a more engaging design for your next project, or at the very least given you some ideas. If you have techniques that work for you, share them in the comments below!