The Ultimate Wireframe Guide

What are Wireframes?

At its very essence, a wireframe is a visual representation of a website's content and functionality in its most basic form.

It communicates the arrangement of components and elements of the page intending to achieve a particular goal.

Most critically, it avoids the clutter of too many colours and imagery to ensure that clients, stakeholders, or end-users concentrate on the critical aspects of the wireframe: information architecture, hierarchy, component choice, and user experience (ux).

Where wireframes also differ from a visual design concept is that their simplicity allows for swift iteration and feedback.

Ideas for layouts and functionality can be designed and tested quickly, with feedback provided and adopted swiftly.

Wireframes are the foundations on which all user experience and user interface (ui ux) design stands. In short, they are the DNA of your application.

We've also written the article "Mastering Wireframes and Prototyping Tools: A Comprehensive Guide to Boost Your Design Workflow with Adobe XD", check it out now.

Go on... more detail, please

A good wireframe visual design will take the following into account.

Information architecture

This is a fancy term for what content will be on the page. Be that text, imagery, video, table, etc. Ideally, there would've been multiple strategy sessions, a user research design document, and content generation before you start work.

Hierarchical layout

This means how that information is shown, what is given weight e.g. what do you want a user to concentrate on and what could be secondary information. In a wireframe this often boils down to the location of the content on the page (the higher the more prominent) or the size of the content, the bigger the content the more prominent it will be.

Component choice

By component, I mean a specific element designed to be used multiple times throughout the site. This could be navigation, a call to action, an Instagram grid, wireframe social media element, or a testimonial. Although you may have planned these out before even putting pen to paper or mouse to the artboard, the wireframe will solidify your ideas and ensure that components are reusable and expandable, e.g. you don't want 15 different testimonials blocks when one will do.

User experience

It's the wireframes job to ensure that every component or piece of content on the site has a purpose. This purpose normally has 2 goals. The first is to ensure a good user experience, for example ensuring that the location of navigation is in an optimal position, or that there is a call to action when expected,. The second is the ensure the business goals are being achieved, what is the main call to action? Does the proposed hierarchy of content lead a user to the required area of the site? So many questions and strategies can be answered and tested during a wireframe transition stage.

The History of Wireframes

The term wireframe was coined well before minimal ui design took off.

In the beginning, a wireframe was used to show 3D objects in Computer-Aided Design (CAD). You can probably see it now, close your eyes and visualise a cube with its sides made up of vertices, each one joined by a line.

Essentially it would be used to show the inner building blocks of a 3D model without any of the outer texture or skin. These would often look like "wires" hence the terminology "wireframes".

According to Whitney Hess' 2008 blog, the term was first introduced by Matthew Van Horn in 1994 while working at Snickelways Interactive. While running some projects for ITV (A UK broadcasting company) the company was simultaneously running 3D animation projects and website development. It was at this point that Van Horn suggesting that they starting "designing the structure of the page separately from the look & feel. I described this to my coworkers as analogous to a wireframe model which shows the basic shape, but no shading/color/texture" (in their 3D animation software) . From there he stated that several designers went onto other companies and therefore the terminology started to spread.

When should you wireframe?

Wireframing is an essential part of any digital product or modern website and should take place as early as possible. Ideally wireframing should be done after your initial planning and research stages but before your visual design or prototype stage.

A wireframe influences your visual design, in that it forms the basis for all elements product or website. Generally, you'll wireframe out all key sections and functionality and then pick and choose key areas to turn into visual designs.

Often after a wireframe has been completed it will be taken and turned into a prototype. A prototype is a simplified interactive version of the final product but created in a tool such as Adobe XD. It allows you to share your product or website with a test audience or get feedback from key stakeholders or a test group. Often the second stage of prototyping takes place once a draft version of the visual design has taken place, this second prototype stage could contain the entire product or website, or just key sections depending upon the size or budget of the project.

When should you not wireframe?

The only time you shouldn't wireframe a project is when you are using a tool such as Squarespace to create something like a personal portfolio. At this point, the pre-created designs don't allow for much customisation, so what you get is what they provide.

How are wireframes created?

The means to create wireframes vary considerably, and the is no right or wrong way of producing them. As long as there is successful communication to the client, designer, or end-user then a wireframe can be considered successful.

Hand Drawn

In its most basic form, a wireframe can be generated using nothing but a paper and pencil.

Dividing your page up into columns (a web standard at this time is a 12 column grid but that is by no means set in stone) and then draw out your page layouts using simple lines and text.

Often hand-drawn wireframes provide enough information for you to communicate an idea, and when dealing with clients, hand-drawn solutions can suffice, however often they are a beginning point and are then translated into a low-fidelity wireframe.

Low fidelity wireframes

Low Fidelity (or Low-Fi) Wireframes are wireframes created in software. They are generally black and white and contain nothing more than a tidied up version of what you might imagine the hand-drawn version of the wireframe might be.

As you can imagine, many different programs will allow you to create wireframes, here are some of the most popular at the time of writing.

High fidelity wireframes

High fidelity (or High-Fi) Wireframes are another step forward in terms of complexity. They sit between Low-Fi and initial visuals of the product or website. You'll often see designers using a more complex colour pallet, the clients or product logos, and minor brand elements and a more complicated visual style in these wireframes.

Often designs prefer to go straight to high fidelity wireframes as it allows for greater experimentation before they start to create the first set of initial visuals. Where, for example, a hand-drawn or low-fi wireframe may just have a standard "masthead" where there is a title, a button, and an image, a high-fi wireframe would allow the designer to have a little more license to try different layouts, suggest additional content or even image treatment. Although the wireframes would still look clean, and not distract from the main purpose of confirming information architecture, hierarchical layout, and component choice.

Choose your Tool

There are many ways to create low and high fidelity wireframes. However the most common are Adobe XD, Sketch, and Figma.

Adobe XD

Adobe XD is a vector-based user experience design tool made by (unsurprisingly) Adobe. XD's primary focus is to allow it's users to create wireframes and design visuals but then enable them to create interactive prototypes to further allow them to communicate how the user interface would affect the user experience.

It's components, grid, stacks, and scroll groups allow for quick creation and iteration of elements and wireframes. A bonus is that Adobe XD is free for all.

Sketch

Back in the day when Adobe XD or Figma didn't exist, Sketch was a shining light. Designed specifically for interaction design, Sketch took the market lead with its innovative features such as scalable elements, component library, and later prototyping functionality, however recently, it's standing as "top dog" as been shaken with other applications such as Adobe XD and Figma taking away some of its limelight. As it's a paid-for piece of software as well, I see the days of Sketch being numbered when you compare it to Adobe XD and it's developing features and free price tag.

Figma

Figma is a web-based vector graphics editor and prototype tool. It does a very similar job to Adobe XD but its main focus is on collaboration, allowing a team of user experience designers to work on the same project simultaneously. Although Adobe XD has a similar feature, as Figma is natively an online tool, it's currently seeing more success with this than XD seems to be.

Adobe Illustrator and Photoshop

Although not intended as a wireframe tool, in the past when programs such as Adobe XD and Figma didn't exist, these were the only available options.

Illustrator being the best out of the 2 as it uses vector graphics and a feature called symbols, which is very similar to XD's components system.

Online Tools

There are other tools available for wireframing and prototyping that I won't go into much detail about as they tend to be SASS or terrible. They all have their advantages and disadvantages, but if you are a beginner I'd avoid these and stick to the main three of Adobe XD, Sketch, or Figma. There are also wireframe tools on websites that offer website template free or ui kits, but I'd recommend avoiding those as well. Often they are incomplete and more difficult to work with than if you were to just start from scratch.

Why wireframe?

There are numerous reasons why wireframes are a key part of product or website development:

Speed

Although the upfront time cost of wireframe can be significant, the benefits are felt throughout the project's life span and in turn speed up the total development time. Starting from a solid foundation and allowing for quick iterative testing provides evidential proof that concepts and theories either work or fail. This quick iterative approach allows for faster feedback, a greater ability to try new and innovative approaches, and a way to test and fail ideas earlier than if this was done at a more visual stage.

Confidence

It provides both the designer and client confidence. From the designers' point of view, trying different layouts is far less risky as the time in which it takes to create them is much smaller than if these were done at a design visual stage. From a client or stakeholder's point of view, they can see how the planning and user research has been interpreted and ask for changes earlier rather than when the project is being designed or even built. It also gives them "buy-in" which, if you've ever been involved in a digital project before, makes for a much smoother project! Buy in essentially is when a client feels that they've made their mark on the project. They've influenced the trajectory and therefore they are invested in both the development and the outcome, this is great for their pride as well as if things go awry, they are at least a little bit responsible!

Experimentation

As mentioned at the speed stage, wireframes are the catalyst for experimentation. I find that low-fi and high-fi wireframes set my imagination free. The speed a which components can be created or information architecture adjusted allows for great freedom to produce something more fit for purpose or even innovative. I can rattle through 3-4 different layouts of a component in the time it would take to create a single visual design for one. This speed gives me the confidence to try things that may not have been thought about at the planning and research stage and suggest them to the client or stakeholders without ramifications of going hugely over budget!

Benefits for your users

All of the above points produce a better product or website. This benefits your users, and happy users mean happy clients!

What is a Wireframe Kit?

A wireframe kit is a collection of pre-designed layouts and components that speeds up the development of wireframes. Depending upon your project, budget, and skill they can either be used "as is", e.g. you snap them together and don't change a thing, or you alter them to your needs, or you even just use them as inspiration.

You'll come across many different types, some that cost a lot, some that are more affordable. As you've probably noticed you've landed on the heywires website. The heywires wireframe kit comprises of a multitude of predesigned components in a selection of useful categories as well as the additional bonus of typographic hierarchy, colour swatches, and icons. On top of that, it's been designed in and for Adobe XD, the very best free design and prototype tool.

Why use a Wireframe Kit

Wireframe kits allow saves you time

Why start from scratch when you can start with a set of predefined common components and elements. Often these components are set up with mobile responsive design (for iOS or Andriod wireframes) in mind. Our wireframe, heywires for example, provides mobile and desktop layouts of all components, and with its responsive functionality, you can even generate tablet layouts for devices such as the iPad. The time you save can be spent adapting these components or even allow you to finish under hours providing more time for other stages or additional profitability.

If your not a designer

It does surprise me, but not everyone is a designer. Say you are creating a mobile app chat such as something similar to the Snapchat design. Wireframe kits allow none designers to convey their ideas beautifully and functionally without the requirement for design knowledge. The pre-created elements will cover the majority of your needs and the easily editable components allow you to cobble together the other 1% 😂.

Wireframe kits give you a set style.

With the stylesheets set up within wireframe kits such as heywires (imo the best Adobe XD Wireframe Kit 🤩), your wireframes will look clear and consistent. Many wireframes run off the bootstrap 4 prebuilt layout grid, which is easily understandable by clients, developers, and users alike. Some use the material design system coined by Google, but then again you are probably straying too far into a visual design with wireframes like that.

Wireframe kits can inspire you.

How often have you stared at a blank artboard? This is where a wireframe kit can aid you. The pre-created components allow you to kick start your creativity. No longer will you become frustrated because you are unsure how to communicate a certain content structure. Take a look at the examples within the wireframe kit to even give you inspiration for entire landing pages. There is no harm in downloading the Adobe XD Wireframe Kit free download as part of heywires. The heywires demo gives you a select number of components to play with as well as static images of all the other elements you could get if you purchase the kit.