The new Heavyelement.com

It’s been a little over a year since we unveiled the new design of our site. I wasn’t anticipating creating a complete overhaul so soon. Yet here we are. And honestly, it was overdue.

Why did we make a change? Well, there are several reasons.

1 — Cobalt Development

Cobalt is our in-house, free & open source web engine. Most of the websites we build for our clients use Cobalt as a base and, as such, the pace of development for Cobalt is very fast.

As such, when we create something new for Cobalt Engine, we want to show it off on our own site. There were several new backend features — including Persistent Models — that we wanted to make use of here on our site.

2 — Technical Debt

Our previous redesign was new, but it wasn’t entirely new. We were re-using a ton of styling code from our previous design.

And, granted, we are re-using some styling code here, I’ve personally reviewed every line of CSS and removed so much code. Prior to this latest build, our CSS file was nearly 10,000 lines of code. Now? main.css is a mere 799.

I’ve also retired several pages on the site. All this frees us up to build new things!

So what’s new?

Well, the obvious thing is we’re running a dark theme, now. We’re using Cobalt Engine’s new color themes as well as Cobalt’s new dynamic templates.

That’s right we’re dogfooding our products—always have, always will.

Organic Shapes

The landing page and much of the other content on the site have organic shapes. Check out the landing here. It looks fantastic.

We’re also using the CSS mix-blend-mode to screen transparent colors onto the background. We love how this looks and we’re hoping you do too!

Portfolio Promotion

In the previous design, we ran into an issue with having too many links in the main navigation. It caused the page to overflow and it was annoying.

We’ve solved that issue, now, and I’ve placed the Portfolio back in the main navigation. We could do a popout menu (in fact, our engine supports generating them dynamically), but I personally find them annoying to use so I try to avoid them.

Dark Mode

Every iteration of our site’s design has been utilized a light mode theme. This is because I have always personally felt that light designs look more professional and clean.

However, I wanted to try something new and really stretch as a designer.

That’s why I put together a dark theme for Heavy Element.

I’ve gotta say, the new look feels smart, fresh, and modern.

Conclusion

Well, that’s everything I wanted to cover when it comes to the development here. Thanks for reading!