WHAT IS WIREFRAMING?

Wireframing is the technique used to define your information architecture of the website, in the initial stages. It is a great way to plan the entire layout of the website and also define the details of each page. This is the “architectural blueprint” of your website. Hence, it has a crucial role in the whole web developmental process. The website planning stage is incomplete without a thorough session on wireframing.

The layout of wireframing has to be initiated from the client side. Pictorial representations of the final product are a great way to avoid any misconceptions during the developmental process. Wireframing is as simple as using a pencil and paper to draft a rough layout. Not everyone is a gifted artist and thankfully wireframing is not about that. Any rough simple sketch of your thoughts about the website jotted down can do wonders during your meet with the developer.

HOW TO START?

An Information hierarchy is a great way to get the flow of the website. A website starts with the home page leading to a variety of pages with different uses. In order to understand this structure of the web pages and the site as a whole, information hierarchy is a great step. Once the sequence of pages have been decided the next step is to go into each page in more detail. Wireframing each page would be the best approach. Here we can define the spacing, typography, content, content placement, colour contrast, images and much more.

TYPES OF WIREFRAMES:

Now, hoping we have established a good start to what wireframing is, let us move on to the types of wireframes. Focussing on the two main types: the low fidelity wireframes and the high fidelity wireframes.

Low fidelity:  As mentioned above, wireframes can be as simple as an ugly sketch on paper. It is more beneficial than to have the design delivered by word. Low-fi consists of hand-drawn and also a few simple digital wireframes. These are usually very simple and easy to use. Comparatively these wireframes are quicker, cheaper and easy to change according to your needs.

High fidelity wireframes are just a step further than the low-fi ones. It includes defining the logo and basic graphics. They get down to colour schemes and all the visual aspects of the web page and site as a whole. Most times the high fi method is confusing to clients and confusion leads to a greater communication gap. They have a downside of being more time-consuming and expensive compared to their counterpart. On the brighter side, they offer a more polished look to the page. The clearer view of the entire project will be appreciated by all clients.

Depending on the project and the entire budget plus time frame one can choose between the low-fi or the high fi.

WHY WIREFRAMES?

The main purpose of wireframing is to reduce the time frame of the developmental process. They provide the first steps to a great user experience for your website. this is possible because of it is:

1. Beginning of the design process: This the initial stages of development. A great way to start the project.
2. Prototyping: Creating prototypes that can be evaluated by the client to better the development of the website.
3. Potential problems: The model framework will bring out essential pitfalls of the website that can be avoided in time.
4. All things visual: The wireframe is a great way for both the developer and client to review and make changes. Once the project gets a visual structure the possibilities of refinement improves.
5. Better Understanding: The developer can point out the highs and lows of the particular design. There is a better opportunity for the two parties to comprehend what each one says.
6. Website design flow: The complete wireframe will give a concise look to the final product which includes each and every page and designs.

WHAT IS THE WIREFRAME PROCEDURE?

This is a presentation that goes deeper, beyond the basics of wireframes

Here are some tools to help you with wireframing:

Tools for your Desktop:

1. Balsamiq 
2.  Omnigraffle
3. Axure
4. Flairbuilder

Online Tools you can use:

1. Mockflow 
2. Hotgloo
3. Mockingbird 
4. Protoshare

Keynote/Powerpoint are also great tools to help make stunning presentations

The following Adobe products help in graphics and creating wireframes: CreativeSuite, Fireworks, Illustrator, Indesign.

Here are a few wireframing templated you can download and use!

1. Website Wireframe Examples

2. Wireframe sketchsheets

3. Free online wireframing tool

4. Wireframe template

Image credits: Joe King , Aurimas

Suggested Reading:

WordPress for Marketing Guide – Chapter 04: Websites for Wireframes