Создание универсального логотипа для адаптивных сайтов — На примере Twitter, Facebook, Spotify и Google

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

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

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

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

Простой факт

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

Эта концепция не нова и была известна задолго до появления адаптивного дизайна, который начал толкать компании к простому представлению своей фирменной символики. Посмотрите на первый логотип Apple, который был разработан в 1976 году инженером Роном Уэйном. Насколько это было креативно (особенно для инженера — не дизайнера), настолько и сложно в восприятии. Неудивительно, что через год логотип компании был обновлён. Им стало всем известное яблоко.

b_57177272acb5d.jpg

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

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

b_571772cad2548.jpg

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

При полной ширине вы можете разобрать мяч и другие спортивные атрибуты на логотипе спортивного комплекса. Но уже при уменьшении масштаба на 50% эти элементы становятся едва различимыми. Логотип же Skype, выглядит отлично во всех представленных размерах. Итак, брендирование «Skype» достаточно гибко для того, чтобы использовать его в адаптивном веб-дизайне. Выглядит просто, узнаваемо и очень разборчиво.

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

Реакция технологической индустрии на тенденции адаптивного дизайна

Facebook

Подкованные в веб-дизайне бренды упрощают свои логотипы, чтобы соответствовать веяниям мобильной адаптивности сайтов. Фейсбук убрал бледную синюю линию с футера логотипа в 2013 году, а в июле 2015 упростил товарный знак, изменив шрифт надписи на более читаемый и округлый. Так буква «а» в нижнем регистре стала выглядеть лучше и проще. В целом, другие буквы похудели, став тоньше и приятнее на вид. Изменения могут показаться незначительными, но их причина таковой не выглядит. Facebook совершенствует свой бренд, в рамках реакции на требования к отображению на мобильных устройствах.b_57177392a7189.jpg

«На самом деле, это огромное изменение, касающееся не только отображения буквы «а», но всей внешности логотипа в целом. Он стал по-настоящему мобильным» — сказал Говард Белк, со-исполнительный директор брендинговой компании «Siegel+Gale».

Spotify

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

Направленность изменений всё та же — получение дополнительной гибкости, при работе с мобильным пространством.b_571773e26e37e.jpg

«Ввиду предельной гибкости системы, она может пойти куда-угодно помимо экранов устройств: в печать, окружающее пространство или в сегмент интерактивных сред. Ранее, мы испытывали неудобство работы с крошечными мобильными приложениями, со столь же малыми экранами устройств этой ниши рынка» — Leland Maschmeyer, креативный директор нью-йоркской дизайнерской фирмы «Collins».

Google

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

b_57177476ae16f.jpg

В последние годы, для многих был очевиден факт того, что шрифт надписи с его острыми фигурными засечками, довольно неважно масштабируется на экранах мобильных устройств. Терялись детали, имела место быть размытость, невнятность восприятия. Поэтому, как и другие крупные бренды, Google упростила шрифт, убрав засечки, придав ему плоский дизайн и наделив бренд дружественным товарным знаком — иконкой с буквой «G».b_571775325f9e1.jpg

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

Без слов

Когда певец Prince, сменил своё имя на символ в 1993 году, многие подумали, что он сошёл с ума. Но, вполне возможно, он был впереди своего времени, принимая столь противоречивое, на первый взгляд, решение.

b_571775cedd4cb.jpg

Всё большее число компаний совершенствуют простоту своих логотипов, двигаясь в направлении плоского, минималистичного дизайна без каких-либо надписей вообще. Ниже вы видите логотипы Twitter, Nike, Apple, Starbucks и Pinterest.b_571775f34b6d6.jpg

Помните, пузырьки в буквах и иллюстрацию птицы, которые использовались для создания логотипа Twitter? Со временем, компания убрала лишние элементы. Теперь, это просто очень упрощённый силуэт птицы. Нет иконки «t» в нижнем регистре, нет слова, только птица и всё.b_571776236fdd6.jpg«Необходимость в тексте отпала, как и в пузырчатом тексте или букве «t» для представления Twitter» — креативный директор Doug Bowman.

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

Двигаясь вперёд

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

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

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

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

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

Перевод: http://wbest.ru/

Оригинал: https://goo.gl/pohVTx

В избранное Сохранено

©  vc.ru