Envy Labs

EnvyLabs.com

Code

I was curious how the Envy Labs home page displayed geometric shapes which moved away from the cursor as it's moved across the page. Upon scrolling up and down the page with the developer tools open, I saw that line 167 changed from "cubes cubes--canvas aos-init" to "cubes cubes--canvas aos-init aos-animate" as I scrolled. Underneath this is a "canvas" element, which I found out is an element used to draw graphics in a web page using JavaScript.

Envy Labs Code snippet
The code responsible for displaying the animated geometric shapes on the home page

UI

I enjoyed how the cards animated and changed color when hovered over. The text changed from black to a color which matches the image, the image slides into place from its original offset position, and the words "View Case Study" appear at the button of the card, making it clear what the card itself is linking to. Additionally, the left side of the card contains a descriptor of what the particular case study is about, and the ">" symbol on the right side of the card becomes a full arrow (→) when hovered over, further emphasizing that this card is a link to another page.

Cisco card in its hover state
A card for Cisco Networking Training as it appears when hovered over

UX

Each page of the website contains animated content that appears only when scrolled down and remains on the screen without disappearing again, making a user feel as though they are "discovering" the content as they scroll. There are also elements such as buttons, links, and other details that change color when scrolled over, further making it feel as though the page is being created as you explore it. The "All Insights" button below remains dark green until the user scrolls down far enough, at which point an animation changes its color to a brighter green and draws a line to the right edge of the page, making it appear to be activated by the user's activity. I find this to be a very satisfying user experience, especially since the animations are all very smooth and sleek. The entire experience of using the website feels easy and accessible.

A button which changes color when scrolled over
The "All Insights" button turns a brighter shade of green when scrolled over

Summary

Overall, I found the design of this website to be very satisfying and easy to use. The green color pallette gives the site a bright feel, and the various animated features make it feel very satisfying to explore the site's content. The UI is all very straightforward and makes navigation throughout the site's various pages easy. The site feels very modern and presents a positive, fresh image and feel for the company.