Head of Interaction and Service Design at @DigitalDWP
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.
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 seenhere.
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.