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

Время чтения: 17 минут
3082

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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


 Логотип для сайта - виды логотипов - Фото №3            Логотип для сайта - виды логотипов - Фото №4 

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

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

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

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

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

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

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

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

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

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


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

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


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

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

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

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

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

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

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

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

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

Логотип для сайта - виды логотипов - Фото №9 Логотип для сайта - виды логотипов - Фото №10 Логотип для сайта - виды логотипов - Фото №11

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

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

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

Логотип для сайта - виды логотипов - Фото №12 Логотип для сайта - виды логотипов - Фото №13

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

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

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

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


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

Подписывайся на наш телеграм-канал
Больше интересного о маркетинге и дизайне В нашем телеграм-канале. Подписывайся😀