6 August 2008
Finding a design process that works.
I’ve recently just finished updating Carsonified’s 2008 ‘Future of’ event sites. So while the Event Planners iron out the finer details of the forthcoming events my focus is turned to the design of the 2009 event sites, which I get to design from scratch.
So where do I start?
We’ve already had a couple of meetings about the sites and we’ve set out the technical and functional criteria. The design is down to me.
I’ve been thinking a lot recently about the process of design because to be honest I’m still searching for one that works.
I’ve designed a load of projects over the years with some half decent results along the way… but using only a very loose design process I normally grind and crash my way to the project’s conclusion. So I’m eager (especially with the 2009 sites in front of me) to find design process that works.
So after some thought I’ve come up with a five point design process plan.
1. Just think
Put on some inspiring tunes and just think about your project in the loosest possible way (at this point anything goes, the crazier the ideas the better).
I sometimes find going for a run with some tunes for company gives me a ton of ideas. Thinking in bed before you go to sleep is quite thought-provoking too.
2. Look for inspiration
Make a note of your initial ideas and with them in mind hit the internet. Scour the web for anything related to your ideas and bookmark anything that catches your eye. Do the same with your bookshelf, newspapers and magazines. One thing I find helps is looking at non design related literature as you can often stumble across an unexpected visual gem when you’re least expecting it. It’s also useful to take a step back from current design trends when looking for inspiration as I sometimes find it’s easy for a project to start looking a bit like everything else out there. Remember if you find that perfect bit of inspiration in the back of some old 80’s gatefold album sleeve you can bet your bottom dollar that no-one else’s design is going to look like yours.
3. Sketch out rough designs
Spend some time sketching out your ideas in your notepad/sketchbook. Try and avoid jumping straight onto your computer (I’m guilty of this big time!).
I find going straight to your computer can give you a sort of ‘design tunnel vision’…basically meaning it’s easy to get stuck in a rut with your first design that wasn’t really thought through.
4. Start designing proper
So after sketching out a bunch of ideas you should have a much clearer idea of what direction you want to take your design. So designing in photoshop or xhtml/css etc should be a much easier process. Also once you feel confident with the route your taking in your design try not to get bogged down in minor details at this stage (I’m also guilty of this), you can do the the detail later when you happy with the bigger picture.
5. The devil’s in the detail
Hopefully now your photoshop and xhtml/CSS is going swimmingly and you’re nearing the end… well this is the time to pay attention to those small details as it’s often the attention to detail that makes the difference between good and great. If there’s something nagging you about a certain part of your design and you sort of know you should revisit it but don’t know if you can be bothered – just do it… It’ll be worth it in the end.
So what do you reckon? Is this a load of rubbish, is it just obvious?… or is there some value in it?
Does anyone have any thoughts or tips they could add? :)
Enjoy this article?
If you liked this article, feel free to re-tweet it to let others know. Thanks, we appreciate it :)
We love .net Magazine
We're big fans of .net so they've hooked us up with a rad deal: Save 50 percent on your subscription.
Jaan
# August 7, 2008 - 3:40 pm
Maybe a potential 4b: show the rough work in progress to one or two people whose opinions and feedback you trust/value?
Scott Mallinson
# August 7, 2008 - 3:52 pm
I agree with all the points you have outlined above Mike. However out of preference, when I start to work-up the design I use Fireworks simply because I am more familiar with the application that Photoshop or others.
Whilst I like to include real text in my concepts rather than lorum ipsum text, I find that we I get to the point of styling it it’s time to start transferring the design into html and css. I have found that graphics editing applications can’t quite replicate text displayed in the browser.
curtismchale
# August 7, 2008 - 3:56 pm
This process seems very similar to the process that I use for design inspiration. I also agree with Jaan. I have started passing my design ideas off to others that I trust to ask me some tough questions about the ideas and reasons behind the design. I find for myself that this helps lots in getting a great design quickly.
Dan DIneen
# August 7, 2008 - 4:19 pm
Hi Mike,
Great post and an interesting peek inside another designer’s head.
I’d agree with Jaan above in that getting your designs in front of someone else is particularly important once a potential concept starts to take shape. I’m pretty bad at doing it though…
I think point 2 is right on the mark, especially when you talk about deriving inspiration from outside the web. I’d be tempted to suggest that the web should be the last place to look for ideas. Get out of the house (or office) and hit the art galleries, museums, shops and parks for an hour or so and then start sketching.
As for an 80’s album cover style FOWA 2009 – what about Flock of Seagulls as a starting point? Their album covers were appalling but I reckon you could something smart based on ‘that’ haircut.
mike kus
# August 7, 2008 - 4:20 pm
Jaan – totally… 4b it is :)
Scott – like you I only go so far in photoshop/fireworks before switching to xhtml/css. Besides designing with xhtml/css is loads of fun.
mike kus
# August 7, 2008 - 4:23 pm
Dan – just checkin’ out ‘Flock of Seagulls’ album covers and hair cuts – tons of inspiration! ;)
Paul
# August 7, 2008 - 4:35 pm
That’s a good design process, I’m trying to follow that same pattern. The main thing I run into to is time constraints. What how long should steps 3 – 5 really be taking?
Ryan
# August 7, 2008 - 5:10 pm
Great post Mike, thanks.
I definitely agree with each stage, but I would add an amendment to step 3: Turn rough sketches into designs on paper before opening Photoshop/Fireworks. I do mean to say that anyone should produce highly detailed illustrations of their site prior to turning on the mac, but I find that if I do not eliminate design excesses in the drawing stage I end up wasting a lot further down the road.
Jason Zimdars
# August 7, 2008 - 5:12 pm
The one thing that I always seem to have to coach our junior designer is to start with the message and content. So often they call me over to their workstation looking for a critique or an idea and I all I see is the logo in the top left, a place for a menu, and some decorative design elements. And they wonder why they’re stuck.
After I get a concept and maybe rough hierarchy in my sketchbook, my first photoshop comp is black text, a white background and maybe some grey boxes to start forming a grid. Even if I don’t have final content from the client I’ll make it up or use greeking. But I want to know everything that is going to be on the page and start playing around with those relationships. Visual elements then begin to reinforce the hierarchy and those relationships.
This may seem self-evident to many of us, but see it enough that I thought it was worth adding to the discussion here.
Looking forward to what you come up with, Mike. Maybe you can keep us apprised as you go?
Paul Groves
# August 7, 2008 - 5:17 pm
Great write up – it can be very easy to get lost on the way and building some structure to the process has to be a good idea!
Two things which I have learnt over time -
1 – If you are designing for a new client/someone else (i.e. you have less autonomy than I imagine you do at Carsonfied for an in-house project) – don’t spend too long on initial designs but get something to look at quick. In my experience this tends to prompt your client into opening up and telling you what they really do or don’t like. I used to agonise over initial proposals in the hope of bowling over customers only to crash and burn at the first hurdle. It much easier to talk about an actual visual, especially with clients who nervously give you carte blanche (no brief!) to start with as “you’re the designer”
2 – Present work in a browser. Ideally build mock ups in xhtml/css or at least export your design as a big image and put in an html file. This lets the client see the site in a context they understand (most probably WIN IE 6!), on their screen etc. Opening up your Mac and showing them Fireworks can easily dilute what you want them to look at.
Hope this is of any use.
Dave
# August 7, 2008 - 6:54 pm
Another source of ‘inspiration’ is the clients current site and marketing materials.They may already have a tone and feel they are portraying which you need to align with. In an ideal world you would also have the intended copy (like that ever happens!). Not so important for in house projects I guess.
Ryan Downie
# August 7, 2008 - 6:58 pm
Good post Mike,
Something for to consider to use in my process. I am also trying to nail down one that works as just winging it till it feels right, feels like there is something missing.
Do you use grids at all? Nice to see another designer utilizing what we have on the web. I see of people nowadays a who say they look for inspiration outside of the web and rarely use the web. I feel like this is a valid tool because of the wealth and diversity that we have on the web. Don’t get me wrong I look outside of the web a good deal too.
Maria Greene
# August 7, 2008 - 7:47 pm
I’m finding that going from sketches on paper (lots of sketches) to (X)HTML/CSS with just layout and typography, and then into Photoshop/Fireworks to “decorate” works the best for me. I try to hold off jumping into Photoshop until I have a good amount of content either fleshed out or at least understood. It’s a pain to simulate content in Photoshop.
So, the bare-bones first version is the skeleton. The content is the meat. The Javascript/back end programming is the muscle. The CSS/images are the skin & clothes.
mike kus
# August 7, 2008 - 11:12 pm
Thanks guys for all your replies. Some really useful stuff in there.
Jason – good point about starting your design with the content. Sort of working from the inside out… I’ve tried this in the past with some good results.
Paul – like your point about keeping it simple for the first proposals you present to a client – makes a lot of sense.
Ryan – Sometimes use a loose grid…really depends on the project.
Maria – love your analogy to the body parts ;)
Barry
# August 8, 2008 - 1:38 pm
Nice post,
I often find my design process makes the biggest developments when I get onto photoshop and start making the first mockups.
Playing around with different colours and shapes usually gives me a lot of ideas and inspiration, more so than looking at other peoples designs and sketching.
Randy
# August 13, 2008 - 3:40 pm
This is pretty helpful. I am in the process of redesigning my website and being a programmer mean I have horrible design technique.
I am quite guilty of just diving into design, and I should truly take a step back and watch the project come together before even touching it.
wez
# August 14, 2008 - 9:33 am
Hey Mike – great post. Helps to hear someone else works in a similar way to me, nice to know your not alone sometimes!
I’d introduce a fireworks stage after the design in photoshop stage. Fireworks is faster for exporting your graphics – as well as optimizing a damn site better than photoshop. The same export from photoshop can sometimes be double the size of a photoshop export.
Keep truckin dude, loving the work!
Simple
# August 16, 2008 - 2:27 am
One of my favorite design techniques actually starts withfirst considering the audience of the website and then looking at sites I feel target that age group well. Not only websites but sometimes also magazines etc. If you design without a concept of what works for that age group I think it is easy to get lost. This doesn’t always apply but I have found it a useful tool recently.
Ollie Kavanagh
# August 17, 2008 - 9:30 pm
Sketching out rough designs is something that is so often overlooked in the design process. Due to the demands of some working environments it can become almost impossible to plan and sketch out your ideas before hitting the computer.
It is something that I have been guilty of in the past as I guess a lot of us are. It can often be difficult to convince some bosses we need planning time before execution as personally I find my work becomes stifiled and uncreative just relying on the computer. I always now carry around my sketchbook again to make sure I don’t fall into that trap. It is so refreshing getting away from the computer for inspiration!
Good post Mike
Sam Marks
# August 19, 2008 - 2:08 pm
Hi great post Mike, I would totally agree with all your points and would even go as far as saying that sketching out prior to doing anything is a PRIORITY !!! I’ve often found myself stuck staring at my screen with a deadline rapidly approaching cause I’ve created a cool looking masthead but I haven’t planned what’s going below and how. Sketching ideas out makes life so much easier when it comes to creating a visual.
On bigger projects I then go from sketches to wireframes, I find these are a great help when various process and huge amounts of content need to be considered, obviously there might be time constraints that affect this..
Good stuff Mike, and I’ll keep my eye out for more from you!
Ivan
# August 22, 2008 - 12:00 am
Great article and nice to know other designers face the same issues as you. I agree totally with your approach having gone down the route of jumping straight into Fireworks and then getting stuck.
One other approach I use uis to right out some simple personas of the people the site is targetting along with some keywords or concepts that relate to them. This way you can bear in mind their needs as you design.
I also find creating basic HTML wireframes of the design helps to clarify and layout issues or porportions and also speeds up the build later on.
Jelle Desramaults
# September 8, 2008 - 3:46 pm
Amen! Going for a (long) run is a big creativity boost. Ide
Maybe I should buy a little 80s tape recorder and start recording all my ideas whilst running.
If it works for special agent cooper, works for me! :)
Helpfull post!
I”d love to see some of the “sketches” metioned above by other commenters.
Aaron Hargreaves
# September 23, 2008 - 3:14 pm
It almost feels like I have written this post myself, I’m obviously on the same wave length.
I think the earlier stages of a project are most important, basically just sitting in your desired environment thinking about the project. Whether it is in silence or chilling to your favourite tunes on your iPod, outlining the details of the project in your mind before you put pen to paper does help.
With experience you start to think differently. I think the most important key to a successful web design is a futureproof design.
Make sure at the early stages you consider things like, what will happen to the design if the client adds more content or more products to the site?. Things like this can become a ball ache at later stages if not thought about upfront.
I wont waffel on any more :)
Kimberley Camera
# February 7, 2010 - 3:15 pm
Great information! It’s always interesting to see how others go through the creative process. I’m going to put a lot of this to use right away! Thanks!