Tools for SharePoint User Experience (UX) Design: Wireframing

 What is Wireframing?

While a scamp is the first stage in designing a site, a quick way of getting the content and functionality required planned out, a wireframe is the next stage in the process when the detail and scale of elements need to be ascertained. Similar to a scamp, a wireframe should be quick and easy to change so the process of iterations with feedback from clients will allow quick refinement of the content required.

SharePoint 2013 Axure Wireframe

Like a scamp, a wireframe should have no design elements, such as colour, fonts or imagery, ideally these should be created in one colour, only using extra colours to denote different areas or functionality, by doing this the user is forced to focus on the content and not be distracted by design elements.

Where scamps and wireframes differ is that wireframes should contain the actual content that the site requires, list items, document names, names of departments and people, navigation items etc. (or as close as possible) so that the site feels as personable and as real as possible to the users.

Another reason for the content to be accurate at this stage is that the wireframes will be produced at SS (Same Scale) as the proposed design, so if the requirements are for the site to be optimised for a minimum browser size of 1024x768px with a minimum point size of 11px then the wireframe should be created to these specifications to ensure the content will fit when we get to the design stage.

Which tools can be used to create Wireframes?

The tools for creating wireframes are wide and varied and which tool you choose to use will depend on your skill set and the projects specific requirements. Below are some of the tools available with their pros and cons:

Photoshop

Although not the obvious choice for a wireframe, the wireframe taking slightly longer to create initially, the finalised wireframe can have design elements quickly applied by using Photoshop layer styles to add chromes etc.

Photoshop however does a lot more than just making wireframes and therefor is a lot more expensive and a lot harder to learn than other products, so if you don’t already have a copy of Photoshop and are unfamiliar with it this is probably not the right choice.

Fireworks

Fireworks is probably more suited to wireframes, using symbols and states to control the look of elements which can have the design added once finalised. Another advantage with Fireworks is that the wireframe can quickly be turned into an interactive prototype.

Similar to Photoshop, Fireworks is reasonably expensive and tricky to master.

Balsamic

Balsamic is a tool that is designed specifically for the purpose of wireframing, giving a selection of user interface elements that can be easily dragged and dropped into position to build a layout. Balsamic is simple application and so is a skill that can be quickly learnt.

On the downside Balsamic produces wireframes that are a little closer to scamps in style so getting the content accurate is a bit harder.

Axure

Like Balsamic, Axure is designed specifically for wireframing, it comes with a selection of User Interface elements and you can create your own UI elements to add to these if required. You also have more control over the look and scale of items than Balsamic, being able to control global text styles etc.

It is a relatively simple application to learn and there are a wealth of online resources and tutorials too.

One big advantage of Axure is that once you have built your wireframes these can be quickly wired together to make an interactive prototype.

Using Axure to create Wireframe

I won’t go into too much detail on how to use Axure as there are lots of tutorials on this subject floating around the web, below I will illustrate the process of creating a simple wireframe, using the tools that come with Axure and a few extra tools we have created at Pythagoras that are SharePoint 2013 specific (which can be downloaded at the end of this article).

Step 1: Create a blank Axure document

Blank Axure Document

Step 2: Load the “SharePoint_Axure_Library” (downloadable at the end of this blog)

Click on the title of the Widgets Panel and scroll down to “Load Library” then navigate to and load the “SharePoint2013_Axure_Library”. This will add a number of UI Elements that are specific to SharePoint such as the ribbon, lists, libraries etc.

Load SharePoint 2013 Axure Library

Step 3: Add the SharePoint Ribbon from the “SharePoint2013_Axure_Library”

Drag and Drop the Ribbon from the widget library on to the page.

Drag SharePoint 2013 Ribbon into Axure Document

Step 4: Add Navigation buttons from the Axure default widget library

Drag and Drop a button on to the page, the size and text can be edited once the button has been placed.

Add Navigation Buttons

Step 5: Add the SharePoint Search Box from the “SharePoint_Axure_Library”

When dragging elements onto the page Axure has handy dialogue boxes and guides to allow pixel perfect positioning of UI elements.

Add SharePoint Search Box to Axure Document

Step 6: Add more SharePoint 2013 widgets, Axure default widgets to the page

Add More Widgets

 

Step 7: Export as images or generate an interactive prototype in your web browser

Axure Interactive Prototpe

Conclusion

This process can be repeated to create all of the required pages of the site in one Axure document, if an element is used on multiple pages then it can be created as a master and edited in one place whilst updating any page it is placed on, these wireframes can either be exported as individual images or wired together to make an interactive prototype (the process of making an interactive prototype will be covered in the next blog in the series).

The wireframe is now much more detailed than the original scamp, and because it has been created to scale we can see that the all of the required content is no longer visible within a 1024×768 screen, finding this out now rather than at the design or build stage is beneficial as we can now quickly reassess and refine the content so that the information that the client requires on the page fits within the minimum screen size specified.

Download the SharePoint2013 Axure Library here – please note, this file will only work in Axure, not the other wireframing tools mentioned earlier