Обзор лучших сайтов 2016
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 разработали и запустили необычный помощник в выборе автомобиля. Пользователь сайта отвечает на вопросы, выбирая образы, наиболее близкие его стилю жизни. На основе этих данных самообучающийся модуль предлагает клиенту автомобиль мечты — в соответствии со вкусами и потребностями человека. В основе сервиса — искусственный интеллект.
Как показывают эти примеры, к любой задаче можно подойти нестандартно. Хотите вызвать у посетителей сильные эмоции и запустить волну общественного интереса? Тогда дерзайте, творите и равняйтесь на лучших.
Лида Федорова
9336
Оцените статью
(3.3)

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

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

Другие статьи в блоге
Статьи ~ 20 минут на чтение

G Suite: 33 полезные функции для бизнеса

742
24 апреля 2020
Статьи ~ 5 минут на чтение

Как работать из дома эффективно: лайфхаки от удаленщиков Uplab

867
31 марта 2020
Статьи ~ 20 минут на чтение

Как продвинуть интернет-магазин с помощью коммерческих факторов

1234
27 марта 2020
Статьи ~ 15 минут на чтение

Work From Home: полезные сервисы для удаленной работы

1155
24 марта 2020
Статьи ~ 30 минут на чтение

Теория ограничений систем Голдратта: как повысить эффективность бизнеса

2451
16 марта 2020
Статьи ~ 10 минут на чтение

Сайты электротехнической отрасли: разбираем лучшие практики

752
28 февраля 2020
Статьи ~ 15 минут на чтение

Как сделать качественный сайт электротехнической компании. Чек-лист

1163
27 февраля 2020
Статьи ~ 30 минут на чтение

30 сервисов, чтобы создать онлайн-курс и заработать на нем

10678
18 февраля 2020
Статьи ~ 15 минут на чтение

Наполнение сайта контентом без ошибок: чек-лист

2565
31 января 2020
Статьи ~ 20 минут на чтение

Как в Uplab разрабатывают сайты. Финальный этап

1200
24 января 2020
новое
Мы сделали постер
«Набор инструментов для организации работы компании в online»
Получить бесплатно
Закрыть
Спасибо
за обращение
Мы ответим вам
в ближайшее время.
Получить постер