Awwwards Annual 2019: creating a web for the best of the web

Every year, Awwwards’ panel of specialists (formed by some of the most important designers, creative directors, developers and agencies in the industry), chooses the best of the web – best websites, web designers, developers, creatives and agencies. This year, in addition to once again being nominated for the Agency of the Year (btw. feel free to vote for us), we also had the honor to create the voting website. To tell us more about the process behind the creation of this web, we sat down with Martina and Karlo, our Strategic Partnerships Executive and Front-end Development Team Lead.

The website is live, it works great. Give me a short overview of the project before we dig deeper…

MARTINA:
I mean, this is the website for Awwwards – it’s for the best of the web. This is literally the website where the world’s top designers, developers and creatives will go and vote for other designers, developers, agencies and websites they believe were the absolute best in 2019. So yeah, you could say we had quite a bit of incentive to deliver and overdeliver.

OK, OK. Let’s start from the beginning. The Awwwards team contacted us and asked if we’d create this web for them. What happened next?

MARTINA:
There was a lot of hype and a lot of excitement, and we were all ready to jump right in. But we needed to be smart about the process because the website needed to be live in approximately a month and a half from the time they contacted us.

KARLO:
As soon as they contacted us, I said that I’m in. This is one of those projects that pushes you to go all in – and then you go even further because it’s for Awwwards.

MARTINA:
We started by organizing an internal sync to determine the team that’ll work on this project and to go over the entire specification. As I said, the time was our only limiting factor, but it was a large one, so we first defined the elements and functionalities that were the top priority – ones that were a must for the website to be able to function. After that, we defined the ones where we could go big, experiment and really make that wow effect.

KARLO:
Exactly, this project was full of aspects that gave everyone on the team a chance to experiment, learn something new and push their expertise even further. As Martina said, the only constraint we had was the time.

Great. What was the next step?

MARTINA:
After that initial setup and planning, we focused on creating the concept, as well as the design of the website. Hrvoje spearheaded the design process and the concept he came up with revolved around strong, atypical typography – it was really eye-catching as it isn’t something you’d expect to see on a website, so it has an immediate effect on web visitors.

Another element that was defined during this phase was the color coding on the website. As the website has a couple of distinct units connected to specific categories of awards, we made every unit unique when it comes to color. And when that concept was approved, we pushed on with production.

Now we know a little bit about the design aspect. Karlo, tell me about the technology you used.

KARLO:
This was a fun one as we really decided to go all in with this project, and we updated all of our frameworks and plugins to the latest versions before we started. Now, in most situations, this wouldn’t be a problem, but when you combine the deadline we had with the fact that a lot of those new versions were major updates that changed a lot of functionalities we used on a daily basis… yeah, it was fun.

Now that you know the context, this is the tech we used.
Vue.js was our main front-end framework and we also used quite a bit of TypeScript. And to animate the elements, we used GSAP (the latest version which was, of course, heavily changed in comparison to the previous one).

Let’s switch it up a bit. What was the cooperation with the Awwwards team like?

MARTINA:
Yeah, I was in direct communication with them most of the time, and I have to agree – it was very streamlined. We opened a Slack channel, put everyone in it and practiced open communication right from the start – through Slack, anyone can contact anyone and get the answers ASAP. Because the deadline was short, and there wasn’t a very large number of people on the project, we decided to speed up communication and skip the ‘main point of contact’ approach as much as possible – and this was the ideal solution.

Also, I think the entire hype about the project, both from our side and theirs, really helped this project a lot. There were a lot of things we needed to do, the deadline was looming and it was a bit overwhelming and quite intense at times, but that Slack channel was filled with hype – we all just boosted and motivated each other.

How did the time constraints affect the project?

KARLO:
I could talk about different paths we might have taken if we had more time, or different technologies we might have used or the general scope of the project – yeah, if we had more time, the website would probably be better. But when I look at the big picture, time constraints on this project mostly affected our decision-making process. It needed to be much faster and we had to move quickly through the process, so we stacked all positions with senior members to achieve maximum efficiency.

When you look at the web and the entire project, what aspect are you most proud of?

MARTINA:
The best part is most certainly the way we approached the production process – from the initial contact to launch. As I already said, we were very smart about it, focused on the right functionalities and created a website that performs great and looks amazing. It really has that unexpected, exciting vibe to it, and that really takes it to a higher level.

KARLO:
Color changes we implemented on the website through global CSS variables are something I’m really proud of because they’re really impactful. Another element, or a set of elements that are also great are text effects we added – everything from changing text color to background color when you move through the page and shadows. Those kinds of experimental elements really boost the wow effect of the page, but I’m more proud of the smoothness, fluidity and performance we achieved.

OK, last one. Is there anything else you’d like to mention?

KARLO:
I have to say that the entire team was amazing, every single person gave their maximum – from designers who really did amazing things with this concept and our software developers who made sure this web will work even if it becomes overloaded. But Martina really deserves a standing ovation. She handled everything, from internal communication, external communication, project management, boosting motivation, pushing new ideas, making sure we’re on the right track… she had everything under control.

MARTINA:
First and foremost, big props to the team. What we achieved is really amazing, the way we worked together through all of the challenges was almost picture perfect. Also, I have to say thanks to the Awwwards team who gave us the opportunity to create this great web and for being an amazing support.

And we’re done!