How to Create a Custom Master Page Using Design Manager in SharePoint 2016 - Step by Step?

What is Design Manager in SharePoint 2013?
Design manager is a nifty tool introduced in SharePoint 2013 that uses HTML based approach to convert static HTML templates into SharePoint master pages and page layouts. Use Design manager, if you want to implement Branding and customization to your SharePoint sites. The overall idea of SharePoint design manager is: Have your web site template prototype designed by someone who is good at web design and then you use that HTML file to convert to SharePoint Master page. Lets have a SharePoint design manager walk-through.

Enable design manager in SharePoint 2013:
Design manager is enabled by default in SharePoint server publishing sites. You may have to activate publishing feature for other site templates to enable design manager in SharePoint 2013. Design manager is available only in SharePoint Server 2013/2016 and Office 365.

SharePoint 2013 design manager permissions
Make sure you have at least "Designer" permissions in order to start using the Design Manager.

How to open design manager SharePoint 2013?
You can access design manager either from Site actions menu or from site settings page as in the below screen! Design manager URL: /_layouts/15/DesignWelcomePage.aspx

You'll get Design manager wizard with below steps:

Welcome

Manage Device Channels

Upload Design Files

Edit Master Pages

Edit Display Templates

Edit Page Layouts

Publish and Apply Design

Create Design Package

Among the above steps listed, we need only three steps to create/customize master pages in SharePoint 2013. Lets see how to use design manager SharePoint 2013 to create a custom master page.

Step 1: Upload Design files

Working with design manager in SharePoint 2013 is quite simple. Go to Upload Design Files: On this page it will ask you to map out your drive so that you will be able to use any HTML editor to access your design files in the future for editing. Here is how to map network drive setup for Master pages library:

In Design Manager, Click on "Upload Design Files" tab. You'll get the URL to map to network drive. Copy it to your clipboard.

SharePoint 2013: Design manager - map network drive: Go to Start >> Right Click on "Computer" and then choose "Map to network drive". Enter the URL you copied from SharePoint Design Manager and then click on "Finish" button.

This opens your Master Pages library in Windows Explorer view: http://intranet.crescent.com/_catalogs/masterpage/,
Its
a good idea to create your own folder in Master Pages library to keep
all your files in one single location. I've created my folder "Crescent"
there!

Once you map you map a network drive to the Master Page Gallery folder, it gives you easier way to save files in the correct location.

Upload Design Files
Now upload the HTML version of your Master Page and all CSS, JS, image and any other design assets to the mapped location. The overall idea of Design
manager is: You create a visual design for your website by using any web
design tool or HTML editor, and then use Design Manager to import the
design into SharePoint. To do this, you have to make sure that the
design tool stores its files in your site’s Master Page Gallery,

A master page defines common elements
across all the pages of your site. You can use the network drive you
mapped earlier to edit your master pages using any HTML editor. To
preview your master page, click on its file name or status. While
previewing your HTML master page, use the Snippet Gallery to get code
snippets for SharePoint functionality that you can copy and paste into
your HTML file.

Wait for a while, and your HTML master page should be converted with an extension .master page. Once converted you will see the converted Master Page in the List with the status Conversion Successful. If you encounter any warnings or errors, use this link to troubleshoot: https://msdn.microsoft.com/en-us/library/office/jj822362.aspx

Modify the master page to wrap inside content place holder:
Now, Click on the "Index" file to see the preview of the HTML master page generated. If you scroll down, You'll find this below:

This div, which you should delete, represents the content area that your Page Layouts and pages will fill. Design your Master Page around this content placeholder.

Which simply tells you that this content place holder in the HTML file should be wrapped inside the appropriate content place holder of your HTML template file.

SharePoint 2013 design manager snippets
Once
the master page is generated, the next step is to add SharePoint
functionality to the master page using snippets. Snippets allow you to
take SharePoint widgets and plug it into your master page. E.g. Search
box, Top Navigation Menu, etc. To Access snippets, Click on your HTML
master page generated, Click on "Snippets" link at the top, Pick the
required component and then copy the code to your Master page using
SharePoint designer or some other editing tools.