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 :)

going for a run with some tunes for company gives me a ton of ideas

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.

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.

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!

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

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!

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.

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.

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 ;)

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.

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.

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.

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?

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.

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.

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.

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.