Select an Account to Sign In

DexHub

Text & Email | Appointment Scheduling | Customer Database

Sign In

MyDex Account

Pay Bills | View Reporting | Manage Your Listings

Sign In

Website Wireframing – What It Is and Why It’s Important

By | 12.07.12

What is wireframing?

Wireframing is one of the first steps in designing a website. It’s simply a hand-drawn or onscreen blueprint that represents the skeletal framework of a website. It is used to arrange page layout and content, including navigation, logos, and other functional elements on the page, such as videos.

Wireframing helps to organize priority of content, and depict functionality and behavior of elements on the page. It’s not a mockup or design as it doesn’t address color, graphics, or typography. Instead, it’s the visual blueprint you give to your website designer to get started.

Why wireframing is important

Since wireframing is one of the first steps in the design process it can help communicate ideas more clearly, and set the expectations for a friendly user experience. A wireframe saves time since it can easily be revised or discarded. It helps visualize a clear plan before development and design of the website begin, which is cost-effective. Sometimes a visual representation helps you see the things you’re missing.

The things you want to include in a wireframe are:

  • Header
  • Navigation
  • Footer
  • Sidebar
  • Main Content Area
  • Graphics
Example of Wireframing

How to Wireframe

The two main ways to start wireframing is by hand or digitally. Sketching layout ideas can range from simple to complex diagrams. Wireframing with pen and paper doesn’t require additional programs or materials. Some prefer this method at first to get initial thoughts and ideas organized more clearly before moving on to a digital wireframe. Composing wireframes on the desktop or tablet is made simple through free web-based tools like Mockingbird, or Lovely Charts. There are also paid tablet applications like iMockups for iPad. With so many options to choose from getting started should be easy.

Process

  1. Research the design components needed to make the site user friendly and functional.
  2. Develop the wireframe, be creative.
  3. Get feedback from others.
  4. Revise the wireframe.
Comment
  • good concept about wireframe.. nice article.. thanks

Like what you see?
get more free content.

Next Up In Business Websites

Increase Traffic to Your Business Website with Current Customers

You likely have a business website (or know you need a business website) to get found online. Hopefully it’s...

Read More

Is your website a turn-off? It may be affecting conversion.

How is your website performing? Most business owners track visits to their website on a weekly or monthly basis....

Read More

5 Local Business Website “Must-Haves”

We don’t have to pull up your search history to know most local business owners have, at one point...

Read More

Explore the Blog