Sketching an interface of your application is a good way to refine your ideas and communicate them to others. Of the many ways to do this, pen and paper should probably be your first choice, since it’s efficient and economical — you can draw a set of screens in minutes with just a pen and paper, and in a flash, see where your ideas need improvement.
But at some point, working with paper prototypes becomes impractical. When that’s the case, you might want to create a digital low-fidelity prototype, also called a wireframe.
What is a wireframe?
A wireframe is a schematic representation of an interface, used to show overall functionality, layout, and user flow without fine details like colors, fonts, images, and text.
Paper prototypes are, most of the time, a type of wireframe as well, but for clarity, I recommend that you use this term for digital lo-fidelity mockups only. Otherwise, you might confuse people.
Why you need wireframes
Wireframes are just great. Think of them as a digital upgrade for your paper prototypes. They allow you to learn so much more about the application building process without spending your time or money on real design work.
Other reasons this tool is excellent:
Anyone can create a wireframe. You don’t need a background in design or even basic layout skills to make wireframes work — just draw some simple shapes and lines and see your idea gain form.
It’s all right for wireframes to have flaws, even ones that would make a design concept fall apart. This is just a schematic representation.
Wireframes are great for refining software requirements. You can show a wireframe to a developer, and they’ll understand what you’re trying to achieve right away. Use them stand-alone or as a partner to your user stories. Either way, your developers will be thanking you big time.
Wireframes don’t have details that distract from understanding the function of the design. These are simplified, black-and-white outlines of the interface, so all you can see are just the layout and actions that can be performed on a certain screen.
Wireframes are great for collaboration. Since wireframes are digital, you can share them with your remote team members, advisors, and investors, and collaborate on them remotely. You can also take your wireframes to the next level by turning them into interactive prototypes — just add some hotspots, define actions, and your clickable prototype is ready.
What to include in a wireframe
You can’t show all that much on a wireframe. Depending on what application you’re building, you would typically show high-level UX architecture and information design.
User experience
A wireframe is a skeleton of your application user experience. So, you need to show what actions users will need to take to reach their goals and what their reaction will be to your actions. A simplified outline will show you when the path to the goal is too long or where there are too many choices on a screen, too many paths to take.
Information design
User experience focuses mostly on the path of the user and how satisfied the user is. Information design is more focused on the visualization of information in a way that’s comprehensible to the user. Wireframes allow you to decide when and where your users will get information.
UI design
UI design is about the ergonomics of the interface. It’s about understanding the constraints your users have, then adjusting the interface to them. As an example, if you’re building a mobile app that users are going to use on the go, it’s better to place control elements like buttons at the bottom of the screen, reachable by their thumbs. Another example — a tablet version of a website might have bigger buttons so that it’s easier to tap them on a touchscreen.
Wireframing tools
Plenty of tools allow you to create wireframes and collaborate on them with your team. Some of them are free, but most require a little investment. Here’s a roundup of some tools you can use:
PowerPoint or Keynote
Any presentation app can be used to create wireframes. Most of those apps come with pre-made libraries of common UI elements like form and navigation elements. And most office suites arrive with these apps, so they’ll most likely cost you little to nothing.
Figma
Figma is definitely my tool of choice. You can do so much with it! It allows you to create vector-based graphics right in your browser, share your work with others, present it, and turn it into an interactive prototype that’s testable on your phone with a few clicks. It’s free, runs on any platform, and works in the cloud — no need to store those source files.
Balsamiq
This tool has been around for quite some time. Its unique, hand-drawn style for elements is easily recognizable, and it’s more than just a design choice. Since Balsamiq’s UI elements have no straight lines, the imperfections in your wireframe are less obvious, making even the roughest of wireframes look good.
Learning in the process
Wireframes are a great tool for learning more about your app, but this tool has to be learned too. The only way to become better at creating wireframes is, as with any other skill, to practice. And if you’re going to build a product, you’ll have a lot of opportunity to do so. In time, you’ll learn to create clear, understandable wireframes by incorporating feedback from your team and users, and as your wireframes become better, your UX and design choices will improve too.
Don’t get caught up with details too early on. It’s easy to start experimenting with the final look when you should be spending more time thinking through the overall flow. Visual design and details are important, but for most applications, it’s not the eye-candy that makes users love them, it’s their usefulness and usability.
I see a lot of teams moving directly to final designs after some rough sketching, but I really encourage creating a wireframe first. Wireframes might feel like a redundant step for someone who has design skills, but it’s like going on a hike without looking at your map first. Yes, you’ve hiked loads of times and you can handle anything. But you’ll be in a much better position if you look at the big picture first and anticipate what challenges lie ahead of you.
Originally published at The Startup: Build something awesome
