Detailed designs that show functionality and layout — but not the visual UI.
The wireframes look like a black & white version of the application without any actual copy, pictures, or other visual elements. They only explain to engineers how a site or application functions, and the arrangements of elements on the screen.
These critical design artifacts are given to engineers so they can build what you have designed. They must be very detailed about functionality and layout, and have none of the visual design elements in them (so they aren’t confused with the final design specs).
When an architect designs a building, she doesn’t illustrate a pretty picture of the outside of the building, hand it to the contractors and tell them to start building. They wouldn’t know what to build.
Likewise, the product designer can’t create the final UI design of an application, hand it to the engineer and expect her to know how that application functions.
Wireframes show the programmers how the website or application functions — in detail.
What’s that? You say they look a lot like sketches and the modular designs we did yesterday?
Yes, there is a method to this madness!
As we sketch and block out containers for content on websites and applications, we are actually beginning to create wireframes. Of course, when you do the finished, hi-fidelity wireframe, it will look polished and very well annotated. But to get started and learn how wires work, these low-fidelity sketches are just fine.
Notice that the key components are:
- Content boxes that show where different types of content will live on the site
- Annotations, that briefly describe functionality
- General idea of layout (though you don’t need to be specific about aspect ratio and margins, you do want to show relative size of components.)