August 2010 - Gavin Elliott

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 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.

The Evolution of a Button

A little while ago I wrote an article about ‘Call to Action‘ buttons and how specific colors feature greatly in rates of conversion. I’m personally interested in the ‘what’ and ‘why’ areas of a persons reaction to a button. Whether it’s the size of the button, the color or the text so over the past week I’ve been designing some buttons and then testing these buttons on a range of users.

A 10 Person Test

At first, I’d not intended to start testing the buttons on people, I had simply begun a new design and was working through the admin area when I thought about what sort of button would catch someones eye or would make it easier to find and click. This is when I started calling people in from the Codeworks office to start testing the buttons.

Just Checking…

I started off the test by asking the participant to say ‘Left or Right’ the moment they saw the buttons. This test was purely to see if what I had written in my previous article was true. The buttons which I showed are below;

8 out of the 10 people in the test said ‘Right’ immediately after seeing the buttons. The one thing I didn’t test was showing the buttons without the text. I would have liked to as one of the users mentioned that they felt inclined to go with red because of the word ‘Deny’ sounding more intense.

I then showed the below image to one of the users by accident;

I’d been playing around with an extra button for the ‘Account’ area and showed the wrong image. One of the users chose blue quicker than the other users had chosen red. This threw everything out of sync. I ended up going through the entire test again and 7 out of 10 users chose the blue account button instead of any other. I asked 4 people why they chose blue and the resounding answer was that it was more eye-catching and seemed more friendly. Great – Just what I wasn’t expecting.

I sat and looked at the buttons for a while, walked away, came back and there just wasn’t something clicking with the buttons against the design I was working on. They seemed out of place against quite a pale color scheme. I started tweaking the buttons by toning down the color and inverting the text color against the button. As well as that, I decided to add an icon to the buttons to see if the addition of a visual aid changed the response from the users and changed the type to Museo Slab. Below are the buttons I came up with.

Something you’ll notice about the above is that I changed the wording on the buttons and ultimately increased the amount of words overall. At this point of the test, something big happened. I realised that you (the designer) and your users have totally different opinions on what you think looks good. I’d go as far to say that users don’t care too much about how things look ‘nice’, they simply want something visual enough to sway them one way or another. I showed the group of testers (individually) the two images above in a stacked formation and asked them to say ‘top or bottom’ as soon as they saw them on the screen. All ten users chose the top set of buttons. After quizzing 50% of them about why they chose the top set there were two answers which kept being repeated.

They didn’t stand out enough
There were too many words.

Back to the drawing board for me! Visually I thought the lower set were ‘nicer’, but again the users just wanted to use the buttons, not have sex with them.

I took the feedback and reduced the wording back changing out the word ‘deny’ for ‘reject’ to see if this had a dramatic effect on the testers choice. That set of buttons is below.

Again I showed the testers the above with the original set of icons. The reduction in text didn’t make one little bit of difference. 9/10 testers said that they’d still pick the original with the other 1 tester saying they didn’t know which they’d pick as they now liked the reduction of words. This was most definitely not a success. I still had it in my gut that the way the buttons were heading was the right way to go. I liked the new typeface as well as the inclusion of the icons.

I iterated the buttons again, taking the earlier point in to consideration about the buttons not standing out enough. The major difference now was that the newest set of buttons weren’t colored apart from the icons. After playing around with the colors again I was ready to start testing again. The below image is what the testers were shown the lower new buttons against the originally buttons from the first test.

Success!

All ten testers chose the bottom set of icons immediately as they flashed up on screen. When I quizzed about the reasons why a few points came back;

They now stood out more
They loved the inclusion of the icon
They looked nice and they wanted to press them (When quizzed further this was down to the typeface looking better and not looking so ‘angry’.)
They felt Deny was too much of a strong word and much preferred ‘Reject’.

That concluded the end of the exercise. I took the buttons, added them into the design and the final piece is now in development. This exercise for me was a big learning curve. Not just because my idea of ‘nice’ was different to the users, but the way I could quickly and easily test the reactions of testers and change the way I was designing for specific reasons. I’d recommend anyone to give it a go sometime, it’s quite exciting.. especially when you know you’re on to a winning design because of a persons reaction.

*Note – The buttons since the images in this post were made have been tweaked slightly with regards to color, gradient, border etc but most of all they look pretty much the same.

Have you done any tests like this and written an article about it? I’d love to hear about it.

Talking about Creativity

A little while ago I had the opportunity to go over to Newcastle College and speak to the Web Design Future course. I had an open choice of what to talk about so focused in and expanded on an article I wrote some time ago for Fuel Your Creativity titled ‘Don’t stick with what you’ve been taught, you’re a creative so get creative.’

One of the students wrote a small article about my visit.

Thanks to the Web Design Future course for inviting me over, you guys are great!