Best Website Designs Of 2021 And What They Have In Common

There are plenty of web design contests nowadays, but Awwwards is probably the most famous of them. A nomination or a win on this platform is a sign of high professionalism and an ability to adapt to new UI/UX demands and challenges.

Users and qualified jury members on Awwwards can vote for the best sites of the day, month, and year. They evaluate sites based on 6 criteria: design, usability, creativity, content, mobile and developer performance.

In this article, we will analyze the strengths of the top-10 best websites of the month in 2021 (January-October), and elaborate on what they have in common. See Awwwards website for the best-designed websites, including ours, that got an honorable mention.

Different typefaces & diagonal scrolling 

The best website of October 2021 shows that using more than 3 typefaces is not always “mauvais ton” if you do it consistently. 

What’s good?

For the titles, designers of this piece mixed 2 kinds of typefaces:

• One bold and simplistic, most probably Almarena Regular
• Another sophisticated and with sharp edges, that looks a bit like Black Gold VP Display

Garden Eight turns different typefaces into a motif that lasts throughout the whole website and makes it recognizable. The minimalism of the site also contributes to the fact that different typefaces don’t distract the viewer.

For the copy that follows the titles, they used a simpler typeface, most likely Recta Light Small Caps, and for the menu — Meche Pro Light. 4 different fonts — 1 website.

The web design is minimalistic, made in black and white, with a bright reddish cursor, which is a nice touch. The Shift has a dark mode: a must-have for those who want to create websites in B&W. 

Diagonal scrolling is also a strong side of this website, made with GSAP animations and Barba JS:

An experimental way of how The Shift, that’s 90% calm and smooth, treats its 404 page makes this project really stand out:

What did Awwwards like the least about The Shift? 

The lowest score the website has is for usability. Although mixing fonts is fun and all, the creators didn’t highlight headers in any way:

Also, the screen where you can drag photos along with the cursor can make text unreadable:

Horizontal layout & crazy mode

The website that won in September… is all about grids. They are a collection of horizontal and vertical lines creating a pattern that helps line up design elements. 

What’s good?

The website is made in B&W, and at first glance seems to be minimalistic. Web designing is made with no coding, in Readymag.

The main page has strong Swiss style looks thanks to large typography. No photos or colorful illustrations. Instead, designers introduce a lot of geometric shapes: a user can move them by scrolling. Many parts of the website are made in a horizontal layout: scrollable from right to left. 

Grids has strong and crisp UX copy, which is also a plus when deciding on the best website of the month. 

The most fun and satisfying part about this website is… crazy mode! There is a buttom at the top to turn it on, as well as the “grids” mode. You can really tell how much thought the creators put into this project by watching shapes fly around:

What did Awwwards like the least about Grids?

The lowest score is for usability: 8.0. Some users probably got tired of making several full scrolls with their mouse to get black squares to “jump” over gigantic letters at the beginning of the main page. Expressive typography is good and all, but it can hurt an average experience.

WebGL glitch effects & videos

The August winner, Webby Awards XXV, is a site made for users to watch a virtual show about the internet. You don’t expect that to be run-of-the-mill or minimalistic. 

What’s good?

At the beginning, you are greeted by the loading animation that requires a user to press “go” to proceed. 

The main page is simple, offering no scrolling, with a spiral 3D animation and grids in the background. Music prepares viewers for videos that they can watch in parts or as a whole show.

Even though Webby Awards might be a bit confusing and loud, its strong side is of course glitch effects made with WebGL. It’s like you’ve turned on too many TVs: 

The site is not something that will suit all, but it’s not for everyday use either — it’s a show. And so is its UX/UI design.

What did Awwwards like the least about Webby Awards?

This page got only 7.47 for usability. On any page on the website, users don’t have much freedom, despite a small hamburger menu at the top left. Webby Awards also forces you to watch the intro video every time, but fortunately, you can skip it. 

Storytelling through games

Unlike some other winners of 2021 Awwwards, The Harmonic State (July’s best) is far from minimalistic. Although it has basic typography, and doesn’t have a lot of copy, the animations are probably the most complex that we’ve seen this year. 

What’s good?

Designers made 3 levels of WebGL animations on the main page: dust particles, squares, and worm-like lines. Before the main page loads, a loading screen suggests that you use headphones for a better experience: music follows users everywhere. 

The user stays engaged through gamification: The Harmonic State features not 1, but 3 games made with WebGL. They are unique and cool, each in its own way, but can make people who get anxious playing Flappy Bird seriously tense. 

What did Awwwards like the least about the Harmonic State?

3 criteria scored less than 8: design, usability, and developer performance. All those games and animations require time to load, which is a downside. We also partially disagree with some design choices, including sound design. Along with one of the games, which includes dark tentacles that are supposed to be telephone lines… The Harmonic State becomesThe Trippy State.

Motion UI design in a portfolio

Imagine your portfolio won the best website of June on Awwwards. Pretty wild, huh? But for Aristide Benoist, it’s a reality. 

What’s good?

Someone said “don’t judge a person’s portfolio before you discover their goals”, but clearly a site this cool must receive some commentary. The website uses WebGL, GLSL and Javascript. 

The main page is built in B&W, with tightly squeezed snippets of his work in horizontal scrolling. The developer isn’t just selling his talents, but takes his portfolio to the next level. Click on any work, and it unravels its full potential. The font used for the texts is really cool: it’s Bitcrusher Compressed Heavy.

Motion design is dynamic and smooth. In a duo with horizontal scrolling, it makes a perfect slideshow. It’s a bit disappointing, though, that the slides on the right are not scrollable. You need to click on them directly or use the arrow keys to navigate. 

What did Awwwards like the least about the developer’s portfolio?

Its lowest scores are for usability and developer criteria. We can point out a useless menu that serves no real purpose because it’s too small: 

Scrollytelling & 3D animation

What’s better than a Ford Mustang? An animated 3D Ford Mustang riding through a 3D animated desert. But Prometheus Fuels didn’t win June’s best UI design award just for that. 

What’s good?

The site is a stylized WebGL interactive story that unravels through scrollytelling. It’s definitely a trend for 2022, a form of narrative when with each scroll illustration, fonts, snippets of text and other elements begin to come to life. 

Prometheus Fuels uses WebGL animations for smoothness. The 3 main colors (blue, red and white) convey the 50s feeling you get from Fallout video games. Pixelation also helps with the latter. 

The website creates an illusion of presence by using the same location throughout the whole scroll journey: the desert. For once, a “green” site that’s not green. Thanks Mad Max for that. 

What did Awwwards like the least about Prometheus?

The lowest score is the developer’s criteria. Sites with lots of animations take time to load, and landing pages are not the best for SEO.

Logo animations

Superlist, which is the new version of Wunderlist, makes its appearance on Awwwards as the winner of the best April website of 2021. 

What’s good?

The page’s strengths include: using logos in creative ways, such as photo frames, and dynamic 3D animations made with WebGL and powered by Three JS. Superlist features smooth loading transitions and an interactive “get notified” button. Overall, it’s a very sturdy product showcase that has a lot of cool features, with the exception of the UX copy.

What did Awwwards like the least about Superlist?

Overall, this website has lower points for all criteria than the other winners, sticking to a solid 7.8. We think it’s probably because the website chooses to use a small font for most of its copy. Also, like all one-page sites, it may encounter some problems with SEO in the future. 

Interactive CGI & sound-design interface

The website sponsored by the U.S. Air Force won the contest for March 2021 on Awwwards. 

What’s good?

This one is a project about an incredible rescue journey with a great soundscape that follows users wherever they go on the website.

Storytelling is very important in such projects. The site ditches bright colors and sticks with a cold color palette (blue, silver, white) to represent snowy weather and storms, immersing us in the rescue mission. It’s hardly a website at this point, but a short documentary. Audio commentary on the website is made with animated radio waves. 

The story is conveyed through scrollytelling. No menu, no popups. Only amazing CGI animations. There are a lot of microinteractions to keep users engaged: you can kind of control a helicopter and the rescue team. 

As for technical details, “Into the storm” project uses HTML5, WebGL, GSAP animations, and Vue JS. Overall, it’s a very emotional project you should definitely check out!

What did Awwwards like the least about Into the Storm?

The lowest score is for usability. Well, controlling a helicopter is quite a difficult task.

Cuteness overdose

Well, I never would have thought I’d fall in love with a speaking onigiri, but… The best website of February 2021 introduces us to a world of Japanese cuisine through very cute characters, video game-worthy soundtrack, and warm colors. This is a project for Google.

What’s good?

The starting page is simple, as with most of Google’s educational projects. There are several engaging factors about this site:

• Absolutely adorable 3D illustrations and animations
• Cute copy
• Mini-games
• Drag-and-see interaction
• Speech through comic bubbles
• Google search to find out if the meal you chose is served near you.

The site may annoy some people with its childishness, but it just seeks to entertain audiences of all ages and nations. It also makes you want to revisit the project many times. We want to join that person on Awwwards who commented “hope all websites will be talking onigiris in the future”.

What did Awwwards like the least about Umami Land and how dare they?

The lowest scores are for usability and developer criteria. Sometimes dragging interactions seem forced. And you’ll need a good internet connection to load all that cuteness.

Convincing CTA

The best website of January 2021 conveys emotions through symbolic animations and 3D.

What’s good?

This is a case of an award for design not only because it looks cool (the typeface could have been better), but because of its convincing audio narrative. The effect is deepened by the fact that there is little to no music, only a voice. 

We think the creators chose a blue color palette to represent not only oceans, but also a deep sadness. Animated Earth is covered with nets.

The web page design has one of the most convincing call to action buttons of the year: when a user chooses the amount of donation, the screen shows how much exactly you can contribute to the ocean with visuals:  

What did Awwwards like the least about Sea Shepherd? 

Sometimes additional reports are provided for some winners. For example, mobile excellence reports. In this case, the score for mobile excellence turned out to be the lowest (poor performance, long load time).

***

What do winners have in common?

Animations and videos on the first screen.

The first screen is your face. It creates an impression, the general mood of the website, which is why winners use animations or videos.

At least a few interactions.

Interactive websites are fun and often used in UX, UI designs. Interactivity helps lead visitors to the information that they are searching for. With numerous ways to interact with users, designers can pick what is best for their project.

Emotions. 

Few designers think about what emotions the site should evoke. Therefore, if a site can cause joy, sadness, or sympathy, and this will be expressed in UI, then such a project will definitely be remembered.

Swiss style.

Although not all of them, quite a few of the monthly and daily awarded sites use Swiss style on their websites. Its principles are: clarity, readability, objectivity. Easy navigation is also a part of the Swiss style.

What else does the jury take into account?

Technical performance of designed websites: how quickly the site loads, the speed of transitions, the accuracy of the layout. They don’t look at the code, but rate the site as users. The SEO parameters of sites are also evaluated. 

They add points to original solutions, and sometimes experimental design .

Be sure to contact us, if you have any questions about web designing services or want an award-winning website too!