Включите JavaScript для просмотра сайта.
logo
logo

The best website designs of 2020 so far

Not every web experience needs to be ground-breaking, visually stunning and full of unexpected surprises. Most of the time, visitors to a website just want to find the information they're looking for, quickly and easily. 

But just as the more outlandish outfits on the fashion catwalks can subtly influence the more wearable clothes found on the high street, it's worth web designers keeping at least half an eye on the higher end of website creation. Even those that seem overly flashy can still give you inspiration and ideas that you can incorporate, in different ways, into your own designs. 

With that in mind, we look back at the designs we feel truly pushed the envelope in 2020. Not only do these sites fulfil the basic job of serving visitors what they're looking for, in a fuss-free way, they also rethink how a website can look and function, in fresh, inventive and original ways.

01. The Neverlands by Active Theory

When you visit a website promoting a nightlife venue, you expect something flashy, loud, colourful and probably a little gaudy. But The Neverlands – home to two of Los Angeles’s most high-end nightlife venues, The Edison and Clifton’s Republic – wanted to project something a little more tasteful. So they turned to Active Color, who crafted for them a website that is anything but ordinary. 

Based around their animations of custom hand-painted illustrations by Shannon Stamey, it’s truly a thing of beauty. We chatted to founder and creative director Damjan Krajacic to find out how they made it.

How did you get this unusual gig?

We've been working with the client and owner of The Neverlands, Andrew Meieran, since they first opened the first venue in downtown LA. The Edison is truly a spectacular night venue, built in the sub-basement of the historic LA Higgins building, and preserving the power generators and industrial elements of the power plant that signalled the new future of DTLA.

Later on, we worked on several more projects with the same client, including the Clifton’s Republic website. When this project started, we were already very deeply immersed into the brand and the venues, as well as quite close with the client and his exceptional, visionary, and eccentric style.

What was the brief?

The client always had a fantastical vision of how to translate these visionary spaces into a digital world. They wanted to create a sense of adventure, curiosity, an escape from the ordinary into a childlike world of fantasy. This project was very much a collaborative creative effort with the client, over a long period of over two years. Even though the overarching concept remained fairly the same over time, ideas on how to put it into practice were evolving continuously, and often we would get into minute detail on illustrations or specific kind of movement, or artwork.

 

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 us in many ways. With the client being extremely creative and artistic himself, 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.

What were your visual inspirations?

Both the concept and the colours of the website were mainly inspired by the stunning interiors of Clifton’s Republic and The Edison, which are literally these fantastical worlds you can immerse yourself in. Even though Clifton’s is comprised by seven distinct venues inside the same 5 story building, there is an underlying warmth to each space, and the warm bronze, copper, and gold tones penetrate the senses. We wanted to extend this color scheme to be a bit more appropriate for each venue or landing page, so we widened the color palette to include pastel blues, teals, and a variety of other colours.

Some of the colour palette was distinctly inspired by the hand painted illustrations, and we would bend the page to match. Other times, we would adjust the hues and colours of the illustrations to make them all blend and fit a more cohesive style.

 

Who crafted the illustrations? 

 

The illustrations are the work of Shannon Stamey, who was commissioned by the client. Together with the client and Stamey, we conceptualized the landing screens and illustrations, which were executed to perfection by Stamey. What we could not get hand painted, we were able to find either in stock imagery or in public domain archives. The client Andrew Meieran is a historian himself, with incredible knowledge and passion for art of the period, so he was instrumental in finding and deciding on many of the elements.

 

How did you approach the typography?

This was a balance of practicality and chance. We had no visual identity system to work with here, no predefined style, or logo, so we sort of worked backwards to find the fonts that matches the artwork. We wanted to keep things feeling human, natural and usable but at the same time a bit magical in our choices.

What technologies did you use to build the site?

 

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.

The biggest challenge by far was how to create a smooth browser experience with so many transparent PNGs moving in parallax motion. A lot of time went into optimization of images and scripts to be able to pull it off cross-browser.




The transitions are beautifully effective: how did you create them? 

With a lot of tweaking and experimentation!  We were somewhat limited in being able to request additional illustrations as needed, so we sometimes had to patch the pieces together, extend the artwork, manipulate it.  Once we had the assets ready, we took a lot of time to adjust the transitions to make the flow smooth.  It was a fine balance between what we wanted visually and what was technically doable in each browser with limited rendering power.

How did you make the site sing on mobile?

 

The translation to mobile was actually fairly smooth.  This project was desktop-heavy but we knew that landing pages will work well on mobile because that is how we conceived them from the very beginning.  We were aware that due to much reduced image sizes, transitions will be smooth.  Finally, you can’t have too many things on a small screen, so we were able to trim things down and simplify the UI.  This all led to a smoother, more straight-forward mobile experience.


What's the biggest lesson you learned?

That patience is a virtue. We certainly had to have lots of it in this project. The point is that to do something well, you have to be willing to put the time and make the effort, and that requires patience.

On the technical and artistic side of things, the project reminded us how much we love out of the box sites, dating back to sites built in flash that we adored, at a time the internet was far more varied and unconventional. However, with the recent browser developments, we are again capable of achieving exceptional experiences that don’t fall into a box, and we are excited to use this awareness to guide us in future projects. We were lucky that in this case, we were working with a very unique client who appreciates aesthetics and originality.

 

06-09-2020