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? I’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. I’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.