Loading ...

Responses by Damjan Krajacic, creative director and lead UX/UI designer, ActiveColor.

Background: The Neverlands website is anything but ordinary and conventional. As a self-proclaimed “purveyor of the world’s most extraordinary and innovative hospitality experiences,” the website is home to some of Los Angeles’s most stunning nightlife venues: The Edison, named among top bars in the world; and Clifton’s, a historic Los Angeles cafeteria turned nightlife venue. The site is visited by Los Angeles patrons as well as people worldwide seeking to explore the city’s nightlife. While there is a variety of people coming to Clifton’s and Edison in person and online, they are all seeking the extraordinary—and expect nothing less.

Design core: Intended to inspire above all, the site provides a glimpse at the experiences inside The Edison and Clifton’s, their events, and includes the ability for restaurant patrons to purchase tickets and buy a select number of unusual products through the website. We translated the magical and curiosity-driven quality of the physical spaces to the digital experience through the use of custom hand-painted illustrations by Shannon Stamey that we helped art direct—especially keeping in mind how they would be used on screen with parallax effects and mouse-movement. The art of the illustrations uniquely defines the website style; we built upon this idea throughout the site through manipulation of other artworks and assets, in addition to programming a lot of custom animations and interactions. We are very happy how this whole imaginary world evolved and that we were able to build it into a functional, cross-platform experience.

Challenges: An incredible amount of time was invested in the storytelling behind the illustrated screens and how users would travel through each of the main venue pages. The correct balance of elements on screen and how the elements behave on-scroll was one of the two greatest challenges we faced.

The second challenge, and perhaps an even greater one, was how to give users a good, clear navigation experience on a website where the client wanted to prioritize imagination and inspiration above all. The style of the site mimics the feelings and experiences users have when visiting the physical spaces, but online, we have to give them a way to quickly get to the information. We think we managed to achieve an acceptable compromise in this area while retaining the artistic style.

The project was a large-budget project with an unusually long timeline: more than two years in the making. A lot of time went into directing illustration as well as evolving with the changing needs of the brand. Even though we usually have a much clearer, strategic and defined process, in this case, we decided to let the artistic nature of the project guide the process in many ways. With the client being extremely creative and artistic themselves, we saw no other way of being able to get the project completed successfully. Sometimes, you have to bend the rules to create something fresh and unexpected.

Navigation structure: The site navigation and structure are in fact relatively simple. The website has four main sections: Venues, Experiences, Event Inquiries and Marketplace. Venues is a gateway into each of the main venue spaces, where the three main venues have their own individual, and very elaborate pages and sections. Experiences features the events across all venues. Event Inquiries provides info on each venue for booking. Marketplace is the e-commerce section of the site for physical products.

We wanted to simplify the site structure as much as possible, with the site being so graphically intense and visually nonconventional.  Our main site nav uses the idea of a navigation chart and is represented by a dangling star as a nav icon. Simple in execution, but again focused on the illustrations. We also added the main navigation to the persistent footer on the site so that there are multiple ways of getting to the relevant content.

Technology: We used a custom WordPress installation to power the back end.  The website is completely custom coded on the front end with lots of custom JavaScript and CSS. We modified the terrific open-source parallax script by Matthew Wagerfield as the main engine behind the landing page movement.

We also built a lot of other custom features that happen on venue pages such as The Edison, Clifton’s Republic and Pacific Seas as users scroll, making it feel as if you descend into the city, down the tree canopy or into the ocean. We are very happy with how all that turned out!

theneverlands.com

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