Wireframing

What is a Wireframe?

A wireframe is a layout of a web application that demonstrates what interface elements will exist on key pages. It is a critical part of the user interface design (UIA) process. The aim of a wireframe is to provide a visual understanding of a page early in a project to get stakeholder and project team approval before the creative phase gets under way. Wireframes can also be used to create the global and secondary navigation to ensure the terminology and structure used for the site meets user expectations.

ITVantage Business Analyst and Designers can work with your organisation to create detailed wireframes before you have even committed to a development budget to assit with the following:

Proof of Concept

You may just want help to get your ideas on paper to ensure it makes sense and is logical, or you may want to get buy in or validation from internal or external stakeholders. Wire framing your application or web site would help you do this before even reaching the, prototype phase.

 

.............................................................................................................................................................................................................................................................................................

 

Discovery Exercise

We can work with you and your teams to understand requirements and sketch up a series of structured wire frames with various process flows and options as part of a discovery exercise to assist with requirements gathering phase of a project. We understand that when you first initiate a project that the high level requirements may be quite wholly and you need assistance with drilling these down and understanding stake holder requirements in more detail. 

.............................................................................................................................................................................................................................................................................................

Detailed Design

Time after time ITVantage have read high level requirements which are ambiguous and can be interpreted in various different ways. We find that sketching the high level requirements and adding further lower level detail which may not have even been thought about. By the end of a series of wire framing workshops we find that the high level design document can be broken down to a granular level which eliminates ambiguity and helps our clients with producing a skeleton front end application. The beauty of this is that stakeholders have all input into what they expect from the application and hence buy in and management of deliverables and project expectations become far more easier to manger then developing a detailed design based solely on a set of text and work flow / process documents. 
We have found that wire framing provides an early visual that can be used to review with the client. Users can also review it as an early feedback mechanism for prototype usability tests. Not only are wireframes easier to amend than concept designs, once approved by the client and the users they provide confidence to our or your chosen designer.

.............................................................................................................................................................................................................................................................................................

From a practical perspective, the wireframes ensure the page content and functionality are positioned correctly based on user and business needs. And as the project moves forward they can be used as a good dialogue between members of the project team to agree on the project vision and scope.

Which Wire Framing Tools Do ITVantage Use?

To be honest we don’t get overly precious about the wire frame tools that need to be deployed, however are more focussed on the end result of having in place a series of well thought out wire frames which add value and allow the users to interact with the desired application in such a way that adds optimal value.

There are a plethora of good wire frame applications other there in the market place. Below is a summary of 8 of the most common ones used in industry- however we still feel that there is nothing better than a piece of A4 paper, pencil and a rubber to begin with. Once we get the details which sit behind the wireframe right- the use of a wire framing is immaterial. 

Balsamiq

We love Mocking up in balsamic- as it  includes several drag-and-drop elements, from buttons to lists, each styled as a hand-drawing. The basic premise behind this wire framing tool is to keep the mock-ups rough and low fidelity", to encourage as much feedback as possible. We find that this approach is less treating to wider stakeholder groups and allows all parties to quickly feedback and change direction if required.

Axure

Although a little pricy for a wire framing tool we found that Axure allows you to add functionality to your layout and create an interactive prototype. So your wireframes are not mere flat creations.

.............................................................................................................................................................................................................................................................................................

Pidoco

This tool is very similar to to Axure. It includes a library of  drag-and-drop interface elements with the ability to add multiple pages and layers. One feature we liked was that your prototypes can be shared online with clients and as it is also a collaborative tool gaining their feedback and being used as a basis for discussion is quite powerful. 

Visio

Good old Microsoft Viso. Many of our corporate clients have been using this application for years to do their technical drawings, process flows, documentation etc. Hence Viso is a clear favourite when it comes to learning curve as it slo integrates well with other office suite products such as Word, Excel and Power Point. 

.............................................................................................................................................................................................................................................................................................

InDesign

In design is a clear favourite for our designers here at ITVantage. We can include animations, video and object states, it’s very easy to create a mock-up of a website or app in the form of an interactive PDF with InDesign. We can even use this to create a library of re-useable interface graphics for your organisation. 

iPlotz

Ok this maybe a Flash-based wireframing tool, so little heavy and not fully accessible on mobile devices – however iPlotz allows you to make clickable wireframes with drag-and-drop components and includes the addition of tasks and notes for project managers and coders. Great for when creating instructions for interactive infographics.

.............................................................................................................................................................................................................................................................................................

Photoshop

Ok, we accept that Photoshop doesn’t offer libraries of interface elements, but when it comes to basic, fast wire framing, it is great choice for designers and photoshop novice users. We find that even for those customers who are not familiar with Adobe products, sketching out quick ideas, grouping various elements and layers affords a very quick process.

Fireworks

We have been using Fireworks since the Macro Media days. Our experienced design team finds that it allows you to design wireframes and prototypes for web, as well as mobile and tablet apps. CSS including colours, fonts and corner radius can be extracted so styles implemented throughout the process can be duplicated in the final build. Various symbols and templates are also included for quick wireframing.