Tips on SharePoint 2013 Branding and UX Design

Hi All,

I had the opportunity to work with SharePoint 2013 Branding and building new UX related components such as: Master Pages, Page Layouts and Content Types development on a SharePoint 365 site or SharePoint 2013.

I found some interesting tips and tricks and i'd like to combine them all in this blog post for End Users, Designers, Architects and anyone who works in SP branding and customization.

Here are some general information and tips to know ahead before getting in creating new UX SharePoint components:

1) If you are new to SharePoint and you want to understand how MasterPages are connected to page layouts and actual pages, I recommend reading this article first:
http://msdn.microsoft.com/en-us/library/jj191506.aspx

2) In SharePoint 2013, You can create your master page in any html editor --> sweet!
3) Once you are signed off on the new look and feel of the new master page in HTML, A good option: you can map the new master page in html with all related javascript and CSS files to the SharePoint Master page gallery, Here is how to do it:
http://msdn.microsoft.com/en-us/library/jj733519.aspx

4) Another option is: you can directly convert the html master page to an actual master page; where SharePoint will create a new file with .master extension and add SharePoint attributes and place holders used by SharePoint, here are the steps using the design manager:
http://msdn.microsoft.com/en-us/library/jj822370.aspx

5) Design Manager is a new feature in the publishing sites, you can use it to brand public facing SharePoint sites and Office 365 sites. Read an overview about How to use Design Manager in SharePoint 2013:
http://msdn.microsoft.com/en-us/library/jj822363.aspx

6) Once you create your new master page, you might need to create new set of page layouts that provide nicer UX to your visitors, This article shows how to create new page layouts in SharePoint 2013 and office 365:
http://msdn.microsoft.com/en-us/library/jj822368.aspx

7) If you want to have different UX for Mobile and tablet users, you should create different channels aka different master pages and page layouts for different targeted devices, this article describes how to implement this in your site:
http://msdn.microsoft.com/en-us/library/jj862343.aspx


Hope this helps, drop me a line if you have any questions or clarifications.



Reference:
- Build Sites for SharePoint 2013:
http://msdn.microsoft.com/en-us/library/jj163242.aspx