Creating a Design Package for SharePoint 2013

Design Package is the lightweight option to create a branding solution (a .wsp file) that can be imported to any Site Collection via the Design Manager. No centralized farm deploy is needed (nor possible, though), which makes it THE way to brand SharePoint Online sites and possibly other hosted or singled out different-than-the-rest-of-them Site Collections (used e.g. for marketing campaigns or such), especially since sandboxed solutions are not the way to go anymore.

While the pros of Design Package are obvious - easy to create without VisualStudio, easy to deploy without farm administration - there are also a couple cons to it: 

• Design Packages consist of a set of files uploaded to a Site Collection, and unless the creator of the package maintains the original Site Collection where the package was created, thus maintaining the package versioning, there is no versioning or managed package file store. On the other hand, the package itself is easy to import to an empty Site Collection and after the changes are made, exported as a new Design Package. 
• Since there is no coding involved, and no centralized deployment either, there also is limited automatization of MasterPage settings; basically setting the defaults for Device Channels in Design Manager before creating the package. With publishing sites this is less of a problem since they follow the MasterPage settings of the Design Package. But with Foundation sites, as it has always been, they need manual configuration (i.e. activating the publishing feature) to get the desired look and feel.

Pros and cons stated, time to get on with the actual tutorial. 

What you need first, is a clean Site Collection with no prior customizations, MasterPages, extra images, try and fail -files, nothing. An out of the box publishing Site Collection.

Next, you need to create your design and collect whatever media files you might need. The desing basically would consist of

• one or more MasterPages (HTML or .master, either one is fine)
• none to several PageLayouts (you can create these as HTML files to be converted, or copy an existing one and modify it to satisfy the requirements)
• none to several Display Templates for modifying the Search driven web part item templates (the easiest way is to copy an existing one and modify that)
• a CSS stylesheet (or several, depending on how you build your possibly responsive design etc.)
• optionally a JavaScript file (or several) if you wish to implement JavaScript in the UI
• images for the UI graphics and maybe the logo

You can create the design in SharePoint Designer 2013 where you have easy access to the MasterPage Gallery and you can create and upload the required files inside of the Site Collection - but mind you that SharePoint Designer 2013 doesn't have a wysiwyg-editor (Design view) anymore.

Or you can create an HTML MasterPage design (see the tutorial) with the editor of your choice, and then upload the files the MasterPage Gallery (found in the Site Settings) using the browser to do it. 

Design Manager

Having come this far, time to talk about the Design Manager. It is the management center for the Site Collection design and is found in Site Settings, under Look and Feel. 

In Design Manager you can

1. import a design package (.wsp) or pick a pre-installed look from the themes gallery
   
2. manage/create device channels, which means assigning different channel setups for different devices. The channels can be assigned different MasterPages and they can be used in PageLayouts to target content to different devices - or even browsers [See Jussi's excellent article for more information on this one]. The channels are included in the Design Package.
   
3. find the link to the MasterPage Gallery (_catalogs/masterpage virtual directory) to upload your design files
4. create a new (minimal) MasterPage or convert HTML files to MasterPages and open the MasterPage in preview.
5. edit Display Templates, i.e. download them for creating your own ones by using copies of the existing ones
6. create a new PageLayout or convert HTML PageLayout files to .aspx PageLayouts
   
7. be reminded to publish your design files if they are to be used in the the current Site Collection. This is not necessary if you are creating a Design Package. Also, on this page you have the link to changing the MasterPages for different channels; these settings will be included in the package and take effect once the package is imported to a Site Collection.
   
8. create and export the package to be used in other Site Collections. Note that this includes all the imported files (as in non-standard-SharePoint files), thus the clean OOB Site Collection. If you used some unnecessary files for e.g. trying out some design etc. remove these files before creating the package. You can include the Site Collection search configuration in the package too.
   

Once your package is done, you will see a link to download it on the Create page.

[More articles on SharePoint 2013 Branding,
e.g. Going HTML with MasterPages?
How to Create an HTML MasterPage for SharePoint 2013
How to Create HTML Page Layouts for SharePoint 2013

The Anatomy of SharePoint 2013 Display Templates
How to Deploy Display Templates via SharePoint feature]