Designing graphics in image software can be a lot of fun. It can also cost a lot of time, polishing details of designs that are ultimately rejected. When creating a new design, it can therefore be helpful to draw simple pencil sketches as a form of visual brainstorming.
Drawing with a pencil on a piece of paper may feel daunting. The drawing doesn’t snap to grids, and there is no Undo button (although an eraser is almost as good). Don’t worry about that. Remember, this is brainstorming. After all, you probably wouldn’t worry about the font when taking notes during a text-based brainstorming.
10 + 10 Sketches
If you need to create a design, but have no idea where to start, you can use the 10 + 10 approach. This uses three rounds, or iterations, to find the best design pencil sketch for you to work with in your graphics editor.
In the first iteration, you draw 10 different rough ideas. In the second iteration, you pick the idea you like best, and draw 10 versions of that idea. In the third iteration, you pick the version you like the best, and draw it nicely in your image software.
Again, don’t spend a lot of time perfecting the drawing. 30 minutes for each iteration will usually be enough. Instead, take breaks. You should ideally wait a day or two between each iteration. This will often give you a fresh perspective, and your brain has time to subconsciously work on the design.
As an example, let us imagine that you need to design a logo for a craft beer website.
First iteration
Here, I drew pictures of different things I could think of that are associated with craft beer:
- Traditional beer glass
- Beer bottle
- Fancy beer glass
- Combination of the glass and Bottle
- The top of a barley plant
- Craft beerman
- Barrel of beer
- Beer draught
- Bottle opener
- Bottle cap
Second iteration
From the ideas above, I like the barley the best. I also liked the fancy beer glass and the beer barrel, but these could easily be mistaken for a cognac glass and a whiskey barrel. The natural and rustic quality of the barley plant is also great for craft beer. Furthermore, unlike many average beer drinkers, almost all craft beer connoisseurs will instantly recognise its distinctive shape.
In the second iteration, I tried various ways to use the distinctive barley shape.
The logo needed something more, either additional strands or a background.
In the version in the middle, I tried to see if a grain scoop would work, but it lost too much specificity.
In the version in the bottom-left, I wanted to show a hand running through the grain, but this became too complicated for a logo.
The bottle cap background and circular strands at the bottom felt a little too quaint.
Result
In the end, I went with the design in the top-right corner.
The single strand is simple and easy to recognize, and the circular shape is great for a logo. At the same time, the broken circle adds a lot of dynamism. I would color both the circle and the barley a light brown color, to reflect both the color of the grain and the beer.
Rather than immediately working on the design in my image software, I wanted to create a third sketch. This helped me identify that, when shown in a large format, the space on either side of the barley becomes very dominant. Because the logo will usually be shown in a relatively small scale, this is not necessarily a problem. It does, however, suggest that the thickness of the circle should be on the wider side, rather than the narrower.
Sketching a Mobile App
Disclaimer: This app mock-up is for educational purposes only. It is not a real app. The app mock and this website are not affiliated with Copenhagen Airport in any way.
Creating a sketch is also a quick way to try out a design. It doesn’t have to be pretty or show all the intended features or screens. Just enough to get a feeling for whether the idea works is fine.
Design idea
The concept of this app would be a quick guide for visitors to the airport to find their gate or places to shop. It would combine the phone’s GPS with a custom map, replicating the functionality of a regular SATNAT. This functionality will be familiar to almost all mobile phone users
Initial sketch
My initial sketch for the app features two main tabs. These tabs allow the user to choose between finding gates or shopping options. The user’s tab is highlighted so that they know which one they are using.
Below the tabs is a map with a dotted line leading the user to their selection.
At the bottom is a search box so that the user can search for what they need.
Based on the initial sketch, I changed the name to Navigator rather than Guide. Navigator is a longer word, but it is still understood by most people, and is directly related to the topic of flying.
In addition, user will often need to park or find their car. Users may also be specifically looking for a place to eat, but not shopping. Instead of adding two more tabs, the two existing ones were expanded to Gates and parking and Shopping and dining. These two pairs go well together; the first two relate to the actual travel, while the last two relate to time spent in the airport.
Mock-up
Once I had the sketch ready and had identified the necessary changes, I created a more carefully-designed mock-up in GIMP.
Copenhagen Airport uses white or yellow on dark or medium blue, which can be sampled from their website. Their font is Google’s Open Sans, is free to download.
The colors and fonts of the app are set to match those of Copenhagen Airport.
Their design follows the trend of blocky panes with flat elements, rather than 3D effects and shadows, which has also been replicated.
For the design sketch, the map was re-created as an SVG based on existing, official maps, to easily size and fit it into the overview.
The name of the store was added below the map, to allow the user to visually confirm that they have selected the right place. It would be very frustrating for a user to think they are going to the right store or gate, only to find out they mis-typed or -clicked.