Wireframing SharePoint with Axure and Balsamiq

I was recently asked to make mockups for a new SharePoint environment so that the client had a better idea of what we were talking about.

What are wireframes?

If you’re reading this article, I’m going to assume you already know what wireframes are. However, there are so many misconceptions and different definitions that I’d really like to make my position clear.

The emphasis in the following quote is mine.

A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website. Wireframes are created for the purpose of arranging elements to best accomplish a particular purpose. The purpose is usually being informed by a business objective and a creative idea. The wireframe depicts the page layout or arrangement of the website’s content, including interface elements and navigational systems, and how they work together. The wireframe usually lacks typographic style, color, or graphics, since the main focus lies in functionality, behavior, and priority of content. In other words, it focuses on what a screen does, not what it looks like.

The best resource I found was Axure vs Balsamiq prototyping by Calvin Pedzai – he does a good comparison of the two products. In his conclusion, he states:

Which one to use is purely situational. Both are supported by strong community-generated components and widgets so the range of work one can do is quite wide. Axure is more expensive and suited for medium-to-large scale projects. Its annonating functionality means that the resulting prototype has useful notes on interactions for developers as opposed to creating seperate documentation. However because Axure RP offers more features than Balsamiq it takes longer time to learn and its HTML prototyping can be time consuming. Balsamiq is for smaller projects and rapid prototyping. Its prototypes are not as interactive as Axure RP but PDF mockups can be created. Very small learning curve and its lack of features is not such a show stopper either.

I’ve used Axure previously and it’s a powerhouse of a product. Particularly masters, which allow you to create things like navigation which are repeated over multiple pages and the ability to add functionality such as onClick are wonderful. You can create an entire prototype and create HTML pages which can be shared with the client. I also really like the functionality that allows you to comment on elements and create a specification from these comments in Word. Axure brings wireframes to a whole new level. However – I think it’s overkill for a lot of wireframing situations.

After having used Balsamiq, I can say it’s very simple. Occasionally, it feels too simple after having worked with Axure, but the simplicity pays off when I just need to make wireframes.

Balsamiq mockups/templates

Balsamiq lets you create mockups, which are basically templates. You can use the entire template or just copy/paste the elements you want to use out of it.

@hannahrswain on Twitter

About me

Hannah's SharePoint is a personal blog run by Hannah Swain. It covers Microsoft SharePoint as well as other Microsoft products and is oriented at business and end users.
For more information, please see the About me page.