What is a Wireframe?

A wireframe is a low fidelity prototype that can be created by hand, on a piece of paper or using different tools like Actuar or Adobe XD to test certain layout options. A wireframe provides a basis for other designers to add visual design to or for web developers to create an HTML structure.

Essentially, a wireframe is a very simplistic version of a project, a primary deliverable that you’ll be expected to hand off on any user experience or interface design or project. It is a communication device to explain how projects should be built. It’s the most common deliverable expected from you in the UX field, but not necessarily the most effective.

There’s a common misconception that in the UX field, you do lots of wireframing. User experience is actually a lot of interviewing people, conducting user research, assembling personas, and writing personas. Wireframes are just one component of that. It is one tactile component that makes it a good way to express all the research’s hard work.

A good wireframe is one created to answer a specific question or to gain feedback. For example, if you are trying to gain feedback on how the navigation works in a wireframe, you might show where the hamburger menu or close button is, so all the other detail doesn’t distract the user when they are testing that component. A good wireframe has a limited scope that only shows off components needing feedback while hiding the rest unless the other information is already signed off on.

On the contrary, a bad wireframe would be one where you’re trying to test too many variables and get feedback all at one time.

When testing designs, using actual text for navigation or major headlines can be beneficial. Still, otherwise, you’ll often want to use lorem ipsum, dummy text, and images to keep audience distraction to a minimum when showcasing your wireframes to gain approval to move forward on a project.

Still on the hunt for more knowledge? Ask us a question!

Scroll to Top