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

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.
About Kim Perry

Web developer at DexMedia. I code, develop, and make websites functional. Technology is always changing and new things pop up, that is what makes it so fun!

Comments

  1. good concept about wireframe.. nice article.. thanks

What do YOU think?

Let us help you grow your business
Newsletter Signup

Newsletter Signup

Subscribe to our weekly newsletter for helpful tips on marketing your business.

Site Seal

Copyright © 2014, Dex Media, Inc. All rights reserved.