Case Study: Awwwards Conference Website

Adoratorio
Mar 1, 2018 · 4 min read

Awwwards is an institution that recognizes the talent and effort of the really best web designers, agencies and developers all over the world; a meeting point for digital professionals across the globe where to find genuine inspiration, transfer knowledge and experience, connect and share.

This institution organizes conferences in iconic cities all over the world every year, to inspire and unite the best agencies and thought leaders in the world of digital design; these conferences are a global gathering where digital top designers share ideas, visions, projections and some of their best kept secrets.

Each conference is a really high quality event, where one can usually join super inspiring talks from professionals at Google, Adobe, Opera, Smashing Magazine and much more.

A DIGITAL THINKERS CONFERENCE

This year, the conference will take place both in Berlin and in San Francisco.
Adoratorio was not only called for an important talk in Berlin, but to also design this year Conference identity and website in collaboration with the animation and 3D studio TAVO from Madrid.

Could you imagine our happiness?

The 3000th most visited website worldwide entrusts you to basically invent its new identity, and you feel this terrific honor as well as the incredibly heavy responsibility and pressure, more so when you realize that your main users are gonna be your colleagues.

Considering all of these facts, we ended up doing what we think we do better: transform something extremely complex into something neat & clean, super easily accessible and still significant.

APPROACH to DESIGN & INSPIRATION

As you can see on socials and on the Conference website, Tavo created a dreamy serie of animated 3D objects with super smooth appeal — effect created through a splashy color palette and a malleable plastic texture–.

Synesthetically following Tavo’s work, we’ve created a bold color palette for Awwwards website, characterized by the union of basic tones and really strong accentuation according to the prevailing style of first designs; the work was then completed with the composition of a smooth structure for the web architecture, enhanced by an intuitive navigation system.

The general tidiness of the design is only interrupted by highlighted elements — i.e. the Speakers portraits, images and videos –: we created a particular gradient, able to make each element stand out on the neutral background we’ve chose for the whole website.

As for buttons, we opted for a multi-layered colored squishiness, boosted by an accentuated roundness.

THE WEBSITE MASTERPIECE

- maybe not, but we love this detail anyway-

When you have to deal with colleagues stalls, the pressure is always high. More so when you know -or you think- you MUST be creative at all costs.

Here in Adoratorio we don’t like to undergo anxiety, so we created the website with an .svg putting all our attention onto design with a particular focus on simplicity.

The thing we love the most of the whole website is the pages transition:
technically-speaking this is nothing particularly impressive, but we’re hypnotized by its final look — and from the fact that it’s, clearly, completely responsive!

TECHNICAL ASPECTS

The website is written with vue.js, using a pwa template of vue-cli and based on the webpack template, like some previous projects made by Adoratorio.

The scoped CSS is pre-processed by Sass and integrated by a long series of custom mixins, functions, utilities and a custom-based configuration.

A Canvas was used to realize the cover animation. The idea is that alpha information is added below the original video track. Alpha information are in black and white, with white being interpreted as fully opaque and black being fully transparent. Then the Alpha channel portion of the video is overlapped on the original part, creating a mask to obtain a transparent background effect.

As for image management, we chose to implement a lazy load and to use a Webp format with a fallback in Png format for browsers who don’t support the first. This was all planned to reduce loading times for each single image as much as possible, consequently reducing pages size too.

We used GSAP and other different libraries (some of them written by us) to realize the animations of this project.

Awwwards conference didn’t need any back office, therefore we used some Json files to store the data and fetched them during page transition to reduce the size of every page and consequently loading times.

Adoratorio

We are cool kids with a natural instinct for beauty edgy-ness; we touch the digital world with hand crafted, significant amazingness.

Adoratorio

Written by

We are cool kids with a natural instinct for beauty edgy-ness; we touch the digital world with hand crafted, significant amazingness.

Adoratorio

We are cool kids with a natural instinct for beauty edgy-ness; we touch the digital world with hand crafted, significant amazingness.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade