Адаптивные логотипы: советы для экранов маленьких размеров
25 мая 2015 | Опубликовано в статьюшечки | Нет комментариев »
При создании адаптивного сайта, логотипы часто обделяют вниманием. Если вы рассмотрите примеры многих отзывчивых сайтов, то заметите что лого, как правило, просто уменьшается пропорционально по мере уменьшения размера экрана. В случае с простыми прямоугольными эмблемами этот подход работает неплохо, но если композиция и пропорции элемента иные, вы рискуете получить нечитаемые надписи и непонятные символы. К счастью, есть способы избежать этих неприятностей.
Руководство по стилю
Хорошо разработанная айдентика предусматривает различные варианты отображения лого. В лучшем случае вы найдете вертикальные и горизонтальные варианты расположения, короткую и полную версию, дополнительный текст и его отсутствие и т. д. Обычно такие возможности прописываются в руководстве по фирменному стилю. Ниже вы видите пример того, как это бывает.
В нашем случае это логотип пенсильванского университета. Их руководство по стилю предусматривает версию логотипа для отображения в уменьшенном виде.
Уменьшенная версия логотипа лишена дополнительного мелкого текста, а основной текст элемента выровнен по высоте щита. Посмотрите как выглядят обе версии в шапке шириной в 320px. Второй вариант понятнее и лучше воспринимается.
Нет руководства по стилю? Действуем осторожно
К сожалению далеко не все логотипы сопровождаются столь удобным и подробным руководством. Если вы столкнулись как раз с таким случаем, попробуйте предложить собственное решение. Однако учтите что с ним нужно быть крайне осторожным, заботясь о том, чтобы сохранялась максимальная узнаваемость бренда. Вот несколько советов, которые помогут вам добиться этого:
Снижаем количество деталей
Логотипы с большим количеством мелких деталей встречаются редко, но если вам попался именно такой, снижение детализации поможет сделать лого понятнее в меньшем размере. Мелкие элементы можно объединить в один более крупный, тонкие линии можно сделать толще, объекты с обводкой можно превратить в объекты с заливкой. Хороший пример таких манипуляций — логотип компании Argento и их руководство по стилю.
Для каждой версии логотипа количество деталей снижено, что делает логотип понятнее и проще для восприятия.
Разворачиваем лого в горизонтальное положение
Это пожалуй самая простая и распространенная техника для адаптивных логотипов. В этом случае мы берем элемент, расположенный над текстом и помещаем его справа или слева. Пример такого решения — логотип Case-Mate.
Вычитаем лишнее
С логотипами, использующими мелкий шрифт, работает пошаговое вычитание мелких элементов. Рассмотрим этот случай на примере эмблемы организации National Oceanic and Atmospheric Administration (NOAA). В оригинальной версии логотипа мы видим большое количество текста вокруг главного элемента. Уменьшая логотип, мы в первую очередь убираем его. В случае если лого нужно уменьшить еще сильнее, мы убираем даже надпись внутри главного элемента. При этом эмблема сохраняет узнаваемость.
Итог
Существуем много вариантов того как сделать логотип лучше в уменьшенном варианте и сохранить его узнаваемость. Мы надеемся что эта практика станет обязательной для дизайнеров в ближайшее время.
Автор статьи Jeremy Frank
Перевод — Дежурка
Смотрите также:
Оставить ответ
Похожие статьи
-
Сайты, посвященные индустрии красоты
-
Микровзаимодействия: секрет крутых приложений
-
Графический дизайн в стиле гранж
-
15 бесплатных экшенов для ретуширования кожи
-
Крутая абстракция в веб-дизайне
-
Использование множественных фоновых изображений CSS: основы
-
Красивые примеры рисунков спиртовыми чернилами
-
Рисуем иконку мышки в Adobe Illustrator
-
Бесплатная типографика в ботаническом стиле
-
Простая фотоманипуляция рыцаря в огне в Adobe Photoshop
-
Новые примеры страниц О нас
-
Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
-
Концептуальная аэрофотосъемка Тома Хегена
-
Бесплатные текстуры для эффекта состаривания
Самые комментируемые
- Текст из крови в Adobe Photoshop
550
- Насколько важно сегодня использовать Web Safe цвета?
539
- 20 наборов кистей для Фотошопа, которые вам пригодятся
531
- Текст из воды в Adobe Photoshop
518
- 45 новых удивительных наборов кистей для творчества
423
- Более 40 фотореалистичных рисунков
205
- Ретро и винтажная типографика в веб-дизайне
194
- 30 примеров фрактального искусства
191