Адаптивные Логотипы: Лучшие Практики и Советы по Верстке

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

Руководства по стилям и руководящие принципы брендинга

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

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

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

Вот несколько советов, которые помогут вам в работе:

Снижение детализации

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

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

Изменение композиции

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

Пошаговое упрощение

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

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

CSS спрайты

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

Встроенная SVG адаптация

К счастью, есть гораздо лучший способ, который позволяет нам использовать единственную реализацию файла. Встроенная SVG адаптация использует один SVG-файл для логотипа, медиа-запросы CSS для корректировки, и, при необходимости, немного JavaScript. Это выглядит следующим образом:

1. Логотип реализован на странице, как встроенный SVG;
   
   1. Отрегулируйте размер логотипа для каждого состояния, используя медиа-запросы CSS;
      
   2. Отрегулируйте положение, размер, цвет, видимость и отдельные элементы логотипа для каждого состояния, используя медиа-запросы CSS;
      
   3. Если в каком-то из вариантов меняются пропорции изображений, настройте свойство SVG Viewbox для каждого формата с использованием JS.

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

Пример 1: Университет Пенсильвании

Этот пример показывает две версии логотипа, большой (стандартный), и малый, в котором убирается текст и меняется соотношение эмблемы и текста.

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

Пример на codepen.

Пример 2: Argento

Этот пример использует три варианта логотипа: большой, установленный по умолчанию; средний, с уменьшенной детализацией; и маленький, использующий только круглую эмблему.

Этот пример является самым сложным, так как использует различные версии рондо, содержащиеся в SVG. Различий в версии B и C, изложенных в руководстве по стилям, было достаточно, чтобы оправдать дополнительную группировку элементов. Как и в предыдущем примере, свойство Viewbox необходимо регулировать для каждой версии, чтобы соответствовать размеру отображаемого элемента.

Пример на codepen.

Пример 3: CASE-MATE

Этот пример также использует три состояния логотипа:

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

Пример на codepen.

Пример 4: NOAA

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

Этот простой пример, в котором достаточно отрегулировать свойство opacity для каждого состояния. JavaScript здесь не требуется, поскольку пропорции остаются неизменными.

Пример на codepen.

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