SharePoint Branding – Themes, Master Pages, and Page Layouts

SharePoint 2013/Office 365 Branding – Themes, Master Pages, and Page Layouts

You probably know the story. A company wanted a website based on SharePoint. A company looked at standard out-of-box SharePoint. A company decided to change everything. A company payed lots of money to change everything.

Companies still want a website based on SharePoint. Does the ending to the story change with SharePoint 2013? A Happy End?

Let’s take in from the start.
1. A company want a website based on SharePoint.

The design is set. You know how your new site is going to look like. You probably have a graphic designer or connection to a company that can come up with a fine design made in Photoshop or Illustrator.

2. A company looked at standard out-of-box SharePoint. Their fine new design doesn’t look like out-of-box SharePoint site. Yes, what to do with that nice Photoshop or Illustrator picture?

What are the odds that standard SharePoint looks just like something you want?
I would be suprised, if it actually did. SharePoint offers a few website designs, and I think of them as an inspiration and motivation to do something cool with SharePoint. I don’t expect that my personal branding, my company’s identity can be produced on assembly line.

Design is important. Imagine that all the brands and signs on shops on the main street were gone. Imagine flowers in all shop windows. Wonderfull. But not practical. How would you find a shoe store? You would have to open the door and go inside each and every store to see if they sell shoes. OK, this is probably a bad example, if you are like me and go inside each and every store, always looking for shoes, always looking for everything else too. But, the fact is we do not sell SharePoint and our website is not supposed to look like SharePoint. Intranet sites are also not supposed to look like SharePoint, because we do not work for SharePoint.

I think that we have to divide the “don’t look like SharePoint” problem in smaller more tangible problems in order to solve it. We can’t deal with “don’t look like SharePoint” problem as a one single problem. Also, it is important not to mix and confuse styling, colors and fonts with functionality, master page, and page layouts. We have to divide and conquer. We have to divide look and feel into:

– Theme:
– we want our logo
– we want our colors
– we want our fonts
– we want background image
– Master Page:
– we want site logo to link to start page, not to subsites
– we want another navigation
– we want links on the top
– we want footer on every page
– we want a big banner on the top
– we want breadcrumb
– Page Layouts:
– we want more content zones on the page
– we want a content zone on the right for related links and content
– Styling
– we want 20px or 30px margins
– we want larger headings (H1,H2,H3..)
– we want border around content

3. A company payed lots of money to change everything. Yes, we all want to change that 🙂
In the following, I describe “the old way” as a way we’ve done branding with SharePoint 2010, and I describe “the new way” as a way you also can do branding with SharePoint 2013. You can mix the new and old ways as much as you want 🙂 You can also decide that you only want different Theme, or that you want Theme and Page Layouts. It is completely up to you.

Theme:
SharePoint 2013 comes with a very nice feature “Change the look” that enables you to set the fonts, background image, and colors. You don’t need knowledge of HTML. I wrote about SharePoint Themes in my post SharePoint Branding – Themes. I also recommend ThemeBuilder app at SONJASAPPS App Store or Microsoft Office Store that helps you define colors and fonts.

Master Page:
At this point of time, there are two ways of changing the master page:
– The old way: taking a copy of existing one and changing the parts you want to change. You need both HTML and SharePoint skills to do that.
– New in SharePoint 2013: Use Design Manager: you need your whole site made with HTML, and than you need to use time to implement the design.

Page Layouts:
There are two ways to do page layouts:
– The old way: Hire somebody to do that.
– New in SharePoint 2013: You can buy layouts as an app.

I made Simple Pages app 12 ready to use page layouts for Office 365 Small Business public facing site.

Here is the SimplePages app video:

 I also made PublishingPages app with 18 ready to use page layouts. It is also available at Office Store.
Here is the PublishingPages app video:

Click here to see the PublishingPages app at SONJASAPPS App Store or Office Store.

Styling:
There is the old way: making a special stylesheet with special styles to define headings or borders.
The new way: The new “0 customization” way, is supposed to be “no styling, no custom design” way.
As I said before, it’s up to you.

Sonja Madsen was a speaker at the ESPC13. This blog was first published on Sonja’s blog here.

For more expert information on Branding check out the eBook ‘Professional SharePoint 2010 Branding and User Interface Design Chapter 1 Introduction to SharePoint Branding‘ by by Randy Drisgill, John Ross, Jacob J. Sanford, Paul Stubbsa and Larry Riemann. Download Now>>

 

SharePoint Branding - Themes, Master Pages, and Page Layouts with Sonja Madsen

SharePoint Branding – Themes, Master Pages, and Page Layouts with Sonja Madsen

Share this on...

Rate this Post:

Share: