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.

Source: Website wireframe @ Wikipedia

A wireframe can take the form of a sketch on a napkin, on a whiteboard, PowerPoint or a program such as Axure or Balsamiq.

When asked to do a SharePoint wireframe, we’re usually most concerned with the main page as this requires the most customisation. At this point, we include elements from:

• Master page (global layout, top navigation, quick launch, footer)
• Page layout (page level layout, webparts, field controls)
• Basic content decisions (which webparts? where? approximately what content will they include?)

As stated above, it is important to keep questions such as fonts, colors and/or graphics out of the question at this point: wireframes are concerned with functionality and basic layout, not design.

Comparing Axure and Balsamiq

It had been so long that I wasn’t even entirely sure what to use anymore.  I’d heard quite a bit about both Axure and Balsamiq, so decided to look into them. I know that some people do use Visio (see Jasper Oosterveld’s SharePoint 2010 Wireframes), but I don’t like using Visio for this purpose.

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.

Flucidity – SharePoint 2013 team site mockup

Material SharePoint – SharePoint 2010 Balsamiq Mockup Wireframe Template

Balsamiq Mockups to Go – SharePoint Elements (I ended up tweaking a few of these a bit, but it was a good learning curve)

Balsamiq has a Mockups to Go site, where people can share their mockups; there are many useful general elements available here.