SharePoint 2010 Balsamiq Mockup Wireframe Template

Posted by on November 15, 2011 at 12:31 pm.

One of my favorite things to do when designing a new SharePoint 2010 branding feature is the planning phase. I know what you’re thinking, “you actually enjoy going back and forth, spinning your wheels with customer design teams who take weeks to make decisions?” Yes, I do.

Before doing any actual design work, I love to use a tool called Balsamiq Mockups (really great, friendly team over there by the way). Using this tool you can quickly and easily make wire frame mockups and review them with decision makers to get your layouts right. I’ve made a template for SharePoint 2010 – screenshot below – you can download free here .

Although it can be tedious and sometimes annoying, it really helps flush out all the bad design thoughts many people have. Believe it or not everyone is an “expert” when it comes to design and the look and feel of their corporate image. I’ve run into a few really good designers or folks with good constructive minds, but more often than not people just want to be a part of it more than actually focusing on the best option.

Anyways… to aid in the process I always recommend going through the same steps to successful design:

  1. LISTEN: Understand the customer’s needs and really understand their end goal. Remember, budget and timeline often must take priority over extra features, as much as you might want to go above and beyond.
  2. VALIDATE: Make sure the right key business decision makers have not only reviewed, but also signed off on what you’re thinking. This needs to be done every step of the way really, not just in the beginning.
  3. INITIATE: Start making layouts! Using tools like Balsamiq Mockups is really helpful here, making simple and quick wire frame designs. Balsamiq is great because it doesn’t focus on style – ignore colors, fonts, images, etc at this point – really focus on the structure. You need the foundation before you build a skyscraper, designing an application is no different.
  4. STYLE: My favorite part by far, here’s where you actually spend the time to make it look cool. Again, it’s important to validate, validate, validate every step of the way.
  5. APPROVAL: Of course you’ll need that final approval and sign off from not just the core team, but the business as well. If your main sponsor/contact hasn’t scheduled this make sure you do!
  6. PUBLISH: You’re live! Consider it closed? Nope, not yet… always remember the post-launch support and tweaks that will follow.

19 Comments

  • Arnt Evensen says:

    Hi, could someone explain how to import this SharePoint template into balsamiq tool?

    • Sure thing. It should be as easy as downloading and installing then download the .zip file of the template. Unzip the .zip file using the Windows unzip (right click, select ‘Extract All’) and open the .bmml file in Balsamiq.

  • rcrumb says:

    Thank you very much for this SharePoint 2010 wireframe template!

    I just wondered if you had a similar wireframe template for SharePoint 2013 & its main components?

  • J says:

    you are a wonderful human being…….. you have saved me hours of work!!! THANKS!

  • Francisco says:

    Thank you for this! I have been spending hours on trying to create this template, but without actually having SP2010 installed, it was a challenge for me.

  • D$ says:

    Thanks James! This is super useful and gets us up and running fast for SharePoint mock-ups. What a great addition to the community.

  • David says:

    Hi James! I don’t know why I’m just seeing your blog for the first time now, but at any rate- I just started using Balsamiq a few months ago. It’s ridiculously handy and I actually like how limited it’s feature set it, but there’s something about the UX I find to be utterly awful.

Trackbacks / Pingbacks