Why sketching is an important part of the design process…

A little while ago I wrote an article about ‘a better web design process‘, I discussed the evolving nature of the design process from old to new and the benefits of each progression. One of the largest parts of my design process which I have added to and extended is the sketching phase. This phase includes other areas which I will detail and explain below.

I used to stay away from sketching, I guess I was a little stubborn thinking I could do everything off the top of my head. I think the stubbornness was one of the largest contributors to me nearly losing my mind on numerous occasions. There were two ways I started a new project,

  1. I used to work by inspiration, waiting for that great idea and quickly jump in to Photoshop.
  2. Go straight in to Photoshop and start moving around elements of the design.

I can tell you now I was going about this all wrong.

Sketching is a lot more than just putting pencil to paper. It’s about understanding, thinking, planning and iteration. As part of the design process sketching is a hugely under-rated step.

Sketching and planning a new project

The more you understand the project you’re working on, the easier the sketches happen. Whilst you sketch you notice things that you probably wouldn’t have if you’d gone straight into Photoshop/Fireworks or the browser. It helps you understand the context of the content you’re working with and help you put everything in order. Designers are a unique in that we deal with elements of design and understand how they’re supposed to be used, sketching helps us justify our decisions for dealing with things people feel and sometimes don’t see.

Granted we can think about design whilst we’re using our tool of choice, but often we get caught up in what we’re doing and charge ahead for that aesthetic look instead of keeping our minds on the on the real goal which is the core of the design. Sometimes we set ourselves up for a fall by thinking to literally instead of figuratively. Yes there are rules, or guidelines which can be followed but there’s no reason why we can’t let each design have its own unique twist, with sketching we can let our minds wander down other routes as our sketching doesn’t have any rules and we can have as many scribbles, crosses or arrows as we like.

The execution of your design comes down to planning, we’re happy to enough to sketch out a room in the house when we’re looking to convert it into an office. We do this because it’s a clean slate and we have the option to do anything we like, the same as our designs. Sketching doesn’t just help us plan our designs but we can manage the hierarchy, structure and interactions between every element or link.

Sketching out a payment process

It’s all well and good doing one sketch to map out what we have in our head but a lot of the time that won’t take everything in to account. If we iterate our design in the sketching phase, it can reduce the amount of time in Photoshop and even when the site goes live. Granted we need to user test the design, but putting that extra thought in to it before hand could and should reduce the amount of time spent after wards.

Sketching doesn’t have to be perfect and you most certainly don’t need to be an artist. We’re talking about squares, rectangles, circles and crosses. This is how I work. I attribute shapes which make sense to me that I can understand when I look back on them.

The amount of sketching I do varies on what project I’m working on. I have multiple sketch books ranging from A5 to A2 in size and I work in them all. I prefer to work out of my A2 sketch book when I’m at my desk as I can iterate five or six times before needing to turn the page. I probably sketch each section of a design once or twice and there could be up to 2 or 3 iterations of those. I’m currently working on a rather large project where I have covered 16 or so A2 pages front and back and those sketches aren’t refined, I generally sit with my A4 sketchbook when I’m in Photoshop to refine a sketch down in more detail.

The amount of time on the actual sketch is usually minimal, its the thinking time which should be higher. That time should include planning and iteration and generally keeping your mind free before settling down on the aesthetics. If you move into Photoshop and then ditch one of your sketches, quickly re-sketch what you’re thinking and see if this takes you down a different avenue. You never know where it will end up unless you make that effort.

So there’s why I think sketching is so important and a little bit of insight into how I work.

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.

What Milking a Cow can teach us about a Design Process

A design process is just that, it’s a process. You start at the beginning, work through and end up with a finished product, whether you’re working on a website design or logo design. Most designers have different processes which they work to during a project, a process which works well for them so they can get the job done in the easiest and most inspiring way as possible.

Designers can learn a lot about a design process from milking a cow. I know, I know you’re saying “pull the udder one” but we really can. Everything involved in milking a cow can teach us something.

The Short Stool – (A comfortable inspiring place)

The short wooden stool lies at the heart of the process, enabling the ‘milker’ to be in the best place for the job, at the correct height to use his tools and achieve his goals. Just like a ‘milker’, we designers need to be in our creative zone when doing our job. The short stool for a designer is that office, desk or coffee shop where we start our process. It is that one place where we should start our journey where we feel most inspired and comfortable to do our job to the best of our ability. Don’t forget that you also need to be ergonomically correct and take plenty of breaks during the design process so you don’t strain your eyes or hurt your back.

The Pail (Tools)

The Pail or milking bucket is the one thing used to collect the milk, it’s one of the only tools involved in milking a cow. It needs to be big and strong enough to hold the amount of milk that you need. For a designer, the pail represents the tools needed to do the job, whether it’s an iMac, Moleskin or pencil and paper. If we don’t have what we need then the process is already broken. Make sure before any design process that you have everything that you need, there is nothing worse than getting so far and having to stop because of an unnecessary interruption.

Your Hands  (The Work)

The teets aren’t going to pull themselves and your hands need to be clean and warm so as to not shock the cow. You’re not exactly going to pull any teets during your design process but you will be using your hands a lot. No matter what kind of design you are putting together you need to find out what things need to take place during a specific process. Many logo designers have a design process that works and these can be suitably changed for other designs. Once you figure out what works best for you, every job you take on thereafter will be ten times easier. Take good care of your hands, and your hands will take good care of you and so will your work.

Be Gentle (The Client Communication)

As you’re pulling the teets you need to be aware that any one pull could make the cow uncomfortable. You have to be firm but fair with your cow to get the best out of it. The love and care that you show your cow is well represented in a design process. It appears as the communication elements of your process, be careful not to call your client a cow as it could bring unintended offence and loss of earnings however you should be aware that in any design process the communication between the client and yourself is paramount. Both the client and the designer need to understand what is to be achieved during the process and in what way payment is going to be transferred at what time.

The Milk (The Finished Product)

Ah creamy goodness! Just what the client ordered! When the ‘milker’ sat down on that small wooden stool, this is what he was aiming for. Even though the ‘milker’ sat for hours on the stool and filled the pail with milk with those warm hands making sure they were gentle throughout the process, they still had to make sure they knew how the milk would be made ready for consumption. In a designers process, they must make sure that all files are prepared correctly for use and are sent to the client in whichever format they require. This will not only increase the relationship between the client and yourself but will possibly increase the amount of opportunities you have in the future.

We as designers have a lot to thank cows for, their entire milking process can teach us more about design processes than we would have ever thought.

Logo Design process for Stratega Group Ltd

The logo design project was completed as part of a full branding project. Stratega Group Ltd is a new financial company based in the United Kingdom dealing with large clients in various financial fields.

With no previous brand, I was given free reign to develop something new. With some guidelines and wishes from the client I started the process;

Brainstorming and Sketching…

logo brainstorming

logo design process

Logo Design Sketches

logo sketching

logo sketches

I presented ideas based on the meanings of the core subjects and in this case Stratega, Strategies, Strategy expanding into Achieving, Tactics, Goals and Planning.

The core meaning of a strategy is;

To achieve an action through use of tactical dynamic planning and skill.

The ideas were expanded and I looked at how strategies are enabled specifically looking at battle strategies and more so the most prominent and effective strategies or formations in recent and past history.

This led me on to thinking about the “Art of War” by Sun Tzu and his conception of the “3 Pronged Attack” where a centre force would go straight for the enemy and the left and right forces would move left and right to flank the enemy force and crush them in their centre disabling the enemy in one fell swoop.

The visualisation in my sketches show how financial planning and strategies can achieve goals, i.e. cutting costs or expenditure.

6

During the design phase I considered various colors;

Primary Colours:

  • Black – Wealth and Sophistication
  • Soft Grey – Respect & Wisdom
  • Strong Purple – Efficient and Intelligent

Secondary Colours:

  • Blue – Trustworthy
  • Red – Strength and Passion

For the initial designs I chose “Bree Bold” which I wasn’t particularly happy with..

I had been sketching various versions of the three prongs and had to progress from my initial drawings as it looked slightly wrong, something I was obviously keen to stay away from.

7

The client was perfect every step of the way, providing feedback when needed. Some of the feedback on the ideas above came back like this;

Reminded us of opening sequence of Dad’s Army

The other logos gave us the impression that the word had almost been miss spelt, if you see what I mean, through the highlighting and the arrows on the “E”.

The feedback requested that I also look in to the Power option. I wanted to steer away from the ‘Money’ side of things as it would be far to tacky and ‘normal’ for my liking.

So I spun the whole strategy and power on it’s head. The most powerful formation within an armed force, especially in a cavalry troop is the Wedge or ‘Flying V’ as it is sometimes called, this formation can pierce the hardest infantry line and is extremely powerful.

I mixed the flying V into a few different version and came up with No.3 (purple background), the individual triangles are broken down to represent the units within the ‘Wedge’, the three separate ‘Wedges’ on top of each other represent the 3 pronged attack and powers in numbers. It’s all just an abstract view which works very well together. I changed the typeface, moved it away from “Bree” which it was originally to “Often” and believe it suites very well.

1-1

2-1

3-1

Options 1 and 2 were brought out of doing No.3.

The client chose Option 3, which was my preferred choice.

The Stratega Group Ltd branding process was an awesome job to work on, the clients were an absolute dream to work with.