Skip to content

Heavy Element 2.0

  • Gardiner B.

I'm so pleased to announce that version 2.0 of our website is now live! This site is the culmination of months of work and I'm so proud to be able to present it to you here!

Have a gander and be sure to check out the new and improved portfolio section!

Design Philosophy

With version 1.0 of heavyelement.io, we set out our design philosophy: tell our story through web design and punchy copy. And our design language was "unorthodox angles."

With verison 2.0, we wanted to build upon our existing design language while also refining, focusing, and upgrading everywhere possible. While we kept the header's skewed angle, the rest of the site is a little more traditional in order to draw focus to the information we're trying to deliver.

Speaking of information, the biggest change we've made is how we order and present it. We've put an emphasis on bold callouts and showing rather than telling. It's a known fact that when people are presented with a wall of text, they're likely to scan the headline (and, if you're lucky, read one or two headings) and then move on.

With that in mind, our job here was clear: make an impactful first impression with every section of the site. I feel like our landing page does exactly that! See for yourself!

Landing Page

Let's Make a Splash

Our landing page starts with the Splash Panel. It features the header with its iconic angled backgroud, our logo, and some navigation links.

Landing splash

Behind that angled background (something that was not trivial to achieve in a web browser), we have a sizzle reel of Heavy Element video content accumulated over the last few years.

Then, our motto and a call to action. "We're here to help you tell your story. Click the big, fun button to get started!"

What We Do

The next big change here? The What We Do section. We're calling out the work we've done for our clients and our own YouTube channel right up front.

What We Do section

At the bottom of the screenshot, you can see this information was pulled four hours ago. These numbers are synchronized from the YouTube API. Our site is configured to do this periodically.

As of the time of writing, Heavy Element has managed to accrue over 1.3 million subscribers across nearly 2,000 videos and a total of 46.4 million views for ourselves and our clients.

So if you're interested in finding your audience, we can help.

Bento, Bento, Bento

Another major addition to our design language was the inclusion of the bento grid. What is a bento grid? Well, it's a means of displaying links and other information visually in a tidy grid. Inspired by Japanese lunch kits, this is a new and exciting trend in the world of web design.

Ours is a bespoke implementation and this grid is fully customizable from our backend. We can upload background images, rename, re-order, and resize grid elements, even inject custom SVGs... all without having to push a major change through our version control system!

And we can even control the order of grid items as it falls back to a column on mobile.

Bento grid

Call To Action

Finally, our landing page wouldn't be complete without a call to action. Here, we have an asynchronous form that invites you to reach out.

Call to action

This form has a playful feel where each element will scale when mousing over or focusing within a field.

In fact, that's another new addition to our design language: scale and rotation. We wanted to tell our story with the design of our site. So we did. How?

It's simple: we think that what we do is fun. From web design to video production and everything in between. And we think that that joy should be infectious. So we tried to reflect the fun we have in every corner of our design. The rotation and scaling, the skewed lists, the bento grid items that pop out, the subtle parallax effects as you scroll. To us? They speak to the joy that we derive from our work.

Other Pages

Services

While we offer many services, we wanted to focus our list of offerings to our most in-demand services.

Services layout

That's why we completely overhauled our services page. Now it focuses on our video production, logo and branding services, and web design. Yes, we still offer full-service web hosting, and we'll still manage your email server and domain name registration. And we'll even shoot and edit a wedding video for you. But we also don't want to overwhelm you with irrelevant information. Most people come to our site to see what it is we do. And what we most often do are the big three: video production, logo and branding, and web sites.

Thinking Outside the Client

We've done so much work for clients across Maine and beyond but our previous site didn't accommodate presenting that work in a sensible fashion. So we've introduced typed portfolio browsing. Now, instead of grouping our portfolio by our clients, you can filter our portfolio items by the type of work. For example, you can view website, video production, or logo design!

There are others, too. So stay tuned as we present our proudest designs through our website!

Dudelings: Arcade Sportsball

I'm also proud to announce the products section which features our upcoming video game Dudelings: Arcade Sportsball (available to wishlist now on Steam)!

Dudelings is the first of the "sportslike" genre. It's a high-scoring sports-adjacent punch-em-up that delivers fun and exciting gameplay for up to two players!

Ready up for a new game of sportsball today by wishlisting Dudelings on Steam today)!

Moving Forward

There's more to discover here on the new heavyelement.io and this article covers the basics and the highlights.

But there's one last thing... one behind-the-scenes feature that we've been working on.

That feature? Scalability.

We've been building websites for years at this point. In that time our skills have grown. We've developed a strong sense of design and an eye for detail, but the best thing we've learned is how to write maintainable code.

Heavy Element 2.0 is built on top of Cobalt Engine, our web design framework that was built from the ground up to facilitate the creation of beautiful and performant websites and applications.

Cobalt adopts an MVC (model, view, controller) approach to web development. This approach gives us the ability to separate the information, the appearance, and the logic into distinct, easily maintainable sections and combine them when requested.

Cobalt's new PersistanceMap framework offers a powerful new way to approach MVC design. And with it, heavyelement.io (and all our client's sites and applications) will be more scalable, more stable, and more capable!

What this means is that we will be able to iterate faster, develop with more confidence, and deliver on time and under budget.

So, welcome to heavyelement.io 2.0 and stay tuned for new and exciting features coming soon!