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:
- Main Content Area
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.
- Research the design components needed to make the site user friendly and functional.
- Develop the wireframe, be creative.
- Get feedback from others.
- Revise the wireframe.