What is a Wireframe?

back to blog

There are a few answers to the question what is a wireframe, but I feel the best definition is often the simplest. A wireframe is a visual representation of a webpage’s content and navigation elements and how those parts work together. A designer and developer will use this wireframe to build the design and functionality. It is basically the bones or the skeleton of the site for which everything else is based upon. Elements are often used to represent the content. Boxes and words will indicate placement and order. Content hierarchy and usability standards will often help define what goes where and why. What is a wireframe is answered that easily.

A site map is usually developed before the wireframe for each page is created. The site map defines the basic site architecture and shows where each element lives in the backend and through the navigation. This functions as a game plan for how everything is displayed and built. Once you have the place and navigation structure determined, you can begin to build the wireframe for each page. Some pages will have unique wireframes and others may use existing ones with content switched out. It depends on what each page is being used for and what content is required.

Considering Content Hierarchy

You must take all of the elements or types of content you want to include on your site and decide what information is the most important for your user to see and digest. What is it that you want the users to do or what is the purpose of your site? You will put these elements towards the left and top of your page. A best practice is to place your logo first or in a prominent place on the page to help reinforce your branding and let your users know they have come to the correct site or who’s site they are on. The navigation in most cases will be second most important, followed by the content you define as the most important or gets the users to engage with it in the way you intend.

Making Your Site Easy to Use

Usability considerations should be a big part of the wireframe creation. You have to make sure you design a wireframe that is easy to use, navigate and content is displayed quickly and consistently. So that when a user moves from one action to another they know what to expect. Nothing is more annoying to a user than a site that is broken or switches the way information is displayed or accessed throughout the site. It creates confusion and frustration and that’s the last thing you want to do.

What is a wireframe and other marketing related questions are explored in the Creatage blog. Take a deeper look at all our blog posts to learn more about marketing.

What is a Wireframe?


Written by on April 13, 2012

Leave a Reply