The SharePoint Designer

Brand. Design. Amaze.

Sep 26

SharePoint 2013 From Scratch: Step 2, Designing the top banner

No Gravatar

Today we are going to take our wireframes and make them “a reality”. So lets get started. I did a search to find a Photoshop template of SharePoint 2013 and found this fantastic one from Erik Swenson. It saved me a huge amount of time. Also check out his site for the SharePoint 2010 version. You start off with a vanilla view of SharePoint 2013, all in layers so everything is easy to find and work with. And we are going to go from top to bottom.

SP2013_Layers

 

As per our wireframe, our top area has a logo, top navigation, a top banner image and a rotating text area. In Photoshop, we are to design and “populate” those areas.

WF-Banner-Top

SPTopBanner

Change the banner areas background color if you want to. Then, in the logo area, place your logo image (size doesn’t matter but try not go over 200 px in height), so you will end up with something like this. You also want to more your top navigation group to the position you want it. Many people put it at the top of the page, but I am rather prone to using it as a design element and place it under the logo, and blend it into the top banner area. In my designing of the top banner, I decided the text area didn’t work below the navigation, so I moved it above the text area to fill up the white space between the logo and the image. You need to play with the design till you get the feel and look that you want.

SPDesignTop

I always suggest that you design what you can code. In SharePoint 2013, there is no design view, so you don’t want to go too extravagant , but you don’t want to be too boring either. If you just want a colour change, rather use the themes and logo settings that come out the box in 2013 as in 2010.

I don’t usually use the left navigation on my landing pages. So that is why the wireframe doesn’t have one, but I have included some simple design examples for it.

LeftNav

Since the content area is a post on itself due to the magnitude of designing for it. That will be the subject of my new post. I hope this has started you on the right path of designing for SharePoint 2013, please don’t feel restricted to my design examples. Have fun, let loose, and let your creative energy flow.

Tags: , , , ,

Leave a comment

The SharePoint Designer is using WP-Gravatar