What wireframes are.
Wireframes represent the transition point between planning for your application, and actually building it. Essentially, the wireframes are like a grayscale blueprint of the functional and design components to be included in the application. They leverage the application requirements you’ve defined to create the skeleton or framework for the application.
Wireframes can be sketched by hand or created using computer software. Either way, wireframes should show:
- • The location of all the functional, design and content elements to be included on every screen or page of the application, including toolbars, buttons, icons, text and video boxes.
- • The hierarchy, scale and priority of each of the elements and their relationship to each other.
- • The workflow of the application, or how a user can move through the application from beginning to end to accomplish tasks or activities.
What wireframes are not.
Wireframes are not design. They don’t show what the components of the application and user interface are actually going to look like.
And therein lies the challenge of wireframes within the context of a project.
The reality is that wireframes are exciting and anticlimactic at the same time. On one hand, your application starts to take shape on paper for the first time, and you will be excited to see this initial representation of your application. On the other hand, wireframes lack the wow-factor that only color, font, graphics and imagery can bring. Seeing the black and white abstracts and the placeholder text and images can be a bit of a letdown when you are anxious to see your application come to life.
Why wireframes matter.
Lackluster as they may appear, wireframes are arguably one of—if not the most—critical milestones in the application creation process. For one thing, the wireframes will validate your requirements by mapping them out. They show you whether or not the functionality and workflow you’re planning actually make sense.
Even more important, wireframes bring any functional or design gaps to light. Nine times out of 10, people will find one or more ‘holes’ in the wireframes. Identifying and correcting these misses during the wireframing step is much easier and much more cost-effective then making additions, moves and changes after the actual design and development work begin.
Though they are far from glamorous, wireframes are a key step in the application creation process. By understanding what wireframes are and why they are important, you can give them the time and attention they deserve. And by making sure your wireframes are spot-on before production work on your application begins, you gain peace of mind that you are investing in the application you want to create. And you can save yourself a lot of time, money and headaches down the road.