Создание логотипа для адаптивных сайтов

Создание логотипа для адаптивных сайтов

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

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

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

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

Логотип для сайта. Адаптивные логотипы для адаптивного веб-дизайна

В данной статье мы подробно рассмотрим, почему же простые формы, гибкость и многофункциональность в разработке дизайна логотипа стали так важны. Безусловные законодатели моды: Twitter, Facebook, Spotify и Google, совершенствуют и безусловно упрощают графические элементы логотипов в ответ на внедрение адаптивных дизайнов и постоянно растущее влияние рынка гаджетов. У них есть чему поучиться. Кстати, не пропустите статью о карточном дизайне, ставшем уже чем-то большим нежели просто тренд 2018-2020. Эта тенденция только развивается и вовсе не думает сходить на нет.

Элементарные факты

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

Это было известно задолго до широкого применения адаптивных веб-дизайнов. Обратите внимание на самый первый логотип компании Apple образца 1976 года, созданный Роном Уэйном. Он был даже слишком креативным и навороченным, что неудивительно для инженера. В следующем году его были вынуждены заменить.

Логотипы Apple Computer

Стив Джобс пригласил дизайнера Роба Яноффа, чтобы тот создал что-то запоминающееся, простое и современное. Цвет знака изменялся неоднократно, но сама форма всегда оставалась неизменной. По прошествии 30 лет она стала иконой узнаваемости во всем мире. Именно простота данного дизайна позволяет ему работать в любом размере и на любом носителе. Этот знак идеален для адаптивной среды, хоть и был придуман задолго до появления этой технологии.

Однако, создание первого нелепого логотипа Apple – это типичная ошибка большинства современных компаний. Небольшие стартапы обычно имеют весьма ограниченный рекламный бюджет. Чтобы избежать дополнительных расходов они, к сожалению, поручают создание айдентики “не тому человеку”: не профессиональному разработчику, а просто кому-нибудь, кто может налепить что-нибудь симпатичное. В этом им безусловно “помогают” и бесплатные онлайн сервисы создания однотипных логотипов.

Рассмотрим логотип Great Lakes Golf. Ведь кто-то наверняка потратил уйму сил и времени, чтобы втиснуть в него столько элементов. В результате получилось нагромождение деталей, и, как вы понимаете, качественно уменьшить подобный логотип не получится. А теперь обратите внимание на логотип Skype: непринужденный, чистый и хорошо запоминающийся. Он будет хорош везде и спокойно уменьшится для маленьких пространств мобильных устройств.

Человеческий глаз может явно различить сложные элементы на айдентике Great Lakes Golf только на всей ширине экрана. Но уменьшите его до 50%, и он едва читается, все смешивается в непонятные пиксели. Логотип Skype напротив прекрасно масштабируется. А если места совсем мало, то он достаточно гибок, чтобы просто отбросить все лишнее.

Мы показали на конкретном примере, как можно добиться успеха, имея на руках козырь в виде чистой формы и универсального дизайна. Логотип Great Lakes Golf возможно соответствовал своему первоначальному предназначению. Однако в контексте адаптивной среды его неспособность к масштабированию бросается в глаза.

Ответ от технологичных компаний

Логотип для сайта у FACEBOOK

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

Facebook, например, убрал голубую линию под значком «F». А в 2015 дизайнеры упростили и сам шрифт, убрав верхний выносной элемент строчной «а» и заменив ее простой, округлой версией. Кстати, не пропустите нашу статью о важности оригинального или адаптированного шрифта в создании логотипов. Остальные буквы также были уменьшены и улучшены. На первый взгляд, эти изменения могут показаться крайне незначительными, но основания для них были серьезные. Facebook изменил логотип, чтобы он лучше смотрелся на экранах мобильных.

Рестайлинг Facebook

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

Айдентика SPOTIFY

Изначально у Spotify был веселенький логотип с небольшим эффектом волны, который сразу же «съелся» бы при уменьшении. В 2013 он был изменён и упрощён до черного шрифта и зеленого значка, к которым мы так привыкли. Затем он стал просто однотонно зелёным. Возник вопрос: зачем Spotify чинить то, что не ломалось? Но это изменение стало частью масштабного ребрендинга компании, и толчком к нему послужил поиск гибкого отображения на мобильных платформах.

Рестайлинг бренда Spotify

«За счет своей пластичности система привлекательна на любых экранах, в печати, в любой интерактивной среде. Мы испытывали ее даже на крошечных мобильных с крошечными экранами», – Лиланд Машмэйер, креативный директор нью-йоркского брэндингового агентства Collins

GOOGLE

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

Первые шаги рестайлинга логотипа Google

В последнее время стало заметно, что их тонкий шрифт Serif с засечками выглядел невнятно на адаптивных веб-страницах. И, как и другие технологичные бренды, команда Гугл упростили его, взяв написание Sans Serif и сделав его плоским, а также создали компанейский и привлекательный значок “G”.

Недавние изменения логотипа Google

“Когда-то поиском Google можно было воспользоваться только на одном устройстве: персональном компьютере. Сегодня люди обращаются к Google с различных гаджетов, из различных приложений… В подтверждение этого мы представляем вашему вниманию обновленный логотип, который позволит почувствовать магию Google даже на самых маленьких экранчиках», – сообщение из официального блога Google , Тамар Йегошуа, вице-президент по управлению продуктом.

PRINCE

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

Логотипы Twitter, Nike, Apple, Starbucks и Pinterest. Возможно вы уже не помните надутый шрифт и картинку птички, которые составляли логотип Twitter? Спустя какое-то время Twitter поработал над дизайном и отсёк все лишнее. Сейчас это исключительно упрощённое изображение птички. Никакого значка в виде строчной «t», никакого текста, только птичка-логотип.

Изменения логотипа Twitter

“Twitter – это птичка, птичка – это Twitter. Нам больше не нужны текст, надутый шрифт или строчная «t»”, – креативный директор Дуг Боуман.

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

Логотип для сайта. Заглядывая вперёд

Хотим ли мы сказать, что отныне все логотипы обязательно должны превратиться в элементарные плоские значки или в дизайне стоит использовать только плоские шрифты San Serif? Не думаю. Между тем больше нельзя игнорировать влияние адаптивного пространства веб-дизайна на брендинг и айдентику и любопытно посмотреть, что же будет дальше. Теперь мы понимаем, что постулат о том, что айдентика компании – это незыблемая твердыня, которая не должна меняться никогда, морально устарел. Осознание данного факта позволяет открыть новый подход в брендинге – динамическую айдентику, когда в зависимости от условий (вертикальный или горизонтальный формат, текст или знак и т.д.) происходят изменения в дизайне устройства. Так, даже могут меняться цвета, чтобы соответствовать темному или светлому фону экрана.

Кто-то может возразить, что указанный выше подход больше подходит для брендинга технологичных компаний, нежели маленькой кофейни. Однако мы уверены, что рано или поздно все сайты приобретут адаптивный дизайн, и рост рынка мобильных гаджетов отразится на всех. И тогда некоторые удивятся, почему дела у них идут не так хорошо, как у Twitter или Pinterest. Разрабатывая веб-сайты, брифуя клиентов, мы в Mindrepublic в 100% случаев отмечаем необходимость мобильной вёрстки. Ни один из клиентов за всё это время не сказал, что ему всё равно как будет выглядеть его сайт с экрана планшета или смартфона.

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

Понравилась наша статья, поделитесь с друзьями!
Удачи в бизнесе, ваш mindrepublic.ru

Мы подготовили для вас небольшое видео о том, как мы создаем логотипы в MindRepublic.