How to build better designs in HubSpot

Posted by Mariana Morales on July 20, 2016 at 11:27 AM

In HubSpot

You choose HubSpot as a marketer and/or designer because it provides you with a strategic inbound platform that combines excellent marketing analytics with the ability to build your website, landing pages and emails on the same platform. You may have a grasp on building using the template builder or you may be new to the product. 

One thing is for certain, if you are like our team, you are always looking for ways to get better at what you do. 

This is advice straight from our certified HubSpot COS designers on how to build and developer better designs in HubSpot. 

 

Use HubSpot Inspire

HubSpot created their designers “Inspire” page to help marketers and designers expand the possibilities of design innovation. You can explore other HubSpot partners designs and marketing strategies to get ideas that will inspire yourself and your team. Click here to visit HubSpot’s Inspire.

What we love about Inspire is that it shows you how a HubSpot website can expand from a module drag and drop system into visually beautiful and strategically functional web design in the right hands.


Plan and organize

This should be a no brainer, that said, the more you have planned the better you can conceptualize your template and then your design. Outside of HubSpot you should create a wireframe and mockup of your design, a good place to do so is using Photoshop so that your developer can later splice that design into the HubSpot template. Concentrate on planning out each section, header, footer and then body for all your newly designed pages. If you are creating the template yourself, take a look at the modules needed, are there any you can make global to use across your different web pages? Take these things into account before you start developing your website or landing pages.



Use Content Staging

Content staging is a new function to HubSpot, it is especially great for using during a redesign/relaunch of your HubSpot website. Content staging allows you to choose an existing page or to create a new page. You can then stage your content on these individual pages without pushing it live, it’s a great function for editing and reviewing with your marketing team. Once approved you can push your site pages live.



Use Global Groups and Modules

Global groups are important to develop so that your can use the same header and footer across all of your templates, be that web pages or landing pages. Global groups are ideal for consistency and for saving you time.

Global modules will make your life easier. A global module means that any module you create, specifically your customized modules can be made global to use across all of your templates. This saves you from copy and pasting coding on every template.



Hire a HubSpot developer

HubSpot has made their design manager and drag and drop builder as simple to use as possible, but that hasn’t negated the need for extra HTML/CSS coding and the need for customized modules to meet your specific design needs. HubSpot offers a certification for developers, to ensure that they are experts at navigating the platform and their own HubL language. A HubSpot developer can help your design come to fruition quickly, smoothly and functionally.

 

To help you build out your HubSpot skills further follow along with the below tutorially. One of our HubSpot developers will walk you through how to splice your PSD design into a functional and winning HubSpot developer. 

how to build HubSpot templates from a photoshop design file