Making the Annual Awards Voting Website 2021

We need to use this area to thank the workforce behind Awwwards for trusting us with designing the voting platform for the Annual Awards 2021. It’s been fairly the trip (or ought to we are saying flight?) to create the platform displaying the most effective and most lovely net creations on the planet.

The result’s a floaty, vibrant, and minimalistic web site – made in Webflow, celebrating the Awwwards group and all the gorgeous, artistic work from designers and builders worldwide.

Annual Awards Homepage
The entrance web page of the Annual Awards web site

Awwwards acknowledges the expertise and energy of the world’s greatest designers, builders, and businesses on the planet. It’s “a gathering level, the place digital design professionals from throughout the globe discover inspiration, impart data and expertise, join, and share constructive, respectful critiques.”

See more: Top 10 website awards

We knew from the beginning that the Annual Awards web site needed to honor all of the gifted folks on the market. We needed the web site to have fun the various hopes and aspirations linked to Awwwards and dreaming collectively as a group. However how you can seize intangible feelings as desires and aspirations?

Let’s dive into some preliminary ideas, dreamy temper boards, technical tweaks, and a handful of nerdy particulars from the work behind the platform.

Designed & developed in Webflow

As a artistic problem, we designed the web site within the no-code CMS system Webflow – the primary sponsor of this 12 months’s Annual Awards. To create the specified results, we took benefit of all of the alternatives Webflow affords, mixed with different applied sciences like WebGL and JavaScript code.

Webflow site structure
Webflow web site and CMS construction

Being on ‘Cloud 9’

We began by wanting on the design from the earlier years. All of them had just a few issues in widespread: typographic, interactive, and characterised by a darkish look. We agreed that we’d attempt going for one thing totally different – a extra gentle and floating design.

Previous Annual Awards sites
Former Annual Awwwards websites from Locomotive (2018), Bornfight (2019) & Tubik Studio (2020)

We needed the visible to be dreamy and have a heavenly really feel to it. One picture stored coming again to our minds and ended up being the second we needed the web site to stage:

Editor’s Choice: The Best Flash Sales Websites UK – liquidation.store

“Think about the sensation when mendacity within the grass on high of a hill. You lookup at a vibrant sky of floating, tender clouds. Your thoughts begins to wander, and also you dream about being nominated and even successful some of the prestigious prizes on the planet of net design – an Annual Award.”

With this in thoughts, we began creating just a few temper boards to achieve the sensation we had been on the lookout for. We ended up with the thought of being on ‘Cloud 9’ – the sensation you get as a designer when being nominated and even successful an Annual Award. We expect many within the Awwwards group can relate to this sense

aa interior image04
Our ‘Cloud 9’ temper board that we offered for the good folks at Awwwards. Work from Zhenya Rynzhuk, Niccolò Miranda, Pangram Pangram®, Barkas, Thibaud Allie & Lēonard Company.

Taking part in round with clouds

We had been proud of the thought however as we moved on we realized that clouds aren’t simply clouds. They’re in reality surrounded by quite a lot of thriller. Clouds increase many questions: How do they appear? How do they behave? What do they imply?

One of many issues we found was: “Pink Sky At Evening, Sailors Delight,” which means that if there’s a pink sky at evening, it means good climate tomorrow. With that in thoughts, we tried totally different clouds and methods to create clouds.

We examined a mixture of naturalistic-, 3D- and extra painted-looking clouds. All of them had one thing particular about them, however what caught our consideration probably the most was the true-to-life look. The distinction between desires and realism gave an thrilling dimension to the design. We needed the consumer to really feel they had been wanting up on the sky when coming into the web site. The naturalistic-looking clouds gave that feeling the most effective.

Cloud design explorations
Completely different cloud and design assessments

We additionally did some totally different assessments with the cloud background. Rendering clouds in WebGL just isn’t straightforward because it rapidly results in many loops because it normally requires noise and fractional brownian movement or FBM. We found out that straightforward photos would look higher.

Cloud testing in WebGL
Completely different WebGL cloud assessments. Prime left: testing Inigo Quilez lovely clouds rendering on ShaderToy. Prime proper: testing noise and FBM. Backside left: testing on ShaderToy – pouet.internet. Backside proper: testing 200000 instanced Mesh with cloud png texture working at 60fps

Now that we knew how the clouds regarded and what they meant, we wanted to determine how you can make them behave the best manner. We construct up the web site in 4 layers to create a sense of clouds transferring at totally different speeds. It helped give the sense of randomness that clouds normally have.

Website layer structure
Web site layer builds

Creating the Awwwards trophy

Editor’s Choice: 120 campsites in Norfolk – the area&39s best camping sites

On high of the layers of skies, the web site has a 3D visualization of the Awwwards Trophy. We used Blender to create the trophy 3D mannequin based mostly on SVG photos of the particular trophy. The 3D mannequin was then exported as a GLTF with Draco compression, giving us a decrease file dimension (162 kB) and imported into the browser utilizing Three.js.

3D Trophy in Blender
Taking part in with the trophy 3D mannequin in Blender

Whereas deciding on the clouds and design for the web site, we explored totally different kinds for the trophy and methods to make the trophy stand out – a easy matcap with the nominees’ reflection, a black and stone materials, and a phong reflective. We ultimately ended up with the ‘glass impact’ utilizing refraction because the idea was evolving within the sky.

We may go along with MeshPhysicalMaterial from Three.js, however determined to go along with the multisite refraction method from the gifted Jesper Vos. Discover tutorial by Jesper Vos right here. This method allowed us so as to add some barrel distortion and chromatic aberration to the customized ShaderMaterial and it provided higher management of the refraction.

As a ultimate contact, we used easy MatCap Supplies for the golden and darkish ‘WWW’ to simulate gentle reflection.

Trophy styles
Completely different kinds and appears for the trophy

The Backend – Voting

One of many necessary components of the Annual Awards web site was the voting platform. On the backend aspect, the Webflow CMS needed to be synchronized with the info from the Awwwards API.

We used the Webflow API to create and replace the nominees and totally different initiatives. As a result of the voting course of was made by means of the Awwwards API, we did not must care for anything than offering knowledge. The votes and rating updates had been up to date each hour with a node js script working on an heroku server with a CronJob scheduler.

Cloud group

The web site lastly went dwell on January tenth, 2022. The Awwwwards group embraced the cloud universe – identical to we hoped – and we had been thrilled to see what number of businesses and unbiased designers posted clouds on their social media. Thanks for the help and congratulations to all nominees and winners!

Clouds on social media
The Awwwards group sharing clouds on social media

Applied sciences

  • Frontend: Webflow, WebGL, Three.js
  • Backend: Webflow CMS
  • 3D mannequin: Blender

Firm Information

Granyon is a Copenhagen-based branding- and design company with a workforce of strategists, copywriters, and designers. We ship campaigns, methods, content material, and digital/analog options to Danish and worldwide shoppers. Learn extra about us right here or join with us on Instagram, LinkedIn, Fb or Twitter.

Editor’s Choice: 50 Best Indian Photography Blogs and Websites in 2022

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *