Envy Labs Review

ENVYLABS.COM

Code

As I was inspecting this webpage, I noticed on the navigation that when you were on a certain page, an arrow icon would appear on the page you are currently on as it floated slightly up and down. I decided to inspect this code as it reminded me of our project last semester with the swivel svg that would appear when a user submitted an entry form and it began to load. As I inspect the code, I found the image source and it sure enough was a svg. To make this function, they used the animation property with linear infinite alternate value and transform with none. They also these properties made for smaller devices as the navigation changes into a pop up with the icon on the right pointed at 90 degrees and floating rather than pointed upward. It was nice to inspect this code as it was a refresher for something we covered last semester and also something fun to include for my future projects.

UI

What I really liked about this user interface was on the case studies tab, each div had the same structure but what stood out to me was the image would be slightly outside the box until your mouse would hover over the div, bringing the image to fall perfectly aligned with the box. This looks like it was achieved by the developer as they made a class named "case-media" using the transform property (transform: translateY (-0.8rem)) to push it out of the box. Then they used the transition property so that the box floats into box by 1.2 seconds. Once I turned this off, the image does not float into the box as smoothly and it is instant.

UX

As I explored through this website, I found it very smooth to navigate through, the design is very well organized and not too flashy where it draws my attention away from what the website is providing. One of my experiences that I really liked was on the insights page, it provides multiple articles that have to do with tech. What I really liked most about this page is the category section where you can check mark a category and will provide articles relating around the chosen category.

Summary

Overall, this is a professional website and well put together. The websites includes quite a bit of animations such as the cubes that float in a certain direction where your mouse is and has quick load screen at every time you enter or refresh the page and I believe that could be created using some javascript. Eventually, I hope to be able to add certain details to my future website that this one has to make mine more unique.