UI Design

UI sketching supplies

I pretty much always start on paper when sketching out new ideas (I even write code on paper sometimes). So I really nerded out when I discovered UI Stencils—they have a pixel ruler!! I love anything that brings the digital into the physical world. I splurged and bought myself a bunch of sketching supplies, with the goal of really working on my wireframing and storyboarding chops this summer.

pens, markers, and stencils for making UI sketches
The supplies I used to make my first sketch.

I’m especially happy with what they call the Everyday Carry Kit. It comes with a set of three dot-grid notebooks, a stencil, and a Zebra mechanical pencil that are all small enough to fit in my pocket (at least in the summer while I’m wearing shorts). This has been great way for me to just start sketching something whenever I have a spare moment. For my first sketch, I just started playing around with the stencil, without having a plan of what I was making. It gradually turned into one step of an account setup interface where you would start adding friends.

A pencil sketch of a UI for adding friends to your network.
The initial sketch in pencil. This just came together as I was trying out different parts of the stencil.

The stencil is awesome, although there are some issues. It is hard to align stuff correctly, because the stencil covers up the other parts of the sketch that you are trying to align to. You can see this in the poor alignment of the user icons and the plusses inside the circles. I started to get better at this by really paying attention to the dot-grid, as you can see in the check boxes.

The other purchase I’m really nerding out about is a set of gray Copic markers. They really help set off different parts of your design hierarchy, and make your paper wireframes look more professional. I LOVE the ultra-subtle ‘N0’ color, which I used for the background. I found the Copics cheaper on Amazon than on the UI Stencils site. I also used some other pens and markers to add outlines and annotations.

A finished wireframe sketch in pen and marker.
The finished sketch using gray Copics to further distinguish design elements.

I’m looking forward to devoting some serious time to developing my pen-to-paper skills and making these look even more professional. One thing I realized I need to work on is my lettering. I have okay handwriting, but I’d like to get it looking a little more uniform.

Supplies used