Java, UX, HTML, CSS, WEB-design

Как подготовить свой логотип для систем адаптивного дизайна

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

Название: Как подготовить свой логотип для систем адаптивного дизайна . Краткое описание: [ad_1] ⭐ Джон Та . Дата публикации: 04.02.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года

[ad_1]

  • Джон Тарр

  • 0 Комментарии

Как подготовить свой логотип для систем адаптивного дизайна

  • 8 минут чтения

  • Мобильная версия, Дизайн логотипа, Дизайн, Адаптивный дизайн

Краткое резюме ↬

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

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

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

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

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

Дальнейшее чтение на SmashingMag:

  • Отзывчивый веб-дизайн: что это такое и как его использовать
  • Как добиться одобрения логотипа: 8 шагов к лучшему рабочему процессу дизайна
  • Важные советы для эффективного дизайна логотипа
  • Этикет Photoshop для адаптивного веб-дизайна

Еще после прыжка! Продолжить чтение ниже ↓

Простой факт

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

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

Логотипы компьютеров Apple
Логотипы компьютеров Apple.

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

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

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

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

Логотипы, просмотренные на мобильных устройствах
Логотипы просматриваются на мобильных устройствах.

В полную ширину вы можете различить элементы спортивного мяча на логотипе Great Lakes Golf. Но уменьшите масштаб на 50%, и это будет едва читаемо. Справа логотип Skype красиво уменьшается. И если места становится слишком мало, бренд Skype достаточно гибок, чтобы вообще отказаться от словесного знака.

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

Ответ технологической индустрии

Фейсбук

Разбирающиеся в Интернете бренды упрощают свои логотипы, чтобы они соответствовали адаптивному мобильному веб-дизайну. В 2013 году Facebook удалил слабую синюю линию в нижней части буквы «f» своего значка. А в июле 2015 года он упростил свой словесный знак, удалив надстрочный элемент в строчной букве «а», заменив его на более простую и округленную версию.

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

отзывчивые логотипы
Старый и новый логотипы Facebook.

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

Спотифай

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

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

«Поскольку система настолько гибкая, ее можно использовать везде, где Spotify — от экранов до печати, сред и интерактивных возможностей. Мы протестировали систему под давлением с крошечными мобильными объявлениями на крошечных мобильных экранах». — Леланд Машмайер, креативный директор нью-йоркской дизайнерской фирмы Collins.

Google

Другой пример — Google. Пока я писал эту статью, Google представила свое последнее обновление логотипа, пока еще самое простое. Логотип Google эволюционировал до новых уровней простоты с тех пор, как он впервые появился в наших браузерах в 90-х годах.

Изменения логотипа Google в первые дни
Логотип Google меняется в первые дни.

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

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

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

Нет слов

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

Принц фото и логотип
Принц фото и логотип.

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

Логотипы для Twitter, Nike, Apple, Starbucks и Pinterest
Логотипы для Twitter, Nike, Apple, Starbucks и Pinterest.

Помните пузырек и иллюстрацию птицы, которые использовались для логотипа Twitter? Со временем Twitter усовершенствовал логотип, удалив ненужные детали; теперь это просто очень упрощенная версия птицы. Ни значка буквы «t» в нижнем регистре, ни словесного знака Twitter, только логотип птицы.

Изменения в логотипе Твиттера
Изменения в логотипе Twitter.

«Твиттер — это птица, птица — это Твиттер. Больше нет необходимости в тексте, пузырьковых шрифтах или строчной букве «t» для обозначения Twitter». — Креативный директор Дуг Боуман

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

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

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

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

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

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

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

Следите за нашим предстоящим практическим руководством по адаптивному дизайну логотипов.

Сокрушительная редакция
(да, мл, ог, ил)



[ad_2]
Source: https://smashingmagazine.com

Заключение

Вы ознакомились с статьей — Как подготовить свой логотип для систем адаптивного дизайна

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Кнопка «Наверх»