How to Create a Wireframe - dummies

How to Create a Wireframe

A wireframe describes the structure of your website, without getting bogged down in all the web design details. Whether you’re building a simple site for iPhone or iPad or a highly complex, interactive masterpiece, taking the time to develop a solid plan from the beginning saves you from a lot of heartache and desperate, last-minute improvisation.

A good wireframe for website design is a lot like the set of blueprints for a house. The plans of a building describe its underlying structure, where electrical wires run, how the plumbing will work. It’s a plan for building the structure of a home. The plans from an architect don’t describe which colors to paint the walls, which furniture to place inside, or which kind of cereal to store on the pantry shelves.

In this figure, you see a wireframe on the right and the completed web page created from it on the left. Wireframes are like sketches of a site ― they’re not always perfect plans. Notice that the elements in the final page design aren’t always precisely where they were in the wireframe.


Most website designers who create wireframes agree that design elements should not be added at the initial stages ¯ no images, no color, no fancy fonts. The wireframe is a structural document designed to help the developer (as well as clients) focus on how a site works without being distracted by design details.

The details aren’t necessarily bad ¯ in fact, having a gorgeous picture or text treatment can make a bad design look good, and blind a designer from seeing that the page they’ve constructed doesn’t function the way it should.

Don’t be impatient to start adding all the content and design elements to your wireframes. As the development process evolves and the structure is approved, you can add mock-ups to show how the site will look.