Forget minimalism, these websites prove that sometimes more is more
Welcome back to another year of Double Click! This time, we look at sites which push everything to the max.
Share
You know what they say… New year, new identity! So, it was only right that we started 2020 with a revamped, refreshed Double Click, especially after we went and relaunched our site (sorry to keep banging on about it).
Anyway, if you’re new here, welcome! Double Click is a monthly feature we run rounding up the best digital designs we’ve seen, accompanied by some insight from their creators. In the past, we’ve had everything from sites built entirely on Google Sheets to online shops with real-time user interaction built into them. This month, however, we’re taking a closer look at everything OTT. There’s nothing dainty about these sites but their maximalist aesthetics and certainly memorable. And, you know what, sometimes more is more.
Gabe Ferreira: gregroque.com
Greg Roque is a stand-up comedian whose work is inspired by early internet culture and, in his own words “all things inaccessible,” so it was these two themes that São Paulo-born, San Francisco-based designer Gabe Ferreira kept coming back to when he was designing Greg’s site. “The visual language and interactions of the site came from the concept of combining the vernacular of show business with the brave and exploratory attitude of the early web,” Gabe tells us.
When working on the project, he kept asking himself what the designer(s) of Space Jam’s website would have done they had the resources and technology that we have today. “gregroque.com’s navigation menu, for example, is a direct reference to that early Space Jam site, but using objects that are part of Greg’s life,” he continues. “The movie-influenced page transitions, the over-the-top sound effects, the movie credit-like About page that gets filled with popcorn, and the spotlight on the Media page all contribute to that vibe.”
Languages used:
“The site was built fairly simply – it’s a single-page app with a static Javascript database that stores all the content. I used crossroads.js for the routing, and that is probably the most complicated part of the build, and even that isn’t very intense from a development standpoint. I’d guess most of my time was spent with CSS styling; as you can tell, there is extensive animation work on every page.”
Bureau Cool: 2020.dekmantelfestival.com
Returning to Double Click once again is a site built by Bureau Cool, a studio we’re clearly a big fan of here at It’s Nice That. This time around, Ben Wegscheider, the studio’s founder has produced a playful twist on a festival line-up site for Dekmantel 2020. “The idea was to approach with an ‘editorial-ish’ approach, mixing different headliner weights and the 3D assets. We liked the idea of an ever-changing site, which lets you discover the line-up instead of seeing all in one go,” he tells us. The whole site is therefore designed on a grid and each tile can be populated via the website’s backend individually. Each also has its own custom animation. “The whole grid switches its tiles in a rhythm or can be switched by the user,” Ben adds.
The site was developed alongside Bas van Poel, Dekmantel’s art director. “Seeing the first reactions was funny, some were even talking about bad UX. The website was never meant to be a tool or something, it’s a playful approach to releasing a festival line-up,” Ben says. An interesting addition to this custom set up, is that the same components that were used to create the website, can be used as a social media video tool as well. “Different sizes and animations were dynamically generated, with the ease of changing the content any time,” Ben concludes.
Languages used:
“We used Kirby CMS, which is a very simple and easy to use CMS, so the Dekmantel team can adjust line-up changes on the fly. The frontend is a custom build, mainly using Javascript for animation, with a bit of Three.JS for the WebGL part.”
No Plans: noplans.show
No Plans is a trio of creative digital specialists based between New York and London. With a background in graphic design and typography in Switzerland, the trio – Daniel Pianetti, Daniel Bär and Andrew McCarthy – have over ten years of experience in digital design and development.
It’s only natural, therefore, that when asked to produce work for an exhibition, they looked for the most innovative way to share their web-based work. “Contrary to most other work there, our portfolio was displayed on a screen, so the challenge was to capture a visitor’s attention and get them to interact with our piece,” they explain. In turn, they developed a system which squeezes and stretches several websites into one site, which can then viewed by moving the mouse. “The extreme distortion of our websites resulted in an effect that resembled a broken display which looked striking on our big format screen,” they conclude.
Languages used:
“The beauty of this design is that it was achieved using very ‘basic’ technology. It’s a static HTML site with no CMS. It uses a tiny bit of jQuery to toggle states, but other than that it’s CSS transitions that do all the magic.”
Artur Neufeld: wideawake.earth
Wide Awake is the brainchild of illustrator Friederike Hantel and fashion designer Ethel Vaughn. Friederike’s illustrations are larger than life, combining Japanese aesthetics with the grotesqueness of a Hieronymus Bosch. It’s for this reason, that when working on the website for the collaboration at his studio Selam X, Artur Neufeld decided the project would fall short if they presented a bland online shop like any other.
“So we decided to go all-in on the holistic approach, treating the project as a brand and elevating it with a multimedia treatment,” he explains. “We invited collaborators from all parts of the world to remix her illustrations, animate them, make music and graphics, all without any creative restrictions from our side.” Instead of a static shop, wideawake.earth instead presents users with a full story, inspired by the comic book universe imbued in Friederike’s illustrations. “The goal was to launch the collection with a big bang, so it can be taken more seriously on the international stage and get the attention that it deserves,” Artur adds.
Collaboration was a huge part of the project and Artur worked closely with Sebastian Zimmerhackl (communication), Pascal Wiemers and Jonas Stadter (3D). Other 3D artists like Obby & Japparii joined the project, as well as graphic designer Darius Ou and sound designer Julian Jaschke. The photos were made by Maxim Brinckmann and the model for the lookbook was Anne Zarske. For the meditation, Master Sai Cholleti lent us his expertise and voice.
Languages used:
“As it turned out, Friederike and I live basically in the same neighbourhood, so it was easy to meet up. This meant that we regularly iterated over ideas and generally just went wild. So I was happy to use Cables.gl as a WebGl framework once again since it really helps to quickly build prototypes, or just sketch out ideas to show the rest of the team. Without Cables.gl, I am sure, I would have been more reluctant to new ideas and more careful when discussing new possible features or concepts. Since the development of the site was so process-oriented, iterative and prototype-driven, the most uncommon thing about the site is probably that it was more efficient to have no CMS at all, so basically all the content is hardcoded. The rest of the site was built with a rather basic Vue.js setup.”
Jonas Pelzer: trashlagoon.com
Jonas Pelzer is a designer and developer based in Berlin. He was recently contacted to create a website for the upcoming collaborative EP between Trashlagoon and Parra for Cuva, titled Planet Ujou. To give him an understanding of what they wanted, the musicians showed Jonas a load of video material which was originally created for a music video for one of the EP’s songs. “I enjoyed the mix of atmospheres conveyed through the different videos and the story which was implicitly told but remained very vague and mysterious as there was no linearity,” he tells us.
“I wanted to achieve that same effect with the website, so it was clear I needed to find a way to include all of the videos, ideally showing multiple ones at the same time, and without the possibility for the user to purposefully navigate to a certain video,” he continues. This is how he arrived at the idea of having a split screen layout on the site, made out of four equal panels, each one showing a different video. On hover, the video in each quarter randomises and disclose a short snippet of text, revealing information about the project bit-by-bit. Finally, Jonas adds: “While testing the site in a previous state, I felt like the sudden change of videos should be presented in a heavier and more dramatic way, so I built an animation which shakes the whole site for a brief moment. A highly reduced version of the shaking animation was applied to the text as well.” With several developments still in the pipeline, Jonas, Trashlagoon and Parra for Cuva see the site more as a web-based video installation than a promotional website.
Languages used:
“It’s just a static website, making use of a few CSS animations and some vanilla Javascript. No frameworks, no CMS.”
With advanced design capabilities and specialised features, Wix gives you the freedom to design and customise a website that expresses your vision, no matter your brand or business. To save 30 per cent on all yearly premium plans with Wix, use code “DoubleClick20” at checkout.
Supported by
Share Article
Further Info
Double Click is our monthly round-up of some of our favourite websites and digital designs floating around out there on the world wide web.
About the Author
—
Ruby joined the It’s Nice That team as an editorial assistant in September 2017 after graduating from the Graphic Communication Design course at Central Saint Martins. In April 2018, she became a staff writer and in August 2019, she was made associate editor.