Project Enquiry

Some thoughts (and assets) about organised web design

Back To All Posts

By Aaron Williams

Starting a new project for your clients can often be a dishevelled process. Deciding which grid systems, colour palettes, typographical styles etc that you are going to use for your initial mockups can change dramatically between projects. The variety is inevitable and definitely a positive thing as we can continually progress our design style (hopefully getting that little bit better as a designer every time). But this process can become time-consuming and as per the old adage, time is money – so organised web design is crucial.

So what I want to share with you in this post are some of the techniques and resources I use to make the process as smooth as possible. There are enough variables that have to be considered per design that worrying about the basics should be the least of your worries.

This brings me on to organisation. I can not stress enough that it helps so much when preparing designs to show off to the client. I am going to jump over initial research and discussions to attain an accurate and useful brief to refer to but I really want to emphasise how thoroughly important this section is, a pitch design is only ever going to be as good as your brief. I could talk about this in great detail, but alas, I won’t. Maybe I’ve just found an idea for my next post…

So wireframing is my starting point. A lot of designers vary on how they go about beginning their pitch designs, it’s quite common to jump straight on to Photoshop or even front end code to produce your mockups. For me, nothing beats pen and paper for this process. Quick, obligatory mention of Balsamiq here, great wireframing software but I find it more useful when discussing finer details of page structures with the client at a later stage.

Give yourself a rough outline of what you want to demonstrate on the page, don’t get too bogged down in the details but specifying which content goes where, how many columns you want to use for a certain bit of information, it will really help when coming to mocking up the actual design. Write notes too, if an idea comes to you, make a note of it! Use design inspiration websites and collect screenshots of elements you think might work, colour schemes that suit the subject matter/existing branding. I guess this can be thought of as the creative side of web design, it can get quite mathematical and follow more conventional development rules when you come to visualising the design in pixels, so get imaginative!

On the point of organisation. Date everything you do and keep all of your paper wireframes in one place, separated into specific projects for easy reference later. You might be interested in using software like Evernote to help with this, take and save pictures of your wireframes and store them with your inspirational screenshots and colour palettes. You could take that one step further and look at getting your hands on an Evernote Moleskine. Seriously helpful if you have to produce mockups or sketch out your designs regularly.

Okay, it’s time to transfer our scrawlings to the screen. I have prepared two Github repositories, one containing a collection of Photoshop grids that can be used as a base for starting your next project, and another that has a very barebones mockup presentation microsite template for use when you are presenting your designs to the client.

Click here for the Photoshop assets repository

Or here for the presentation microsite template

Hopefully, I have provided a little introduction to preparing your design work in an organised manner from the get-go but I’m definitely open to suggestions and criticism, so please let me know if you have any!

I will be looking to update the Github repositories often with assets and ideas that I come across that help the process along so check back from time to time 🙂

Previous Post WordPress or Umbraco? Next Post How to design and plan a document library for a website