Логотип для сайта - виды логотипов

Автор статьи - арт-директор Никита П.

Логотип для сайта — это оригинальный графический знак, который служит для идентификации компании, ее продуктов и услуг.

Ключевые задачи лого на сайте: 

     1. Указывать на принадлежность веб-ресурса конкретной компании.
     2. В качестве значимого элемента айдентики устанавливать эмоциональную связь с пользователями.
     3. Определять авторское право.


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

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

Как разрабатывают логотипы: для сайтов и не только

Логотипы разделяют на несколько видов:

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

Основные правила создания логотипов от графического дизайнера Дэвида Эйри:

     - Простота. Минималистичный фирменный лого легко адаптировать к любым носителям. Простой дизайн легче узнается и запоминается.
     - Соответствие ценностям компании, сфере деятельности и целевой аудитории. Это значит, что изображение должно быть понятным. А вот прямо демонстрировать то, чем занимается компания, скорее не должно. О разных уровнях ассоциаций — немного ниже в этом разделе.
     - Традиционность. Логотип — основа айдентики бренда, и должен быть долговечным. Поэтому не стоит слепо следовать модным трендам.
     - Индивидуальность. Идеально, когда изображение узнается уже по внешним очертаниям.
     - Выделение одной, самую запоминающейся черты.
     - Четкость и выразительность даже в маленьком размере. Кстати, именно уменьшение поможет выявить ненужные детали — все, что становится незаметным, стоит убрать.

Если говорить о смыслах, то правильный логотип вызывает нужные бренду ассоциации. А сами ассоциации можно классифицировать по трем уровням, каждый из которых имеет свои преимущества:

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

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

Например, то, почему на фирменном знаке молочных продуктов «Простоквашино» кот в тельняшке, понятно тем, кто видел добрые мультфильмы по книгам Э. Успенского. 

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


              

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


Примеры логотипов с разным уровнем ассоциаций из работ Gagarin studio:




Логотип сайта: что означают цвет и форма

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

Каждый цвет обладает своим настроением: 

     - Черный — строгий и классический.
     - Белый — искренний, чистый.
     - Красный — энергичный, привлекательный и будоражащий.
     - Оранжевый — жизнелюбивый, приветливый, солнечный.
     - Синий — солидный, уверенный, профессиональный.
     - Голубой — открытый, располагающий.
     - Желтый — радостный, теплый.
     - Зеленый — экологичный, связанный с плодородием, жизнью, здоровьем.
     - Серый — элегантный, сдержанный, высокотехнологичный.
     - Фиолетовый — мистический, волшебный.


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

     - Круглые формы символизируют единство, завершенность и непрерывность.
     - Квадраты — уравновешенность и надежность.
     - Прямоугольники — практичность и логичность.
     - Треугольники — лидерство, энергию, проактивность.


Кроме геометрических, фирменные знаки создают на основе органических (природных) фигур: плавные силуэты цветов, листьев, ракушек, капель воды ассоциируются со здоровьем, естественностью, покоем и удовольствием.

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

Шрифт для логотипа

Шрифт важен не только для читабельности. Своим графическим рисунком он передает характер бренда:

     - Округлые буквы выглядят открытыми, неспешными и уверенными.
     - Овальные говорят об ориентации на инновационность.
     - Квадратные воспринимаются как надежные, стабильные, солидные.
     - Угловатые подчеркивают энергичность и целеустремленность.
     - Слова, набранные только прописными буквами, создают впечатление статусности, только прописными — открытости и демократичности.
     - Размашистая рукописная надпись указывает на дружелюбие и креативность.
     - Узкие каллиграфические, нарочито усложненные буквы — на оригинальность, эксклюзивность.


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

Лого для сайта: как правильно использовать

Дизайн логотипа влияет на выбор цветовой схемы для сайта. Ее главные и акцентные цвета должны быть связаны с цветами лого, а фоновый — дополнять их.

На примерах из портфолио студии:

Примеры демонстрируют и традиционное размещение логотипа дизайнерами: в верхнем левом углу. Причин для этого две:

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


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

Логотип сайта является также элементом навигации — пользователи привыкли нажимать на него,чтобы перейти на главную страницу. Так клиенты легче запоминают фирменный знак компании.

Задача веб-дизайнера — сделать лого заметным и разместить под ним активную ссылку. 

Другие технические требования к лого на сайтах:

     1. Использовать изображение с прозрачным фоном.
     2. Выбирать векторный формат .svg, поскольку растровые при масштабировании могут терять качество отображения. Если с логотипом размещается и слоган, оформлять его текстом либо картинкой в векторном формате.
     3. Хранить изображение в корневой папке на сервере, в файле с прямым названием — logo.
     4. Универсальный размер — 1024 x 512 px. Поскольку изображение должно масштабироваться под разные браузеры и устройства, необходимо подготовить адаптивную верстку, прописать отдельные коды для каждой из картинок разных размеров.
     5. Прописать для фирменного знака метатег title и атрибут alt.


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

Как сделать логотип для сайта и не ошибиться

Чтобы сделать логотип для сайта в Украине, есть четыре пути:

     - Попробовать разработать самостоятельно, используя популярные графические редакторы.
     - Поэкспериментировать на сервисах для генерации логотипов онлайн:
     - Использовать программное обеспечение для дизайна, например, GIMP, Free Card Maker, Banner Maker Pro, Logo Design Studio.
     - Обратиться в профессиональную студию брендинга.


Решите вы следовать путем самостоятельных проб и ошибок или доверитесь профессионалам, полезно знать, каким логотип сайта быть не должен:

     - Многоцветным. 1-2 цвета, если в их большее количество не заложен специальный смысл.
     - Непонятным. Этот момент удобно тестировать на фокус-группе.
     - Неоднозначным. Спросите у других людей, что они видят на картинке. Переверните лого и оцените, не создает ли вид вверх ногами нежелательные смыслы.
     - Визуально громоздким.
     - Основанным на смысловых клише: холод — снежинка, авиакомпания — самолет, турагентство — пальма под солнцем.


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