Article title
22 июня 2017

Обзор лучших сайтов 2016

Лида Федорова
Веб-дизайнер, digital-агентство Uplab
Нет увлекательнее занятия, чем залипать на сайтах, победивших в международных конкурсах. Мы проанализировали лучшие сайты 2016 г. и увидели закономерности — в моде яркие идеи, интерактивность и геймификация.

Конкурсы в нашей выборке:

Awwwards
The FWA
CSS Design Awards
Red Dot Award
Epica Awards
Cannes Lions

Сайт музыкального лейбла —
Because Recollection

CANNES LION ­­­— гранпри.
CSS DESIGN AWARDS — сайт года.
AWWWARDS — сайт года.
D&AD — дизайн взаимодействия с пользователем (User Experience Design).
FWA — сайт дня (декабрь 2015).
EPICA — бронза.


Музыкальному лейблу Because Recollection исполнилось 10 лет. В честь юбилея они смоделировали интерактивное путешествие по самым ярким трекам студии. Основная идея сайта — музыку можно не только слушать, но и играть с ней.
Четкий тренд — геймификация сайтов, эффект которой особенно силен в случае с Because Recollection. Каждая песня — это новая игра, и неизвестно, чем удивит следующий трек.

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

Когда я увидела, как обложка моих любимых London Grammar оживает, и они едут в поезде, глядя на звездное небо, смысл песни раскрылся для меня, как никогда прежде.

Сайт СМИ — Falter Inferno

AWWWARDS — сайт года.
FWA — сайт месяца.
D&AD — анимация и иллюстрации для вебсайтов и цифрового дизайна (Animation & Illustration for Websites & Digital Design).
CANNES LION ­­­— золото.
WEBBY AWARDS — лучшее применение анимации или графики движения (Best Use of Animation or Motion Graphics).


Австрийская независимая газета Falter на сайте показала пороки общества. По мотивам игры Dante’s Inferno, они проводят пользователей через все круги ада. Из глубин преисподней человека спасает Falter.
Сайт выполнен в суровых, темных цветах. Диалог со зрителем ведется через анимацию и минимальное количество текста. В момент, когда пользователь доходит до последнего круга ада, ощущение беспокойства и ужаса усиливается за счет вибрации изображения. Дополняет картину зловещее звуковое сопровождение.

Сайты арт-проектов

Награды:
Cannes Lion ­­­— гранпри.
Epica — серебро.


Можно ли создать новую картину Рембрандта при помощи современных технологий?

Эксперты из разных областей изучили более 160 000 фрагментов 346 полотен художника.
Они собрали большой набор данных о текстуре и колористике картин, проанализировали пол, возраст и основные черты людей на портретах. На основе этой информации при помощи 3D принтера была создана многослойная картина — новое полотно великого мастера.

Мир становится иным, и разработчики проекта показывают, что будущее из фантастических романов уже наступило. Картины — это цифры! Их можно запрограммировать и распечатать послойно так, что не отличишь от оригинала. И что такое искусство, если всё есть цифры
и строчки кода?

Сайт знакомит нас с новым произведением искусства, созданным не руками человека,
а расчетом машин.
Динамичный фон, строгий шрифт, цифровая инфографика погружают нас в проект. Прокручивая страницу, пользователь «путешествует» по картине и изучает подробности исследований.

Все кнопки, ссылки и элементы навигации анимированные. На каждый скролл сайт отвечает движением и от этого кажется живым.

Сайт прекрасно справляется со своими задачами — вовлекает зрителя в созерцание картины, заставляет задуматься о том, что искусство, как и всё в этом мире, меняется с течением времени.
FWA — сайт года, выбор зрителей.
«Сквозь тьму» (Through The Dark) — совместная работа Google Play Music и Hilltop Hoods. Это интерактивный фильм для смартфона на песню, которую Дэн Смит написал, когда его ребенок проходил курс лечения лейкемии.

Видео показывает путь отца и сына через две реальности. Заходя на сайт, человек сам выбирает, как ему смотреть историю: через призму света или через призму тьмы.
Гугловцы создали перевернутый мир при помощи 3D-анимации и акселерометра камеры телефона. Упрощенные трехмерные сетки, текстура, освещение выходят за рамки стандартных методов анимации.
CANNES LION ­­­— серебро.
AWWWARDS — сайт дня.
FWA — сайт дня.
Сайт взял в Каннах не золото, а серебро, тем не менее он достоин вашего внимания. К тому же это единственная отечественная работа в нашей подборке.

Арт-проект раскрывает самые важные события в истории освоения космоса. Сайт с горизонтальной прокруткой, плавно меняющимся фоном, инфографикой, анимированными иллюстрациями и фотографиями. Развертывающаяся хронология сопровождается звуком — нарезками сообщений с орбиты.

Сайт события — фестиваль KIKK

CSS DESIGN AWARDS — сайт месяца.
AWWWARDS — сайт месяца.
FWA — сайт дня.


Тут мы решили разбавить нашу креативную подборку чем-то более земным.

KIKK — международный фестиваль цифровых и творческих культур. Участники мероприятия рассматривают, как сталкиваются искусство и наука, как технологии влияют на творческие профессии.

На примере сайта фестиваля видно, как легко можно оживить дизайн при помощи CSS-эффектов и нестандартной сетки для верстки. Не перегруженный контентом сайт отличается удобной навигацией.

Эффект сломанных пикселей сопровождает не только фотографии и кнопки, но и заголовки главного меню, что погружает нас в атмосферу технологичности.

Порадовала цитата Cтефана Загмастера о том, что он бы скорее переехал на Шри-Ланку, чем стал веб-дизайнером.

Промышленность — интерактивный помощник в выборе автомобиля

Red Dot Award — дизайн взаимодействия с пользователем (User Experience Design).

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

В Mercedes-Benz разработали и запустили необычный помощник в выборе автомобиля. Пользователь сайта отвечает на вопросы, выбирая образы, наиболее близкие его стилю жизни. На основе этих данных самообучающийся модуль предлагает клиенту автомобиль мечты — в соответствии со вкусами и потребностями человека. В основе сервиса — искусственный интеллект.
Как показывают эти примеры, к любой задаче можно подойти нестандартно. Хотите вызвать у посетителей сильные эмоции и запустить волну общественного интереса? Тогда дерзайте, творите и равняйтесь на лучших.
2722

Поделитесь материалом с друзьями и коллегами

Комментарии к статье

+7 499 653 78 83