Лучшие дизайны сайтов 2021 года и что у них общего


27.12.2021 Время чтения - 11 минут 1467

Сейчас проводится море дизайн-соревнований для сайтов, но Awwwards, пожалуй, самое известное место для них. Номинация или победа там – признак профессионализма и способности учиться новому в UI/UX.

Пользователи и квалифицированные члены жюри на Awwwards могут голосовать за лучшие сайты дня, месяца и года. Они оценивают сайты по 6 критериям: дизайн, удобство использования, креативность, контент, мобильность и работа разработчика.

В этой статье мы проанализируем сильные стороны 10 лучших сайтов месяца в 2021 году (январь-октябрь) и расскажем, что у них общего.

Различные шрифты и диагональная прокрутка сайтов

Shift от Garden Eight

Лучший сайт октября 2021 года доказывает, что более трех шрифтов на сайте это не всегда «моветон». Но нужно делать это последовательно.

Что в нем хорошо?

Для заголовков дизайнеры скомбинировали 2 вида гарнитур:

  • Одна жирная и упрощенная, скорее всего, Almarena Regular
  • Другая изысканная и с острыми краями, немного похожа на Black Gold VP Display

Garden Eight превращает разные шрифты в мотив, который сохраняется на всем сайте и делает его узнаваемым. А минималистичный стиль работает в пользу того, что разные шрифты не отвлекают зрителя.

Для основного текста они использовали шрифт попроще. Скорее всего, Recta Light Small Caps, а для меню – Meche Pro Light. 4 разных шрифта – 1 сайт.

Дизайн минималистичный, выполнен в черно-белых тонах, с ярким красным курсором, что является приятной деталью. На сайте Shift есть темный режим: это просто мастхэв для тех, кто создает черно-белые сайты.

Диагональная прокрутка – еще одна сильная сторона этого сайта. Создана с помощью анимации GSAP и Barba JS:

Диагональная прокрутка Shift

Экспериментальный способ того, как The Shift, на 90% спокойный и плавный, оформили свою страницу 404, действительно выделяет этот проект:

Страница ошибки Shift

Что меньше всего понравилось Awwwards в The Shift?

Самый низкий балл у сайта за удобство использования. Хотя смешивание шрифтов – это весело и все такое, создатели никак не выделяли хедер:

Мелкие заголовки

Кроме того, экран, на котором вы можете перетаскивать фотографии вместе с курсором, может сделать текст нечитаемым:

Горизонтальная компоновка и «сумасшедший» режим

GRIDS от агентства Obys

Сайт, выигравший в сентябре… состоит из сеток. Они представляют собой набор горизонтальных и вертикальных линий, образующих узор, который помогает выровнять элементы дизайна.

Что в нем хорошо?

Сайт выполнен в черно-белом цвете и на первый взгляд кажется минималистичным. Агентство сделало его без кода, в Readymag.

Главная страница похожа на швейцарский стиль благодаря крупной типографике. Никаких фотографий и красочных иллюстраций. Вместо этого дизайнеры вводят множество геометрических фигур: пользователь перемещает их с помощью скролла. Многие части сайта расположили горизонтально: с возможностью прокрутки справа налево.

Grids написали сильный и четкий UX-текст, что тоже является плюсом при выборе лучшего сайта месяца.

Но самая интересная и приятная часть – это… «сумасшедший» режим! Вверху есть кнопка для включения, а рядом режим сетки. И наблюдая за летающими формами, ты действительно считываешь, сколько идей создатели вложили в этот проект:

«Сумасшедший» режим GRIDS

Что меньше всего понравилось Awwwards в Grids?

Самый низкий балл за удобство использования: 8,0. Некоторым пользователям, вероятно, надоело делать несколько полных прокруток с помощью мыши, чтобы черные квадраты «перепрыгивали» через гигантские буквы в начале главной страницы. Яркая типографика – это хорошо, но среднестатистическому опыту она может навредить.

Эффект помех и видео у WebGL

Webby Awards XXV анимация загрузки от Media.Monks

Победитель августа Webby Awards XXV – это сайт виртуального шоу об интернете. Тут вы явно не ожидаете, что он будет заурядным или минималистичным.

Что в нем хорошо?

Вначале вас приветствует анимация загрузки, которая требует от пользователя нажатия «go» для продолжения.

Главная страница проста, без прокрутки, со спиральной 3D-анимацией и сетками на заднем плане. Музыка подготавливает зрителей к видео, которые можно смотреть по частям или целиком.

Главная страница Webby Awards

Несмотря на то, что Webby Awards может показаться немного запутанным и громким, его сильная сторона – это, конечно, эффекты помех, созданные с помощью WebGL. Как будто вы включили слишком много телевизоров:

Эффекты помех WebGL в Webby Awards

Сайт не для всех, но и не для повседневного использования. Это шоу. Как и его UI/UX.

Что Awwwards меньше всего понравилось в Webby Awards?

Эта страница получила всего 7,47 балла за удобство использования. На любой странице сайта у пользователей нет особой свободы, несмотря на небольшое гамбургер-меню в левом верхнем углу. А еще Webby Awards заставляет вас каждый раз смотреть вступительное видео, но, к счастью, его можно пропустить.

Рассказ через игры

The Harmonic State от Active Theory

В отличие от некоторых других победителей конкурса Awwwards 2021 года, The Harmonic State (июльский чемпион) далек от минимализма. Хотя здесь базовая типографика и не особо много текста, анимация, наверное, самая сложная из всех, что мы видели в этом году.

Что в нем хорошо?

На главной странице дизайнеры сделали 3 уровня WebGL-анимации: частицы пыли, квадраты и червеобразные линии. Перед загрузкой главной страницы вам предлагают использовать наушники для лучшего опыта: музыка следует за пользователями повсюду.

Пользователь остается вовлеченным за счет геймификации: в Harmonic State входит не 1, а 3 игры, созданные с помощью WebGL. Они уникальны и круты, каждая по-своему, но могут заставить понервничать людей, играющих во Flappy Bird.

Игры от Harmonic State

Что Awwwards меньше всего понравилось в Harmonic State?

3 критерия получили менее 8 баллов: дизайн, удобство использования и работа разработчика. Все эти игры и анимации требуют времени для загрузки, что является недостатком. Нам также не очень понравились некоторые дизайн-решения, включая саунд-дизайн. Наряду с одной из игр, которая включает в себя темные щупальца, которые задумывались как телефонные линии… Гармоническое состояние становится вдруг Пугающим состоянием.

Странные ассоциации

Motion UI-дизайн в портфолио

Портфолио Аристида Бенуа

Представьте, что ваше портфолио выиграло в номинации «Лучший сайт июня» на Awwwards. Довольно дико, да? Но для Аристида Бенуа это реальность.

Что в нем хорошо?

Кто-то сказал: «Не судите о портфолио человека, пока не узнаете его цели». Но очевидно, что такой крутой сайт без комментариев не обойдется. Сайт использует WebGL, GLSL и Javascript.

Главная страница выполнена в ч/б, с плотно сжатыми фрагментами его работ в горизонтальной прокрутке. Разработчик не просто продает свои таланты, но и выводит свое портфолио на новый уровень. Нажмите на любую работу, и она раскроет весь свой потенциал. А еще шрифт, используемый для текстов, действительно классный: это Bitcrusher Compressed Heavy.

Motion UI от Аристида Бенуа

Моушн-дизайн динамичный и плавный. В дуэте с горизонтальной прокруткой получается идеальное слайд-шоу. Единственное, немного разочаровывает то, что слайды справа не прокручиваются. Вам нужно щелкнуть по ним напрямую или использовать кнопки со стрелками для навигации.

Что меньше всего понравилось Awwwards в портфолио разработчика?

Самые низкие оценки поставили за удобство использования и работу разработчика. Мы же можем выделить бесполезное меню, которое не служит реальной цели, потому что оно слишком маленькое:

Декоративное меню

«Скроллтелинг» и 3D-анимация

Prometheus Fuels от Active Theory

Что может быть лучше, чем Ford Mustang? Только анимированный 3D Ford Mustang, который едет по анимированной 3D-пустыне. Но Prometheus Fuels выиграла июньскую награду за лучший дизайн пользовательского интерфейса не только за это.

Что в нем хорошо?

Сайт представляет собой стилизованную интерактивную историю WebGL, которая раскрывается посредством прокрутки (через скроллтелинг). Это определенно тенденция 2022 года. Форма повествования, когда по скроллу все шрифты, фрагменты текста и другие элементы начинают оживать.

Prometheus Fuels использует анимацию WebGL для плавности. Три основных цвета (синий, красный и белый) передают ощущение 50-х, которое знакомо нам по видеоиграм Fallout. Пикселизация также помогает это передать.

Дизайн 50-х от Prometheus Fuels

Веб-сайт создает иллюзию присутствия, используя одно и то же место на протяжении всего путешествия по прокрутке: пустыню. На этот раз «зеленый» сайт, а не зеленый. Спасибо Безумному Максу за это.

Что меньше всего понравилось Awwwards в Prometheus?

Самый низкий балл – критерий разработчика. Сайтам с большим количеством анимации требуется время для загрузки. А еще лендинги – не лучший выбор для SEO.

Анимация логотипа

Superlist от GC

Superlist, новая версия Wunderlist, появилась на Awwwards как победитель в номинации «Лучший сайт апреля 2021 года».

Что в нем хорошо?

К сильным сторонам сайта относятся: использование логотипов в творческих формах, вроде фоторамки, и динамическая 3D-анимация, созданная с помощью WebGL и на базе Three JS. У Superlist очень плавные переходы при загрузке и крутая интерактивная кнопка «Получать уведомление». В целом, это очень прочная демонстрация продукта с множеством интересных функций. Исключение это разве что UX-текст.

CTA от Superlist

Что меньше всего понравилось Awwwards в Superlist?

В целом, этот сайт получил более низкие баллы по всем критериям, чем другие победители, придерживаясь твердых 7,8. Мы думаем, что это из-за мелкого шрифта для большей части текста. Кроме того, как и у всех одностраничных сайтов, в будущем у него могут возникнуть проблемы с SEO.

Интерактивный CGI и саунд-дизайн в интерфейсе сайтов

Into the storm от Media.Monks

Сайт, спонсируемый Военно-воздушными силами США, выиграл конкурс за март 2021 года на Awwwards.

Что в нем хорошо?

Это проект о невероятном спасательном путешествии с великолепным звуком, который следует за пользователями, куда бы они ни пошли на сайте.

В таких проектах очень важен сторителлинг. Сайт использует яркие цвета и разграничители с холодной цветовой палитрой (синий, серебристый, белый). Благодаря этому легко представить снежную погоду и шторм, погружающие нас в спасательную миссию. Сейчас это уже даже не сайт, а небольшой документальный фильм. Аудиокомментарии обозначили анимированными радиоволнами.

История передается с помощью скролла. Ни меню, ни всплывающих окон. Только потрясающая CGI-анимация. Сделали много микровзаимодействий, чтобы заинтересовать пользователей. Например, вы можете в каком-то роде управлять вертолетом и спасательной командой.

Что касается технических деталей, то в проекте «Into the storm» используются HTML5, WebGL, анимация GSAP и Vue JS. В целом, это очень эмоциональный проект, на который обязательно стоит взглянуть!

Что меньше всего понравилось Awwwards в Into the Storm?

Самый низкий балл – за удобство использования. Что ж, управлять вертолетом довольно сложно.

Передозировка миловидности

Умами Лэнд от Media.Monks

Что ж, никогда бы не подумал, что влюблюсь в говорящего онигири, но… Лучший сайт февраля 2021 года знакомит нас с миром японской кухни через очень симпатичных персонажей, саундтрек, достойный видеоигр, и теплые цвета. Это проект для Google.

Что в нем хорошо?

Стартовая страница проста, как и у большинства образовательных проектов Google. Этот сайт имеет несколько привлекательных факторов:

  • Совершенно очаровательные 3D-иллюстрации и анимация;
  • Милые тексты;
  • Мини-игры;
  • Взаимодействие с перетаскиванием;
  • Речь через комические пузыри;
  • Google поиск, позволяющий узнать, подают ли выбранное вами блюдо рядом с вами.
Игры Умами Лэнд

Сайт может раздражать некоторых людей своей детскостью, но он просто стремится развлечь аудиторию всех возрастов и национальностей. Он заставляет вас возвращаться к нему много раз. Мы присоединяемся к тому человеку на Awwwards, который прокомментировал: «Надеюсь, все сайты в будущем будут говорить на онигирисе».

Что Awwwards меньше всего понравилось в Umami Land и как они посмели?

Самые низкие оценки сайт получил за удобство использования и критерии разработчика. Иногда взаимодействия перетаскивания кажутся вынужденными. И вам понадобится хорошее интернет-соединение, чтобы загрузить всю эту красоту.

Убедительная CTA

Sea Shepherd от Makemepulse

Лучший сайт января 2021 года передает эмоции через символическую анимацию и 3D.

Что в нем хорошо?

Это случай, когда проект выигрывает не только потому, что он круто выглядит (шрифт мог бы быть лучше), но и благодаря убедительному звуковому повествованию. Эффект усиливается за счет того, что музыки практически нет, только голос.

Мы думаем, что создатели выбрали синюю цветовую палитру, чтобы изобразить не только океаны, но и глубокую печаль. Анимированная Земля покрыта сетями.

На этой странице одну из самых убедительных CTA кнопок за весь год: когда пользователь выбирает сумму пожертвования, на экране отображается, сколько именно вы можете внести в океан с помощью визуальных эффектов:

Счетчик пожертвований Sea Shepherd

Что Awwwards меньше всего понравилось в Sea Shepherd?

Иногда для победителей предоставляются дополнительные отчеты. Например, отчеты о совершенстве мобильных версий. В этом случае оценка качества мобильной версии оказалась самой низкой (низкая производительность, длительное время загрузки).

Что общего у сайтов победителей?

Анимации и видео на первом экране

Первый экран – это ваше лицо. Он задает общее настроение сайта, поэтому победители используют там анимацию или видео.

Хотя бы несколько взаимодействий

Интерактивные сайты – это весело. Они стали частым решением в UX, UI-дизайне. Интерактивность помогает направлять посетителей к информации, которую они ищут. Имея множество способов взаимодействия с пользователями, дизайнеры могут выбрать то, что лучше всего подходит для их проекта.

Эмоции

Мало кто из дизайнеров задумывается, какие эмоции должен вызывать сайт. Поэтому если сайт может вызывать радость, грусть или симпатию и это выражается в UI, такой проект обязательно запомнится.

Швейцарский стиль

Хотя это касается не всех, но все же многие из ежемесячных и ежедневных победителей на Awwwards используют швейцарский стиль на своих сайтах. Его принципы: ясность, удобочитаемость, объективность. Простая навигация – тоже часть швейцарского стиля.

Что еще учитывает жюри?

Технические показатели награжденных сайтов: насколько быстро загружается сайт, скорость переходов, точность верстки. Они не смотрят на код, а оценивают сайт как пользователи. Также оцениваются SEO-параметры сайтов.

Очки добавляют оригинальным решениям, а иногда и совершенно экспериментальному дизайну.