The SharePoint Designer

Brand. Design. Amaze.

Sep 25

SharePoint 2013 From Scratch: Step 1, Wireframes

No Gravatar

With SharePoint 2013 starting to take hold, I want to show you how to get your own 2013 site up, running and responsive. Over the next posts I will start at the Design, right through to the deployment. I am going to use my new site for The SharePoint Experience as my demo, but feel free to add in your own images, colours and styles to suit your needs.

Step One: Wireframing your site from Desktop view right to Mobile view.

1.1 Wireframes

Devices

You need to have a blue print for your site. This includes all three (and portrait and landscape) views: Desktop, Tablet and Mobile. I use WireframeSketcher. Designing each view takes time and planning, but it saves allot of time in the long run.  In total, you should have 5 wireframes. Split your designs into three categories: Desktop, Tablet and Mobile.

I always spend some time on Google looking at how different people did their desktop view, and then make my own. Research is very important through out this stage. Get a good ides of how responsive looks and feels.

I have kept my design simple, You do not want to go into MASSIVE detail here, as it is just a blue print for you to refer to whilst you work in Photoshop. Below are my basic wireframe to help you get started. Remember load times, graphic sizes and layout when you start. Many people use data packages, and if your site takes to long to load, you have lost a potential user. See what you can do, if you need help just pop me a mail.

SPX-Desktop view WF-Tablet  WF-Mobile

 

 

 

Tags: , , , ,

Leave a comment

The SharePoint Designer is using WP-Gravatar