So I do a lot of wireframe and mockup’s (what would it look like if) during my SharePoint projects. This is not a best practice area, and I have seen some very interesting, and have to say Garbage from some folks…no names. So I thought I would show you some ideas on how you can do it quick and easy without a big tool set or purchase the next greatest software. I am a fan of Visio, many of my colleagues say I can build anything in Visio…I wish. But its easy to use functionality and the ability to have My Shapes at my fingertips makes me a fan. Also being able to quickly publish to PDF for printing, or onto my iPad is very handy.
Sketch Wireframes:
Lets start with my Sketch Wireframes or Initial Wireframe concept. Now this is usually were I preface this with the fact I have done requirements gathering, and created a User Story or two to understand the experience. I am a big fan of UX right from the start, why design something that sucks when the client starts using it.
I use s crude line style, and Latin Publishing Copy in the fields to ensure the audience does not get focused on wording.
I will work on creating a Visio My Shapes package for you to start from. You can get it from my Digital MacGyver’s SharePoint public SkyDrive folder. It should get you started.
The sample above is focused on Social Collaboration in SharePoint. Bringing in some Twitter feeds, blog links, polls, surveys, announcements, videos and related documents. Keep in mind what you see above is completely OOB. I am a preacher of OOB and the KISS principle for SharePoint. The main reason is User Self Management. I want the tool to do the work, and not require the Administrator to do any daily maintenance tasks.
I also like to ensure that the page either supports dynamic feeds of information via RSS or CQWP, or is views into support lists and libraries.
Refining the design:
So now that the client signs off on the wireframes and user stories, I like to apply some colors and styling to get a betting view of this. This also gets me team understanding the design effort we are going to need to do. Still using the Sketch format, so they do not get bogged down on functionality. That is my problem not there’s. So here is an example of a fixed with Corporate Internal Collaboration portal. With global navigation into the other Site Collections focusing on Departments, Partners, and Resourcing. I am showing the HR department landing page, with a sample of the Global Navigation options.
How I did the colors is using the Background tab on Visio to lay in the layers and then just drop in the webparts and text.
Resolution:
Once I have complete that I then go into SharePoint and build out a portal that matches this in the Development Environment. We then go thru the approve and promote approach moving to Test/Staging, then to Production. It is critical to get the users and the Stakeholder visualizing the concept early. If you just use words and excel files you will never get the “I was part of the evolution” experience. This leads to rework, change requests, an folks not being prepared visually to engage at the right time.
Remember a picture is worth a thousand words, but the picture does not need to be perfect, it does not need to take weeks to create. The above two samples were done in about 2 hours from start to finish.
Hope this helps get you going on wireframing. Leave me comments or Tweet me if you want more details on how I did a particular aspect. I am always more than happy to offer assistance.