As a user interface designer at TrustYou one of the biggest challenges I have is coming up with simple interfaces to help our users get not-so-simple things done. That’s all there is to it and it’s by no means an easy job. Now I’m not going to ramble on about our entire process behind buildind these interfaces because chances are that you already have your own process going on. What I will do is share with you the tools that I use in the first step of tackling such a design task. So let’s talk about sketching!
What to sketch on?
It’s been quite awhile since I first started sketching user interfaces; since the very start of my professional career actually, but mostly on whatever notebook/paper I could lay my hands on. In the more recent years however I’ve been using dotgrid notebooks almost always and have found them to be the best choice for me when it comes to figuring out user interfaces. Before joining TrustYou in Munich I was using my own custom made dotgrid notebook and I was pretty comfortable with it. It had a 3mm grid spacing just as my personal notebook so there was no transition at all, work just continued as normal:
This notebook was serving its purpose well and I was very happy with it. That is until I ran out of pages and the thing was full. This obviously meant I had to get a new one and making it myself was no longer the option. Searching the web I’ve noticed that almost all dotgrid notebooks had a grid spacing of at least 4.5mm, which seemed a bit too much initially as I couldn’t go into too much detail with my sketches. This actually turned out to be a really good thing for me and combined with the proper writing tools would save me decent amounts of time; time I could now spend coding and testing the UI components I was sketching. So in the end I went ahead and got myself an A4 Dotgrid.co notebook.
Its black matte heavy covers combined with the sheer number of pages offer good support for sketching while its metal spring seems sturdy enough to keep eveything together nicely. What I especially like about this notebook is that it has 104gsm Bermuda paper which means that you’ll get the minimum show through if you’re using ink pens like me.
Because I use a single notebook for different projects – even if no longer for different clients as I did back in my freelancing days – I need to have them somehow separated from each other so that it’s easier for me to look them up when needed. This I do by using the same trick I mentioned in my post about creating your own custom dotgrid notebook:
- Just stick a short piece of wide scotch tape to the back cover of the notebook.
- Place a set of colored sticky bookmarks there for easy access.
- Use each color to bookmark the pages for different projects.
For me 5 colors are just enough to get my stuff organized well enough so that I don’t spend too much time digging through the pages whenever I’m looking for something. Also it’s worth mentioning that plastic sticky bookmarks do a better job since they are thiner and also translucent. This means you don’t have to worry about covering anything too important on the pages you have bookmarked.
Any better options?
Not sure if better but definitely something to make our jobs easier. Because of the nature of our work there has been a trend in designers creating device templates which they can use to better lay out interfaces on paper, especially during the exploratory stage of the design. The need for such templates gave rise to websites such as Sneakpeekit or Interface Sketch where designers can now download pre-made templates of whatever type they want.
In the above photos you can see how we at TrustYou used such templates – Sneakpeekit in this case – when exploring the redesign options of our TrustYou Radar mobile app. Sketching the first ideas gave us more speed and lead to easier discussions inside of the team which in turn helped us to avoid significant mistakes we could have made at an early stage of the project. We chose Sneakpeekit because it was the most convenient at the time but I am sure any search on Google could easily bring up the templates that are right for you.
What to sketch with?
In terms of writing tools I’m sure everyone already has their favourite pen or pencil. You know which one. The one you have around at all times, in every meeting or brainstorming session. The one that’s an extension of your hand and helps transfer your thoughts and ideas from mind to paper. You probably have it on your desk right now. Yeah, that one.
Now I have one of those myself, sure, but over time that one tool has gone from being a normal pencil to ballpoint pen, to fine liner and back to pencil again. I used to rely a lot on a 0.5mm mechanical pencil with B leads to make text/lines darker but also to make it easier to do shadows and such (maybe an old habbit from my drawing days). For highlighting I would go for colored pencils. Nothing fancy, just any regular pencils that would help me highlight parts of a user interface (e.g. calls to action, links, error messages etc.). For this reason I always relied on the typical set of green, blue, red and orange pencils.
Less detail, more function
Since I’ve recently started using the Dotgrid.co notebook however I began paying less attention to detail and focusing more on function. In the end, that paper should only have on it sketches that I create to explore concepts, to remember ideas or to have a more structured train of thought when coding parts of an interface. To get this done I’ve dropped the use of pencils altogether and instead completely switched to liners and brushes.
Outlines & text
My weapon of choice for writing and wireframing is a black 0.3mm liner from Faber-Castell which I’ve found to be the most enduring for intense use so far, even when applying pressure while quikly taking notes. I combine this with a 0.1mm for when I need thiner lines for whatever reason.
- Faber-Castell Ecco Pigment 0.3
- Faber-Castell Ecco Pigment 0.1
Annotations
In terms of adding extra explanations on the sketches, a set of colored liners from Stabilo does the job well. The blue one I use for headings (since that is also the main color in TrustYou’s interfaces) while the rest are for adding notes, improvements, transitions etc.
- Stabilo Point 88 Fine 0.4 Art. No. 88/41
- Stabilo Point 88 Fine 0.4 Art. No. 88/40
- Stabilo Point 88 Fine 0.4 Art. No. 88/54
- Stabilo Point 88 Fine 0.4 Art. No. 88/36
Highlights & shadows
As mentioned before, I’ve dropped the use of colored pencils in favour of a faster and easier way: brush markers. They’re really convenient to use and I spend less time highlighting some parts of the UI and more time figuring out how to solve deeper underlying issues. Appart from the typical colors used for call to action buttons and such, I also use two gray brushes: C-1 for backgrounds/overlays and C-3 for shadows.
- Copic Ciao Pale Cobalt Green (YG41)
- Copic Ciao Yellowish Skin Pink (YR61)
- Copic Ciao Peach (R32)
- Copic Ciao Ice Blue (B12)
- Copic Ciao Cool Gray No. 1 (C-1)
- Copic Ciao Cool Gray No. 3 (C-3)
The thing that sort of bothers me with these is that there is some show through even on the notebook’s 104gsm Bermuda paper. It’s still my first set of brush markers though so I’m pretty sure there are better options out there, but for now they have already improved my workflow tremendously.
It might seem like a big hassle to go through all these pens and markers everytime you sketch out some interfaces, but here’s the thing: you don’t have to use all of them all the time! Your workflow doesn’t have to be the same as mine, but if it’s similar then maybe the above recommendations can help you improve your productivity just as it helped me when I first read Jason Robb’s article some 6 years ago.
But why not go digital?
With so many software solutions for wireframing – such as Balsamiq Mockups (paid) or Evolus Pencil (free) just to name a few – I’ve been ocassionally asked why I don’t use one of these instead. The thing is that I do use Balsamiq’s Mockups, but only in a much later stage after having finished the exploratory part of the design process. This way I avoid getting cought up in making some pixel-perfect alignments or adjustments only to have everything discarded to make way for a new iteration. This is counterproductive and I would like to avoid it as much as possible.
Once I know what an interface would roughly look like then I can piece it together on the computer and share it with those in my team for feedback. I’m not replacing the pen and paper with a software solution but instead using all of them together for a better and more efficient process.
The bottom line
I guess that no matter what our aproach to creating user interfaces might be, in the end it’s all about using the tools we are most comfortable with for achieving our goal of crafting beautifully usable interfaces. If you’d like to share what’s in your own toolbox then feel free to drop a few lines in the comment section.