If you're a regular HubSpot user, you've probably used the platform's design manager before when creating content and templates. If you're unfamiliar with it, design manager is a collection of tools you can use to build and store templates, CSS files, Javascript, and other custom modules. With it, your web and marketing team can create aesthetically-pleasing and functional websites that are easy to edit.
When first looking at design manager, you may be overwhelmed by the number of different tools it has, and how to use them. However, as a HubSpot partner agency, we're design manager experts and have spent countless hours using and innovating its tools. Here are the most important things you should know.
What Design Manager Can Do
As briefly mentioned, design manager is a place where you create and store your templates and other custom modules. You can create templates for a variety of purposes like emails, blogs, and webpages. For the sake of this article, we'll focus on how design manager can help you and your team create a functional, editable website – with or without an in-house development team.
That's right. With design manager, you can build out the structure as well as the look and flow of each template that will later be used for your website. You can create these templates in three ways: using pre-built ones from the marketplace, partnering with a HubSpot agency, or creating them scratch yourself. As you can see, there are options for companies that have internal development help and those you do not. Whichever method you choose, design manager is built to help you achieve success. However, in our experience, having some development insight or partner helps turbocharge this success.
Tips Before Using Design Manager
Before you open design manager's toolbox, there are some helpful things to get out of the way first:
- Decide how you'll create your templates – pre-built, in-house, custom, or with a partner
- Be sure your web and marketing teams are aligned with overall objectives (i.e., what do you hope to achieve with your site and each individual template)
- Determine how many variations of templates you'll need to create in design manager (i.e., different versions of your homepage, individual service pages, etc.)
- Study everything available in design manager
- Keep up with new features
What's Included in Design Manager
Knowing what's available in design manager is vital, so we'll spend some time going over that tip. The best way to approach the tools you can use in design manager is to divide them into two categories:
- Tools that developers and non-developers can use
- Tool more relevant to developers
First, here are the tools that everyone involved in your website project should know:
Finder
The finder is a space where you can create and organize all your files, templates, modules, and folders. Think of this as the place where you keep everything regarding your website. That can quickly build up, so it's best to use a naming convention to keep everything organized. You should also consider creating a new naming system for every website redesign project you tackle.
Layout Editor
The layout editor in HubSpot's design manager is an easy drag-and-drop interface a developer or non-developer can use to build a template. You can also use it to rearrange modules on pre-built templates you've purchased from the marketplace.
Layout editor's goal is to provide a simple, flexible method for anyone who wants to build a template. It's perhaps best used for those who don't have a development team because it's easy to both create and maintain your templates with it. However, if you choose to work with an agency partner, you may not come into contact with the layout editor (or any parts of design manager). In this scenario, you'll have to work together on organizing your templates. That being said, it's still wise to get acquainted with the tool.
Module Editor
With the module editor, you or your agency partner can create reusable custom modules to set up advanced functionality on your site. Modules like these can be added to a template and customized in the page editor without any code.
While the set-up of these modules may require some technical know-how, they can still be managed by non-technical managers. For example, with the module editor, a developer can build a customized module for the header of your homepage template on the backend that is easy for a marketer to edit on the front-end. With this tool, your marketing team will never have to touch HTML but will still benefit from structure custom modules they can change whenever they need to.
File Manager
Your website is comprised of several different assets, and the file manager is where you store them all. It allows you to upload all your PDFs, images, videos, audio files, fonts, and more. Like the finder, it's smart to come up with a naming convention to keep everything organized. The more assets you have, the more a naming convention is.
Design manager also comes with a set of tools that are more technical, and will likely only be used by developers. Here is an overview of them.
Inspector
The inspector tool allows you to edit the properties of a template, module, or group. It's dependent on the task you're performing as well as the file. Your development team may use the inspector for functions such as:
- Add new components to a layout like CSS or coded files
- Add new fields or link to coded files
- Add details to make templates and modules more easily searchable
Code Editor
With the design manager's code editor, you can build coded templates for your website. These are made from scratch and written entirely in HTML. To use the code editor, you will need internal development help or an agency partner.
Read More: Eight Design Trends for Your Inbound Website
Final Advice
HubSpot's design manager is built to make your lives as web designers and marketers easier. With tools for developers and non-developers alike, there's something that everyone from your team can use. Even if you're uncomfortable diving into it, the more you understand design manager and its offerings, the easier your templates will be to create and edit.
When your editing experience is straightforward for your marketing team, you'll be able to keep up with the ongoing evolution of your site. However, just because it's smart to get to know design manager doesn't mean you need to go it alone. Working with an agency partner like LyntonWeb can help enhance your experience with the tools. Reach out today to learn more.
