April 26, 2013

Wireframes

 Wireframes are where the functionality and user experience of the site start to take shape.  There's no creative design yet (that comes next), but the pages of the site start to come to life.  This is where Jeff starts to work his magic.

There are a number of wireframe tools available for this task.  In Ruven's book that I mention in the Information Architecture section, he is a fan of Balsamiq wireframing.  We've used that, but more recently we have settled on Axure RP.  Yes it is a fair bit more expensive than Balsamiq, but it's not significant dollars, and it is very powerful yet quick to work with.

The key to wireframing is to not get caught up on the visual aspect.  There shouldn't be any images or colours, and fonts are not important.  The key is to capture the different type of pages in the site, the elements in them, and their functionality at a very high level.

One of the nice features of Axure is the ability to generate HTML versions of the wireframes.  This lets anyone with a browser view the wireframes, but more importantly they can have clickable elements in them, so the flow through the pages can also be experienced.

Jeff is still getting going on the wireframes, but I wanted to share what we have so far.  As with the IA, both the source Axure file and the HTML rendering are available below.

Envision Shakespeare Company Interactive HTML Wireframe

Envision Shakespeare Company Axure Wireframe

Return to the Table of Contents