Embrace your ugly sketches — or why I love Balsamiq Mockups so much ❤️

Juan Maguid
4 min readMar 18, 2019

Let’s talk about the power of ugly-as sketches. In my world that means pen and paper or using something like Balsamiq Mockups for real problem solving.

The problem with Sketch, Adobe XD, Figma, InVision Studio etc

All these fine tools are amazingly well fit for crafting beautiful user interfaces, layouts and graphic design-thingies. They all are very slick and powerful. You just sit there and ooooooooo over all the high fidelity thingies you can draw in them.

But where do I go when I really need to solve complex problems? Functional (but pretty ugly) Balsamiq Mockups. Don’t get me wrong, I love Balsamiq but it will not win ”Most Beautiful UX Tool of the Month Made Up Award”. Ever.

And that is the whole point! The fine folks behind Balsamiq must be geniuses. You don’t get distracted with useless self-love over how amazing you are at making beautiful things. That shit comes after you solved the REAL PROBLEMS you have in front of you. Capice?

The micro-second I open up Sketch this happens:

”Ooooooo! Look at me I made a beautiful button, I’m amazing!”

”Ooooooo! Wonder if there is a new plugin I really don’t need. I already have 10000 of them but what harm could another one do, right?”

Or…

”Ooooooo! There are 10001 new updates available for all my shit inside of Sketch. I really don’t have the time, I should do REAL WORK but heck, LET’S UPDATE!”

Do you think I feel productive? Nope. Do you really think I’m actually contributing to anything, honestly? Nope again.

The Ancient Ones and Where We Come From

For me, one of the ancient ones, who have a background in art direction, graphic design, print (yes you know that stuff that’s attached to paper) this distinction becomes a question of getting shit done or getting nothing done. I’m fully aware you can create very simple wireframes in all of the above mentioned high resolution vector bonanzas. And LOTS of people use them for that.

What happens when you have problems to solve? Either you just jump ahead and start working on something or you procrastinate. There’s not much stuff going around inside of Mockups. Yes you can surf (remember I’m old) to this excellent place and download tons of stuff. But nothing of this gives you a prompt to update, not even the app itself! That is utter brilliance.

Keeping it real (lo-fi)

You get to choose between two skins: ugly (Sketch) and less ugly (Wireframe). You have a bunch of very useful UI components right from start and you can download lots and lots more. I love the + shortcut for adding them to the artboard btw. You also have symbols, a huge time saver when you’re sketching large and complex thingies.

You have FontAwesome Older Version installed, brutally efficient. Again, not the most beautiful set of icons but very practical and speeds up your workflow like a billion times faster than light travel.

Btw I actually love the look of both skins, I’m just exaggerating to make this a more amusing read.

Keep it greyscale

It’s so so tempting to start playing around with colors, we are designers after all, we love color and contrast. Don’t fall into that black hole of endless discussions just yet. Solve the real problems and then later when you present your nice designs (based on your ugly sketches) you can all discuss to the end of time (or budget), if that nuance of blue really is the one you should use.

If you’re in luck the company you work for already have some kind of design system or style guide in place.

Versioning built right in!

Hey makers of all those other great apps, you really should pay attention to Balsamiq’s utterly brilliant versioning system. It’s super easy to create alternative versions of each page and I love the Promote of Official function.

Grouping that rules!

OMG. The grouping in Balsamiq just feeeeels right. Maybe it’s how the background fades everytime you double-click a group and are inside it. Just feels amazing. Got to be experienced.

Global font settings

This one saves you tons and tons of time. Yes you are doing lofi wireframing in Balsamiq but wouldn’t it be nice to use that special custom made font your company uses or your client? Just add it in one place and EVERYTHING slaves to this.

Summary

Of course Balsamiq isn’t perfect in anyway, but hey I’m not here to do perfect, I’m just here to scribble down my thoughts really quick, to make sense of whatever mess I supposedly am ”perfect for the job” to fix. Wish me luck 😄

--

--

Juan Maguid

Creative Technologist. Co-founder of Team Sketch2React.