A website is arguably a company’s most important online marketing tool.
In many cases, it is the first impression of a brand, the platform which delivers a company’s service, and for eCommerce sites, the sales experience.
What’s great about them is that they’re the perfect canvas to mix creativity and technology together and that’s where the real magic happens — if you let it. Take a look at any website featured on Awwwards — they’re bound to leave a lasting impression.
But why do some businesses go to such lengths to create these sites?
Because websites are an effective and powerful platform to communicate your brand message and differentiate yourself from others in the marketplace.
And – perhaps more importantly – a website is never finished either. There are always things that can be improved based on things such as user experience, A/B testing results, and more.
Often, the best way to improve your website is by incorporating emerging tech trends, one-of-a-kind creativity and strong functionality.
After all, if yours is as interactive as a paper pamphlet, it’s probably not creating much brand recall.
Table of Contents
How Major Tom Married Technology & Creativity On Their Website
There are over 644 million active websites on the world wide web right now, so it is more important than ever before to stand out to consumers for the right reasons.
Luckily, there are plenty of examples of brands bettering their sites that you can learn from.
Let’s look at Major Tom, one of the leading digital agencies that realized they could lower their bounce rates and increase leads by redesigning their homepage and infusing it with some modern design elements.
When Major Tom enhanced their new homepage, they wanted that “wow” factor. Not to simply surprise and delight the user, but to really showcase their brand’s mission.
With their Creative and Development departments collaborating closely, Major Tom was able to bring their brand message to life.
The video below gives you a taster of the homepage if you haven’t seen it yet, but how did creativity and technology come together to achieve the outcome?
When one of Major Tom’s web developers, Michinobu, held an internal showcase on Three.js and showed them the original Waves animation, Darren, their Creative Director, instantly saw it as a great way to represent Major Tom.
Moreover, by developing it further, it had the potential to communicate with future clients what working with Major Tom is all about.
Although the original version was titled “Waves”, Darren never saw it as that. Instead, he viewed it as an undulating and rolling landscape.
Each sphere represented a possible strategy, tactic, channel, medium, technology, software, agency — you name it — that’s available to marketers. It captured the complexity of the marketing landscape with its infinite number of options.
The horizon line that runs through their branding was also evident in the original animation, strengthening the link between the animation and their brand.
So, Major Tom had the creative vision — now they needed to dive deeper into the technology.
A comparison between a still camera and the illusion of the camera moving forwards.
Three.js
Three.js is a JavaScript library and API which allows developers to create 3D graphics on a webpage. It’s essentially a framework that sits on top of WebGL.
Although you can use WebGL to render interactive 2D and 3D graphics, Three.js does a lot of heavy lifting. The online library is great for handling the intricacies of WebGL animations and provides the basic framework to get developers started.
For the non-developers reading this, the library is a fun place to play with all the interactive and awesome 3D effects developers have shared on it.
Essentially, Three.js lets developers – like Major Tom – create slick graphics within a more user-friendly 3D environment. With Three.js being based on JavaScript, developers have the ability to control factors like the angle and the perspective of the object the user sees.
For example, does Major Tom make it so the 3D object is moving and the perspective on the camera is static or does the camera move around it?
So, Major Tom had Three.js giving them a head start on developing their landscape compared to developing a 3D object with pure WebGL.
But was their homepage developed in a relatively short period of time? Definitely not.
Although Three.js provides the tools and a starting point, there is a steep learning curve to master it. Developing 3D objects will always have challenges.
Adjusting the camera angles and movement, the speed of the spheres, transforming the animation so that it was just right, it took a lot of math.
And we mean a lot. If we had one meme to sum this up, it would be this one:
There was certainly a constant cycle of trial and error, but after several months of hard work and complex equations, the desired effect was achieved.
However, Three.js wasn’t the only animation platform used.
With the complex marketing landscape captured, it was time to communicate the website development agency’s purpose within the homepage animation.
To do this, the vision was for all the moving spheres to drop into a line. Calming the environment and creating the breathing space so the right products and solutions are picked in order to get clients to their end goal.
To transform this idea into a working visual, Greensock was brought into the mix.
Greensock
Greensock is an HTML5 animation platform that Major Tom sprinkled into the homepage for some seamless animations and sequencing.
They used it to flip the dotted landscape around, bring in the row of spheres, highlight what the four spheres at the end represent, and the call to action takeover at the end.
Compromises
Almost everything in life requires some compromise. Whether it’s wanting a compact camera with a zoom lens or wanting to reach a large audience with your social media ad campaign with a small budget.
Combining creativity and technology is no exception. The best thing you can do is identify what’s most important and prioritize it.
For example, instead of having the landscape disappear and animate in the row of spheres, the original vision was to have them drop down to form a line.
However, to develop that required a significant amount of time on top of the several months it took to complete the entire homepage animation.
Taking a simple cost-benefit perspective, this effort wasn’t worth the extra time. Especially when Major Tom could effectively communicate the same message in a similar manner.
When technology and creativity come together, the possibilities are endless. It pushes back boundaries, raises the bar, and creates a lasting impact.
The great thing about websites is they are the perfect canvas to combine the two.
So, ask yourself, is your website doing your brand justice? Is it setting you apart from your competitors and providing a delightful experience to your users? If not, it’s time to reassess how effective your website is and how effective it could be.
Want to learn more about how you can leverage creativity within your website? Read ‘The power of creativity and the website that never was’.
Plus, are you looking for a top-rated digital agency to revamp your site with innovative technology? Contact Major Tom HERE for a quote on their services.
A version of this article was originally published on Major Tom.
