March 30th, 2010
Going back to basics
It seems that no matter how much you think you might know about something, you never really do. I was a fool for thinking I knew as much as I thought I did about design, but such is life.
As much as you’d like to believe it, design does not come naturally. It needs to be learned. I’m lucky enough to have a peer that has been taught a hell of a lot, and has been patient enough with me to give me chances to improve what I do, and learn through my mistakes.
The site I am in the process of designing is for a large public-facing client. They want something that is “clean, organised, and modern”. The first round of design that was so close to being finalised on my side (not yet seen by the client), was actually a complete state – simply because I’d become oblivious to its flaws. Padding was inconsistent, headings were inconsistent, weights and colours of typography and containers were inconsistent, font usage was inconsistent. But how was it this bad without me even noticing? One reason – I’d focused my design around one main feature, and NOT looked at the bigger picture.
The feature I speak of was a large horizontal accordion. Having recently read a blog post entitled something along the lines of “Design trends of 2010″, and seeing horizontal accordions on the list, I thought I’d try my dab-hand at something a little bit different. Horizontal accordions are (in my mind) clean, modern, and keep content organised – all whilst looking pretty damn sexy. So at wireframe stage, I pushed most the design that featured the accordion. I really pushed it. As it turns out, they still preferred the simple tabbed carousel option so chose that one instead, but having been set a tight design schedule I decided to start Photoshopping early, even before they’d even agreed to a wireframe. This accordion was the feature I’d focused all my attention on – I wanted it to shine, and so designed this first and built the rest of the site around it.
So what should I have done instead? After a good hour’s chat with my peer, and a cram-session of being shown techniques and methods of designing in Photoshop that I was completely unaware of, I think I may be set on the right path again.
Start off in black and white. This way, you can focus PURELY on the basics – layout, weights, fonts (this is still perhaps jumping too far ahead), padding. These are the things that are key to the success of a design. Forget colour, forget images, forget icons; all of those are things that you’ll spend way too much time mulling over and will become that feature you unknowingly build the rest of your site around, then wonder why you hit a brick wall two or three days later!
Starting off in black and white might seem like the logical thing to do, but for me, I always just dove straight in with the colours and the fonts and just arranged the elements in a way that I thought worked. It may have been successful once in a blue moon, but not for sites that have the potential to grow (i.e. those powered by CMS) – which in essence, the majority of sites I design for now, do. This isn’t wireframing, it’s one step beyond that. Wireframing is a rough sketch, this is the beginning of a design. It’s the foundations on which you will build upon. Get this bit right, you’ll save yourself so much frustration further down the line.
Alternatively, do what I did which was ignore the advice, dive straight in and try to get all the design elements down at the start. You’ll either end up with a mess, or having to start again.
I’m sure something similar has happened to every designer at some point early on in their career, it’s no doubt part of starting out in the big wide world of design. You need to learn to follow the right process. But I’ve had to experience it (more than once) to know that unless you tell yourself you’re doing it, and stop yourself from continuing to do so, it’ll keep on happening. I’ve had to scrap pretty much everything I did because I designed a whole site around one feature on a homepage.