Как сервису сделать адаптирующийся под клиентов и в то же время узнаваемый фирменный стиль

Когда у вас площадка с сотнями тысяч пользователей, генерирующих контент, очень сложно отследить, чтобы они соблюдали единый фирменный стиль. Студия Ярость от AIC решила проблему с помощью алгоритмического дизайна.

giflogo_b

Задача

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

Исследование

Даже по их кейсам видно, что устоявшихся принципов и правил пока не существует.

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

Стиль

«Знания — сила»: притягивающая и объединяющая людей, вовлекающая их во взаимодействие.

Мы увидели Webinar.ru как точку соприкосновения людей, место силы, способной влиять на участников и менять их.

Identity_Webinar.ru_2
Identity_Webinar.ru_2

Базовые графические элементы — метаболы разной формы и размера, объединенные силовым полем.

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

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

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

Identity_Webinar.ru_3
Identity_Webinar.ru_3

Для первой постоянной является структура из пяти метаболов, для второй — универсальная гарнитура active grotesque, которая используется во всем портале. Цвет и расположение частиц в логотипе меняется каждый раз, когда страница обновляется.

Визуализация

Филипп работал над прототипами. Первые, самые общие, были созданы с помощью Grasshopper 3D — нужно было понять, как живет то, что придумал дизайнер. На каждой итерации, которых было около 8, казалось, что вот эта — последняя, и мы поймем, что нужно. На каждом этапе важно было подобрать правильный инструмент, одновременно достаточно быстрый и позволяющий легко изменять прототипы. По мере уточнения концепции (характера паттерна), требовались все большие скорости вычислений и возникало все больше задач (заказчик хотел увидеть прототип в красивой обертке, как standalone app), поэтому от Grasshopper перешли на Processing и далее до чистой Java.

Затем Миша переводил алгоритм в JavaScript — чтобы изображение можно было увидеть в браузере. На этом этапе одновременно самым сложным и интересным оказалась реализация алгоритма построения метаболов в векторе. Все алгоритмы, которые удалось найти в интернете, были рассчитаны только для растра.

Миша: «Реализовывать алгоритм было бесконечно интересно, так как нельзя было обратиться к чужому опыту. К тому же наша графика рендерится в svg (векторный формат), и все линии там описываются математическими формулами. Попробуйте представить себе формулу, которая описывает, как одна окружность перетекает в другую! Не самая тривиальная задача».

Финальная версия проекта значительно отличается от первоначальной (которая создавалась без учета тонкостей разработки). Ведь нам хотелось все сделать максимально «честно», чтобы части построения алгоритма зависели от четких задаваемых параметров и не было рандомных чисел.

Когда удалось это реализовать, пришло время представить всем не только идею, но и ее воплощение.

D.Sobe-Panek
D.Sobe-Panek

Денис Собе-Панек

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

Identity_Webinar.ru_5
Identity_Webinar.ru_5

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

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

Хотите попробовать генеративный дизайн на практике? Создайте свою уникальную картинку тут: введите любое имя и получите изображение.

Идеи, которые нас вдохновляют, видео-интервью и переводы исследований, которые были нам полезны в процессе работы. http://blog.aic.ru/

Идеи, которые нас вдохновляют, видео-интервью и переводы исследований, которые были нам полезны в процессе работы. http://blog.aic.ru/