A common requirement for many SharePoint projects is to apply some sort of custom branding to a site. However, many SharePoint admins and Web designers found that trying to apply branding to SharePoint proved to be a bit of a challenge, especially with regard to knowing what placeholders needed to be present on a master page for it to work properly. Microsoft is looking to remedy this in SharePoint 2013 with the Design Manager.

The Design Manager is basically a wizard that walks you through the basics of creating custom-branded master pages and page layouts for your publishing site (the Design Manager isn’t available on sites without the publishing features activated). You still have a lot of work to do, but Microsoft has tried to make the process much easier than it used to be. The idea behind the Design Manager is that Web designers can create an HTML mockup of what they would like their SharePoint site to look like in whatever Web design tool they are comfortable with, then convert that HTML file into a SharePoint master page.

You can access the Design Manager directly from the Site Actions gear. On the left side of the page are the various steps you’ll be working through. Step 1 is basically an introduction, so you likely won’t be spending much time here.

Step 2 of the Design Manager allows you to set up various Device Channels, which allow you to have a different master page applied depending on the browser that is accessing the site. This is a topic for another article, so let’s move on.

In Step 3, you are given a URL for mapping a drive on your computer directly to the site’s Master Page Gallery. In SharePoint 2013, the recommendation is to put all branding assets, including images, scripts and CSS, in the master page gallery. (In past versions, the recommendation was to keep master pages and page layouts in the master page gallery, and have images CSS, and scripts in the Style Library.)

Use the URL you were given in step 3 to map a drive on your computer. In the master page gallery, create a new folder for your branding assets and copy your HTML files, images and CSS into the newly created folder in the master page gallery.

Step 4 is where you will actually convert your static HTML file into a SharePoint master page. Click on “Convert HTML file to a SharePoint master page.” In the “Select an Asset” dialog, navigate to your folder in the master page gallery, select the HTML file, and click Insert. SharePoint will convert the HTML file, and it will appear in the list of master pages. If you see that the conversion wasn’t successful, go back through your HTML and make sure it’s XML-compliant (properly closed tags, correct usage of quotation marks, etc.). Click on the file name to see a preview of your HTML file in SharePoint. You’ll notice that there is a bright yellow <div> tag at the bottom of your page. This is a placeholder for the contents of the site that will be rendered in a page layout. You’ll need to move this to the correct location.

Open your Web design tool and browse your mapped master page gallery drive for the HTML file you converted (don’t open the master page. SharePoint will sync up any changes made to the HTML file with the corresponding master page file). Scroll through the code on the HTML page and find the following <div> tag: <div data-name=”ContentPlaceHolderMain”>

Select that <div> and all its contents, cut it from the page, and paste it to the proper location in the HTML, where the content of a page would appear.

Save your changes, return to the preview window in the browser, and refresh the page to see the change. If the yellow block is positioned correctly, you can remove it by deleting the <div class=”DefaultContentBlock”…> tag from within the <div data-name=”ContentPlaceHolderMain”> tag. Next, use the Snippet Gallery to add SharePoint controls to the page, such as navigation and search.

On the preview page of your master page, click on the “Snippets” link in the upper right corner to open the Snippet Gallery. Here you’ll be able to select various components of a SharePoint site in the Ribbon and copy the blocks of code for each component to paste into your HTML file. In your HTML mockup, you probably have static HTML placeholders for things like navigation and possibly the search box. You can select these components in the Snippet Gallery’s ribbon, copy the code, and replace the HTML placeholders on your page with the code block.

When you save the page and refresh the preview window, there is a good chance that the default SharePoint styles don’t quite match up with what your original design looked like, so you’ll need to make sure to update your CSS to override the out-of-the-box CSS for some of the SharePoint components with your custom branding.

Once you’re finished adding snippets to your HTML file, you can move on to step 5. This step is for creating and editing display templates, which drive much of the search-derived content in the site such as search results or the content by search Web Part. Display templates are a topic for another article, too, so we’re going to skip over this one and focus on the rest of the Design Manager.

In step 6, you can create and edit custom page layouts. You can click on the “Create a page layout” link to add a custom page layout to your site. In the “Create a page payout” dialog, you’ll give it a name, choose its corresponding master page and define its content type. Once the page layout is created, you can click its name in the page layout list to see a preview of it, similar to the master page preview. Depending on the content type of your page, you’ll see some preconfigured fields show up. You can use these fields if you want, or remove them depending on your design needs. You can open the HTML version of the page layout in your Web design tool and make your changes there, using the Snippet Gallery to add components like Web Parts or Web zones. This process is identical to creating a master page.

Once you are happy with your design, you can publish and apply the master page to the site. That’s what step 7 is all about. Really, it just gives you links to the master page gallery and the master page settings, which you can access outside of the Design Manager. If you have a lot of branding files to publish (a lot of images, for instance), you can use the Site Content and Structure tool to publish all your design assets at once. Click the Site Actions gear > Site Settings > Content and structure. Browse through the site to the master page gallery and publish all the files in your branding folder.

Once your master page and corresponding files have been published, you can apply the master page to the site. For step 7, you can click the link “Assign master pages to your site based on device channel” to open the master page settings. Or, from the Site Settings page, you can click on the “Master Page” link. If you have device channels set up, you can apply a different master page. If not, simply select your custom master page for the Site master page (and for the System master page if you want), and click the OK button. Just like that, your site now has your custom branding applied to it.

The final step for the Design Manager gives you the ability to create a Design Package of your custom branding, which is basically a WSP file that you can deploy to other site collections. If you create a design package, you can also import it to another site collection using the Design Manager. The link to do so is found in step 1.

This was just a very brief introduction to the Design Manager in SharePoint 2013. Although it still takes a bit of work to get a custom design implemented, the structure and wizard-like nature of it should help designers get their designs up and running in SharePoint with less effort than in previous versions.

Ryan Keller is a consultant specializing in branding with SharePoint911, a Rackspace company.