The landing section of a website speaks volumes about its identity and by extension, the identity of the company it belongs to. Thus, as we sought to redesign our website for 2021, we thought about what we envisioned our corporate identity to be in the year 2021, and channelled it into an interactive website landing we developed ourselves.
Without elaborating on our harshest reflections from 2020 (I’m sure we all had a difficult time), we decided to start afresh with many changes and recommitted to our objectives as a company this year. For sure, Oangle is first and foremost a web design and development agency, and our secondary services include other digital, creative and web services. Without a doubt, the web, including interactive web development, is a core focus of our company — as much as 90% of our projects are web-related.
As such, we told ourselves — 2020 was difficult, and while we might not be able to make the world a better place in 2021, based on our many years of web experience, we are confident in contributing and making the web a better place. Hence, our new tagline — Building A Better Web World.
There are 3 main components to the interactive website landing we developed:
1) The Moving Gears
The first component of our interactive web development masterpiece are the moving gears. These image assets are all scalable vector graphics (SVG) layers. These SVG layers, rotated in a lightweight format, are less heavy than videos and GIFs, which are better for the site’s speed.
These gear assets are rotated at different timing intervals to signify the various mechanics and parts behind a web development process.
2) The Light Bulb
The second element of this interactive web development masterpiece is the light bulb. The light bulb flickers to a start in the beginning using a simple glow (fade) animation, with precise and controlled timing to mimic the unstable flickers of a light bulb when it first starts up, and grows to a more consistent glow. This light bulb represents ideation, and on top of that, it has a simple map on it to signify that every single website helps to light up the web world.
3) The Hidden Layer of Code
Lastly, we have the hidden layer of code as a secret touch to our interactive web development piece. Have you ever wondered about the codes required for a website? Here at Oangle, we are confident web developers, and through this interactive hover effect, we attempt to show you a glimpse of what goes on behind the scenes of an interactive website. What makes it cooler is that the codes in the background are animated videos and furthermore, correspond to the exact section in the overlayer!
Interactive Web Development’s Our Thing
With a mixture of different forms of media and a complex combination of different kinds of interactive effects, we were able to achieve a landing section that delivers our message. In fact, there are several other little messages and interactive surprises in our landing — try to spot them! Mouseover any portion of the landing to see the underlying code (it’s responsive too — just click). Feel free to share your thoughts on our landing and whether you feel it does a good job of bringing our message of building a better web world across. In addition, if you’re looking to have similar engaging landing sections for your own site, don’t hesitate to drop us a line. We’d be happy to take on any web or interactive web development related tasks and help you in any way possible.
