A Better Web Design Process?

Over the past few years I’ve only refined my web design process once or twice in comparison to my logo design process which I’ve refined over and over again. This wasn’t down to me thinking I had my web design process down to a fine art by any means, this was purely due to me not seeing how I could evolve it further to either reduce the time spent on it or increase the quality and creativity of my designs by changing what I was doing.

An Old Process

The oldest process consisted of having an idea then rushing to the computer, opening Photoshop and then sitting there until I had something I was happy with. This could take anything from an hour or two to losing an entire night or afternoon. This usually wouldn’t produce the ‘best’ design either, in that time I’d have changed the layout at least 5 times and scrapped by best idea and started all over again. It really was a design nightmare from hell as when you scrap the major idea you had, it brings the overwhelming feeling that you’ve lost your groove and you’re not going to get it back anytime soon.

A Refined Process

Quick Sketches. I refined my process by quickly scribbling down my ideas into my notebook so I had something to follow before directly moving into Photoshop. Whilst this gave me a lot more direction when I was in Photoshop, I wasn’t necessarily going down the right path and 75% of the time I’d be in the same position as before. I’d get to a certain certain point and scrap my idea, this just elongated the process and I’d sit for another few hours trying to piece something together.

The REAL Process

Sketching + Iteration = The Real Deal. The previous two versions of my process were used for quite a while, it has not been until recently that I’ve changed it considerably. Over the past few months and for the foreseeable future I’ll be doing a lot of design work and something needed to dramatically change. I certainly have a time restraint for the amount of projects I have lined up and needed to change my process to better enable me to work more methodically through my designs.

Sketching is incredibly important, I can’t stress how worthwhile it is as part of your design process. It’s not something that you should think about doing, it’s something that you SHOULD be doing. Don’t care whether it’s on your notebook, the back of an envelope or in something like Balsamiq. It’s supposed to be rough, but it can be iterated upon which is the route I’m now going down. Instead of having the one initial sketch that I work on I now iterate the first sketch. Why? Because that’s it, it’s the first sketch. It’s a very brief sketch/wire frame which could be a good idea but not necessarily the best one. The quickest way for me to make this better (for me) is use the good old pencil and paper. For my most recent design I improved on a homepage sketch 4 times over the space of 24-48 hours. This gave me the time to move away from the idea and come back to it with a refreshed mind instead of sitting senselessly working on a half-assed idea.

The 4 different sketches dramatically changed over that time. If I’d tried to do the same in Photoshop it would have taken me twice the time and I may not have even came up with the final idea as I would have probably been all stressed out with forcing a design. Note: Never force design!

Doing Something Different

Over recent weeks, a range of different web design processes have shown up on dribbble with Matthew Smith, Brian Hoff and Jeffrey Kalmikoff all showing different dribbbles of their work in Photoshop. All three presented their work in greyscale, something I hadn’t done before. Matthew went on to explain the reasons for doing this as the discussion ensued across all three dribbble posts. It was an interesting take on planning out your design to keep you from adding the detail and concentrating more on layout and hierarchy.

Greyscaled Dribbbles

I liked all three concepts, Jeffrey’s and Matthew’s ‘DesignLite’ were very similar whereas Brian went to look at both the grid and layout whilst working with very minimal colour. After working on my last project where again I couldn’t help but work on the finer details too early so when I started my new project I made a point of starting out the right way.

I did my sketches, one of which you can see above. The sketches were very rough so I headed in to Photoshop and instead of immediately going in to the design I started laying out what was in my sketch in different coloured grey boxes. These boxes would simply show the position of elements I’d had in my sketch and where I thought elements could go. I noticed early on that instead of sticking to my usually definite grid layout, I started mixing things up a little. I thought about offsetting objects on the page, how the different elements would interact with the user. I felt a lot more confident about the way I was headed with the design.

As soon as I’d filled out the majority of the page with the grey boxes, I simply went back over and started replacing the boxes with the actual designed elements. This reduced quite a lot of time as I was happy with the layout BEFORE I even looked at the finer details. The design has progressed somewhat from the image shown above and dribbble’s of it can be seen here.

Don’t Care About The Time

I’ve realised something big through the refining both my web and logo design process. Don’t be afraid to spend a lot of time on your process, you’ll make it up later on. You need to spend more time, a lot more, to get the best of the ideas in your head.

What about you? What is your web design process like? If you liked this article you should follow me on Twitter.

Published by

Gavin

Lead Interaction Designer at DigitalDWP. Organiser of Industry, The Practical Web Conference..

14 thoughts on “A Better Web Design Process?”

    1. Hey Ankit,

      Thanks for stopping by. Changing my web design process was quite possibly one of the best things I’ve ever done. Keep an eye out on twitter for when the next dribbble draft takes place.

      Gavin

  1. Hah, this has been extremely helpful. I’m still stuck on “The Old Process” mostly because I’m not a good drawer with pencil an d paper. Because you made it a point to specify that it’s suppose to be rough though, I think I’m ready to try something different. I would have liked this post to be longer, but good stuff.

    1. Hi Daniel, thanks leaving your thoughts. Sketches are definitely supposed to be rough, as long as you know what your doodles mean it should be good enough. With regards to the post being longer, what would you have liked to be included? Would you like me to expand on anything?

      Thanks,
      Gavin

      1. Well, I had question unanswered at the end of the post. Questions I would have loved to have had answered. For example, how many sketches do you do before moving to photoshop. How much time should be spent on an individual sketch, or if you ditch your sketch layout in PS do you need to go and do another sketch? Particular questions like those that I have, probably because I’ve never done it before.

  2. Hey Daniel, I’ve been sketching before getting on the computer for the past 14 years. I had a teacher in college that always said “solve your problems on paper, not on the computer”. I’ve always kept that advice close to my heart.

    I’ve been noticing a lot of younger designers out there rediscovering the art of sketching and wireframing BEFORE designing. It’s heartening to see.

    Look forward to more posts from you like this one.

  3. Excellent. I love seeing other peep’s processes. I’d like to see more of your sketches to see the evolution if you don’t mind. Thanks.

  4. Hi Gavin.
    Not only do I agree with improving the process, also add the importance of constantly improving processes. Each customer demands different requirements and this makes us evolve and understand that time is money.

    Sorry for my english. 🙂

    1. Hi Anibal,

      Thanks for stopping by. Very true, you should always look at improving your processes including your own skillset.

      Your English is perfectly fine 🙂

      Gavin

Comments are closed.