From Meet to Mock-Up – Steps to take

I’ve already written an article on meeting a client which you can view here. However after that many people (yours truly included) dive into either Photoshop for a mock-up or just open up a coding application and get going. This to me used to make perfect sense, however I’ve found in the last 6 months there has been a huge shift in focus with many stating different methods you might like to try. I’m not suggesting that you try all of them, but you might find a few of them take your fancy and ultimately provide you and the client with a better end result.

After the initial meeting it’s always a good idea to ask the client what they want their website to look like. Some might not have a clue, in which case this is almost your dream situation, free reign, but others might already have an idea. You need to know this before you go diving into any form of mock up. Once you have this mockup you can move onto the next stage.

Site Map

Something I always find hugely beneficial is to do a flow chart of the pages on the site and how they are going to link together, usually just by drawing lines between them. Personally, I always just grab a piece of A4 paper and get going, however there are many applications out there to do this for you if you prefer. Personally, I find it nice to stay away from the screen as much as I can before coding, as during coding most of my time will be spent on the computer. By doing a sitemap it gives you a real indication of how complex or simple the navigation is going to have to be on your site – it might just be one tier navigation or it could be a lot more in depth – each page might have sub-pages.

Colour Scheme

Again I never used to bother with colour schemes but now it’s an integral part of any design process for me. The most popular application for this is Adobe’s Kuler. You can find it online at kuler.adobe.com and there is also an Air app which you can download from the same URL. If you’re not a master of colour don’t panic, there are over 30, 000 colour schemes made from others which you can browse through, but if you like to get down with colour you’ll find this website delicious. One of the great features is the ability to create a scheme from a picture – but if this is not for you you can create your own 5 colour scheme very easily. You can choose from many types and customise them to fit your exact needs. If Kuler is not for you, you can do the same kind of thing using Photoshop or equivalent – but the key point of Kuler is that you can pick a base colour and Kuler will then create the others for you using one of the colour scheme ‘types’ available. And if that’s not enough, there is also a Kuler addon in Photoshop!

Check out the Rivals

By checking out sites of a similar ilk to the one you’ve been asked to design can give you ideas. Obviously there is a limit – you can’t just copy whatever you want, but this is more about examining the competition and seeing what line they are going down.

Wireframing

This is something which has gained in popularity hugely and something I’ve covered in depth as well. It’s point is to just get the layout of the site decided – nothing more. Personally once again I use paper and then either show them to the client in a meeting or scan and then email them (making sure it’s neat enough, of course). By doing this you can remove all the distractions like colour and fonts and just focus on the barebones layout. Of course if you prefer to use a computer you can use Balsamiq Mockups, which will set you back $79, although one of the most popular is the online (and free) Go Mockingbird.

Working Prototype

After deciding the layout, thanks to our wireframes, some like to take that basic layout and quickly mock it up in a browser, including nothing more than just rectangles and some links. The beauty of this is you can make all the links work, so the client can see and test the navigation of the site. Once this is done you might realise some of the layout is a bit impractical, something it was impossible to realise in the wireframing stage, and you can immediately change this.

Colour Scheme + Prototype

Now you can combine two previous steps into one. Take the prototype and apply the colour scheme you created and combine the two. Add in some text so you can try out the colours and apply the colours to the prototype. Now you should be able to see the site coming together and how perhaps that shade of red does not work with that purple colour you used in the header.

The Final Mockup!

At last! By now you should have all the things you need to create the final mockup. Personally I just open up my prototype and work from there, skipping out Photoshop completely. Photoshop gives the client the website in an ideal world – without different browsers, text rendering and the rest. By creating it in the browser, the client sees an actual real life site, rather than an idealistic Photoshop mock. But this is jut my opinion, if you prefer Photoshop you should certainly stick with it. But by going in the browser you can add as you go and eventually your final mock turns into a real website in no time at all.

The End

By now you’ve impressed the client, and have a super mock up and be ready to code the final thing, launch it and make lots of money! Good luck!