Обучайся бесплатно с WAYUP Premiere сегодня вечером

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

Идея о своеобразной «смерти» статического логотипа развивается уже в течение некоторого времени, когда веб-мастера размышляют о веб-дизайне, соцмедиа проектах, о небольших favicons в веб-браузерах. И да, думать о развитии веб-дизайна в целом, о конкретных стилях, трендах, течениях приходится много, и тогда осознается мысль и сложившаяся ситуация: статический логотип используется мало, он стал уходить от нас.

С другой стороны, каждый из вас может привести немало примеров, когда компании используют только обычную картинку в качестве Logo без какой-либо анимации. Дело в том, что в мире нет глобального перехода к анимации, но есть огромное количество возможностей и причин для перехода. Например, если изучить портфолио студии Clear Design, то можно увидеть назначения, цели, для которых создавались анимационные логотипы. Разумеется, и сами они тоже есть. Стоит также приглядеться к видеоконтенту, соцмедиа проектам, где используются анимированные логотипы,  да и многие сайты тоже не чураются их.

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

Отправная точка мыслей: векторы

По факту дизайн логотипов не изменился. Каждый бренд требует наличия отлично прорисованного векторного изображения в одноцветной или многоцветной палитре.  Это основа и из нее могут создаваться уже вариации. Например, в использовании цветовых схем или сочетания строгих векторных линий с красивыми витиеватыми элементами. Вариации эмблем и логотипов известных торговых марок: Opera, Nivea, Slack, Mercedes. Традиционный векторный логотип  масштабируем, а потому его отлично можно использовать и для вывода на печать, и в любом приложении или на сайте.

Но что же изменилось за последние годы, такое незаметное и небольшое?

Наличие огромного числа мобильных платформ. Приложений для разных устройств (консоли, приставки, смартфоны, часы и прочее) очень много и не все они способны выводить изображение в полную величину или с мелким текстом (пример логтипа Rainbow6). Тогда удобнее использовать небольшую анимацию, что будет способствовать лучшему визуальному восприятию логотипа. Причина также и в том, что многие соцмедиа проекты обладают круглым «пятном» изображения профиля, в котором многие логотипы банально не умещаются. Хорошо, например, BMW, а что делать таким, как GJ – вариаций бренда много. Поэтому анимация становится тем способом, который дает возможность пользователям лучше рассмотреть логотип и узнать бренд.

 

Несколько размеров для отзывчивости

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

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

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

Например, Twitch, Macaw, Rog.ie, Yondr Studio, Shazam

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

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

Вспомните Slack, например, который как раз и имеет анимацию в приложении, а также Skype, Telegram.

Анимированные элементы в статическом логотипе

Отдельные анимационные элементы в общей конструкции статического логотипа  вошли в моду одновременно с появлением их и в веб-дизайне. Если присмотреться ко множеству сайтов, то практически на каждом из них можно увидеть небольшие или заметные анимированные элементы. Разумеется, что это автоматически стало применяться и к логотипам, тем более что даже Facebook позволяет использовать анимированное изображение для фотографии профиля. Посмотрите, как изящно используется анимация для логотипа Fubiz  и их сайт, где все варианты логотипа в действии, а также Todoist, rainbow six siege, Ubisoft The Division

 

После удобства использования анимированного логотипа на TV его стали внедрять и в веб-дизайн. Как правило, оригинальный вариант имеет какую-то одну динамическую часть/элемент. Да, лучше всего, когда анимация тонка, легка, воздушна и ненавязчива. Впрочем, как и дизайн сайтов, хотя некоторым брендам удается грамотно использовать и полностью анимационный логотип, который покрывает некоторую часть всего сайта и занимает, тем самым, центральное место домашней страницы.

Некоторые Logo меняют свой вид при прокрутке страницы, некоторые во время загрузки, некоторые сами по себе или при наведении курсора мышки. Речь идет о abelodor, kommigraphics, inavoué restaurant, The Hunt for the Cheshire Cat, Wibicom, Authentiks Paris XV, Project Redspace

Большинство таких логотипов создаются в GIF варианте или с помощью CSS и SVG. Но в независимости от выбора формата, динамические логотипы позволяют пользователям вспомнить и узнать бренд, разнообразить контент на странице/сайте или придать уникальности, характера сайту.

Поиск целостности

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

И это тот момент, когда приходит новая концепция системы использования и проектирования логотипов. Эва Браун выпустила по этой теме интересное руководство для Design Manic, но мы обратимся только к некоторым моментам, которые нам важны на данном этапе.

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

Систему логотипа отчасти  можно сравнить с историей развития, ибо есть основа и есть вариации. И да, у Google логотип анимированный

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

Статический логотип еще жив

Проще говоря, дни статического логотипа заканчиваются. Постепенно. Возможно, даже не так быстро, как вам думалось в начале нашего материала. Когда брендинг развивается в нескольких направлениях, то возникает необходимость создавать систему логотипов и настраивать её (создавать варианты) для разных целей и каналов. Зачастую, одному работать над системой концепций сложно, требуются помощники, коллеги для создания полного брендинг-box. Например, это конструктор макета, аниматор, художник.

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

Выводы

Вы можете задаться вопросом: зачем веб-дизайнеру такая статья про логотипы? Не успел начаться новый год… Дело в том, что почти всегда дизайн в целом отталкивается и зависит от logo, а потому обладать даже такой общей информацией важно и необходимо. А если вы занимаетесь не только «рисованием» сайтов или версткой?

В то время, когда статический логотип может оказаться «мертвым», необходимо работать над созданием достаточно сильной эмблемы, которая способна продвигать бренд. Логотип важен для пользователей, ибо по нему и узнают компанию. Посмотрите внимательнее на логотип Coca-Cola, J7. Не чувствуете ли вы желание сходить на кухню и чего-нибудь выпить, водички, сока, чаю..?

В то же время, чтобы гарантировать успех и необходимость наличия анимированного логотипа, важно создавать все вариации в одном русле, ключе. Например, создаете вы статическую картинку в векторе, а через месяц решили сделать анимацию. Это может привести к некоторым проблемам, которые потребуют переработки и дизайна сайта. Но если вы решили сразу изменить статический логотип и соответствующим образом ввели анимированный такой же по стилю, то это… правильно. Небольшой пример: осенью 2017 года компания Ubisoft обновила свой логотип. Представьте, если бы на сайте был новый, а в приложениях остался бы старый? Казус…

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

Как вам материал?