Learn  – Wireframing Using Sketch

In the past three weeks, I had the opportunity to use Sketch at work, albeit only for creating wireframes. I am not a qualified designer, and I am a ‘fully-stacked’ developer ?.

Early last month, the team trusted me with a UX redesign challenge (which I accepted) after a convincing pitch about how a particular implementation of a new UX can support the new growth direction of the business.

This post documents a few learning points I have encountered while doing so.

Tools

Stationery list: paper, pencil, sticky notes, masking tape, and some fancy wireframing stencils. No laptop! I didn’t touch my MacBook Pro for one week (I should do it more often).

In late February this year, I purchased these stencils from UI Stencil. The mini shopping spree turned out to be a useful one. The stencils were very useful for the challenge.

These fancy stencils inspired me to use my hands and different part of my brain more than otherwise, and they also encouraged me to step away from the familiarity of my keyboard and touchpad (maybe this is just me being biased?). Check out UI Stencil website for more stencils and other goodies.

Why Sketch for wireframing?

Before this, I had always felt that wireframing using Sketch is overkill and that it should be reserved for creating high fidelity UI mockups. Tools like Balsamiq or draw.io seem like less scary options than Sketch if you are a developer like me.

It is quite simple for me — Sketch makes me happy. Wireframing tools are supposed to be quick and straight-forward to use, but using something like Balsamiq is not any easier than using Sketch.

PS: You do need to know some basic Sketch tricks.

Wireframing on paper

I started by printing a few copies of printable grids from UI Stencils (https://www.uistencils.com/blogs/news/tagged/download) since I know the scales on my pixel ruler and stencil kits would be compatible with the printed grids.

It was very liberating working with paper and pencil. I could reiterate different wireframe layouts. Wireframes on paper were great for communicating your idea to other team members. Also, I had no attachment to the paper mockups. I recycled the paper in the bin without regret if a particular draft was not suitable

I used the common breakpoints as the starting point of my grid system — 1024px, 768px and 375px (see below). The grid system would work well for this particular use case (we’ll know soon ?). Have you tried experimenting with something like this before? Please let me know what you think.

From paper to Sketch

I translated the grids that I had drawn on paper into a Sketch document. There must be a faster way of laying down the initial grids, but I didn’t know any better. The screen sizes I was working with were from the default Sketch template.

Getting the nod

I printed all pages of my wireframe including the different screen resolutions on A3 paper before stitching them together using masking tape and sticking them on the glass wall in my office.

Laying out the wireframes this way was more convenient than going page by page on a computer screen. I also attached a link to InVision project to the cards inside our Trello board to keep track of revisions. I used Post-It notes to add notes about specific interactivity. I also used Post-It notes explain why the individual section appeared in a certain way.

The next fun and colourful bits can start next.