5 design tips for non-designers

I am currently working on a side project for some family members outside of my main contract. It’s a simple site, with minimal CMS requirements, and once we’d pinned down the content requirements, defined the data types, and talked about what they wanted to manage, I went ahead and built the functional side of things pretty quickly. We’d always talked about getting a proper designer involved, but when it came down to it I was asked if I could “have a go, and see how it turns out”.

This phrase would normally make me run a mile. I have too much respect for good designers, who do things with websites that equates to pure wizardry for my logical developer brain. However this year I’ve been trying to take on little projects to make me keep learning, so I thought I’d give it a go on that basis. We caveated the whole thing with the fact that we’d get someone else to do it if I started driving myself mad, so at least I knew it wasn’t all on my shoulders.

Sadly I didn’t wake up the next morning and know my kerning from my kernels. I have however learnt a few things which, if you’re like me, you may want to apply to situations where you undertake something a bit outside your comfort zone, such as if you want to design your personal site. It’s nothing radical, and design pros will likely roll your eyes at how basic this sounds (or totally disagree and tell me I’m going it all wrong), but following a few simple rules allowed me to keep something resembling sanity. If you’re a techie looking for actual design lessons you’d do a lot worse than to subscribe to something like HackDesign or even simple teachings like the Interactive Guide to Blog Typography.

1 – Break it down

Don’t approach a site design as a blank page that needs filling all at once. In the same way that you’d build components, look at each element in a similar way. Focus on working out a header, or a footer, and then think about breaking down everything that comes in between in a similar way. Sketching can really help to put together a plan of all the bits you need to think about in more detail.

2 – Ignore colours and fonts

I don’t mean forever, as much as we all love black, white and Times New Roman.

Playing around with fonts and colour schemes is the fun bit for me. And what’s guaranteed to stop you doing the hard bits? Fun. I deliberately removed this distraction until I’d got the basic structure down. Greys, borders, serif, sans-serif was all I allowed myself. It wasn’t quite interactive wireframes, but wasn’t too far away. I find it hard to judge an overall composition objectively if I’m worrying if that shade of blue was quite right, or if that font was just a bit too chunky in comparison to the body copy, so I left that stuff until later. Working with CSS pre-processing also means that it can be incredibly quick to change your palette and fonts if you’ve built with that in mind. Once you have, it’s easy to swap in and out different options, all the time seeing a realistic view of the permutations added to the real site, rather than a static mockup.

3 – Design in the browser

Play to your strengths. A lot has been said about designing in the browser with the shifting workflows of the responsive age, however for me it was about sticking with what I know. Give me Photoshop and I can do a pretty damned good Nicolas Cage head on your body, but I have yet to find the magic filter which makes my site layouts look amazing (Adobe, am I missing a hidden menu?).

In comparison, my brain understands CSS, and the realities of how things can be laid out using markup. I didn’t want to waste time laying out a sub-par static mockup (or even mock up components) when I could build something and revise it as I went along. In this way I experimented with different navigation layouts, played with how content might stack, and had something which slowly, iteratively improved rather than feeling like I was never getting anywhere.

4 – Look at what others are doing

Please note that this does not equate to “just steal that design you saw on some CSS gallery”. Instead, see what others are doing, and try to work out why it’s successful. Are there conventions everyone agrees on that you can start to apply? Is that colour combination one you’d never thought of, but it will work great with the base colours you already have? Are there simple ways of laying out your headers and content which make it look cleaner?

Other people are better than you. Don’t resent it, learn from it.

There are plenty of resources out there on this front – from free UI packs, to sample site templates, to Adobe Kuler and more. Don’t take any one thing and copy it in its entirety. If you see a font you like, that doesn’t mean you need to structure your entire page in the same way. There are plenty of great bookmarking/moodboard tools out there, and I’d recommend using one to build up a wider picture of inspiration rather than focusing on a single piece which inspires you.

5 – Let the content guide your layouts

One of the biggest mistakes you can make is to design a page without knowing the type of content, or the amount, or how it breaks down. Don’t design something for the sake of designing it. You’ll then find your content doesn’t fit, and by wedging it in anyway, your design is stretched in the wrong places, gaps appear, and things start to look messy. Get your content, put it into markup, and start laying it out that way so that you can play around with different options.

Similarly, don’t treat content as just text. What use is your painstakingly chosen red colour scheme if all of your images later turn out to have a high proportion of green and pink? Or potentially worse, your photos could be the same kind of tone as your site, making it all blend into a dull, bland nothingness. Using the actual photography as early as possible will help you to understand the tones involved, and to pick out subtle highlight colours which could effectively be able to inform your overall palette and style.

End result

So as I’ve already spoilered, I haven’t magically turned into a design guru overnight. I am however glad that I’ve tried to expand my skillset a bit, and to push myself into learning some new principles. The 5 rules above are things that I’ll try to stick to in future, as I found that it really helped to keep me focussed. I’m still working on the final bits for the site at the moment, and if I get permission I’ll post a write up once it has launched.