Margin Media

Wireframing is an extremely important step in the planning process of your website and a step that I believe has many benefits not only to the client but also to the website designer.

So What is a wireframe you might ask?

A wireframe is a prototype of the website showing placement of your websites features such as navigation menus, icons, buttons, logo, header, footer and content. It allows developers and stakeholders to interact, test and discuss every page on the website before it goes to the design phase.

Wireframing helps you test the layout of the website before moving to the design phase. It allows you to test the layout of the site and really define each pages purpose on the website.

Whats included in a Wireframe?

You should incorporate all important elements of a web page in your wireframe. These include:

• Company Logo: which can be represented by text.
• Content areas: this can be outlined with use of boxes.
• Navigation menu: including page links and page titles.
• Buttons, search boxes and sidebar widgets.

How do we create Wireframes?

Creating a wireframe is simple. You can create a wireframe on a piece of paper using a pen or pencil and draw the layout. This is a very common way of creating a website wireframe. You can also use tools and software such as Adobe Photoshop, Illustrator or inDesign to name but a few.

At Margin Media we use a program called Flairbuilder. Flairbuilder is a cross-platform prototyping tool that helps you create interactive wireframes & prototypes faster, easier and with better results. We use flairbuilder as it allows us to interact with the wireframe like a website. It also allows us to upload the wireframe online so we can have different users including clients test the wireframe. The feedback we have from our clients has been great, so we will keep using Flairbuilder for future projects.

Benefits of Wireframing

1. Allows you to get a clear picture of what information will be needed on each page before design.

2. Allows you to spend time and really focus on what each page's purpose is. Careful planning is paramount.

3. Allows you to have a clear look at how the site will react to various visitors without the clutter of colour or design elements.

4. Gets stakeholders deeply involved in the planning process early and opens communications between both parties.

5. It is much easier to make changes to a wireframe rather than a design.

Wireframing really defines each and every page on your website. At Margin Media we wireframe every page not just a couple. This helps us create user scenarios and work out the best possible strategy for your website.