A HubSpot Design System: Your New Secret Website Development Weapon

Are you missing out on the advantages of using a HubSpot design system? 

Since you’re reading this, I’m guessing you are. 

A design system helps keep your website consistent across all different kinds of pages. It all provides some guardrails for designers to prevent off-brand design. 

And most importantly: design systems help shortcut website development time AND make it really easy for anyone to make website updates.

In this article, we’ll discuss and show how the right HubSpot design system helps you build every page much faster. 

And since numerous design systems are available for HubSpot CMS, we’ll provide a few criteria to help you choose the best one. 

The Basics: What’s a HubSpot Design System?

So first, let’s answer the basic question of what a HubSpot design system is. 

In simplest terms, a design system is a collection of standards to manage your design work at scale. It creates a shared design “language” and visual consistency across your different channels and media.

Design systems were popularized and given a well-known visual identity of their own when Brad Frost published “Atomic Design.” In the book, Frost broke down all the parts of the web pages we see and use every day:

• Atoms - HTML tags, color palettes, fonts, animations
• Molecules - a combination of atoms; a form label, input field, and button together create a form.
• Organisms - combining different molecule types together to create page sections; for example, a masthead is up of multiple molecules like a logo, primary navigation, search form, and so on.
• Templates - collections of organisms to create different types of pages that can be used over and over. 
• Pages - specific instances of templates, where all placeholder copy and imagery are replaced; it’s how a product page becomes about a specific product vs. just a templated layout for a product page.

The most tangible output of a design system is a pattern library, which are typically made up of molecules and organisms. These are pre-made, ready-to-use UI assets that can easily be combined together.

With this in mind, let’s look at how design systems for HubSpot impact a typical website project starting with the first step of any successful page build: the wireframe.

Marketers and Copywriters can Leverage a HubSpot Design System to Build Wireframes

Answer this: would you rather your designers spend their time creating low-fidelity wireframes? Or using their design prowess to create impactful experiences for website visitors?

Wireframes, while important, are not a designer’s wheelhouse. Why? Because, though the wireframe stage focuses on page organization, the primary goal of wireframing is still centered around copy.

Marketers and copywriters can do this when they have access to modular building blocks (the same ones that will be used to actually build the page). 

They lay out the page using building blocks, then add in headlines, subheads, and body copy while maintaining placeholders for images to focus stakeholder attention on the messaging and flow of the page.

Design Systems Bridge the Gap from Copy and Wireframes to Design

Should a design look at the flow of the page to ensure it makes sense? Of course! Not to do so would be negligent. 

However, a designer's sole focus while wireframing is happening is nailing the visual identity. This means design discovery, aligning themselves with the client’s brand guidelines, and producing what we call a “style tile.”

A style tile is a mockup of what some of the modular building blocks from the design system look like when the client’s styles are applied. 

This visual aid helps paint the picture for the client of what they’re new website could look like. It also aligns them with some of the patterns available to them in the design system.

Design systems can also prevent handoff issues from copy to design. These issues typically happen when copy and design aren’t aligned on what copy is going to look like on the page.

But with a design system:

• Copywriters create page copy with the modular building blocks in mind
• Copywriters layout their copy in the wireframe, so design can focus on bringing brand elements into the modules used. 
• Design time is spent working within the design system to make impactful design decisions.

Trouble-Free Design-to-Development Handoffs

Ask any developer about design-to-development handoffs, and I guarantee they’ll have some horror stories. 

“What kind of design hell have you gotten me into?” is not the type of reaction we want when we hand a page design to a developer to build in HubSpot. 

If it does happen, it’s typically the result of designers working outside of a design system. Fortunately, design systems offer the same benefits for developers as they do for copy and design:

• Using the same modular building blocks as copy and design
• Within the same design system
• Don’t have to start from scratch (which devs love)
• Time is focused on extending modules and making enhancements that will better serve users

Design Systems Offer Additional Benefits Post-Launch

But what about after you publish a page or launch your HubSpot website after building it with a design system?

HubSpot design systems aren’t only beneficial when creating pages. Many brands find it difficult to update their websites themselves because, while the design and development is well done, it’s been coded and stitched together in a way that only a developer can update.

The ideal HubSpot design system should be easy for anyone to use, and here’s why.

Once you launch a page, it begins gathering performance data. Marketers use that data to start identifying tests in layouts and messaging they want to run to increase conversions (or whatever the goal of the page is). 

If you are a designer or developer, do you want to spend your time having to jump in and make every single little edit to a page? Of course not! That’s a waste of your talents and time. 

Marketers should be able to jump and iterate on a page or create split test versions of pages without having to pull in and wait on design and development.

One more example. Let’s say your company needs to create a few simple landing pages for a campaign. You’ll need to tap a designer to create an image for each page, but otherwise, a copywriter or marketer should be able to layout the page, add their copy, and launch it ASAP.

Finding the Best HubSpot Design System: 3 Criteria

When it comes to HubSpot design systems, you really have two options:

• You could build one yourself…but that takes a massive amount of hours IN ADDITION to everything else you already have on your plate.
• Or you can find a HubSpot design system that already exists.

Now, just like the theme marketplace, there are numerous design systems available for Hubspot. 

So here are the ESSENTIALS to look for in a design system to ensure you make the right decision.

1. You need the matching design files that reference all the modules inside the pattern library.

The benefit: you gain efficiencies if copywriters/marketers create wireframes with certain modules that a designer must turn into a design mockup.

2. Having great modules is awesome. But you also need the design solution to be built on a universal code base so you can extend and modify modules as a project dictates.

The benefit: customizing modules to really nail a specific need is much easier and faster than trying to slog through an unknown code base or build what you need from scratch.

3. You need a dedicated productivity app like the Sprocket Rocket App.

The benefit: you can easily swipe layouts you like and rebuild them in the app, then share them across all your portals. This is just one of the many ways to gain efficiencies and unleash marketers/copywriters to be faster.

Work with a HubSpot Partner that Specializes in the Premier HubSpot Design System

You could do your due diligence and search around for the perfect HubSpot design system. 

But did you know you’re reading this on a website of a HubSpot agency that are experts in working with the top-rated HubSpot design system, Sprocket Rocket?

Well you are! Burrows Consulting is a Sprocket Rocket Certified Partner and have been pretty much since the beginning. Phill and his team have produced countless high-quality websites using Sprocket Rocket.

So instead of searching around, here’s what I recommend you do:

1. Create a free Sprocket Rocket account - see what it’s all about for yourself risk-free; test out the app, and build a few pages.
2. Book a demo and consultation call with Phill - Phill will get to know you and what your needs are, give a deeper dive on how they use Sprocket Rocket, and show you how it also benefits you in managing your website after launch.

Shortcut website development (or website migration) time and give yourself the gift of easy website updates with Phill Burrows and Sprocket Rocket.