Envy

Envylabs.com

Code

Digging through the code for awhile it looks like they used Grid for most of the site layout. I had never heard of lazyload before so I went to find out more. Seems it delays images, video, or other content from loading until they are actually needed. This uses less data/bandwith. And images never scrolled past are never loaded. This apparently create better performance on mobile devices as well and lower server costs since not every bit of content is loaded for every visitor. In this case images. Pretty neat.

UI

I liked the loading screen between pages, it made the transition between pages a little cleaner in my opinion. The layout for this site flows well and is not all over the place making it simple to browse through and consume chosen content. Their use of white space and typography really helps guide your eye through the content naturally. Navigation is to the point with minimalist design. In mobile I feel it's a little jumpy though, there could of been a more smooth transition like the rest of their site.

UX

There's a lot happening on this site. The more I scroll through the more I understand the usage of lazyload. With so many images on their site the loading and server usage could of made their site really slow. From what contrast information I could find it looked like at minimum they were above AA. The search functionality seems well thought out, with clear feedback and helpful placeholder text.

Summary

Looking at Envy Labs' website, three main things stand out. First, their code shows attention to performance with features like lazy loading and Grid layout, making the site efficient. Second, their UI design creates a clean, professional experience with smooth transitions and cool animations. Finally, their UX decisions are thought out well in how they handle loading states, search functionality, and content organization. Together, these elements create a site that's not just nice to look at, but actually works well for users too.