Loading ...

Responses by Eric Van Holtz, developer, Van Holtz Co.

Design core: The website’s refined design consists of the beautiful typefaces Neue Haas Grotesk and Freight, bold colors, and high-impact visuals. Oddly enough, purposeful animations and interactions help the site stand out among today’s more trendy visual effects and keep the website feeling timeless.

Navigation structure: The header/navigation expands and collapses based on being at the top of the page or scrolled down, and will change colors based on the page content background colors. Page sections include down arrows to scroll you to the next section’s content. At the bottom of pages you're able to go back to that section's main content.

Special features: The home page has an autoplaying and interactive featured work section. A unique page transition is used when going to a featured project and back to Projects, which is the home page scrolled to this section.

Technology: The website is powered by Craft CMS and Craft Commerce Lite. Highway is used for AJAX loading of pages and transitions. Locomotive Scroll is used for smooth scrolling, parallax and observers. JavaScript, GSAP and CSS3 are used for interactions and content animations. Flickity and Isotope (with imagesLoaded) are used for slideshows and masonry UI layout. Development dependencies and optimizations included: Webpack, Babel, Laravel Mix, Sass, Imager, Font Face Observer, lazysizes and more.

Anything else? Websites that make heavy use of videos and high-quality, fullscreen images require a lot of asset optimization, content loading and performance. One of the first things you see on the website is one of many randomly selected videos. Those videos are also used for page transitions between different sections.

All images are optimized for the visitor’s screen size using Imager and srcset along with lazy loading of images with animated reveals. There is a balance between bandwidth, performance and visual quality, which is especially important for design agency websites. A considerable amount of effort was devoted to making sure visitors will have a consistently good user experience on a majority of devices and connection speeds. These optimizations are not developer requirements but are best practices that should always be strived for.

works.studio

Browse Projects

Click on an image to view more from each project
X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In