Процедурно-генерируемые логотипы в дизайне интерфейсов: технологии создания, возможности и ограничения использования

АРИСТОВА У.В., д.п.н., профессор НИУ ВШЭ, uaristova@hse.ru

КОЗЛОВ А.А., ассистент НИУ ВШЭ, akozlov@hse.ru

Процедурно-генерируемые логотипы в дизайне интерфейсов:
технологии создания, возможности и ограничения использования

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

Общие принципы генеративного дизайна как инструмента создания контента

Независимо от сферы использования процедурно генеративный дизайн можно охарактеризовать как контролируемую последовательность элементов, выстраивающихся в единую форму или композицию по заданным параметрам. На плоскости это может означать генерацию группы фигур и расстановку их в композиционный ряд. В 3D среде генеративный дизайн применяют для получения ряда уникальных объектов, которые не будут выглядеть копиями друг друга. Принципы генерации используются для получения уникального контента путем увеличения трудозатрат на производство программы, которая будет обрабатывать загруженную информацию для получения финального результата [5].

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

Примеры использования процедурной генерации

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

В 2D формате процедурную генерацию используют для создания абстрактных картин высокого разрешения, настраиваемых интерфейсов, текстур, ее новое применение найдено также в отдельных элементах интерфейсов, например, в логотипах [6].

Процедурно-генерируемый логотип и методы его отображения

Принципы процедурной генерации можно применять к различным элементам интерфейсов, в том числе создавать генеративные логотипы. Логотип (греч.logos- слово, typos – отпечаток слова) применительно к коммуникационному дизайну рассматривается как художественно разработанный текст, трансформированный в различных вариантах в зависимости от требующихся способов применения, но во всех случаях сохраняющий узнаваемость [4].

Логотип может использоваться в различных формах дизайна, классифицируемых в зависимости от применяемых технологий. В интерактивной форме логотип используется в дизайне интерфейсов, на веб-страницах, на видео и в анимационных роликах. В печатной форме мы встречаем логотип на визитках, плакатах, рекламных баннерах и др. При этом в интерактивной среде логотип в зависимости от технологии создания может использоваться статично и анимировано – в зависимости от замысла, а в печатной форме – только статично [7].

В современном мире между компаниями идет постоянная конкуренция как в экономических процессах, так и визуальных. Поэтому вопросы брендинга и айдентики актуальны для всех компаний, независимо от способа функционирования. Логотип как часть айдентики создается для самоидентификации в социуме и направлен на создание ассоциативной связи между материальными элементами и информационным полем, стоящим за данным символом. Это, безусловно, актуально для компаний, занимающихся интернет-маркетингом, стремящихся создать запоминающийся имидж для своих потребителей и заинтересованных в узнаваемости своего сетевого ресурса [1, 2].

Основные преимущества генеративного логотипа от статичного находятся в цифровой области и могут визуализироваться с помощью проекторов, экранов и прочих источников проецирования. Целевая аудитория, на привлечение которой рассчитан планируемый динамический эффект, – это постоянные пользователи подобных технологий [10]. Создать эффективный логотип, обеспечивающий узнаваемость ресурсу, возможно, поставив в центр проектирования логотипа свое отношение к потребителям, их особенностям, проблемам и потребностям [3]. Мы предполагаем, что в большинстве своем это люди, имеющие разнообразные гаджеты и постоянно их использующие как в целях получения информации, так и в целях приобретения товаров и услуг. Свободное использование технических устройств, перемещение вектора общения, получения информации и покупательских интересов в интерактивную среду создают необходимые условия для использования технологий привлечения внимания потребителей к визуальным эффектам интерфейсов путем выбора адекватных технологий разработки их контента.

Выбор генеративной технологии в целях получения логотипа для интерактивной среды заключается в целесообразности разработки подобного логотипа и сложностях в его графической реализации. Несмотря на затраты, идея генеративного логотипа пользуется спросом, так как создание уникального и запоминающегося потребителю логотипа – одна из основных задач в процессе проектирования дизайна интерфейсов [8].

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

• SVG-графика, где графика может управляться средствами CSS и код элементов изменяется через JavaScript.
• HTML и СSS под управлением JavaScript также может быть удобным решением.
• Использование Canvas-холста под управлением JavaScript.
• Использование Canvas как 3D среды с применением технологии WebGL.

Для статичного логотипа можно использовать любую программную среду, которая позволяет в результате создавать изображения общераспространенных форматов, таких как Jpeg, png, gif, для дальнейшего использования.

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

• общая форма, которая сохраняется за счет использования Т-платформы (см. рис. 1 и 1а);
• общий шрифт и написание логотипа (см. рис. 2);
• неизменную часть логотипа (см. рис. 3).

Рисунок 1. Визуальные приемы построения Т-платформы с использованием технологии процедурной генерации (T-Platforms supercomputers branding. TOMATDESIGN http://www.pinterest.com/pin/489625790712144727)	Рисунок 1а. Множественные варианты Т-платформ, полученные путем использования технологии процедурной генерации (T-Platforms supercomputers branding. TOMATDESIGN http://www.pinterest.com/pin/489625790712144727)
Рисунок 2. Пример логотипа «yugen» на технологии HTML5 от компании bythebooth (http://bythebooth.com/portfolio/yugen-html5-logo)	Рисунок 3. Пример логотипа «zuku» от wananchi (http://arkafrica.com/projects/zuku-brand-creation-and-strategy)

Пример разработки логотипа

В основу примера лег изменяемый логотип, разработанный преподавателями и студентами Школы дизайна НИУ ВШЭ для интернет-журнала Ризома http://rhzm.hse.ru с использованием технологии процедурной генерации (см. рис. 4).

Рисунок 4. Вид анимированного логотипа сайта rhzm.hse.ru (Школа дизайна НИУ ВШЭ)

За основу идеи был взят принцип метаболов. Для онлайн-издания выбрана технология реализации на Сanvas c управлением на JavaScript. Для реализации эффекта метаболов за основную форму принят шар с градиентом из центра с прозрачностью (см. рис. 5).

При приближении двух объектов между ними должна образовываться связь. Этого эффекта можно добиться, когда два прозрачных градиента накладываются друг на друга (см.рис. 5а).

Реализация финальной связи происходит через вырезание альфа-канала (см. рис. 5б).

Рисунок 5. Разработка логотипа в Adobe Photoshop	Рисунок 5а. Разработка логотипа в Adobe Photoshop	Рисунок 5б. Разработка логотипа в Adobe Photoshop

Программа состоит из двух частей.

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

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

Рисунок 6. Вид HTML5 логотипа с несколькими Canvas-объектами	Рисунок 6а. Вид HTML5 логотипа без центрального статичного объекта	Рисунок 6б. Вид HTML5 логотипа с использованием случайных размеров и другого цвета

Формула расчета анимации по одной из осей:

• текущая позиция X – текущая позиция объекта;
• конец анимации X – точка, к которой должен прибыть объект;
• скорость анимации – количество шагов задается в настройках

 ((конец анимации X) - (текущая анимация X))/(скорость анимации) = значение, на которое нужно изменить позицию объекта

Имея настроенную программу по созданию динамического логотипа, мы можем управлять его внешним видом. Например, использовать несколько Canvas-объектов (см. рис. 6).

Или использовать без центрального статичного объекта (см. рис. 6а). Другой вариант может дать использование случайных размеров и другого цвета (см. рис. 6б).

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

Результаты применения технологии, возможности и ограничения использования

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

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

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

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

На основе проведенного визуального исследования можно выделить ряд преимуществ в использовании генеративного логотипа [6]:

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

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

1. Тим Браун. Дизайн-мышление: от разработки новых продуктов до проектирования бизнес-моделей. // Пер. с англ. Владимира Хозинского. – 2-е изд. – М.: «Манн, Иванов и Фербер», 2013. – 256 с.
2. Джоэл Баркер. Опережающее мышление: Как увидеть новый тренд раньше других .// Пер. с англ. – М.: «Альпина Паблишер», 2014. – 188 с.
3. Ричард Моррис. Фундаментальные основы дизайна продукции. – М.: 3d Cooking, 2012. – 184 с.
4. Техническая эстетика и дизайн: Словарь. – М.: Академический Проект; Культура, 2012. – 356 с.
5. Hartmut Bohnacker, Benedikt Grob, Julia Laub. Generative Design: Visualize, Program, and Create with Processing. Princeton Architectural Press (August 22, 2012).
6. Matt Pearson. Generative Art. Manning Publications; 1 edition (July 10, 2011).
7. Filip Visnjic. Neuronal Synchrony – WebApp as visual performance. (July 11, 2013) – http://www.creativeapplications.net/javascript-2/neuronal-synchrony-webapp-as-visual-performance.
8. Sandra Rendgen. GENERATIVE LOGOS (May 13, 2013) – http://sandrarendgen.wordpress.com/2013/05/03/generative-logos.
9. David Gillet. WEDF Talk – http://davidgillett.co.uk/wedf-talk.
10. Tim Lapetino. The future is Fluid: Inside Dynamic Logos – http://www.hexanine.com/zeroside/the-future-is-fluid-inside-dynamic-logos.

Ключевые слова: процедурная генерация, интерфейс, логотип, контент, дизайн, инсталляция, текстура, коммуникационнный дизайн, визитка, плакат, анимационный ролик, анимация, баннер, веб-страница, интернет-маркетинг, Школа дизайна НИУ ВШЭ, Ризома, виртуальная среда, генеративный логотип, моделлер, 2D среда, 3D среда, SVG-графика, Java Script, WebGL, Canvas-холст.

Aristova U.V., doctor of pedagogical sciences, professor of National Research University «Higher School of Economics», uaristova@hse .ru

Kozlov A.A., assistant of National Research University «Higher School of Economics», akozlov@hse .ru

The procedural generated logos in design of interfaces: technologies of creation, opportunity and restriction of use.

Computer interfaces – one of the most dynamically developing components of the virtual environment. They passed some consecutive stages in the development and today we enter a new era of the self-adjusted interfaces. Procedural generation becomes the leading technology of design of content of the sites and their visual filling. In article on concrete examples advantages and shortcomings of use of this technology and methods of visualization of dynamically created logos are considered, the main receptions by means of which are described it is possible to create a generative logo and to keep its recognition.

Комментарии могут оставлять только зарегистрированные пользователи