Wireframes

When someone hires me to make a site, they often expect a mockup right away. While it is possible to jump immediately into the design, I don’t recommend it. As Miguel de Cervantes Saavedra says, “To be prepared is half the victory.” Creating a website is more than just design–it’s about organizing your information, targeting your audience, communicating effectively, and being consistent with your brand identity.

I have written a series of articles outlining these steps. This is part 2 of the series.

What is a wireframe?

Wireframes are basic sketches of the elements for each page. This is incredibly useful for focusing on the content of each page without being distracted by the design.


At this stage I like to make sure we have appropriate headlines, appropriate copy, effective call to actions, and the necessary elements to make each page’s user interface effective, complete, and easy-to-use. Wireframes are especially useful when creating a responsive website where it is necessary to illustrate how we arrange the content appropriately for a particular resolution. Wireframes are essential to a complicated user interface, whereas they are less essential to a simple, brochure site.

By using wireframes we focus on determining the best information design for each page for an effectively functioning web site with a positive user experience.

Here are some examples of wireframes

ePub Wireframe

Wireframe for ePub.com

Southern Fasteners Wireframe

Wireframe for Southern Fasteners