Wireframe Tools

The wireframe tool is an interesting topic to discuss. It has a variety of different users, uses, and benefits. Ask five people what a wireframe tool is and how it's best used and you'll probably get 5 different answers; from 3D design, to early physical product sketches on a napkin, to helping define and design web and mobile applications

Wireframe Tool History

So where does the term "wireframe" come from? Best we can tell, the phrase originates from the early stages of design in CAD tools.  The wireframe stage shows 3D items as just skeletal frames.  It allows you to focus on things like layout, proportion, and even animation without worrying about the finer detail that can come later. Having been a user of early CAD tools, I'm not so sure that these benefits were the motivation for the creation of the wireframe state. Although wireframes did allow for early review before investing in more time-intensive work, it was also much kinder to the computer CPU and memory. So allowing the user to see and manipulate the "skeletal" form of objects could mean seconds of rendering time instead of minutes or even hours.

The wireframe state of an architectural model demonstrates the value of focusing on placement and function vs the finer details.

The wireframe state of an architectural model demonstrates the value of focusing on placement and function vs the finer details.

Regardless of why wireframes existed, they provided undeniable value to the modeler. Although today's UX designers don't have to worry about render times, wireframes provide them with some of the same benefits as their CAD brethren.  

Form Follows Function?

Utility comes first. It's a tenant that originates from architect Louis Sullivan, was promoted (and possibly clarified) by his assistant Frank Lloyd Wright, and further driven by the Bauhaus school.

“It is the pervading law of all things organic and inorganic, of all things physical and metaphysical, of all things human and all things superhuman, of all true manifestations of the head, of the heart, of the soul, that the life is recognizable in its expression, that form ever follows function. This is the law.”
Architect Louis Sullivan, 1896

Sullivan's goal, based on the context of the statement and his work at the time, was seemingly to determine what the functional requirements of a building were and to design solely based on them - ignore ornamental temptation and the repetition of history.  

That all sounds fine, except that Sullivan himself included ornamental design into his own work. The exact meaning of his "form ever follows function" statement is a hotly debated topic that we won't dive deep into here, but the "criminality of ornament" is an interesting concept to take forward into UI design. Where would it start? In its typography, its color, or its images?

Although there are clearly differences in the way you'd approach the design of a skyscraper or a milk bottle vs. the design of a web application, the value of focusing on user behavior, functionality and the priority of content still holds true.

Utility comes first - and wireframes can help.

Before Choosing a Tools, Understand Why You Wireframe

Wireframes are about helping you build a solid foundation. They focus (mainly) on what the app does vs. how it looks. There are various flavors of wireframes, but in general the areas of focus include:

  • Layout
  • Interface elements
  • Navigation
  • Content priority (sometimes)
  • Fonts (sometimes)

Speed is a critical part of the wireframe value prop - they're created quickly, easily shared and collaborated around. Fast iterations allow you to make the right decisions and move on the the next stage of the process.  

Tips and Best Practices

Stay Consistent

You want your wireframe design to be able to be easily translated to the final design. You also don't want inconsistency to distract the viewer.  

Understand where the line is between wireframes and prototypes

We've already discussed the purpose of wireframes. It's important that you don't try and squeeze too much out of them. If you progress to the need of extensive user testing of features and functions, prototyping may serve you better.

Iterate, iterate, iterate (and then iterate)

Why does the old "sketch on a napkin" cliché about  happen on a napkin? Because it embodies the concept of brainstorming with the ability to easily a quickly ball up the idea, throw it away and start again.  Wireframes, although admittedly not quite as easy to ball up, should still hold the same value.  So use it!  Seemingly land on the perfect layout? Then try a few more iterations based on it to confirm you have.  

Starting from whiteboard or paper sketches is still ok

Whiteboards will never go away.  They can offer a simple but effective tool for team collaboration. At the early stages, don't be afraid to get in a room and whiteboard out some ideas. There are creative ways you can use down the road to get those ideas into your wireframe tool.  

Don't be afraid to whiteboard early. There are creative ways you can use later to get those ideas in your wireframe tool.  

Don't be afraid to whiteboard early. There are creative ways you can use later to get those ideas in your wireframe tool.  

The Value of Higher Fidelity and Interactivity

Yes, wireframes are quick to produce and share, and help teams focus on big picture basics versus detailed design elements. But a blueprint is not a house. And a fairly static wireframe won’t tell you see how the app you’re designing would fare when used by a human.

At some point you'll want to start defining information hierarchy with typography, add color, and test actions...

That’s where prototypes come in. They are a powerful medium for testing perspectives and interactions–all the things that make the product really work. Since they’re meant as a testing device, having some detail makes sense to give users context.

In the early days of wireframes and prototyping, the fear was that using them would slow the design process. The exact opposite is usually the case. Giving stakeholders the ability to “test-drive” an application, including the micro-interactions and broader functionality, gives the stakeholder a much better understanding of what you intend to build and elicits more accurate feedback. You can then quickly iterate and land on the right solution. 

(Pitch Alert) Overview of Wireframes in iRise

There are many tools out there you can choose from. Below I'll give you an overview of why I think iRise is worth your consideration, both for wireframing and going beyond them with hi-fidelity prototypes, actions and data-driven interactivity.  

Free Wireframe Toolkit for Fast Iteration

iRise offers a free customizable wireframe toolkit that will help you to build and test fast. You don't want a tool that slows you down or limits your creativity. Using the toolkit and by creating your own customizable libraries and page templates, you'll have what you need to iterate fast and land on the right solution.

 
 

Use our wireframe widgets, and create your own

Our toolkit is a great start, but you'll also be able to create layouts unique to your app.  Just select your new widget, right-click and save it to your library. Now you and the entire team can reuse it.

 

Simply change the font to go from wireframe to prototype

iRise has two wireframe fonts built in - this allows you use your wireframes as a starting point for your hi-fi mockups (instead of wasting all that time building them again)

  • Simple font change instead of rebuilding all font placeholder widgets
  • Double-click to replace your wireframe placeholders with real images
  • (See example video below)
 

iRise has two wireframe fonts built in - with a few clicks, use your wireframes as a starting point for your hi-fi mockups!

 

Drag in sketches and build functionality on top of them

Drag whiteboard sketches or image files into iRise and it will automatically create pages for you. Then use them as a basis for your wireframes or prototypes.

  • Tip: New iterations of images are automatically updated when dropped into the project
 

Widget libraries and Customizable Content

In the interest of speed, it makes sense that you shouldn't have to build something more than once. That goes for the project you're working on now, or for a new project down the road. You want to be able to save off your work, both at the page and widget level, as reusable assets. It’s even better if your customized content is available to the rest of the team, and vice versa. Global sharing of assets allows teams to maximize the work that they do.

iRise offers customizable content as both templates and widget libraries. These allow you save interactive pieces of content for reuse by anyone on the team. They’re a great way to not only speed the wireframe process, but they can also be used to enforce branding standards and allow for consistency once you move to prototyping.

Very often a UX team is in charge of the asset library - they create well designed, reusable content which the rest of the team can drag and drop into the project. This allows business analysts to build great looking prototypes a designer would be proud of.

Saving interactive widgets and Masters is a great way to speed the prototyping process

Saving interactive widgets and Masters is a great way to speed the prototyping process

Masters are another good example of reusable, customized content. They function similarly to customized widgets, but editing the Master updates all of its instances. A top menu is a great example of where a Master would make sense. During the design process, the menu options will very likely change. If you don’t have the ability to use a Master, every change to the menu structure will require you to update every menu on every page! When a Master is used, you just update it and every page it’s used on is updated with one click.  

Animation and Interactions

The best prototyping tools have dynamic actions and animations

Today’s applications are dynamic and interactive (which is why you’re searching for the best wireframe and prototyping software). You need a tool that allows you to test that interactivity with your stakeholders.  

It’s easy to underestimate how much micro-interactions affect the experience.  From button clicks, to transitions, to state-driven changes, the way your application responds to user interaction is of paramount importance to the success or failure of your app.  

What to look for?  A broad set of actions driven by user triggers (like click, swipe, etc...) is a good place to start. Even better if you can chain a series of actions together - the animation to the right shows a simple example of linking rotation, transparency and position animations based on a user swiping left on the widget. Best if the prototyping tool allows you to create logic to drive the actions. iRise allows all three.

Collaboration - with both your team and your users

There are two ways you'll want to collaborate when wireframing - with your stakeholders and with others on the team. 

“If two men on the same job agree all the time, then one is useless. If they disagree all the time, both are useless.”
— Darryl F. Zanuck

There are two ways you'll want to collaborate when wireframing - with your stakeholders and with others on the team. 

Stakeholders: You don't want to wireframe and prototype in a bubble. Locking yourself away until you've finished your concept is nearly as bad as the waterfall development process that collaborative prototyping is there to fix. You want to iterate quickly and often, reviewing your work with stakeholders and capturing their feedback. iRise allows you to easily collaborate with the user base in real-time.

You Team: If your team is made of up business analysts, project managers, a product owner and UX designers, you obviously want a tool that allows all of them to collaborate on your work and associated requirements. The business analysts can use wireframes and prototypes to drive the requirements process, the UX team can create templates and libraries that enforce consistency and branding standards, and the project/product manager can monitor progress and ensure the product vision and roadmap are being followed.  

Everyone on the team can add value to the process. The collaboration iRise allows can make sure they do.

Inline User Stories and Requirements

The reality of building software is that wireframes and prototyping alone isn't enough. You're going to need to marry them in some way with text-based stories or requirements. Whether it’s traditional functional specifications or User Stories and Epics in an Agile process, you’ll want to combine them effectively with your collaborative prototyping process.

Why? Stakeholders and developers can't understand text-based requirements documents alone, which is probably what led you to prototyping.  Prototyping allows the stakeholder to experience the requirements or user stories instead of just reading them, creating real understanding. But you still need a way to efficiently capture feedback, and document those requirements as they’re created and evolve during the process.

iRise offers the ability to have conversations. You can clearly document your user stories and requirements, and manage them through development. 

Integrations with other tools in your SDLC

This is probably not something you'd think about in terms of wireframing, but it can make a huge impact on your team and process.  You understand the value that wireframes and prototypes can bring to your team - why not extend that value to everyone, including DEV and QA? Adding the ability to integrate existing tools (like JIRA, Microsoft TFS or HP ALM) can give the DEV and QA teams a much better understanding of what to build or how to test.

iRise offers true bi-directional integration and traceability.  You want everyone looking at the same information, and an effective integration will keep all project attributes (description, priority, due date, story points, etc.) in synch . iRise integrations makes sure they are!

All levels of Fidelity

Every process starts a different way. Teams might begin with sketches, wireframes, PowerPoint screens, or even scribbles on a napkin. From there you often progress to medium to high-fidelity prototypes. The best tools will take you from low to high fidelity as fast as you want to get there.  

Your process might start out on a napkin or sketch on a wall but end up as a hi-fidelity prototype users can click and swipe.

Your process might start out on a napkin or sketch on a wall but end up as a hi-fidelity prototype users can click and swipe.

You’ll want a wide variety of features - from triggers (click, press, swipe, etc…), actions (navigation, visibility, movement, formatting, etc…) to data and logic - so limitations of the tool don’t hamper your design or creativity. You want to design around the user's needs, not around what your tool allows. Prototypes that mirror the final application you intend to build allow stakeholder to give accurate feedback, so you can iterate until you get it right.

Enterprise Grade

Beyond the sexier features, it’s easy to forget some important things your environment may demand. The security of your data is paramount, and it needs to be able to remain safe and secure.

For some companies, particularly in the financial and healthcare space, an on-premises deployment might be a requirement, allowing for installation behind their corporate firewall.

What about reporting? The right metrics can allow you to quantify team performance, gain insight into predictability, and improve the overall process.

Take a step back and take stock of all the requirements your company will have once a buying decision is made. Is the tool your considering really enterprise grade?

Support

There’s a big difference between dealing with a FAQ vs. having a live customer support expert available when you inevitably have a time-sensitive question. iRise offers live support to get your questions answered fast.  We also offer resources like an online community, video training and inline chat in the support process.

It's Time to Start Iterating

Hopefully this article gives you a good understanding of wireframing and going beyond with prototyping. As a member of the iRise team, I think we have a pretty good tool you should include in your evaluation. Regardless, I wish you good luck in your search!

If you want to include iRise, we offer world-class support to go along with your free trial. This can include a live, no-pressure demo where a prototyping expert can answer all your questions.  


Dom Infante

Dominic Infante
Dom has been with iRise since day one. From the early days when the concept of “application simulation” was invented by iRise (his name is included on five of its patents), through the development of the product vision and of the product itself. Over 17 years at iRise gives him a unique view of the platform and of the marketplace it leads. iRise is the only tool to combine best-in-class web and mobile prototyping with integrated requirements management and diagrams.