This is the second part of my two-part post about why IT industry professionals – such as developers, designers, product owners and sales experts – should sketch. In the first part I covered reasons for sketching. This second part focuses on the practical side, and takes you on a journey through constructing a sketch piece by piece. You don't need to know how to draw or how to prettify things to learn these techniques. This is the final outcome of our journey: We will be creating a high fidelity sketch in order to display and explain numerous interesting techniques. Remember, though, that high fidelity is not always the way to go — cut corners and sketch only the necessary.
Good posture and maintaining a natural position of your arm is important in sketching. If you have not drawn or sketched much, you might want to draw from your shoulder or elbow, as this will help you make clean lines. As you become more used to drawing, you can start drawing from your wrist, which will give you more control over details.
When making long lines or curves, make sure to keep your wrist off the paper so that you can freely draw from your shoulder or elbow. Try lifting your chair up so that you are above the drawing surface.
You should own a set of good pens or pencils. You can start with just one pen, but for more detailed sketches, you should have a few different ones to create more variety (as you will see later).
We will be drawing on a blank page, but be aware of sheets that are available for free. Smashing Magazine has created a nice collection ofsheets for making browser and mobile sketches and storyboards
. Sneakpeekit hasanother nice collection
. You might even want to purchase a sketchbook that has the iPhone frame or a browser window printed on each page. Basic dotted sheets help you draw straight lines and items of the same size, while the sketchbooks with mobile screen frames give you a sense of available screen real estate and the proper aspect ratio. This is valuable because it's very easy to fool yourself into thinking there is more space available than there is on the real device.
Consider this situation:
Your team is designing a mobile data-heavy stock market analyser for shareholders. The team has a challenge with one screen in particular. On this screen you want to give some basic information of the share, but the main need is to display the share price over a period of time on a small screen. It is important that the user can see long-term development of the price as well as more detailed view of the past days' and weeks' prices. You have an idea of displaying a single graph and adding a slider control to adjust the level of detail.
This example will give you an idea of sketching user interaction, which is something that sketches can communicate quite well.
I will drawing on my beloved Pantone A4 sketchbook and will use five different pens. The topmost pen in the picture is a very light grey marker that allows me to draw outlines that won't be visible in the end result. The second is a black 0.5mm fineliner that I will use for most UI components. The third is a fairly thick dark artist pen that allows me to quickly create shadows. The red pen is a special Muji gel pen that can be erased with the little eraser on the cap. In the end, I will use a pencil to give some elements a grey background in order to pop them out from the sketch.
If you don't have a variety of pens, a similar end-result is possible with just a simple black fineliner and a pencil. However, consider getting a few more pens if you feel sketching is something you want to continue. Having a variety of pens for different purposes saves time.
At five minutes: an outline of the sketch
Start using a pencil or a very light marker to put things in place. My grey marker is so light that it lets me explore the exact position of the screens on the paper. Because the colour is so light, I can make errors when drawing these lines; they will disappear as I draw with a dark fineliner on top of them.
At seven minutes: the main elements
Here I have used my 0.5mm pen to draw on top of the grey marker in order to make the final lines. There are some errors in the edges of the screens I would like to get rid of, and will have a good chance to do so later on when adding shadows. At this point, the sketch looks pretty bland and basic, but we are on our way to awesomeness.Tip
: make sure your rectangles always have closed corners. It is easy to accidentally draw lines that are too short and to leave the corners open. The sketch will look better and more clear if the corners are closed. Some sketchers even deliberately draw a little cross in each corner to make sure they are closed.
At ten minutes: adding icons to the bottom row
This mobile app is going to have a navigation bar at the bottom of the screen, and this is where I draw those icons. I first outlined the sizes for the icons and the buttons with light grey before using the fineliner to draw them out.Tip
: It is a convention to mark iconography and imagery with a cross inside a box.
At thirteen minutes: shadow and detail
Now it is time to create a basic template that is pleasant to look at. By using my thicker artist pen, I will add shadows to the two screens. When drawing thick shadows on top of previous lines, you have a good opportunity to fix earlier mistakes – and get those lines straight. In addition, I used my 0.5mm fineliner to add shadows to the icons.
Here we have a nice layout that can be scanned and printed for later use. You can easily create alternative designs using the same template.Tip
: Drawing shadows for icons is something that not only makes the sketch look aesthetically more pleasing, but also has a functional meaning. In a user interface, iconography and imagery is something that draws the user's attention. By drawing shadows, I try to mimic the effect in a sketch. For the same reason, you can also use shadow or colour to give visual weight to elements that should stand out in the final design.
At twenty-five minutes: content on the screens
Here I have added an icon, a title, some descriptive text and our graph with the slider control. I have changed the position of the slider to the right of the screen and added more values to the graph's x-axis.
At thirty minutes: drawing the graphs
The graphs are the meat of this sketch, and the change in the graph is what we primarily want to visualize. Therefore, I decided to use my red pen to draw out the graphs. This will not only add some colour and make the sketch look nicer, but also add visual weight, which will highlight the difference in the two screens.
At forty minutes: title, description and interaction
Now that the screens are drawn, I have written a description and added a couple arrows to communicate interaction. To clarify the message, I sometimes write a short word like “taps” or “drags” next to these arrows.
At forty-five minutes: final detail
We are now pretty much done with the sketch, but it is still missing something. It is a little challenging to see that the bottom bar is not a part of the view itself, but a separate element. This can be fixed by using a pencil to make the bottom bar pop out from the main view. Here I greyed out both the bottom bar and the large icon at the top of the view.Tip
: Creating uniform grey like this is quick and simple with a soft pencil. I used a B6 pencil just to quickly cover the area and thenuse my finger to smear it
The final piece
The sketch is now finished. It explains the interaction well and took around 45 minutes to complete. It can now be scanned or photographed and then sent off to stakeholders. You could also attach it to a wall next to other beautifully sketched ideas for the team to have a look at. Because it is a sketch, your audience can easily discuss the idea behind the sketch without being distracted by the choice of colour or type. In addition, they can show it to other people and share knowledge much more easily than by email.
Even though the sketch took a moment to create, this communication method will save other people's time. They will be able to understand your point more effectively, comment on it, and further develop your idea. These sketches can also be used as wireframes when moving on to visual design or, better yet, into creating the view directly in code as a functional or UI prototype.
Sketching is a cool method that allows you to tackle communication and design challenges visually. It is another professional skill in your toolbox that doesn't rely on technology. On your next flight, dig out your sketchbook and refine that service concept you are struggling with. When commuting to work, take a chance to start your day productively by creating something to show your team once you arrive. If you want to take a further step into design communication, you can start creatinglow-fidelity paper prototypes
I hope this two-part post has given you new ideas on how to use sketching in your work. If you got the itch for sketching, go and amaze your colleagues with some awesome scribbles!