Lo-fis bridges the span between ideas and concrete wireframes

Lo-fis are not final comps. They combine ideas from our opportunity sketches into interfaces. The final iteration of lo-fis are what we “trace” when we make hi-fi wireframes. That is, the comps upon which we base our HTML and CSS. But not all ideas are equal. How we combine them tells different stories by emphasizing different ideas in different wireframes.

We work through several iterations of lo-fis, experimenting with the size and placement of elements to get an approximation of each page.

Hand-drawn lo-fi wireframes are quicker to create than polished, high-fi wireframes, easy to share, and — if necessary — disposable. They let us get through rough ideas faster so when we do start designing, we do so based on more refined ideas. Let’s now take a look at the steps for creating lo-fi wireframes

Start with Sharpies and paper

Precise lines are hard to make with Sharpie markers, which makes them perfect for lo-fi wireframes. These sketches aren't about detail — and a nice, fat sharpie keeps us from getting lost in details that may never come to pass. We use Copic shaders for a hint of depth to some elements, notably forms and images, but rarely more than a hint.

A quick sketch shows what might go onto a given page. This isn't the final layout — figuring out the exact visuals will come later. Lo-fis help us decide what a page is about, and what it should show.

Be specific — but only sweat the right details

You know you're ready to start making lo-fi wireframes when you have an idea of what's going on each page. Text for headings and calls to action are great, but you don't need every piece of content finalized. Lo-fi wireframes give enough information to make a working prototype. We use Solidify to create working mockups of lo-fi sketches through which our clients can test run a product. These are useful for working out problems before we start coding, or even spend valuable time creating wireframes.

Above: Unlike ideation sketches, which express ideas, we use lo-fi wireframes to tell a story. "Users arrive here to _____ and they see _____ which prompts them to _____."

Practice basic elements

Notice that the example above uses many of the same basic shapes. A good wireframe only needs a few elements:

• Lines
• Squiggles
• Boxes
• Circles

We use squiggles and lines to indicate text; rectangles for images and form elements. Shaders help make form elements look "inset," unlike photos and graphics, which are shaded below and to the right. This style does more than keep things simple — it creates a consistent visual language.

People don't have to re-learn what text looks like when every bit of text is either a squiggle or a few tight lines. Consistency saves time and confusion for both designers and their audience. Meanwhile, text in headings shows everyone exactly what's going where.

Share your work

Lo-fi wireframes are where your ideation sketches come together into cohesive pages. The result is a Visual Flow: what we think the core experience should be. And when we have lo-fis that work, we're ready to move on to hi-fi wireframes — diagrams on which we base code and Photoshop visuals, confident that we're not wasting time chasing ideas that might not work.

---