The Vessel Theme

Build a sleek, completely customizable website with the Vessel! This HubSpot website theme accommodates all the needs and customizations you could want – without the need for a designer or developer!

Comment

Inspiration

The Vessel was built in 3 different stages; concept, design, development. We first looked into what type of theme we wanted to create. We asked ourselves, what type of design and what kind of modules do our customers typically want to see? The answer was - interactive and sleek. Our designer took inspiration from a vacation in Manhattan, New York. She was captivated by the architecture and knew she wanted to incorporate flowing curves and subtle animation.

What it does

The Vessel theme is a flexible theme that contains a multitude of custom modules. The theme itself uses a combination of the theme settings and designed layouts. Within the theme settings, you can pretty much change the design of each individual module. As your settings are adjusted - the module’s classes will be updated and reflected globally. This theme was intentionally built to be used by multiple types of businesses and doesn't fit the mold to one type of company. Because of the true customizability - it can be the perfect fit for anyone’s company.

How we built it

Once we started the design, we decided to design in a more module approach. We designed multiple modules in a Figma file, everything from a simple two-column to pricing tables. We wanted to ensure we captured every type of module a customer would need to really make their own unique site. Next, we begin to figure out which modules/options needed to be truly separate. Since HubSpot has a limitation on the number of modules you can have in a theme - this was our biggest challenge… figuring out where we could condense and consolidate.

When we were ready to get started on development - we begin the same approach from design, modules first. We started off by creating a framework module that included all the standard pieces we include: section styles that include padding options, background color options, background images, light/dark section styles, etc. From here we used the mockups as our guiding light for which modules to start with, what the options should incorporate, how the end results should look, and debugging. All at once, we repeated this process for every module that was built. We started off with basic theme settings and made sure to utilize those theme settings as much as possible to incorporate them into classes for the modules. While we have options to provide a fully customize module - we needed to ensure that theme settings were being used to help clients remain consistent with their branding guidelines.

Challenges we ran into

We truly hadn’t experimented with the functionality of the fields.json file so this is great to become a happy challenge. We decided to expand, re-arrange, and organize these settings. We completely restructured the JSON file about a week before launch. However, thankfully since our modules and code were organized from the beginning and since we utilize variables for 90% of our stylesheets - updating the paths for the theme settings didn't take too long. This is something we will be continuously working on to create efficiencies in our future projects.

Accomplishments that we're proud of

We’re proud of many things from this project. Our biggest takeaway has been pushing boundaries. Our team decided to do something very different from the start at design. We wanted to incorporate a style we hadn't seen before and we are proud that we made it to the finish line - even if it was at the end of the wire. Working on this project hasn’t been our only focus, as the only 2 developers in our agency, we both had to find the balance to work and prioritize this project along with many of our other clients. We started this project late but with teamwork and dedication, we have learned many valuable tips that will ensure we are successful in future projects.

What's next for The Vessel Theme

We hope we can use this theme for future projects and are hoping that clients can create their own unique sites. We are eager to add to the “Customers Who Use this Theme” section and/or find ways to improve this theme once we gather some feedback. Our next goal overall will be to begin a whole new theme with a new design and continue our primary goal - to help companies transform their businesses.

Built With

Share this project:

Updates