Don’t believe everything you hear.
Elvis doesn’t live.
The are no aliens in Area 51.
There really was a moon landing.
And not all websites look the same.
The only truth is that the myth prevails. Some people believe that modern websites, while clean and well presented, sometimes lack individuality; like numbered flats in an apartment block, different only through their wallpaper and furniture.
That was the challenge we set out to debunk, and prove that HubSpot’s COS, just like any other platform, can accommodate and communicate whatever brand identity you choose. As an inbound agency, we create and publish original (and hopefully memorable) content on behalf of our clients, so we wanted a website to reflect our creative personality.
Our train of thought went something like this…
We’re Squaredot. That’s a pretty visual name don’t you think? A lot of people smarter than me, say that really helps jog recall. So we wanted play on that visual identity in our website design. And what better contrast to highlight a square and a dot than a bed of triangles?
And we wanted to bring the user experience to life, so we gave it a third dimension and made it ‘breathe’ colour…lots of colour.
We wanted an engaging user experience, so we threw in some little rewards on rollovers and clicks, here and there. Our developer played around with HubSpot’s Website Platform and delivered an optimised responsive site that uses SVG & CSS animations, integrating original form styling and customised blog filtering.
For the initial home screen we used CSS keyframes to animate a series of SVG background images that fade in and out on top of each other. The gradients and colour choices on these backgrounds help make it look like the background is morphing.
On top of this is the logo which is made up completely from CSS shapes. Keyframe animations are then applied to the individual shapes which allow the different parts of the logo to react when interacted with. Creating this effect was challenging within HubSpot as the HubSpot CSS minifier strips out the number 0 from CSS keyframes which makes it impossible to loop animations. Although we eventually figured out a work around here.
The full screen slide effect on the home page is achieved using fullpage.js. The animations on each screen are more CSS animations that are triggered by fullpage.js once a particular section is loaded.
All home page sections were made editable within the Website Platform using HubL. All inner pages are based around a grid layout created using bourbon neat and all content areas are editable within the Website Platform and use repeater fields for easy management.
For the blog we utilised topics for each blog type and filtered them on screen using isotope.js to create a same-page filtering effect. The forms on the contact page and elsewhere on the site are styled versions of HubSpot’s own forms.
We followed well founded inbound principles and kept the value proposition front and central. We spoke in plain English throughout. You wouldn’t talk without clearing your throat, so why write in mumbled industry jargon? Besides, copy shouldn’t sounded copied. To carry any worth or meaning, it should sound natural.
We set out to prove that we could build a unique website that clearly define who we are. Did we achieve it? Feel free to drop by our website and let us know what you think.
It wouldn’t feel right if you left without a goodie bag. Something to remember us by. So feel free to take home a copy of our B2B Content Creation Masterclass with you.
