Power of Wireframes

I’ve used sequenced illustrations as part of planning slide shows, PowerPoint presentations, videos and live events my entire career. They have been sketched on everything from grid and illustration paper to paper napkins and table cloths. They have been created by everyone from the most talented illustrators, to clients, and me. I once had a client pull out a Sharpie and sketch out his thoughts on the table cloth at a high-end French Restaurant then take it with us after the meal, it hung on my wall for a month as we built his program.

When creating websites, apps and games we frequently sequence illustrations called wireframes to assist in overall design and navigation. Initially I simply tried to flow chart these projects but everyone would become lost when following the flow of boxes with tiny text labels and no one really knew what the product would look like.

Next, I tried creating wireframes in PowerPoint with mixed results. This way core design and layout was easy to create and manipulate. Real design assets such as client images and text could be added and simple navigation could be programmed to simulate the user experience. This brought about an unexpected issue, clients and their stakeholders critiquing the assets because they thought they were looking at finished art and real functionality, which was not the case.

To solve these challenges we began a four-step process when laying out and designing websites. 1) Sketch basic design ideas which become black and white wire frames, 2) Create a core flow chart based on the wireframes, 3) Illustrate color design comps, 4) Finalize design.

Recently IDEAS began to use Balsamic Mockups Rapid Wireframing Tool, available online at http://balsamiq.com. So far this is answering most of our wireframing needs. It is an easy-to-use tool with templates and clip art for most website and application layouts and functions. Wireframes are generated in a sketch design so there is no confusion about art and colors. Buttons and pages can be linked together providing a sample of the user experience (UX). Pages can be exported as PNG files for use in presentations or to PDF files with links.

In developing a medical company sales website the core design was created, reviewed and approved by the client’s stakeholders within a couple of days.  Thus setting a great foundation for the design mockups and expediting the entire product development process.

In creation of a new web application the first 6 weeks of a 16 week timeline was spent wireframing every aspect of the product. The client said they’d never been able to have such a good feel of how an entire web based product was going to look and function in such an early phase of development. By showing these wireframes to the client stakeholders we identified numerous opportunities to improve program features and development along with application speed, and user experience.

When re-skinning an existing web product creation of wireframes settled numerous UX debates on everything from overall design, to button placement, new naming conventions and even font and image sizes.

So if you’re a client, project manager, designer or programmer, take the time to wireframe your next project. You will be able to more clearly communicate your thoughts and ideas, save time and money, not to mention have some fun in the process.