For designers, the creative process begins with a wireframe. It is always the first iteration of any new project, and the quality of your wireframe design will inform the final product. But a well-crafted wireframe is work of art unto itself. Don’t let all your preliminary efforts go to waste: wireframes are an in-demand skill, especially nowadays, and thus a great thing to feature on your online design portfolio or web design portfolio. What better way to attract new clientele for your freelance business—while also standing out from the masses—than by showcasing all of your past and future wireframe design work?
Not sure where to start with creating a wireframe? We’ll walk you through how to do it, as well as some wireframe tools you can use (including some free wireframe tools!). Let’s dive in.
Wireframes 101
If your design project were a building, the wireframe would be your blueprint: a rough outline of where, exactly, you intend on placing the content and the structure by which it will follow. Prototyping a new app? Wireframing constitutes the first step. Revamping your website? Again, the wireframe comes first.
As a concept, wireframes are nothing new. But while the world grows ever more connected and new websites and mobile apps continue springing up, designers—UX designers, namely—have realized the value of wireframing once again. And guess what? There is no shortage of free wireframe tools out there, most of which are quite slick and powerful. We’ll give you a rundown of some of our favorites below, as well as other paid wireframing apps that cater to those willing to drop a few extra bucks. But first, let’s start with a wireframing 101 crash course.
How to Create a Wireframe
Let’s take a brief moment to break down what, exactly, a wireframe is. In the context of UX design and prototyping, a wireframe is composed of these three key elements:
Structure
Overall layout
Actual content/information
It’s as simple as that. A wireframe is, essentially, a rudimentary skeleton of how you foresee a website or app coming together.
How Do Wireframes Fit Into the Design Process?
In the greater scheme of things, wireframes are found at the beginning of the process. Taking a step back, the sequence of events goes as follows:
Wireframe design
Low quality prototype/mockup
High quality prototype/mockup
Development of product (via coding)
The main idea of a wireframe is to set your project up for success. Without the usual distractions of color, branding, or cool typography, wireframes offer a simple, clear view of the final product—namely, the structure and layout through which everyday users will interact with the design.
Getting Started
Don’t reach for your sketchbook quite yet, because even the pre-planning process could use a little planning itself.
At the outset of a new design project, it’s important to first consider the goals: what you’re building, who it’s for, and why you’re doing it. A new website for a small business? Your wireframe design should account for their needs, including which key information to display and what products or services to emphasize. Perhaps your wireframe should include a comment section or an online store. Maybe you’d like to include a live Instagram feed. Or a rotating gallery of images. The list goes on and on.
Your design—be it for a website or mobile app—is solving a problem. And the quality and care put into your initial wireframe will lay the foundation for the project moving forward. Do it well and you can rest assured knowing that everything will come together just the way you envisioned it.
Forget About Design (For Now)
Perfectionists, beware: wireframes should never, ever look all that good. Or pretty, anyway. A great wireframe design is minimal—literally just a series of lines, boxes, and words on the page. When creating a wireframe, you should only consider its structure, layout, and information design (i.e. how content is presented and where.) Anything more than that will take away from the main purpose of wireframing.
Must-Have Wireframe Features
You know what you’re building, why, and you’ve ditched any unecessary aesthetics. Great.
This is where a seasoned wireframe designer would make a list. This list should detail the components your design must contain. To use the small business example again, perhaps the owner is all about customer service and has asked for a live chat feature. Throw it on the list, along with everything else you’ve deemed critical to the success of the project. Maybe a search bar, a dropdown menu, or a place to subscribe to a newsletter—you get the idea.
Find a Point of Reference
There is no shame in looking to the work of others for inspiration—especially if you’ve been staring blankly at your computer screen for hours on end, unsure of what to do or where to start! We’ve all been there. Luckily, the Internet is brimming with great wireframe design examples. Unsure where to look? Start with the online portfolios of other UX designers for a little inspiration.
Simulate the User Journey
Once your rough wireframe is complete, it’s time to test the design a little. Put yourself in the user’s shoes and pretend as though you are seeing it for the first time. Where do you naturally gravitate to? Why? Is that intended…or a consequence of something that needs to be addressed?
This is an important step because functionality is at the core of UX/UI design. Whatever you’re building, it must have utility. It needs to make life easier for the user!
With the fundamentals out of the way, it’s time to actually start putting your wireframe together. Fortunately, there are lots of online resources for creating and managing wireframe mockups. Below, we’ll provide a brief rundown of our favorite wireframe tools, most of which free!
Although capable of much more than wireframing, Lucidchart is an awesome web-based tool for—as the name suggests—drafting charts, flow diagrams and yes, wireframes.
Trusted by Fortune 500 companies such as Disney, Accenture, Oracle, and Deloitte, MockFlow is an industry-leading wireframe builder and prototyping app.
Relying on intuitive features like drag-and-drop, as well as its rich library of icons and other commonly-found visual components, Mockplus is a streamlined solution for a fast-paced environment.
Why Not Showcase Your Wireframe Designs on Your Online Portfolio?
As more and more people begin to recognize its importance, wireframing has become an increasingly sought-after skill in the design market—so be sure to upload your own wireframe mockups to your online portfolio.
Don’t have one? Getting started is easy! Use a website builder to create an online portfolio in under an hour. Go with one that offers lots of nice themes, as well as other cool, customizable features. Ones to look out for include smart typography and client proofing.