There are dozens of ways to build interface wireframes ranging from pencil & paper to a handful of digital tools. But no matter what means you use to create wireframes, your process should always be similar with a direct end goal in mind.
For this post, I’d like to examine wireframe examples and how they play into the process of creating a wireframe.
There are measures you can take to ensure quality wireframes and final deliverables with device mockups (both free and premium) for that extra “wow” factor. In this post, I’ll detail some of these methods and break down the wireframing process with plenty of great examples.
Tangible Wireframe Designs
The first thing to keep in mind is that wireframes should be practical and useable. They don’t always need to be super neat or tidy. But they are meant to organize your ideas in an orderly fashion.
Think of wireframing as a messy route to plan your ideas visually. They can be messy and sketchy just to get ideas down. But you’re free to design much more lurid concepts as well.
The example above uses dot grid paper to sketch wireframe ideas for a mobile app interface. You should feel comfortable adding these details like pixels and placements for elements on the page.
I really like the above example because it extends far beyond the viewable screen. This helps the designer see how the entire page should look when it’s on a mobile device.
Crisp and clean wireframes work great. But they aren’t required to easily see how an interface should work. Wireframing isn’t a final product. It’s not even always the blueprint to a final product.
Wireframing is just a means of getting ideas down quickly. From there you can refine wireframes into blueprints for your design, and this is where neatness is a real virtue.
When you first get started it’s a good idea to rough out concepts. Don’t worry about specifics like whitespace or pixel values just yet. Instead, get down your ideas and see where you want elements placed in relation to each other.
Then get more detailed with callouts and pointers to explain the functional layout of the page.
User Action Callouts
Callouts explain pieces of the wireframe in further detail. These callouts might explain icons, content strategies, font families/styles, and even user actions for animations.
Think of detailed callouts almost like pieces to a diagram. You’re adding rich information to a static image to explain how the interface should look, work, or operate.
Take the example above featuring a prescriptions page on a mobile app. The interface is actually fully rendered, but the callouts are used to explain what the icons mean and why the information matters.
There are also a couple of callouts at the bottom explaining what a tap gesture does to the buttons at the bottom of the screen. Granted this example is for a completed app design, but you should practice callouts on all wireframes and prototypes.
Here’s a much better example of a simple wireframe using callouts to explain page features.
The callouts cover what each element represents and/or what it does. For example, the small circle icon represents the product’s price. There’s no way you could demonstrate this in a lo-fi wireframe without using a callout.
Your designs will be a lot cleaner and the process will be a lot simpler if you incorporate callouts into the wireframe process.
Details Of Hi-Fidelity
At some point, you may want to add details into your wireframe explaining how it works. These details would describe how they operate, which items fit into the layout, how big/small they are, and where they’re positioned compared with other elements in the design.
Hi-fidelity design wireframes add more detail and substance building upon lo-fi wireframes. Take a look at this concept designed by James Scott.
You’ll notice the vast majority of important details have been added to the wireframe. Text, pricing, spacing, icons, and even a credit card feature in the center of the page.
Lo-fi sketches are meant to get ideas down and get a rough concept. Hi-fi is when you select one idea and take it further to see how it looks like a real interface.
Not every aspect of the wireframe should be filled in with detail. Most designers leave paragraphs as blocks of text because you still get an idea of line height without needing real filler content.
But the level of detail is always up to you. The goal is to just flesh out details so you can see how the design looks in a realistic environment.
Colors should be left alone where you’re only designing with shades of grey. This gives you the freedom to toy around with contrast, but you’re not concerned about a color scheme.
Benefits Of Digital Wireframing
Sketching is always a good place to start if you want to generate ideas quickly. But digital wireframing can solidify your concepts with crisp edges, clean text, and more precise measurements in pixels.
Working with shapes becomes a lot easier when you go digital. You just setup a map to choose which objects fit best with your design choices.
Digital designers also have the ability to use common design programs like Photoshop or Illustrator. If you’re already comfortable designing in this software it’ll be much easier to move from a wireframe to a full mockup.
Plus there’s the added bonus of animating your wireframes with After Effects or Principle. This is not a necessary step at all. In fact, it’s mostly useful to UX designers who are concerned about the experience moving between pages.
If you’re into that kind of work then definitely consider going digital with your wireframes.
To wrap up let’s take a look at some examples of quality wireframes and prototypes for digital interfaces. New designers may not know where to begin with this process.
By studying the work of others you’ll see what the final output looks like, and you can cherrypick techniques to replicate in your own work.