Wireframes are an extremely useful tool that we (and many other interactive/software firms) employ for almost every interactive project. They are a low-cost investment that serves an extremly valuable function – making sure that stakeholders all share the same vision for the project.
They help developers:
- Create more accurate budget and timeline estimates
- Design and code more accurately from the beginning
- Unite team members with a variety of job functions behind one vision
Wireframes help clients:
- Explore (and modify) ideas with minimal investment
- Get internal buy-in and approvals more easily because it's easier to envision
- Understand user experience with clickable navigational paths
- Discern the differences in functions across different web and/or mobile devices
Over the years, we've used a variety of methods for generating wireframes – and each has it's place and adherents – whiteboards, markers, Freehand/Illustrator, InDesign, and others.
Wireframes are "ok" on the whiteboard (for brainstorming and rough ideas) and "fine" on paper, but they're amazingly effective when you can view them on the device for which the final project is going to be coded.
Websites – interactive demonstrations via Flash
But lately, we've been leaning another direction for one main reason – interactivity. Flairbuilder is not the most polished wireframe utility, but over the past year it has evolved to become a valuble communication tool. Flairbuilder does a really nice job helping to produce static wireframes. But its ability to interactive wireframes is what sets it apart from the rest.
While Flairbuilder's interface isn't perfect, it does help perfect your own interface designs. And that's the whole point. The purpose of a wireframe is to help ensure that developer and client team members have the same vision – before anybody starts designing or coding.
As we refined the ideas and extended them to other pages, we used Flairbuilder's templating structures to display common elements consistently across multiple pages – no need to redraw the navigation on every single page. And in order to indicate functionality, we used it's interactive components – check out the tabs on the home page or the hover actions on the work and Company > Team pages.
iOS – no Flash, no problem
This is a great way to confirm size and positioning of key elements – like buttons – ensuring that the next stage of the development process is able to proceed smoothly and efficiently. It doesn't allow for the same interactivity, but it is a quick way to demonstrate and communicate ideas.
It's not about the tech... it's about the ideas.
Interactive projects can get complicated really quickly. In order to ensure a satisfactory result – completed on time, on budget, with the right content and functionality – it's important that everybody have the same expectations.
Wireframes are just a tool. But they are a good one. And making them interactive helps to eliminate one more area of potential miscommunication.