Interaction Inspiration at Cloud for Week 1, 2018

As examples of exceptional visual and experience design, this week we look at two sites that do an especially great job at evoking the essence of their respective presences in the real world.

MAGIC LEAP | https://www.magicleap.com

Stop number 1 is magicleap.com. This company looks to be dreaming up the future of augmented reality, applied to business and play. As best as I can tell, they are putting out a product that is a beacon of progress in the world of augmented-reality gaming, shopping and online discovery.

Their website really supports this vision, by presenting visitors with a browser experience that gives users a peek at what the Magic Leap experience of 3D, augmented reality can be. The site is immersive—edge-to-edge—and a study in minimalism that carefully presents to visitors the look, feel and experience of their product through a set of succinct messages, visual imagery, animated art and minimal user interaction.

I actually had no idea what these folks did prior to hitting this website, but after a few minutes of easily taking in content, my interest was piqued, I began associating the product with excellence and innovation and, above all else, I was truly compelled to learn more and figure out what I was missing out on by being in the dark.

There was one moment, scrolling through the long, story-style desktop presentation of their product, where I was transported momentarily to the realm of 3D experience that Magic Leap is selling. Half-way down the page, where their Creator Portal is introduced, a steam-punk-styled, floating, robot character is presented as animated video. The effect of this character’s appearance as it pops from the stark, minimalist layout surrounding it is truly compelling. For a moment you are transported into the world of the Magic Leap One, and get a tease of what awaits you in augmented reality. It’s subtle, but a magical touch—perfectly aligned with brand and promise of the product.

Check it out at https://www.magicleap.com, and be sure to have a look on your phone, where the experience is actually even further enhanced. It’s a truly great mobile-first experience, with a number of technical tricks that work around phone limitations for interactivity and video experience that support their product even further.

ROCCAFIORE WINERY | http://www.roccafiorewines.com

Stop number 2, is a website for a far different industry than tech—a winery in Umbria, Italy. Another full-bleed experience, this one boasts visual design of a pedigree befitting the finest wine packaging and contemporary architecture that make up the real-world experience of the Roccafiore estate and label. While navigation discovery may leave some less savvy users struggling to find their way around the site, the overall impact of the visuals and animated interactions found at this site present the estate to website visitors in a way that transports the user to the grounds, and evokes the passage of time and history of experience of grape cultivation at an old-world European vineyard.

Unique (and uniquely mobile-friendly) page layouts set this site apart from the vast array of prototypical, scroll-y, responsive sites on the web today. Layouts and visuals borrow strongly from print design, and excellent use of typography (Bodoni is in there, a classic Italian font) and whitespace yield a polished, luxurious exploration of both the geography of a region and the qualities of the Roccafiore estate. You can’t help but be taken on an excursion to Italy by a visit to this elegant site, found at http://www.roccafiorewines.com.