The Secret Powers Of Ugly Sketches At buildonline.io, we are big believers in the power of low-fi, hand-drawn wireframes and UX sketches. As part of our discovery sprints, we work through what needs to be build, who it needs to be built for, and what it needs to do. Then we start making ugly sketches.
If we do our job right during discovery, the design team will know exactly what to design (and will spend less time doing it.) Then, the design team can pass a very accurate prototype to the developers, who will spend less time wondering “what exactly should this screen do” and more time building a great product. The end result is a better product developed much more quickly by a much less confused team.
In this article, I want to sing the praises of ugly sketches (our term for low fidelity prototypes).
What are ugly sketches?
Ugly sketches are hand drawn representations of screens that we can stitch together with presentation software. They look like this…
Obviously, the goal isn’t artist perfection. The goal of these sketches is to convey just enough information about how a certain screen will work so that all parties involved can understand it.
To that end, you don’t have to draw a great keyboard. You just have to be able to tell it’s a keyboard. You can draw very misshapen thumb icons, as long as everyone can tell it’s supposed to be a thumb icon. You probably don’t know what image or text will go in a certain spot, but a box with an X or some squiggly lines (called “greeking” by the ten geeks who know about such things) will do the trick.
How we do ugly sketches
The temptation, especially for design types who are good at design software, is to open a program like Figma or Adobe XD and make something that's actually pretty. This is a mistake!
It turns out that ugly sketches have some superpowers that Figma or XD prototypes do not:
First, ugly sketches are fast to draw. None of the screens above took me more than a few minutes to sketch. I often can listen to a client and draw these screens on a whiteboard (or my iPad) and have something to show them almost instantly.
The faster you can get feedback on a design idea, the better it’s going to be. The client will pay for less time and be reassured you understand what they are talking about.
Second, ugly sketches take no design skill. I’m not a good visual designer (gradients and font choices aren’t my thing) but I am good at understanding client (and end user) concerns and designing software. There are several people on our team I wouldn’t let within a mile of our dribbble account who are totally capable of designing screens using low-fi wireframes.
Third, ugly sketches help you focus. Even if you are lightning fast in XD or Figma and you DO have design skills, you still shouldn’t go there first, because ugly sketches help you put “how should it look” aside for awhile and focus only on ”how it should work”. This means you can figure out what each screen should do before you have any internal (or client) debates about the green gradient, the chosen icon set, or the font choice.
Fourth, ugly sketches lead to rapid iteration and experimentation.. Because they are focused and fast, you can make a lot of low-fi sketches without spending a lot of money, and figure out several ways a proposed feature could work without the expense and delay of involving screen designers or developers.
You can then take these ugly sketches, make them interactive, and then present them to potential end users and get valuable feedback. If it turns out your great idea doesn’t make sense to end users, you are minutes and not months.
How we do ugly sketches
You can low-fi prototype on a whiteboard, on paper with a sharpie, or using purpose built software like Balsamiq. None of these are wrong, but our preferred method is to use an app called GoodNotes for the iPad with the Apple Pencil.
The iPad approach is the best of both worlds. It gives you the experience and speed of drawing with paper, with the added ability of copying and pasting parts of one screen to another. Goodnotes also lets us make custom “paper”, so we can find iPhone, iPad and browser outlines (see the photos above) to act as containers to draw our prototypes in.
Finally, Goodnotes makes it easy to export our prototypes as a photos and drop them into keynote for creating interactive prototypes or in Figma for turning into hi-fi (not ugly) designs.
Ugly and Interactive
It’s really easy to make these ugly sketches interactive, and doesn’t require any special software purchase. We use presentation software (keynote, powerpoint, google slides) to make text and buttons clickable and interactive.
In Keynote, we just draw a box over the part we want clickable, open the links palette (⌘ + K) and then select the slide we want to link to and then make the box transparent. (You could follow a similar process in other presentation software.) We then export the document as a PDF and the links remain clickable.
We can send the PDF to an iPad or open it in a zoom call and we have an interactive demo of how the app will work.
We understand that great software solves problems. Yes, it needs to look good. But first, it needs to work.
At Build Online, we love helping clients solve problems, and for us, ugly sketches are one of the first steps in that process.