What is the actual meaning of a wireframe of a project?
Add a comment
|
1 Answer
A wireframe is a very simple visual representation of a project's layout design, that is used to quickly communicate the basic aspects of the project. It's commonly used in web development, but as a technique has been adopted in other domains as well.
On a very similar question on User Experience Stack Exchange, DA01, the author of the top voted answer notes:
That said, a wireframe is a sketch to communicate the idea/concept. The term comes from 3D modeling where the wireframe is the basic primitives of the object to give a sense of form and scale without committing to a fully rendered model.
In the context of web sites, wireframes serve various purposed depending on the context of the project. These can include:
- site flow (typically done with flow charts)
- interactions (not always easy to document in a wireframe, but its common)
- general content structure
- general page layout
Here are a couple of examples of wireframes, early snapshots of Stack Exchange's Area51:
Andreas Wulf's Wireframes: A Great Way to Start Development Projects article on InfoQ gives a quick overview of who's using wireframes:
Who Uses Wireframes?
Wireframes make an effective communication tool from which everyone involved in the development process can benefit:
- CLIENTS - get a better understanding of what is going to be developed and can judge if the solution adequately addresses their needs. They can see if something is missing in the user interface, what actions are available, and how the interface elements are put together. Quite often, showing a wireframe to a business stakeholder brings up important aspects not considered before. This is a good thing because fixing issues in the wireframing stage is much easier and cheaper than fixing them later, when they are set in code.
- PROJECT MANAGERS - use wireframes to ensure that all stakeholders are on the same page and agree on what is going to be built. As the project progresses they can use the wireframes as checklists to keep track of the progress and verify that everything important has been considered and implemented.
- DESIGNERS - can rely on wireframes as blueprints for the visual design of the user interface. Wireframes provide them with the skeletal structure which they can turn into pixel-perfect mockups with colors, fonts, and other design elements.
- DEVELOPERS - make use of wireframes to get an understanding of the solution’s functionality and technical requirements. A bunch of wireframes put together in a storyboard can be helpful to developers in determining how a series of user interactions should work together.
Further reading:
- Wireframe questions on User Experience Stack Exchange,
- The Benefits of Wireframing a Design.
