What is an Interactive Wireframe?

At first glance, Interactive Wireframe might seem like another one of those techy terms to come straight out of Silicon Valley. But once we break it down, it becomes clear what the term refers to and why we call it an Interactive Wireframe.

Grand designs

Picture this, you are planning on getting a shiny new extension to your house, with one of those fancy island units. You instruct your architect and his trendy moustache about your budget, dimensions, and requirements. They then get to work designing something worthy of Grand Designs. But before they consider any of that minimalist Scandinavian furniture, blueprints are produced first, before going any further. This is essentially what Interactive Wireframes are.

Interactive Wireframes are the blueprints for your new website or app. It is the chance for your designer to piece together all your requirements. Focusing on key criteria such as who the site is for, what does the user need to do, and key journeys around the site. These key factors are then developed to create clear page layouts and hierarchy based on your requirements for the new website.

No design, yet

Like a blueprint, Interactive Wireframes contain no design. This stage is all about getting the layout and hierarchy right, before committing to any visuals. The benefit of doing this allows rapid changes, as no timely design changes have to be made. If testimonials are added to the homepage or a new menu structure is to be considered, these can be mocked up and added quickly.

An Interactive Wireframe, like blueprints are grayscale line drawings that depict the structure and content of a page without any design. Well, we might occasionally use your brand colour to make the most important links and buttons stand out; we are designers after all.

Where does the Interactive side of Wireframe come into play?

You said Interactive Wireframe, I haven’t heard any mention of Interactive yet!

This is where an Interactive Wireframe sets itself apart from a static blueprint. We all know a website is made to be interacted with and an Interactive Wireframe is no different. It works like a fully-functioning website with no design. All pages link, that large button on the homepage goes through to your about us page, menus have dropdowns. It even includes layouts for mobile devices and the interactions needed for smaller screens.

You can navigate around your new site as you want. All with the aim of giving you a clear picture of your new website, before any design has even been considered.

Being able to focus on the design

The great thing about Wireframes is all the important content is agreed upon well before the design stage. So when we come to the design, we are focusing on the detailed visual elements. That marble island unit, the minimal Scandinavian furniture. Or in our case the typography, colours, icons, and imagery that make up a great site for your audience.

As with an architect’s blueprint, if the work has been put into the planning stage, the handover to the builder (or the designer in our case) is seamless. This reduces the chance of errors or mistakes being made along the chain.

We see it as being as important as an architect’s blueprint as it sets the foundation for the whole project from the planning stage, through to design and the final development of new the website.

For our current clients, we used to refer to Interactive Wireframes as I.A. (Information Architecture). But we found this term was difficult to understand and people referred to them as wireframes anyway, so we wanted to change the name to better reflect this stage of our projects.