Designing a website is an exciting time — you finally get to take all the ideas you’ve been juggling in your head and turn them into something real. You may already have a list of inspiration websites, whose designs and user experience you aim to capture yourself.
But, what about websites that are truly exceptional?
For a website to win awards, it needs to transcend the typical user experience, and even the great user experience, to deliver something one-of-a-kind and unmatched in its space.
While building an award-winning website may be out of your scope in terms of technical limitations,时间, or预算，您仍然可以合并网站上每个元素。另外，这些示例简直很酷，可以看出 - 它们使我们想起了什么web development.
在这篇文章中，我们已经挑选了过去几年中五个屡获殊荣的网站设计。对于每个人，我们将分解使它很棒的东西以及我们可以从设计师那里学到的东西。
屡获殊荣的网站
从韦比斯到agwwards，这是我们最喜欢的一些获奖者 - 让我们推出红地毯。
Kettle
Best User Interface 2021, 2021 Webby Awards
Creative Branding Agency Kettle创造了令人惊叹的在线形象，仔细结构化，以使合作者加入。仅从网站上看，这个组织知道如何吸引您的注意力，保持关注并在适当的时候迅速采取行动。
Kettle’s website greets visitors with a full-width video featuring a rapid-fire overview of its projects, approach, aesthetics, and philosophy. Each shot lingers just long enough to process visually, but fast enough to account for the average viewer’s attention span.
当您滚动时，您会注意到水壶放弃了传统的垂直滚动，以进行增量滚动方法 - 主页中的部分像幻灯片一样显示。这种信息的“滴灌”更加精确地关注访客的注意力。视频结束后，该网站介绍了具有主要品牌的项目，以建立信誉（以及CTA到联系表）。
单击这些案例研究之一，概述了该机构的工作。请注意，所有案例研究页面如何采用类似的格式和品牌化 - 项目不同，但是Kettle始终采用其商标方法。
Returning to the homepage, Kettle uses the available real estate to highlight its standout projects. On each slide, the cursor itself acts as a CTA, prompting users to click anywhere to explore a project in-depth. This technique lowers interaction cost since the user need not move their cursor to a button or hyperlink.
While Kettle’s homepage scrolling method works, it applies standard scrolling to its other pages. That’s probably for the best, since staggered scrolling is bound to get tedious after a while. For faster site-wide navigation, there’s a menu in the top corner where users can jump between case studies. On unconventional sites like this, a more familiar component like a menu can help ground users and keep them around longer.
If you’re looking for more design inspiration, design agency websites andweb development agency网站是值得一看的好地方 - 这些网站实际上是这些组织最擅长的。
Garoa Skincare
Site of the Day (2020), Awwwards
Especially with ecommerce websites, it’s easy to fall in line with design norms. There’s nothing wrong with that — ecommerce websites need to display a lot of information in ways that users are accustomed to. But, conventional online stores typically don’t win awards.
Our next featured website aims to defy conventions while retaining familiarity to promote sales. The website for Garoa Skincare sells seasonal skincare products sets an example for other businesses to strive for.
在前端，该网站非常丰富，详细信息很容易错过其中的许多网站。滚动后，您会遇到动画用户界面元素，不同速度的视差效果，侧滚动，微妙的文本动画以及页面之间的淡出过渡。
这些效果使整个网站感觉像是一个生命实体，回想起该网站的品牌关系引起的自然环境。不知何故，它们以一种感觉并不压倒性而是凝聚力的方式融合在一起。
This excellent design isn’t limited to the homepage either: Each product page itself is an experience, providing instructions and a comprehensive ingredient list for every product.
Even the cart adopts the rest of the site’s aesthetic. Whereas many ecommerce sites seem to ditch the front-end branding in the checkout section, Garoa skincare carries it over nicely.
When you proceed with checkout you’ll be directed back to the homepage. This is because — sorry to break it to you — Garoa isn’t an actual business. This website is a portfolio project of designer Bruno Arizio. Of course, this doesn’t detract from the website’s merit, and there’s so much here to draw from and apply to your own (hopefully real) business.
第三次罢工
最佳主页，2020年韦伯奖
Creating emotional impact through a website is difficult. When browsing the web, users probably aren’t looking to be emotionally affected in the way they might be while consuming other art or entertainment. Some websites pull it off, though, including The Third Strike.
第三次罢工is a documentary film and campaign that brings attention to those affected by the three-strikes law in the United States, which imposes harsh punishments on repeat offenders of nonviolent drug offenses. It’s a heavy but important issue that this website communicates effectively.
The experience of visiting the Third Strike website begins with a splash page prompting visitors to turn on sound, always a good choice before an audio or video clip autoplays.
After that, there’s a short trailer for the documentary to serve as an introduction for the film, the website, and the Decarceration Collective, which is the organization featured in the documentary.
The real gem of this website is the audiovisual homepage that follows — a spread of photos of inmates incarcerated under the three-strikes rule. There’s no scrolling here. Instead, users navigate this page with their cursors. Selecting a photograph takes you to an offender’s story page.
The stories are expertly composed, combining text, imagery, vector graphics, and audio to recount each inmate’s life, deliver an emotional impact, and inspire action. Each story ends with a prompt to read the next story.
Lastly, the site’s navigation menu includes links to resources where you can learn more about the three-strikes rule and the work of the Decarceration Collective. The ordering of information matters here — you learn about the people first, as they’re the reason this website and this organization exist. Everything else comes after.
精心设计
Best Homepage Nominee, 2020 Webby Awards
精心设计的专业人士组织活动（称为“经验”），每个活动都以不同的主题为中心。它的网站虽然比以前的选择更简单，但它引起了人们对细节和仔细设计的关注，以帮助它脱颖而出。
The first thing you’ll notice on Crafted’s homepage is the sparse broken grid, which emphasizes the prominent text. It’s important to convey Crafted’s purpose right away, as first-time visitors likely aren’t aware of what the nontraditional company does.
Notice how the images are scroll-responsive, zooming in and out as you move down the page. The effect is subtle, enough for users to register, though maybe not consciously. This small design touch elevates the images above other image-heavy websites and makes the page feel dynamic and fun.
精心设计also knows the value of whitespace (or, in this case, more like tan-space). It gives page elements space to breathe and retains only the most vital page elements
用户可以探索由Crafted托管的过去经验，每个经验都有一个事件照片和来宾列表的画廊。但是，请注意到达页面底部时会发生什么。您只需继续滚动而不是被指示单击下一页。该网站最终将我们发送到下一个体验页面。整个体验是无缝的 - 没有明显的装载元素，而且做得很好。
而且，我们不要忘记在页面加载过程中弹出的小插图，这是在网站上的页面之间移动时保持轻松的另一种方法。
Giulia Tonon
Website of the Day (2021), CSS Design Awards
Our last feature is a portfolio website by illustrator and graphic designer Giulia Tonon, recipient of aCSSDesign Award. Like all great portfolio websites, this one keeps things simple and focused on the art. However, unlike most, the site itself highlights the work beyond what a simple gallery might do.
出色的节n of the website is the homepage, in which users scroll to reveal art entering from the top and the bottom, moving in both directions. This works particularly well for Tonon’s art pieces, which have consistent dimensions. The animations make the work appear as if they’re floating in space, like papers in the air.
Click on an image to view a larger version, then either return to the homepage or click through the images in a more traditional slideshow view.
很明显，如何与艺术家联系 - 该网站提供了一个联系页面，这只是一个邮件链接，太大了，无法错过。
This simple but effective site reminds us that some of the best website designs aren’t always the most elaborate or content-rich (though the quality of the content certainly matters). Rather, these designs utilize techniques in ways that complement the existing content, to present it in new and delightful ways.
应该受到鼓掌的网站
您可能不会试图建立赢得奖项的业务或个人网站，但是从互联网提供的最佳中找到灵感并没有什么坏处。即使您从研究中只采取了一个或两个小想法，也值得。
Finally, these examples teach us that the most standout websites aren’t just collections of web pages — they’re complete experiences whose design elevates the content without drawing our attention away, ultimately leading to better engagement and more conversions. Sure, a trophy is nice, but those are the real rewards.
最初发布于2021年10月29日，上午7:00 am，更新于2021年10月29日
Topics:
Website Development相关文章
