Tag Archives: Prototyping

Branding and designing SharePoint with PowerPoint Storyboarding

Designing a custom SharePoint site involves a fair bit of customization and branding of the user interface. In the old days I’ve been using a mix of different tools: Microsoft Visio, PowerPoint and Mindjet MindManager to name a few. For thoughts on those, read my previous article on Prototyping SharePoint.

With the introduction of Visual Studio 11 Beta, we’ve got another tool to choose from – it’s called PowerPoint StoryBoarding. Even in beta I’m amazed how good and useful it seems to be.

I’ll introduce the tool but first, let’s install the necessary software.

Installing Visual Studio 11 Beta

You’ll need to download Visual Studio 11 Beta here. I’m using the Ultimate-edition, since it’s still in beta and you don’t need to purchase the outrageously expensive license until RTM time later this year.

Just download the small (~1,1 MB) web setup file to initiate download. Alternatively you can also download a full ISO file from MSDN Subscriptions.

Next, start the installer:

image

Enter target directory and agree to license terms and conditions. Also, admire the new dark theme:

image

Click Install:

image

It’s really that simple! Compared to Visual Studio 2010, it’s 5 minutes faster to initiate the installation and requires 20 clicks less. Very neat, but it also requires +8 gigs of free disk space and will – by default – install everything (this includes Visual Basic.NET, C# and F# for example).

Installation takes 5 to 10 minutes for the ISO, and a bit longer if you need to download bits while installing:

image

A reboot is required after install is complete:

image

That’s it! You can now start Visual Studio 11 Beta to check that everything is in place:

image

Introduction to PowerPoint Storyboarding

Now that you have Visual Studio 11 Beta installed, you should also have PowerPoint Storyboarding in Start-menu. I’m using Windows 8 Consumer Preview so it can be launched by typing Story in the Metro-based Start-view:

image

You are now presented with the all too familiar PowerPoint, that has a new Storyboarding-sidebar:

image

There’s a new Storyboarding ribbon tab too:

image

Here’s how Storyboarding works:

You create a new PowerPoint slide for each view the user will see. You’ll use the built-in icons, shapes and annotations the Storyboarding-sidebar provides.

The following categories are provided out of the box:

  • My Shapes – for shapes you want to re-use
  • Annotation – for explaining your storyboards during a presentation
  • Backgrounds – there’s even one for SharePoint
  • Common – typical web UI elements such as breadcrumb navigation and search box
  • Icons – typical icons such as file attachment, copy and paste
  • MediaWeb 2.0-style (not themed) shapes, such as tag cloud and web ad
  • Metro Icons – Metro-themed icons
  • Metro – Metro-themed shapes and icons
  • Windows Phone Icons – A few WP-themed icons
  • Windows Phone – WP-styled shapes and controls
  • Windows – Typical Windows controls such as status bar and file menu

While PowerPoint Storyboarding is not strictly intended for SharePoint UI prototyping, it’s a pretty solid choice for that. Let’s see a few easy samples for creating a SharePoint-based branding.

Creating a SharePoint branding with PowerPoint Storyboarding

We’ll start by adding a SharePoint-themed background on slide 1:

image

Dropping a background on a slide automatically aligns it correctly. You can edit the placeholder such as top (global) navigation, address bar URL, username and quick launch.

Here’s global navigation with the default values:

image

And here’s global navigation with some subtle changes:

image

Next I added some random controls to showcase how easy it is to add relevant content and SharePoint-style items on a page:

image

Everything else is using the defaults, except the main text, which I copy-pasted from www.slipsum.com (much less boring than www.lipsum.com).

A few of the shapes also have pre-configured animation. Those are denoted with the PowerPoint animation icon:

 image

There’s not much to choose from in the animated shapes category but a few good ones. There’s one to simulate a click visually:

image

And then there’s the two animated annotations, which we’ll cover in a bit:

image

I’m a bit surprised that none of the Metro-style icons or shapes support animation. Even a mock-up live tile is nowhere to be found – just the regular static versions can be used:

image

For now I’m happy to use these but my quest to finding a good looking animated live tile persists.

Using custom shapes

You’ll probably get bored quite soon with the default shapes and icons if you do storyboarding for SharePoint. With the support for custom shapes, you can easily add your own custom shapes, icons and other graphical items for re-use in your storyboards.

It couldn’t be simpler.

Drop any graphic from another program on a storyboard slide. Here’s a Web Part Zone-graphic I picked from my Page Layout in Edit Mode:

image

RIght-click on the graphic and select Storyboarding > Add to My Shapes:

image

This adds the graphic to the sidebar under My Shapes:

image

You can now select the shape and it gets added on your storyboard slide. Here I’ve added a ribbon from Page Edit-mode, a breadcrumb-control, the social features icons and a few web part icons:

image

Since graphics you add yourself are not vector-based, they are saved as bitmapped images. Scaling a saved shape distorts the contents:

image

What I found to be the most working solution was to avoid really small icons, or capture those in a larger resolution and then downsizing them before saving as a shape.

As a bonus, you can also construct multiple graphics as you like, and then save all those graphics as a single shape. Just add whatever graphical elements you need, select them all and right-click > Add to My Shape. While similar to grouping you cannot de-couple the graphic at a later time.

Using annotations

Annotations are slick little post-it notes you’ll need to use when you present your storyboard to others. There’s 4 to choose from:

image

The banner one looks like this:

image

It’s hidden by default and becomes visible with a mouse click, so essentially it’s a simple animation. A rectangle callout is more prominent, also with animation:

image

The sticky note also delivers:

image

It’s really intended more as a note, while callouts are intended for calling your attention for a specific item.

Sharing your storyboards

Sharing your storyboard is a matter of saving your storyboard as a .pptx –file:

image

It doesn’t require anything special from others to view the storyboard, PowerPoint suffices. They even work on Office Web Apps with SharePoint Server 2010:

image

Final thoughts

PowerPoint Storyboarding is a feature long overdue for anyone working with prototyping, proof of concepts or general UI branding – SharePoint or sans SharePoint.

It’s bewildering that Microsoft has not done this before. We’ve had Sketchflow as part of the Expression package but it was limited through licensing and wasn’t really useful for numerous other reasons. And now that Silverlight is practically dead for web-based development on SharePoint, there’s no reason for Sketchflow to exist or evolve. Unless it starts producing HTML5.

While this feature is great it also lacks a lot of things. Granted, it’s still in beta but it seems like a finished product already. The things I’m hoping to get in RTM are simple: more animated icons and shapes, some kind of built-in browser emulation/mockup and export to HTML + CSS for super-quick site building.

Until then, I’m happy to use the beta!

Prototyping SharePoint

SharePoint shares a common dilemma most software projects tend to have: How can I showcase the finalized outcome of this project with the look and feel, when we haven’t actually started implementing anything yet?

Some companies tend to prefer the approach where you build conceptualized SharePoint sites both for demoing and selling as products (or components). It’s a solid business-minded approach and seems to work great in the SharePoint realm. The downside however becomes apparent when the delivery is abrupt for any of the following reasons:

  • Changes to requirements for your readily-available building blocks – thus, you are diving heavily into custom deployment. Take a deep breath, it’s going to take a while
  • Your version 1.0 application/building block overpromises and under delivers
  • A SharePoint update unearths new functionality or changes to existing features you hadn’t accumulated into the equation
  • Dividing your lead architects’ time between in-house development and customer-focused deliveries. It’s hard to do both under time constraints and pressure
  • Your frame agreement reads like an EULA for Apple, and you run into supportability and delivery scope issues

Putting these aside, it’s still important to establish a common ground for understanding what features and functionality will be designed together with the teams on both sides (the customer and the company delivering the solution) and how you plan on materializing the end-result from pure will.

The first plateau: Education

To me choosing a career in IT is all about education. Not the formal kind but the intuitive one. You never stop learning since essentially everything you comprehend today is worthless tomorrow, to put it harshly. On top of this you have experience, skills, stamina and spirited effort. Sometimes alcohol helps too. In modest amounts.

Educate your users, customers and business decision makers. Translate the obscure hieroglyphs at sharepoint.microsoft.com to common sense. Keep asking those dumb questions without being demeaning and help others reach the first plateau, just one of many on the rocky SharePoint terrain.

My preferred way of sharing knowledge and insights is a classroom- or meeting-room based workshop. A simple training is fine and good but it often stifles true innovation and sometimes becomes a chore of labs, powerpoints and whatnot.

You shouldn’t start with the uber-techies. Start with HR, marketing and management. Go through the easy but essential stuff:

  • What’s the philosophy of SharePoint?
  • What are the products called?
  • What can you do with SharePoint?
  • What is document management?
  • What’s a portal, a team site and a my site?

This should be really low-key and basic. Always aim to find a new angle to learn while teaching (not preaching) and leave enough time for information to sink in. Do demos. Lots of demos. If the demo-gods are not smiling upon you, all the better – you learn while you do, and this shows the attendees not everything is perfect. That’s why you need to design what you will be building. Otherwise they’d be out buying SharePoint like milk – “it just works”.

It’s not about impressing the audience with your two thousand memorized tidbits of SharePoint, but incubating and sharing a holistic and non-technical view of SharePoint for anyone who cares to listen. Even the janitor might get invited and they ask tough questions.

I’ve sometimes been opportunistic in the sense that my workshops contain only a single slide: A quick introduction of myself and agenda for the day. Rest of the day is all improvisation, ad hoc prototyping and trying out new things without a safety net. The challenge is to keep explaining what you’re doing while simultaneously thinking ahead how things will pan out. For men, this is often a challenge, myself included. With practice it gets easier but always is a bit horrible.

Avoid doing a philosophy of SharePoint/SharePoint 101 –type general session just before your critical workshops (those that require real outcome and eat your precious billable hours). People need time to reflect what they’ve learned and for the majority of us, 15 minutes is not enough. We are not machines, you know. Some people are.

So to summarize – keep it simple, keep evolving and make sure this is the best workshop and presentation of your life. Especially for this project. They care and you should, too.

Tools of the trade: Mind maps

I wouldn’t be telling the truth if I’d say I’m a master of mind maps. No, sir. I’m a simple man trying to concoct every important thing said to a piece of paper.

Mind maps are best utilized for

  • Metadata and taxonomy: Content Types, Site Columns, managed metadata-mappings and hierarchies
  • Traditional site navigation planning: Global navigation, portal and site hierarchies, site collection visualizations, organizational structures

I’ve often employed mind maps for other things like to do-lists, instructing developers on the relationships between different entities and domains, blow-up models and for visualizing all key pieces to a given problem. It really works wonders.

I wish I had the audacity to buy and use a MacBook Pro – it would thus justify the purchase of MindNode. Having seen this OSX-only piece of mind mapping software in action I have to say it’s elegant, simple and usable.

On the Microsoft side of things, there’s not too much to choose from: there’s the Mindjet Mindmanager, which is not that bad but tends to be a bit too technical for viewers. It lacks the visual aspects of MindNode but mostly delivers the same end result.

That’s where bubbl.us is a fresh approach. It’s browser-based, so probably not the ultimate solution for the road warrior with lackluster 3G connectivity. It’s free though!

Give me something more advanced: Sketchflow

Sketchflow is part of the Microsoft Expression Studio Ultimate suite. My personal feelings against Sketchflow are mixed at best: While it aims to provide a superior prototyping tool/designer platform it fails on so many levels it’s mindboggling. I’ll spare you the oddities and just point my malice on licensing, availability and lack of support for tablets.

You can download a 60-day trial here.

Then again, Sketchflow is a viable option for sketching prototypes: You get to build stuff on the fly and show the results in real time. I just wish they’d incorporate true Tablet PC support for this and I could finally justify purchasing a HP EliteBook 2760p. For now I’m using white boards and occasionally and accidentally permanent markers. Sorry about that.

I’m not a clever man: Excel is alright

I’ve always kind of liked Excel. Not really fancied using it but embraced the fact that it’s been there since 1987 or so, everybody accepts the use of Excel hands down, it’s cheap and reliable and you don’t really have to invest a lot of time to learn new versions of Excel. When was the last time Excel crashed on you? I can’t remember either, although most of my spreadsheets are below average in terms of complexity or amount of rows. But it suits me.

There’s been times when I’ve come across the need to have a more templatized approach to my work. It works nicely with Word and PowerPoint but often thwarts my efforts in Excel. I’ve come to the realization that almost always the requirements are so specific that it’s easier to start from scratch and work your way up from there. It’s more rewarding too, in a twisted kind of way.

Excel is essentially great for

  • Organizing a site collection structure or multiple site collections
  • Emphasizing the inheritance of Content Types
  • Listing Site Columns and their types and settings
  • Mapping built-in functionality against a requirement list

Summary

Tools are great. Great tools are even greater! Still, a successful project and good prototyping with SharePoint boils down to the following factors:

  • Be genuine
  • Ask a lot of questions
  • You don’t have to know everything. But be prepared to find the answers on your own time. Don’t be the clueless consultant
  • Be nice – it’s nice to work with nice people