7Wonders

Homepage
Our Services
Our Team
Our Values
Book a Demo
Contact Us

Inspiration

We were inspired to create 7Wonders for a few different reasons. One of which, our guiding principal as an Agency is to lead with passion and always remain curious. Second, was to really stand out with beautiful colors and imagery. We wanted to design with an extremely high visual aesthetic — bright colored images to inspire, but at the same time inspire users, to actually set images and find images that are most suitable for their brand.

What it does

The 7Wonders theme is good for both David and Goliath, helping small and big firms alike. It's affordable luxury, giving you a custom-like website for a fraction of the cost of one. It allows you to create a content hub featuring both related content and crosslinking throughout.

The Styleguide: We visualized our style guide to allow users to set all parameters for their brand upfront. The Modularity: Each module is assembled for endless modularity to fit together like puzzle pieces.

One of the main focuses is on modularity and scaleable alternates, allowing you to build a variety of different pages and layouts. We also wanted to address all types of audience so we've put a number of flexible options into these modules. We've edited things to the same level of modularity for all custom modules across the board. Since we're a brand development agency, we've also created a unique feature in the way we've built our global style guide. It gives you total freedom, while staying on brand. This is important for those that start playing around and realize either the colors don't look well together, or they've went too far with what they've chosen.

How we built it

After brainstorming our theme internally, we wireframed and designed all components in iterations prior to assembling broader templates. Using HTML/CSS and JavaScript, interconnected with HubL, we build out all global and custom modules. A differentiator in our styling was that we used a framework called TailwindCSS, which massively reduces the density of code and improves performance (like crazy!).

Challenges we ran into

There were a handful of challenges that we ran into.

We realized we couldn't use HubDB, which limited our ability to really make the theme sing.
Creating a theme that's very modular while still looking uniquely designed is a HUGE challenge
Writing copy that was informative yet creative
Working around the HubSpot framework limitations for the modules while also giving ultimate flexibility for the user
Trying to scenario play with an endless amount of permutations without use cases was challenging.
Building something that looks custom but extensible is hard.

Accomplishments that we're proud of

We're really proud of the way it turned out -- it looks beautiful, there's creativity and we didn't have to sacrifice the strategy as we were able to factor in so much. It looks like an amazing website that can become anything you want it to be. Beautifully designed. It's fast. It's performant.

What we learned

Everything takes more time. Even if you think you're good, always buffer in an extra 30%.
We learned how powerful HubSpot CMS is!
The importance of making sure you are super clear in the actual editor so that people have full clarity in how you edit and how everything flows.