Post by iamin114112 on Nov 8, 2024 23:48:29 GMT -6
Designing a website is an exciting time – you can finally take all the ideas you’ve been juggling in your head and turn them into something real. You may already have a list of inspirational websites whose design and user experience you’re keen to capture yourself.
a person using a computer and taking notes on award-winning websites
But what about websites that are truly exceptional?
For a website to win awards, it must go beyond the typical user experience and even the great user experience to provide something unique and unrivaled in its space.
While creating an award-winning website may website development service
be beyond your capabilities in terms of technical constraints, time, or budget, you can still incorporate certain elements from each into your site. Plus, these examples are just fun to look at—they remind us of what’s possible in web development.
In this post, we've rounded up five award-winning website designs from the past few years. For each one, we'll share what makes it great and what we can learn from the designers.
Award Winning Websites
From the Webbys to the Awwwards, here are some of our favorite winners - let's get red carpet coverage.
Kettle
Best User Experience 2021, 2021 Webby Awards
Creative branding agency Kettle has created a stunning online presence that is carefully structured to attract employees. It is clear from the website alone that this organization knows how to grab your attention, hold it, and move you to action at the right time.
Kettle's website greets visitors with a full-length video that provides a brief overview of its projects, approach, aesthetics, and philosophy. Each frame is held long enough to be processed visually, but short enough to accommodate the average viewer's attention span.
Home page of the award winning Kettle website
As you scroll, you’ll notice that Kettle eschews traditional vertical scrolling for an incremental scrolling method — sections on the homepage are presented as a slideshow. This “drop” of information focuses visitors’ attention more precisely. After the video, the site features projects with big brands to establish trust (along with a call to action to the contact form).
Case studies on the award winning Kettle website
Jumping into one of these case studies provides an overview of the agency’s work. Note that all case study pages have similar formatting and branding — each project is different, but Kettle always applies its signature approach.
Case study page on the award winning Kettle website
Back on the home page, Kettle uses available real estate to highlight its standout projects. On each slide, the cursor itself acts as a call to action, inviting users to click anywhere to explore the project in detail. This method reduces interaction costs because the user doesn’t have to move the cursor to a button or hyperlink.
Home page of the award winning Kettle website
While Kettle’s homepage scrolling method works, it applies standard scrolling to other pages. This is probably for the best, as step-by-step scrolling is bound to get tiresome after a while. To help navigate the site more quickly, there’s a menu in the top corner where users can switch between examples. On unconventional sites like this, a more familiar component like a menu can help ground users and keep them engaged longer.
The navigation menu on the award-winning Kettle website
If you're looking for more design inspiration, design agency websites and web development agency websites are great places to look - these websites are literally what these organizations do best.
Garoa Skin Care
Website of the Day (2020), Awwwards
Especially with e-commerce websites, it's easy to conform to design standards. There's nothing wrong with that — e-commerce websites need to display a lot of information in a way that users are accustomed to. But brick-and-mortar online stores don't usually win awards.
Our next featured website aims to challenge convention while maintaining familiarity to drive sales. Garoa Skincare, a website that sells seasonal skincare products, is an example for other businesses to follow.
Homepage of the award winning Garoa Skincare website
As for the front end, this website is so rich in details that many of them are easy to miss. As you scroll, you encounter animated UI elements, parallax effects with different speeds, side scrolling, subtle text animations, and smooth transitions between pages.
Homepage of the award winning Garoa Skincare website
These effects make the entire site feel like a living thing, reminiscent of the natural environment that the site's branding evokes. Somehow they are combined in a way that feels cohesive rather than overwhelming.
This excellent design doesn't stop at the homepage: each product page is an experience in itself, providing instructions and a comprehensive list of ingredients for each product.
Product page on the award winning Garoa Skincare website
Even the cart follows the rest of the site's aesthetic. While many e-commerce sites seem to be moving away from external branding in the checkout section, Garoa skincare carries it off beautifully.
checkout page on the award-winning website garoa
When you continue with the checkout, you'll be redirected back to the home page. That's because - sorry to break it to you - Garoa is not a real business. The site is a portfolio project for designer Bruno Aritzio. Of course, that doesn't take away from the website's merits, and there's so much here that you can take away and apply to your own (hopefully real) business.
Third strike
Best Homepage, 2020 Webby Awards
Creating emotional impact through a website is difficult. When browsing the web, users probably don’t want to be emotionally impacted the way they might be when consuming other art or entertainment. However, some websites do manage to do this, including The Third Strike.
Third Strike is a documentary and campaign that brings attention to those affected by the three strikes law in the United States, which imposes harsh penalties on repeat non-violent drug offenders. It is a difficult but important issue that this website communicates effectively.
The Third Strike website experience begins with a splash page that prompts visitors to turn on the sound, which is always a good choice before an audio or video clip automatically plays.
splash page on the award-winning website the third strike
Following this, there is a short trailer for the documentary that serves as an introduction to the film, the website, and the Decarceration collective, the organization featured in the documentary.
video on the award-winning website the third strike
The real gem of this website is the audiovisual home page that follows it - a spread of photographs of prisoners incarcerated under the three-strikes rule. There is no scrolling here. Instead, users navigate this page using cursors. Selecting a photo takes you to the criminal's history page.
homepage for the award-winning website the third strike
The stories are expertly crafted, combining text, images, vector graphics and audio to tell the story of each prisoner, create an emotional impact and inspire action. Each story ends with a prompt to read the next story.
story page on the award-winning website the third strike
Finally, the site's navigation menu contains links to resources where you can learn more about the three-strikes rule and the work of the Decarceration Collective. The order of the information is important here - you learn about the people first, as they are the reason this website and this organization exist. Everything else comes after.
Created
Nominee for Best Home Page, 2020 Webby Awards
Crafted hosts events (called “experiences”) for professionals, each with a different theme. Its website, while perhaps simpler at first glance than previous options, draws on the attention to detail and careful design to help it stand out.
The first thing you'll notice on Crafted's homepage is the sparse broken grid that highlights prominent copy. It's important to communicate Crafted's purpose right away, as new visitors likely won't know what the unconventional company does.
homepage on the award-winning website crafted
Notice how the images respond to scrolling, zooming in and out as you move down the page. The effect is subtle, just enough to make users want to sign up, though perhaps not consciously. This small design touch elevates the images above other image-heavy websites and makes the page dynamic and fun.
navigation images on the award-winning website crafted
Crafted also knows the value of whitespace (or in this case, more like tan-space). It gives page elements room to breathe and keeps only the most important page elements.
Users can explore past experiences organized by crafted, each featuring a gallery of event photos and a guest list. But watch what happens when you reach the bottom of the page. Instead of getting instructions to move on to the next page, you just keep scrolling. The website eventually sends us to the next page of the experience. The entire experience is seamless—there are no visible loading elements, and it’s very well done.
testimonial page on the award-winning website crafted
And let's not forget about the little illustrations that appear as pages load - another way to keep things lighthearted when moving between pages on a website.
illustrations on the award-winning website crafted
Julia Tonon
Website of the Day (2021), CSS Design Awards
Our final feature is a portfolio website for CSS Design Award-winning illustrator and graphic designer Julia Tonon. Like all great portfolio websites, this one keeps things simple and focused on the art. However, unlike most, the site itself highlights work that goes beyond what a simple gallery can do.
The standout section of the website is the home page, where users scroll to reveal art coming in from the top and bottom, moving in both directions. This works especially well for Tonon's pieces, which are all the same size. The animation makes the work look like it's floating in space, like paper in the air.
homepage of an award-winning personal website
Click on an image to view a larger version, then either return to the home page or view the images in a more traditional slideshow format.
illustration on an award-winning personal website
It's clear how to contact the artist - the site has a contact page that's just a mailto link that's too big to miss.
contact page on an award-winning personal website
This simple yet effective site reminds us that some of the best website designs aren’t always the most complex or content-rich (though content quality certainly matters). Rather, these designs use techniques that complement existing content to present it in new and exciting ways.
Websites That Deserve a Standing Applause
You may not be trying to create an award-winning business or personal website, but it doesn't hurt to find inspiration from the best the Internet has to offer. Even if you only take one or two small ideas from your research, it's worth it.
Finally, these examples teach us that the most outstanding websites aren’t just collections of web pages — they’re complete experiences whose design elevates the content without distracting our attention, ultimately leading to better engagement and more conversions. Sure, a trophy is nice, but these are the real rewards.
Additionally
An additional tab for posting information about articles, delivery or any other important content. It will help you answer the buyer's questions and dispel his doubts about the purchase. Use it at your discretion.
You can remove it or return it back by changing one checkbox in the component settings. Very convenient.
a person using a computer and taking notes on award-winning websites
But what about websites that are truly exceptional?
For a website to win awards, it must go beyond the typical user experience and even the great user experience to provide something unique and unrivaled in its space.
While creating an award-winning website may website development service
be beyond your capabilities in terms of technical constraints, time, or budget, you can still incorporate certain elements from each into your site. Plus, these examples are just fun to look at—they remind us of what’s possible in web development.
In this post, we've rounded up five award-winning website designs from the past few years. For each one, we'll share what makes it great and what we can learn from the designers.
Award Winning Websites
From the Webbys to the Awwwards, here are some of our favorite winners - let's get red carpet coverage.
Kettle
Best User Experience 2021, 2021 Webby Awards
Creative branding agency Kettle has created a stunning online presence that is carefully structured to attract employees. It is clear from the website alone that this organization knows how to grab your attention, hold it, and move you to action at the right time.
Kettle's website greets visitors with a full-length video that provides a brief overview of its projects, approach, aesthetics, and philosophy. Each frame is held long enough to be processed visually, but short enough to accommodate the average viewer's attention span.
Home page of the award winning Kettle website
As you scroll, you’ll notice that Kettle eschews traditional vertical scrolling for an incremental scrolling method — sections on the homepage are presented as a slideshow. This “drop” of information focuses visitors’ attention more precisely. After the video, the site features projects with big brands to establish trust (along with a call to action to the contact form).
Case studies on the award winning Kettle website
Jumping into one of these case studies provides an overview of the agency’s work. Note that all case study pages have similar formatting and branding — each project is different, but Kettle always applies its signature approach.
Case study page on the award winning Kettle website
Back on the home page, Kettle uses available real estate to highlight its standout projects. On each slide, the cursor itself acts as a call to action, inviting users to click anywhere to explore the project in detail. This method reduces interaction costs because the user doesn’t have to move the cursor to a button or hyperlink.
Home page of the award winning Kettle website
While Kettle’s homepage scrolling method works, it applies standard scrolling to other pages. This is probably for the best, as step-by-step scrolling is bound to get tiresome after a while. To help navigate the site more quickly, there’s a menu in the top corner where users can switch between examples. On unconventional sites like this, a more familiar component like a menu can help ground users and keep them engaged longer.
The navigation menu on the award-winning Kettle website
If you're looking for more design inspiration, design agency websites and web development agency websites are great places to look - these websites are literally what these organizations do best.
Garoa Skin Care
Website of the Day (2020), Awwwards
Especially with e-commerce websites, it's easy to conform to design standards. There's nothing wrong with that — e-commerce websites need to display a lot of information in a way that users are accustomed to. But brick-and-mortar online stores don't usually win awards.
Our next featured website aims to challenge convention while maintaining familiarity to drive sales. Garoa Skincare, a website that sells seasonal skincare products, is an example for other businesses to follow.
Homepage of the award winning Garoa Skincare website
As for the front end, this website is so rich in details that many of them are easy to miss. As you scroll, you encounter animated UI elements, parallax effects with different speeds, side scrolling, subtle text animations, and smooth transitions between pages.
Homepage of the award winning Garoa Skincare website
These effects make the entire site feel like a living thing, reminiscent of the natural environment that the site's branding evokes. Somehow they are combined in a way that feels cohesive rather than overwhelming.
This excellent design doesn't stop at the homepage: each product page is an experience in itself, providing instructions and a comprehensive list of ingredients for each product.
Product page on the award winning Garoa Skincare website
Even the cart follows the rest of the site's aesthetic. While many e-commerce sites seem to be moving away from external branding in the checkout section, Garoa skincare carries it off beautifully.
checkout page on the award-winning website garoa
When you continue with the checkout, you'll be redirected back to the home page. That's because - sorry to break it to you - Garoa is not a real business. The site is a portfolio project for designer Bruno Aritzio. Of course, that doesn't take away from the website's merits, and there's so much here that you can take away and apply to your own (hopefully real) business.
Third strike
Best Homepage, 2020 Webby Awards
Creating emotional impact through a website is difficult. When browsing the web, users probably don’t want to be emotionally impacted the way they might be when consuming other art or entertainment. However, some websites do manage to do this, including The Third Strike.
Third Strike is a documentary and campaign that brings attention to those affected by the three strikes law in the United States, which imposes harsh penalties on repeat non-violent drug offenders. It is a difficult but important issue that this website communicates effectively.
The Third Strike website experience begins with a splash page that prompts visitors to turn on the sound, which is always a good choice before an audio or video clip automatically plays.
splash page on the award-winning website the third strike
Following this, there is a short trailer for the documentary that serves as an introduction to the film, the website, and the Decarceration collective, the organization featured in the documentary.
video on the award-winning website the third strike
The real gem of this website is the audiovisual home page that follows it - a spread of photographs of prisoners incarcerated under the three-strikes rule. There is no scrolling here. Instead, users navigate this page using cursors. Selecting a photo takes you to the criminal's history page.
homepage for the award-winning website the third strike
The stories are expertly crafted, combining text, images, vector graphics and audio to tell the story of each prisoner, create an emotional impact and inspire action. Each story ends with a prompt to read the next story.
story page on the award-winning website the third strike
Finally, the site's navigation menu contains links to resources where you can learn more about the three-strikes rule and the work of the Decarceration Collective. The order of the information is important here - you learn about the people first, as they are the reason this website and this organization exist. Everything else comes after.
Created
Nominee for Best Home Page, 2020 Webby Awards
Crafted hosts events (called “experiences”) for professionals, each with a different theme. Its website, while perhaps simpler at first glance than previous options, draws on the attention to detail and careful design to help it stand out.
The first thing you'll notice on Crafted's homepage is the sparse broken grid that highlights prominent copy. It's important to communicate Crafted's purpose right away, as new visitors likely won't know what the unconventional company does.
homepage on the award-winning website crafted
Notice how the images respond to scrolling, zooming in and out as you move down the page. The effect is subtle, just enough to make users want to sign up, though perhaps not consciously. This small design touch elevates the images above other image-heavy websites and makes the page dynamic and fun.
navigation images on the award-winning website crafted
Crafted also knows the value of whitespace (or in this case, more like tan-space). It gives page elements room to breathe and keeps only the most important page elements.
Users can explore past experiences organized by crafted, each featuring a gallery of event photos and a guest list. But watch what happens when you reach the bottom of the page. Instead of getting instructions to move on to the next page, you just keep scrolling. The website eventually sends us to the next page of the experience. The entire experience is seamless—there are no visible loading elements, and it’s very well done.
testimonial page on the award-winning website crafted
And let's not forget about the little illustrations that appear as pages load - another way to keep things lighthearted when moving between pages on a website.
illustrations on the award-winning website crafted
Julia Tonon
Website of the Day (2021), CSS Design Awards
Our final feature is a portfolio website for CSS Design Award-winning illustrator and graphic designer Julia Tonon. Like all great portfolio websites, this one keeps things simple and focused on the art. However, unlike most, the site itself highlights work that goes beyond what a simple gallery can do.
The standout section of the website is the home page, where users scroll to reveal art coming in from the top and bottom, moving in both directions. This works especially well for Tonon's pieces, which are all the same size. The animation makes the work look like it's floating in space, like paper in the air.
homepage of an award-winning personal website
Click on an image to view a larger version, then either return to the home page or view the images in a more traditional slideshow format.
illustration on an award-winning personal website
It's clear how to contact the artist - the site has a contact page that's just a mailto link that's too big to miss.
contact page on an award-winning personal website
This simple yet effective site reminds us that some of the best website designs aren’t always the most complex or content-rich (though content quality certainly matters). Rather, these designs use techniques that complement existing content to present it in new and exciting ways.
Websites That Deserve a Standing Applause
You may not be trying to create an award-winning business or personal website, but it doesn't hurt to find inspiration from the best the Internet has to offer. Even if you only take one or two small ideas from your research, it's worth it.
Finally, these examples teach us that the most outstanding websites aren’t just collections of web pages — they’re complete experiences whose design elevates the content without distracting our attention, ultimately leading to better engagement and more conversions. Sure, a trophy is nice, but these are the real rewards.
Additionally
An additional tab for posting information about articles, delivery or any other important content. It will help you answer the buyer's questions and dispel his doubts about the purchase. Use it at your discretion.
You can remove it or return it back by changing one checkbox in the component settings. Very convenient.