Attention to detail, wow factor and a timeless design approach make the new site by The-Artery a must study for anyone interested in mastering digital couture.

Everything about this site tells the story of a multi-disciplinary design team grounded in time honored principles. Take the very first 3D model that greets the user. Against a sea of minimalist black and underpinned by a responsive grid, our eyes are drawn to the center of the screen as a commanding sculpture of Hercules spins and pulses. Accompanied by a brass orb and wireframe, with multiple light sources, our historic hero’s right shoulder explodes and retracts to reveal the 3D polygon structure underneath.

On the surface this element looks pretty damn cool. Under the surface however there are multiple connotations at work that instil a sense of grandness and strength. Grandness that equals premium quality in the minds of visiting clients and strength to imbue a sense of trust.

To help users move on from being transfixed by Hercules, The-Artery team have added the word “SCROLL” with a line animation at the left of screen plus a bouncing down arrow to the right. Both of these not only improve the UX dramatically, they visually balance the logo and menu graphics above them. Just above the bouncing arrow sits the words “01 Visual Effects” in large type to add page hierarchy while the designer has chosen to move this title down-screen just a tad. There is a thinker at work here.

So we scroll. Instead of the usual micro-second of discomfort that comes when preparing for content, we are met with another central hero character. Thankfully there's no need to fuss with the mouse wheel to line up the content thanks to "scroll locking” smoothly providing the perfect landing position on the page. Love it when des/devs do that.

This time there’s a two-part hero consisting of a hand holding a film reel that is floating above a hand holding a clapper board. There’s a more even mix of marble and brass which seems to feel good on the eye. The text next to it says “02 Film & TV” but we guess to most users this is a second-time viewing element because the rewarding experience so far makes us want to see what other cool characters are waiting for us. It’s like showing the deserts before the main meal.

No doubt potential clients are reaching for their credit card already but we’ve come this far and the adventurer inside our brain is saying “more”. Plus it’s only been like 5 seconds in the real world.

Next we’re pleasantly surprised to see some wit with the next 3D hero. It’s another marble bust, this time of King David wearing uniquely styled brass VR goggles and a subtle but cheeky smile. Very cool. The-Artery crew are obviously trained, experienced and probably under-appreciated by most clients.

Our last hero is more left-field but by now anything goes. To help make sense of what's on screen we finally look around the rest of the page and it’s here that first-time visitors will likely discover the back-up text title which clearly states “04 Design Lab”. The pieces of the puzzle are falling into place nicely thanks to the simple yet effective flow of events thus far.

Let's stop the clock and quickly recap before moving forward.

We’ve got classic black and brass, a responsive grid, marble statues and advanced 3D animation. The UX is as simple as pie and although we haven’t seen any text or standard content, we’ve been tantalised by wow factor that is almost as humble as it is amazing. Ok, got it. Start the clock again.

After a nice experience sampling the deserts we are ready for the main meal and we feel compelled to scroll to the top and delve into the first section titled “Visual Effects”.

It’s here we see the full force of the responsive grid and are beckoned to explore. Designers and developers will appreciate the merits on this page so be sure to hover and move around each square to absorb what’s going on. The best gem is the parallax infused image effect. So smooth and hover-responsive with just enough lighting to add ambiance. Be sure to hover off the images then on again to see the micro-zoom before going corner to corner. Divine!

There’s a new trend that’s been creeping into sites lately which is featured here. It’s the replacement of the standard hover hand for a small dot. We like it... but are not sure how the average user will react. On one hand the multiple hover effects should remove any doubt that the dot leads to more content - simply clicking will train the most un-digital of people in one go. On the other hand it probably doesn't matter considering who The-Artery builds sites for. I think we can safely say they are not targeting Grandad's country store with this site ;)

So we click on Beyonce and are met with big full-page visuals, a link to a video and just enough text that we might actually read it. A big X button top right guides us back to the main content page if and when we are ready to exit but we also have the option of clicking through the sections via the arrows. This reduces the need to go back and saves a few nano-seconds of time. Scrolling down reveals the popular “load on scroll” revealing tons more content to browse and soak up. Hang on... this is only the visual effects page. There are three more to go and we still haven’t even clicked the menu button. This site is like Dr. Who's Tardis.

Thankfully the other sections are consistent with the first and we can relax and enjoy looking at what these talented peeps have achieved. The user has travelled a fair journey thus far and although the path has been simple to navigate, we feel we have assimilated a lot of polished information and cool stuff. Good designers know when to pull back on the wow factor so they don't risk overloading the user.

Hitting the about page brings a slightly different take on the content by featuring more text blocks, snapshots of the crew and seven core points of difference for working with The-Artery. At the bottom left is a touch more parrallax with the call to action “Let’s work together”. A nice closing statement that is again understated but says everything that needs to be said.

Outcome:

The new site for the-Artery is best compared to a contemporary art museum. Just like their architectural counterpart, the way the content has been presented in The-Artery’s site is interesting and different yet no deep thinking is required to figure it out. The crew have taken great works, unique ideas, a heap of wow factor and an obvious love of classic design principles - and turned it into a timeless piece of digital art. Attention to detail and a dash of humility bring it home for the New York team. Absolutely splendid!

Tech:

• Framework - Angular 4 + Typescript
• CSS written in SASS
• Animations built with anime.js
• plyr was used for video components
• Slideshows were generated via flickity.js
• Typing effect was done with typed.js
• vanilla-tilt was used for the tilt effect
• node.js & express.js was used for the Backend

See it here The-Artery Portfolio