The SharePoint Designer

Brand. Design. Amaze.

Oct 20

SharePoint 2013 From Scratch: Step 3 – Designing your content

No Gravatar

Time to make things happen with your SharePoint 2013 design.  You might want to catch up with us, so down load the .PSD file, or if you have been following this serious, you will want to get your design loaded in PhotoShop.

Here we are: This is how our design looks currently:


So we are going to continue designing, but in this step we will be focusing on the content area. In the PhotoShop template it has a left and right column. In your layers area, find the Content Area group and expand it. You will see the Getting Started, Left Column and Right Column groups. I make the Getting Started group invisible, and I dont touch the other two groups – They representing web zones and some example web parts, which we will colour change up, but leave them as they are.


Content Area PhotoShop Layers before changes



Create a group called ‘Top Span’, I would create it as the top sub group in the Content Group. We are treating this as a 2 column span top area to put content in (content query web parts, content editor web parts)

Top Span

Create the Top Span Group

Visualize your content layout with a header and a two column area webzones.

Content Web Zone Layouts

Content Web Zone Layouts


Add a new layer in the Top Span group, and get creative! Because the zones are not limited to the number of web parts used, you can really go mad,n but remember that the top section adds web parts vertically and the two columns add vertically as well. And of course the most important rule… You design it, You code it! Don’t design a sky castle when you only have the tools for a pent house (no content query web part, other Enterprise addition web parts, page layouts or functionality)

This is what I came up with with the Top Span area to show an image representation of a highly HTML’ed content editor web part design.:


Also you cab ignore the Top Span area completely and have just two columns, so my design for this layout looks like this. I am showing you the use of other web parts, or just adding simple text to your site (design wise it is hood practice to show the content layout even if it is just Lorem Ipsum)


Send me what you did so I can post it to show others what can be done :)

Here is the completed PhotoShop file for you to use and play with. Next up, we dive into the coding side with SharePoint Designer 2013.



Tags: , , , ,

Leave a comment

The SharePoint Designer is using WP-Gravatar