It’s pretty well established in the web design community that wireframes are an important part of planning a website and an essential step before diving into Photoshop.  A wireframe is typically described as a skeleton or blueprint of a site, but everyone puts in a different level of attention and detail to their wireframes.  While they shouldn’t be a gray scale version of the final design, they should have enough detail to actually be useful to the client and designer.

With no colors, typography or images a designer can focus on laying out information in a way best suited to the clients project. In order to take advantage of this phase, it’s important to put some extra time, effort and detail in the wireframes, thereby saving time and increasing a site’s usability. While a wireframe doesn’t need perfect alignment, shades of color or font size, it should be a fairly good representation of layout, information/fields and proportional size of elements.

If you had to build a person, which skeleton would be more useful as a blueprint?

If you had to build a person, which skeleton would be more useful as a blueprint?

Why Detail is Important

Even if more time is dedicated to make a wireframe detailed, it still takes considerably less time to create and edit than a full design.

When it comes down to it, a detailed wireframe is just good planning and preparation.  The more detailed the wireframe, the more problems can be avoided and the better a site can dial in its usability.

Some Helpful Resources