SharePoint 2013 Branding – Introduction


In January this year we took on a project which required us to brand SharePoint 2013 (actually SharePoint Online) over the next few weeks / months we will post a new part of the series and hopefully by the end of the series you will be all prepped to deliver a Branded solution, if not, you can always get us to do it or you šŸ˜€


SharePoint 2013 Branding is like any other type of Branding and depending on the customer, you will be in varying starting positions, some customers just want you to “make SharePoint not look like SharePoint” others want you to take their very well defined BrandingĀ GuidelinesĀ and use those to craft a beautiful looking SharePoint site.

SharePoint 2013 Branding or SharePoint Online Branding requires a lot of knowledge on how SharePoint works including what Master Pages, CSS, Page Layouts are and to some extend how to manipulate the Client Object Model as well as understanding hows lists and libraries work and the views that present the information. You will also need to know how Web Parts work and may even need to create your own Web Parts to solve a little piece of the Branding puzzle.

What I am trying to say is that the transition from C#.NET developer, PHP developer UX Designer can be quite the uphill struggle and to create an effective Branded SharePoint Solution you have to know the product not just how to code.

In this series we will start with Low Effort Brandng, move to Medium Effort and finally hit Full Effort Branding or what I like to call traditional branding.

For this series we will be using SharePoint Designer 2013 as well as Visual Studio 2012Ā so it is worth grabbing these to follow along and of course the rest will be standard out of the box features


A common problem when it comes to Branding is the lack of Ā time we get to do the Planning. If you have a good Project Manager or more to the point if you have a Project Manager at all then you might get some time factored in for planning but we know this is not always the case, with that in mind one of the tools I find really useful is Balsamiq Mockups, this is something we have mentioned before in our Balsamiq Mockup Template post but we cant emphasise enough how useful it is to present wireframes to a client and have them provide feedback based on the Brandingless design. if you have ever presented a prototype to a client, it is sometimes difficult for visual people to see past the prototype. Balsamiq strips this back giving you a chance to present function before design.

So what is Balsamiq and what does it do?

There are other tools that do this by the way, we just love the simplicity of Balsamiq.
Here is an example of a Balsamiq mockup.


This is the same Balsamiq mockup that was in the post we mentioned above. If we bring this into a real world SharePoint context, take a look at these.


Moving away from the home page, what about a news page.


In the above we are showing the client that once the user clicks through to the news page this is what they will see.

In practice we actually revised the above to have the quick launch display on this page too. which filled the page quite nicely and provided the client with a context based menu on the left hand side.

Happy with our planning so far?

Now we have a basic structure to work with in the next part of the series we will take a look at Low Effort branding and see what options SharePoint 2013 has to help us Brand our sites.


Matthew Hughes
The Kinetal IT Team


Leave A Reply

Please enter your comment!
Please enter your name here