Разбор кейса: дизайн сайта ежегодного конкурса Awwwards

Трудно найти в мире дизайнера, который не знает о существовании Awwwards. Наша студия давно “обитает” на этой креативной платформе, а не так давно нам также представился шанс поработать совместно с Awwwards над одним из их специальных проектов. Давайте рассмотрим этот кейс и процесс создания сайта для проведения конкурса на лучший дизайн в 2020 году.

В творческую команду со стороны Tubik вошли Эрнест Асанов, Кирилл Ерохин, Андрей Дробович, Александр Петулько и Полина Таран.

Клиент и проект

Awwwards — известная во всем мире платформа, объединяющая дизайнеров и разработчиков, на которой они могут обмениваться креативными идеями и инновационными подходами. Это “место встречи”, где профессионалы в области цифрового дизайна со всего мира могут искать вдохновение, делиться знаниями и опытом, общаться и оставлять конструктивную критику.

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

Каждый год команда Awwwards выбирает лучшие веб-сайты, дизайнеров, студии, агентства, разработчиков, интернет-магазины и мобильные проекты, и присуждает им награды.

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

Процесс разработки дизайна

Традиционно процесс проектирования начался задолго до того, как на бумаге появилась первая строчка, а на экране — первый пиксель. Сперва были созвоны с клиентом и обсуждение его ожиданий, а также тщательное изучение сайтов “Annual Awwwards” прошлых лет. 

Взгляните на один из мудбордов, собранных в процессе работы:

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

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

Паттерн

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

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

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

В этот момент в нашей работе произошел поворот на 180 градусов: дизайнеру пришла в голову идея, гениальная в своей простоте. Он создал паттерн из грамотно вырезанных фрагментов реальных проектов, представленных на Awwwards.

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

Веб-сайт

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

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

На сайте используется интерактивная многослойная сетка: прокрутив страницу вниз, вы увидите части фонового паттерна.

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

Все страницы интерактивны. Ощущение глубины создается за счет эффекта, который возникает при перемещении курсора. Светлый круг в центре включает название номинации и мгновенно притягивает взгляд за счет высокого контраста с фоном.

Еще одно занятное решение — анимации, которые запускаются при взаимодействии с меню: благодаря типографскому контрасту дизайн выглядит забавным и привлекательным.

Главное отличие сайта этого года — элегантная и минималистичная страница “Зал славы” (Hall of Fame), на которой представлены победители прошлых лет.

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

“Команда Tubik смогла спроектировать замечательный цифровой опыт: потрясающая художественная концепция, безупречная типографика и работа с негативным пространством в сочетании с красивым пользовательским интерфейсом и интересными анимациями.

Tubik использует возможности современных браузеров на максимум, создавая чрезвычайно удобный и увлекательный цифровой опыт,” — сказал Оскар Перес, соучредитель Awwwards. И, кажется, эта цитата — самое подходящее завершение нашей творческой истории.