An Analysis — Vanholtz.co
An in-depth analysis of the UI/X and Site performance of Vanholtz.co; A Web Development Agency designed by Brijan Powell and Developed by Eric Holtz
VanHoltz Co. Studio of Eric Van Holtz in Portland, OR specializing in refining digital web experiences with a focus on animated responsive and interactive content; you call it a Web Development Studio, fully remote.
In an interview by FWA with Eric Van Holtz he talked about how he wanted the site to be a clear representation of what his bio is “delivering refined digital web experiences with a focus on animated, responsive…”
February ’18 when Brijan Powell was looking to team up with a few select developers in designing their portfolio site. Eric Van Holtz happened to be one of the few selected.
The bold design choices with colors, typography to the 3D motion and micro-interactions stand the site apart from others. One key thing Eric and Brijan encountered while building the site happened to be working with CSS 3D Transform Perspective, Text and browser and device compatibility.
You may not have noticed that as you scroll the list of projects on the homepage, its perspective origin is fixed to the left middle part of the screen. That was the first challenge to work through as typically the origin points of an element is local.
Pairing that with animation, rotation, font outlining & smooth scrolling revealed many browser inconsistencies especially when applying a 3D perspective.
Eric: “there were many seemingly simple interactions & text formatting obstacles that arose during development, hyphenating text is not well supported, text-stroke had rendering issues with web font at certain sizes and links hovers & click events were problematic due to 3D rotation and perspective properties.”
Tools Used
The Designer Brijan is a die-hard Photoshop user.
For the site, most of its tools were custom made;
- Basic Scroll was tried as it allows you change CSS variables scroll position. You should try this out if thinking of animation in your next web project. Link1 Link2
- Flickity makes carousels, galleries & sliders that feels fly and effortless, used for image carousels. Link1 Link2
- Barba.js was used for the AJAX/XHR & page transitions, Barbar.js is a small minified and compressed and easy to use the library that helps you creating fluid and smooth transitions between your websites page, minimizing HTTP requests and enhancing your user’s web experience. Link1 Link2
VanHoltz Co. smooth scrolling technique mixed with custom eased animation makes the site's experience feel smooth and natural.
I first noticed the wave effects on the site on my first visit…
HOW? Hover over the project links and scroll at the same time. There are so many nuances throughout the site and UI interactions.
UX wise the site feels more like an app where hovers and transitions between contents feel fast and fluid.
PERFORMANCE INDEX
The site performance of VanHoltz.co would be determined on the
- Site Speed
- Mobile Friendliness
- Performance
- Usability
- Best Practices
This report was built using several Google 3rd party tools & Awwwards audit tools & services for metrics, web performance, optimization and best practices for mobile design.
TEST TOOLS
- Google Analytics
- Webpage.test.org
- Lighthouse
- Page Speed Insights
TEST DETAILS
- Test Location: Dulles VA USA
- Browser: Motog4 Chrome
- Connection: Mobile 3G (1.6Mbps / 768kbps 300ms RTT)
- Number of Runs: 1
A personal test I did use one of Google’s third-party tools
Awwward has set a standard for determining a site’s index performance as seen above. How do you know a Jar of Milk from Nasco is better when you haven’t really taken time to try out Peak, Kelloggs, Qio.
Portfolio sites like that of Eric’s are quite a number and looking up a few in slight comparison with Van’s wouldn’t be much of a night-boner, just for, you know… (see below)
(Let’s share the best portfolio sites we’ve seen in the comments)
List of Awards and Recognition
ADDY —
- Best of, Gold, Silver
Awwwards —
- SOTD, Developer, H.M.,
Nominations: SOTM,
Independent of the Year 2018
Communication Arts Web Picks —
- SOTD
CSSDA —
- WOTD, UI, UX, Innovation,
Nominations: SOTM, SOTY - CSS Winner
- SOTD
FWA —
- FOTD, Public Short List
W3 —
- Best of Show, Gold, Silver
The Vanholtz.co Website Analysis Published by @ekeminimarkk
Sources: — Awwwards, David Ofiare, FWA, Twitter, and Self thoughts.
Read my article on Design Empathy, Getting Started with XD, Google’s UIUX Design Pattern, etc.
Hold the Clap Button and Drop a Follow+
