Envy Labs

envylabs.com

Code

Image of source code.

When inspecting the source code, I've been able to discover several levels of CSS stylings applied to each of the pages. The ones that stood out to me the most are applied to the images. The first thing I noticed is the number of CSS classes applied to the images and the consistency of the CSS Grid Properties which is a new experience for me. There are also CSS classes created to indicate animations with consistent stylings using the transition property in various settings. Along with these transtions are properties for opacity which give the fade in-fade out effect which is consistent among the interface.

User Interface - UI

Screenshot of user interface.

The user interface for this website contains a good amount of animations. As you scroll through the page, there is consistent motion, created by transtions of otherwise still elements. With the amount of movement on the website, it does not create confusion in usage or hiearchy. The contrast of color is clear and well balanced. The choice of font is an easy to read, san-serif font called "Doctirine", one specifically noted to contain a contemporary yet human character.

User Experience - UX

Screenshot of user interface.

The user experience of this website overall, is engaging and enjoyable. There is movement consistently as the user scrolls down the pages. The images, though completely still, have been styled in a way to give them animations which are engaging. Even key headings in the bottom navigation have underlines which expand when reaching them to give the consistent animation throughout each page. Every hyperlink or button changes when hovered. Larger image or article links have several stylings applied which seem to give the user some control over the page animations themselves. Overall, the Envy Labs website gives a user experiance that feels very personalized and engageing.

Summary

The Envy Labs website is full of CSS stylings that can be examined and studied for increased inspiration of the possibilites available to developers. The naming conventions of CSS Classes, along with the overall structure of the coding in general, is clean, clear, and easy to understand, making it a great resource. The overall structure of the UI and UX is impressive, easy to use and engaging. Envy Labs has done a good job of creating a Website that delivers the products and services which they themselves are marketing.