Animated Landing Page Concepts
Project Overview
As a design and coding exercise in JavaScript, I coded three different landing page animations based on an idea that I had floating around in my head. The concept at its most basic level is a grid of squares that change color or illuminate one by one until the whole grid has changed color.
Roles:
Visual Designer, Front-End Developer
Simple
This is the first and most basic version of the animation. The script creates "cells" and assigns a random animation delay to each cell.
Color
Next up, the addition of colors. This time the script assigns each cell a random color from a preselected palette as well as assigning a random delay. Finally a masked SVG image is used so that the grid only shows through the letters.
City
For the final variation of the animation, I used an SVG image that I created in Adobe Illustrator. Instead of a script that creates cells, the script looks through the SVG image of the city and identifies windows. Like the previous variation, the script assigns delays and colors to the windows. City lights were one of my main inspirations for the creation of these animations in the first place.
Conclusion
One of the main functions of a landing page is to engage the user and hook them into a website or product. A unique loading animation is sure to be noticed, but at the same time there is a delicate balance that must be upheld. Animations consume time and budget, as well as the resources of a user's device. Slow load times or distracting visuals can often do more harm than good to a digital experience by boosting bounce rates. These worst-case scenarios aside, a user-centered design solution for a landing page will not only build interest, but also benefit visitors directly by reducing cognitive load. I am excited to do more design and exploration into the world of animations, especially from a user experience perspective.