Дизайн логотипа для сайтов с адаптивной версткой


Перевод статьи о том, как грамотно использовать логотип на сайтах.

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

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

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

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

Тем не менее, есть бренды, которые отлично преуспевают в стезе «гибкого» веб-пространства. Это бренды, которые разрабатывались тщательно и с учётом того, как они будут отображаться при изменении формата. Самые лучшие логотипы – простые и гибкие, с различными вариантами компоновки. Когда сайт оптимизируется для кого-либо устройства, бренд оптимизируется вместе с ним.

В этой статье мы рассмотрим, почему простой, гибкий и универсальный дизайн логотипа стал настолько актуальным. Лидеры индустрии, «супер-бренды», такие как Twitter, Facebook, Spotify и Google повышают качество и упрощают свои бренды благодаря отзывчивому веб-дизайну и растущему влиянию на рынке мобильных устройств. Мы попытаемся рассмотреть их работу, и понять какие из применяемых ими методов помогут вам в разработке логотипа для адаптивного веб-дизайна.



Прописная истина


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

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

Логотипы Apple

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

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

Примеры сложных и простых логотипов

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

Те же логотипы на мобильных устройствах

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

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



Адаптивный дизайн известных компаний


Facebook

Веб-подкованные бренды давно поняли, что пора упрощать свои логотипы в угоду развития мобильной индустрии. Facebook удалил синюю линию под знаком в «F» в 2013 году. В 2015 товарный знак был ещё более упрощён путём замены строчных букв на более круглый вариант.

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

Старый и новый логотипы Facebook

«Это гораздо большие изменения, чем одна буква «а». Это огромный шаг в сторону мобильной индустрии».

- Говард Белк, главный исполнительный и креативный директор брендинговой компании Siegel+Gale.


SPOTIFY

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

Конечно, возникало много вопросов, звучащих примерно так: «Зачем Spotify чинит то, что не сломано?». Однако, это изменение является частью более крупного обновления фирменной символики для Spotify и очевидно, что определяющим фактором является поиск дополнительной гибкости в мобильном веб-пространстве.

Изменения в логотипе Spotify

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


GOOGLE

Еще одним примером является Google. Во время написания этой статьи, Google представили последнее обновление логотипа, ещё более простое. Логотип Google постоянно растёт в плане простоты, начиная с 90-х.

Изменения в логотипе Google с момента создания до наших дней

В последние годы тонкость проработки логотипа стала особенно явной, дизайн становился всё более подходящим для современной веб-структуры. Они упростили текст до шрифта «sans», и создали отдельную, дружественную букву «G».

Последние изменения логотипа Google

«Давным-давно вы могли использовать сервис Google только на одном устройстве: настольном ПК. Сейчас же, люди взаимодействуют с продуктами Google на множестве различных платформ, приложений и устройств...
Сегодня мы представляем вам новый логотип, дающий понять, что вы можете ощутить магию сервиса Google даже на самых маленьких экранах.»

- Из официального блога вице-президента  по управлением продуктом Google, Тамара Иегошуа.



Без слов


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

Фото Принса и его логотип

Все большее количество компании двигаются в сторону простого графического дизайна.

Логотипы Twitter, Nike, Apple, Starbucks и Pinterest

Помните пузырчатый дизайн и птиц в логотипе Twitter? За прошедшие годы, Twitter создал действительно изысканный логотип, удаляя лишние детали. Теперь, это лишь упрощённая версия птицы. Никаких тебе букв «Т» или товарного знака. Просто птица.

Изменения в логотипе «Twitter»

«Твиттер – это птица, птица – это Твиттер. Мы поняли, что необходимость в тексте, пузырчатом оформлении и букве «Т» отпала».

– Креативный директор Даг Боуман.

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



Движение вперёд


Значит ли это, что все логотипы должны превратиться в простые иконки или использовать шрифт «Sans»? Я так не думаю. Однако, нельзя отрицать необходимость адаптации под современные течения веб-дизайна.

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

Можно, конечно, с уверенностью утверждать, что подобный подход не всегда работает для ресторанов или юридических фирм. Однако, рано или поздно всем компаниям придётся признать влияние адаптивного веб-дизайна. Некоторые могут просто задаться вопросом: «почему бы нам не провести над своим брендом ту же работу, что и Twitter или Pinterest.

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

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

Автор перевода: Iamdesigner
Статья: smashingmagazine.com
Обложка: colorlib.com



Смотрите также:
Никому не нужен ваш труд

Я — дизайнер

2 комментария: