How to Create a Wireframe: A Crash Course

Wireframe design is becoming an increasingly sought-after skill, especially for UX designers. Check out our handy guide for learning how to create a wireframe.

ux store 1135537 unsplash 1

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.

jose-alejandro-cuffia-799485-unsplash

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.

med-badr-chemmaoui-630239-unsplash

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!

new-data-services-746321-unsplash

Free Wireframe Tools

Lucidchart

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.

MockFlow

Trusted by Fortune 500 companies such as Disney, Accenture, Oracle, and Deloitte, MockFlow is an industry-leading wireframe builder and prototyping app.

Balsamiq

Fun, free, and fast: these are the core tenets of Balsamiq’s mockup builder, which makes you feel like you’re sketching on a whiteboard.

Wireframe.cc

Wireframe.cc cuts right to the point with streamlined, no-nonsense free wireframe tool.

Frame Box

In the spirit of Wireframe.cc, Frame Box is another no-frills wireframe design option.

Adobe XD

It was only a matter of time before Adobe marketed software for UX/UI designers. What was unexpected, however, was its price tag: $0.

Fluid UI

Beautifully designed, easy to use, and equipped with built-in libraries (including wireframe components), Fluid UI excels in rapid prototyping.

JustInMind

Whether you’re designing a website or an iOS/Android app, JustInMind offers a bevy of UI toolkits to help you create your wireframe designs.

Paid Wireframe Tools

InVision

Intended for team-based work and collaboration, InVision is easily one of the best wireframing tools around.

Mockplus

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.

ux-store-1135537-unsplash

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 templates, as well as other cool, customizable features. Ones to look out for include smart typography and client proofing.

Looking for a design portfolio that scales? Attract clients with a professional website that highlights exactly who you are as a designer. Start your free trial with Format today!

Want to learn more about getting into this industry? Check out our guide on how to become a UX designer. Now that’s an exciting field—good luck!

Interested in more design inspiration?
A Guide To Graphic Designer Salaries—And How To Negotiate Them
63 Extremely Cool Adobe Illustrator Tutorials
These 11 Fun Apps Will Make Social Media Graphics For You

A4 1 4

A Guide to Improving Your Photography Skills

Elevate your photography with our free resource guide. Gain exclusive access to insider tips, tricks, and tools for perfecting your craft, building your online portfolio, and growing your business.

Name
Subscribe to the newsletter Field Label
This field is for validation purposes and should be left unchanged.

Latest

en_USEN