Like a Covid-cut it feels really good to have some new flow.

Hello Helio! Much like the rest of the world we’ve been in quarantine and you know what they say about idle hands. We resisted having a go at our quarantine-mane with the craft scissors in our junk drawer. Instead we set our sights on something we’re qualified to makeover; our Navigation!

We’ve been pushing updates to our marketing pages over the last few months and thanks to many of you, they’re looking better than ever. With all the iterations we quickly outgrew our top nav, it was looking neglected and inconsistent.

The Navigation was always on our to-do list, it was the “and if we have time” item. The cherry on top of our homepage sundae. We’d daydream about how awesome it would be, how the logo would be balanced and the menu would be clean. It would pull the whole page together and delight our customers. Only we never “had the time”, until we made time!

This week we said “Enough! We need a haircut to complete the Navigation.” Here’s how we transformed our top nav; inside and out.

• Focused on quality. As we dug in, we realized that we had some alignment issues. Our sign up/sign in buttons, our logo, and our menu were all trying to do something different. It was especially noticeable on mobile. So we began to develop rulesets.
• Pushed past the pixels. Lowercase logos are tricky to center, so we focused on the x-height to create the correct balance. We also have a big ol’ “O” at the end of our wordmark, which made us consider our kerning. We avoided a cold, mathematical approach to spacing our typography, and pushed past the pixel for a more optically pleasing alignment.
• Delighted ourselves! Once our designs reached the hands of our developer, even more magic was unleashed with some amazing transitions and logo animations. We updated our SVG logo by splitting it into individual paths for each letter. This allows us to do fun animations like when the navigation changes color, we flow the letters in progressively. If you want to know how the code works, let us know.

We’re beyond happy with the current iteration and are already thinking about even more ways to take it to the next level.