Иконки для логотипов: логотипы иконок – 20,767 бесплатных векторных иконок

Содержание

Иконки «Logos» — скачивайте бесплатно в PNG, SVG, GIF

Devianart логотип

+ В коллекцию

Новый логотип Google Forms

+ В коллекцию

Новый логотип Google Forms

+ В коллекцию

Новый логотип Google Forms

+ В коллекцию

Клавиатурные сокращения

+ В коллекцию

Widgetsmith

+ В коллекцию

Гугл Диск

+ В коллекцию

Adidas трилистник

+ В коллекцию

Клавиатурные сокращения

+ В коллекцию

Клавиатурные сокращения

+ В коллекцию

Гугл Диск

+ В коллекцию

Анимированные

Гугл Диск

+ В коллекцию

Etsy

+ В коллекцию

Клавиатурные сокращения

+ В коллекцию

Widgetsmith

+ В коллекцию

Google Фото

+ В коллекцию

Adidas трилистник

+ В коллекцию

Etsy

+ В коллекцию

Клавиатурные сокращения

+ В коллекцию

Гугл Диск

+ В коллекцию

Клавиатурные сокращения

+ В коллекцию

Etsy

+ В коллекцию

Google Фото

+ В коллекцию

Etsy

+ В коллекцию

Facebook Gaming

+ В коллекцию

Etsy

+ В коллекцию

Google Фото

+ В коллекцию

Etsy

+ В коллекцию

Netflix

+ В коллекцию

Facebook Messenger

+ В коллекцию

Snapchat

+ В коллекцию

Анимированные

Facebook Messenger

+ В коллекцию

Анимированные

Facebook Messenger

+ В коллекцию

Анимированные

Facebook Messenger

+ В коллекцию

Анимированные

Facebook Messenger

+ В коллекцию

Facebook Gaming

+ В коллекцию

Nvidia

+ В коллекцию

Netflix

+ В коллекцию

Facebook Gaming

+ В коллекцию

Анимированные

Netflix

+ В коллекцию

Facebook Messenger

+ В коллекцию

Snapchat

+ В коллекцию

Facebook Gaming

+ В коллекцию

Gmail

+ В коллекцию

Facebook Messenger

+ В коллекцию

Snapchat

+ В коллекцию

Анимированные

Facebook Messenger

+ В коллекцию

Анимированные

Facebook Messenger

+ В коллекцию

Анимированные

Facebook Messenger

+ В коллекцию

Анимированные

Facebook Messenger

+ В коллекцию

DigiAssets

+ В коллекцию

ArchiCAD

+ В коллекцию

Azure Storage Blob

+ В коллекцию

Azure Storage

+ В коллекцию

Widgetsmith

+ В коллекцию

Facebook Messenger

+ В коллекцию

Snapchat

+ В коллекцию

Анимированные

Snapchat

+ В коллекцию

Анимированные

Facebook Messenger

+ В коллекцию

Анимированные

Facebook Messenger

+ В коллекцию

Где найти иконки (картинки) для своего логотипа?

Содержание:
1.Где и как искать иконки?
2.Как найти иконку в Google
3.Как найти иконку при помощи Яндекса

Создаете логотип в logaster.ru, но не можете найти нужную иконку, картинку так как предложенные нами варианты вам не подходят?

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

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

Для этого нужно:
1. Создать логотип, используя для этого любую из предложенных Логастером иконок.
2. Скачать полученное в результате изображение.
3. Найти новую иконку по своему вкусу.
4. Заменить старую картинку в логотипе на новую.

Как создать и скачать логотип мы уже рассказывали ранее.

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

Где и как искать иконки?

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

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

Наиболее очевидный способ найти нужное изображение — использовать для этого поисковые системы, например Google и Яндекс.

Как найти иконку в Google:

1. Выберите «Поиск по картинкам».
2. Напишите ключевые слова для поиска. Например, «собака» или «dog».

3. Уточните свой поисковый запрос, используя слова «иконка», «вектор», «клип-арт» и т. д.
4. Выберите «Инструменты поиска» — «Тип» — «Иллюстрация».

Как найти иконку при помощи Яндекса:

1. Выберите «Поиск по картинкам».
2. Напишите ключевые слова для поиска.
3. Используйте фильтры (размер, ориентация, тип, цвет), отображенные на картинке ниже.
В итоге вы получаете перечень изображений, которые можете сохранять и использовать для своего логотипа.

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

Flaticon

Большая бесплатная коллекция монохромных векторных изображений. Поиск нужного изображения выполняется по словам (на английском) или по категориям. Затем достаточно выбрать иконку и скачать ее.

Freepik

На этом сайте вы найдете не только бесплатные, но и шаблоны PSD, а также другие графические материалы. Также к вашим услугам раздел Stock Fotos, где вы можете купить уникальные фотографии.
Поиск нужного изображения выполняется по словам и категориям с возможностью использования фильтров и меток.

Find Icons

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

Freeicons

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

IconSearch

Очень много иконок разного качества, которые можно скачать в формате PNG и ICO. Преимуществом сервиса является русскоязычный интерфейс и возможность поиска картинок на русском языке.

Iconsguide

Этот сайт является своего рода каталогом, в котором можно найти сайты с платными иконками. Вы просто выбираете изображение по своему вкусу, и сервис перенаправляет вас на веб-ресурс, который ее продает.

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

После того как вы нашли нужную иконку (картинку) самое время заменить старую! О том, как это сделать, читайте в статье «Как заменить иконку в логотипе?»

Руководитель отдела маркетинга и главный генератор идей компании Logaster. Автор книги «Как создать фирменный стиль и не разориться». Ценит экспертный подход, но в то же время использует простой язык для объяснения сложных идей.

%d0%bb%d0%be%d0%b3%d0%be%d1%82%d0%b8%d0%bf%d1%8b PNG, векторы, PSD и пнг для бесплатной загрузки

естественный цвет bb крем цвета

1200*1200

green environmental protection pattern garbage can be recycled green clean

2000*2000

bb крем косметическое применение

1200*1200

Корейский медведь be quiet набор смайликов

1200*1200

be careful to slip fall warning sign carefully

2500*2775

3d модель надувной подушки bb cream

2500*2500

blue series frame color can be changed text box streamer

1024*1369

простая инициализация bb b геометрическая линия сети и логотип цифровых данных

2276*2276

но логотип компании вектор дизайн шаблона иллюстрация

4083*4083

bb крем ню макияж косметика косметика

1200*1500

be careful with fire pay attention to fire pay attention to fire warning icon

2000*2000

две бутылки косметики жидкая основа белая бутылка крем bb

2000*2000

black and white eco friendly pattern garbage can be recycled green clean

2000*2000

logo design can be used for beauty cosmetics logo fashion

1024*1369

have electricity prohibit be careful be

2000*2000

я люблю моих фб хорошо за футболку

1200*1200

элегантный серебряный золотой bb позже логотип значок символа

1200*1200

prohibited use mobile phone illustration can not be used

2048*2048

be careful warning signs warning signs be

2000*2000

flowering in spring flower buds flowers to be placed plumeria

2000*2000

первый логотип bf штанга

4500*4500

аэрозольный баллончик увлажняющий лосьон bb cream парфюм для рук

3072*4107

chinese wind distant mountain pine tree chinese style pine tree chinese style poster can be combined

3600*2475

black and white eco friendly pattern garbage can be recycled green clean

2000*2000

be careful and fragile warning signs round beware

2500*2000

be careful to slip warning icon water droplets carefully

2200*2200

bb крем элемент

1200*1200

логотип fb или bf

2223*2223

black and white train icon daquan free download can be used separately can be used as decoration free of charge

2000*2000

3d золотые числа 82 с галочкой на прозрачном фоне

1200*1200

фб письмо логотип

1200*1200

safety slogan be careful pay attention to safety caution

2000*2000

фб письмо логотип

1200*1200

bb логотип письмо дизайн вектор простые и минималистские ключевые слова lan

1202*1202

be careful of electric shock safety icon caution

2240*2856

b8 b 8 письма и номер комбинации логотипа в черном и gr

5000*5000

asmaul husna 82

2020*2020

фб письмо логотип

1200*1200

начальная буква bf с логотипом

1200*1200

номер 82 3d рендеринг

2000*2000

в первоначальном письме bf логотип шаблон векторный дизайн

1200*1200

safety signs be careful to meet be careful of steps beware of burglary

3000*4824

Креативное письмо bb дизайн логотипа черно белый вектор минималистский

1202*1202

madar e be sheer Исламская каллиграфия бесплатно png и eps

5000*5000

цвет перо на воздушной подушке bb крем трехмерный элемент

1200*1200

Красивая розовая и безупречная воздушная подушка bb крем косметика постер розовый красивый розовый Нет времени На воздушной

3240*4320

bb кремовый плакат белый макияж косметический На воздушной подушке

3240*4320

attention be careful be careful with burns pay attention to safety

2000*2000

carefully slide triangle warning sign prevent slipping be cautious

2000*2000

82 летняя годовщина векторный дизайн шаблона иллюстрация

4167*4167

Проблемы новых логотипов приложений Google

Мы расскажем, что с ними не так и, как это можно исправить.

Вероятно, вы уже видели новые иконки приложений Google из набора инструментов Workspace (ранее G Suite), например, Gmail, Drive и Meets. Быть может подобно многим другим пользователям, вы считаете их запутанными:

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

Основная цель иконки – быстро передать концепцию. — 7 принципов дизайна иконок

Когда речь идет о наборе иконок, часто используемых вместе друг с другом, то различия между ними имеют решающее значение!

Как создать отличные иконки?

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

Форма и пропорции
Цвета
Знакомые концепции
Визуальный стиль

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

Ниже представлена попытка аккуратной оптимизации, при этом стараясь максимально сохранить новый стиль иконок Google:

На первый взгляд они выглядят относительно похожими (в конце этой статьи есть еще более смелая версия!), однако давайте посмотрим, как изменения небольших деталей могут привести к важным улучшениям юзабилити:

Форма

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

Я попытался внести минимальные правки в пропорции логотипа каждого приложения, чтобы они стали больше отличаться, при этом сохраняя стиль Google: толстые контуры с негативным пространством посередине:

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

Цвет

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

Я постарался придать логотипу каждого приложения свой цвет, сохранив при этом фирменную «радугу» Google. Я попытался:

вернуть основной зеленый цвет логотипу Meets,
основной синий цвет с красным акцентом (подробнее об этом ниже) для логотипа Календаря,
оставить красочными только иконки приложений Диск и Документы. Они, по сути, одно и то же приложение, и иконка приложения Документы никогда не используется на вкладках браузера, поэтому я счел разумным сделать их похожими:

Сравните их с иконками приложений Microsoft, которые легко узнать по цвету, но при этом они имеют согласованный фирменный внешний вид:

Знакомые концепции

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

Давайте посмотрим на новую иконку приложения Календарь: это просто квадрат, который – за исключением цифры в центре – не имеет визуального сходства с реальным календарем. Что еще хуже, он сильно отличается от старого логотипа, с которым пользователи знакомы как по форме, так и по цвету.

Вот попытка сделать новую иконку более осмысленной, при этом придерживаясь нового стиля Google:

Причина проблемы – очень строгая дизайн-система

Потратив время на попытки создать удобный дизайн иконок в рамках фреймворка Google, я понял, что он слишком ограниченный для этой цели. Иконки часто используются в небольших размерах. Например, всего 16 x 16 pt в случае значка в браузере. Поэтому дизайн-система иконок должна оставлять достаточно гибкости для создания четко узнаваемых значков, отличающихся хотя бы в одной из категорий, перечисленных выше. Давайте посмотрим на проблемы в подходе Google:

Проблема 1: использует все цвета сразу

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

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

Проблема 2: всегда использует контуры

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

Google может исправить это, добавив большее разнообразие ширины штриха, применив более четкие формы (как видно на иконке Gmail), создав более мелкую сетку, позволяющую лучше распределять цвета и т. д.

Суть проблемы: бренд важнее юзабилити

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

Мне кажется, это неправильный подход. Обычно пользователи отдают предпочтение одному провайдеру. Пользователи Google в первую очередь будут использовать инструменты Google, поэтому важно различать приложения Google между собой, а не отличать их, скажем, от приложений Microsoft Office.

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

Еще больше проблем: фрейм во фрейме

К сожалению, с новыми иконками проблем стало еще больше. Google очень консервативен в размещении логотипов своих приложений в iOS: внутри фрейма Apple Google создает огромную защитную зону вокруг своих иконок вместо того, чтобы полностью использовать доступное пространство. Зачастую это приводит к тому, что иконки Google становятся неузнаваемыми. Просто взгляните на иконку Календаря в уведомлении:

Давайте проявим больше креативности

Я не мог не поэкспериментировать еще немного, проявив больше свободы по отношению к новому стилю иконок Google:

Я постарался придать каждому приложению явно доминирующий цвет.
Я хотел создать иконки, которые были бы более узнаваемыми в небольших размерах.

Итак, вот третий, более смелый вариант:

Ключевые выводы

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

Интересно, что вы думаете о новых иконках Google, а также моей быстрой попытке их оптимизировать!

Page not found (404)

Toggle navigation

Packs
- Значок пакеты недавно Загрузил
- Самых популярных значок пакеты
- Эксклюзивные наборы значков
категории
- Сельское хозяйство Иконки
- Животные Иконки
- Аватар и смайлики Иконки
- Красота и мода Иконки
- Бизнес и финансы Иконки
- Мультфильм Иконки
- Кино, телевидение и фильмы Иконки
- Одежда и аксессуары Иконки
- Преступление и безопасность Иконки
- Культура, религия и фестивали Иконки
- Дизайн и разработка Иконки
- Экология, окружающая среда и природа Иконки
- Электронная торговля и покупки Иконки
- Электронные устройства и оборудование Иконки
- Файлы и папки Иконки
- Флаги и карты Иконки
- Дизайн и разработка Иконки
- Экология, окружающая среда и природа Иконки
- Gym и Fitness Иконки
- Здравоохранение и медицина Иконки
- Промышленность и инфраструктура Иконки
- Инфографика Иконки
- Дети Иконки
- люблю Иконки
- Разное Иконки
- Музыка и мультимедиа Иконки
- Сеть и связь Иконки
- Недвижимость и строительство Иконки
- Школа и образование Иконки
- Наука и технологии Иконки
- SEO и Web Иконки
- Sign и Symbol Иконки
- Социальные медиа и логотипы Иконки
- Спорт и игры Иконки
- Инструменты, строительство и оборудование Иконки
- Транспорт и транспортные средства Иконки
- Путешествия, отели и каникулы Иконки
- Пользовательский интерфейс и жесты Иконки
- Погода и сезоны Иконки
стили значков
- 3D Иконки
- Badge Иконки
- Filled outline Иконки
- Flat Иконки
- Glyph Иконки
- Handdrawn Иконки
- Long shadow Иконки
- Outline Иконки
- Photorealistic Иконки
Популярные поиски
- Instagram Иконки
- Vk Иконки
- телефон Иконки
- Папки Иконки
- деньги Иконки
- Социальные Иконки
- Facebook Иконки
- Telegram Иконки
- Viber Иконки
- корзина Иконки
- Whatsapp Иконки
- стрелка Иконки
- Youtube Иконки
- дом Иконки
- Phone Иконки
- люди Иконки
- почта Иконки
- папки Иконки
- человек Иконки
- доставка Иконки
- галочка Иконки
- папка Иконки
- музыка Иконки
- Mail Иконки
- компьютер Иконки
- вк Иконки
- Steam Иконки
- Instagram Иконки
- сайт Иконки
- фото Иконки

404 Icon by Laura Reen

Фрилансер Ivan Bereziuk • иконки и пиксельная графика и логотипы ≡ silem_pro, Киев, Украина

Virus icon

Иконки и пиксельная графика

Hand logo

Логотипы

VR logo

Логотипы

Weapon

Создание 3D-моделей

Little orange

Иконки и пиксельная графика

KNIFE

Иконки и пиксельная графика

Valex Engineering (concept)

Логотипы

Логотипы

Consept design Shychkina.com

Дизайн сайтов

Consept design of Twister

Дизайн сайтов

Стандартный дизайн сайта одностраничника. Ничего необычного. Подобные решения довольно популярны у маленьких фирм и предприятий. Срок выполнения — 1 день. Более качественный рендер не удалось загрузить из-за ограничений платформы.

#Web-дизайн #web-design #web #Webdesign #Web-дизайнер #website #design #designer

Skiing

Иллюстрации и рисунки

Concept Logo

Логотипы

500 ₴Логотип

Логотипы

В соцсетях раскритиковали новый логотип Gmail

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

Новая иконка Gmail стала частью перезапуска бизнес-пакета Google G Suite: для его приложений разработали новый интерфейс, более тесно связывающий разные приложения, пакет переименовали в Google Workspace, а для отдельных продуктов перерисовали иконки. Логотип Gmail теперь напоминает другие минималистические и разноцветные иконки приложений Google.

Многим новая иконка Gmail просто не понравилась

I feel the same way about the new Gmail logo that I do about comic sans pic.twitter.com/6dYBtzWwlM
— Maddie Mayans (@mmayans02) October 29, 2020

«Отношусь к новому логотипу Gmail как к [шрифту] Comic Sans».

We all thought 2020 is shit enough and then there comes the new Gmail logo
— joven (@joven) October 30, 2020

«Мы решили, что 2020-й был достаточно дерьмовым, но потом появилась новая иконка Gmail»

i thought the new gmail logo was bad but this is somehow worse pic.twitter.com/pDxcJHSYAl
— jer (@notobviouslyjer) October 29, 2020

«Новая иконка Gmail была плохая, но есть кое‑что похуже [новая иконка Google Calendar]»

Нашлось множество символов, которые похожи на новую иконку Gmail

«Я воодушевлен, нежели расстроен, потому что вижу логотип [приставки] Nintendo 64, когда смотрю на новую иконку Gmail», — @akmilly

1 из 5

«Новая иконка Gmail сбивает меня с толку, в основном из‑за логотипа Музея изящных искусств в Монреале», — @astridrosemarin.

2 из 5

«Новая иконка Gmail напоминает мне логотип Мельбурна, который я обожаю», — @sundress.

3 из 5

«Только что пришло в голову, почему новая иконка Gmail выглядит такой знакомой», — @jonsagara.

4 из 5

«Наконец понял, что вижу, когда смотрю на новую иконку Gmail», — @youfoundryan.

5 из 5

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

They changed the Gmail logo and my eyes can finally enjoy this light chuckle in peace. pic.twitter.com/kFmn9IF972
— David Rogge (@davidrogge) October 28, 2020

«Они поменяли иконку Gmail, поэтому мои глаза наконец могут насладиться этой легкой насмешкой»

Дизайнеры предложили варианты более мягких или логичных изменений

«Мне не нравится логотип Gmail, если сравнивать с остальными иконками семейства приложений. В новом логотипе Gmail преобладает красный цвет, хотя в остальных иконках он выступает акцентом. Основываясь на этой идее, я изменил логотип, и вот что получилось», — Олег Коада

1 из 4

Автор: Бетику Адедоин.

2 из 4

Автор: Сарвар Ахмед Шафи.

3 из 4

«Мне кажется, если учесть наложения цветов друг на друга, то новая иконка Gmail должна выглядеть как‑то так», — техноблогер Эван Бласс.

4 из 4

Главная проблема с новыми иконками Google

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

Раньше внутри Google были разные семейства продуктов, например, приложения внутри Google Drive или Google Play, внутри которых иконки были разработаны по единому принципу. «Семейный принцип — это здорово, но, подозреваю, его сложно масштабировать до сотен приложений», — пишет он.

Из‑за сложности в масштабировании и дизайн-ограничений Google решила перейти к корпоративному принципу. Если раньше система иконок компании напоминала приложения пакета Microsoft Office, то теперь она напоминает иконки Adobe — десятки значков, построенные по одному и тому же принципу. «Я думаю, Google решила одну проблему, но создала другую — плохое узнавание», — пишет Кэннон.

4. Common styling.
Lastly, this approach is the one Google has moved to. It’s much more scalable, but it’s hard to get right. I think Google has solved one problem, but created another which is lower legibility. pic.twitter.com/mFwzUtdpzZ
— Kevin Cannon (@multikev) October 31, 2020

«Общий стиль — принцип, к которому пришла Google. Он намного более масштабируемый, но его сложно сделать правильно»

Подробности по теме

«Да кто такой этот ваш «Мессенджер»: пользователи прощаются с «Сообщениями» «ВКонтакте»

иконок логотипов — загрузка в векторном формате, PNG, SVG, GIF

Иконки

Фото

Музыка

Иллюстрации

Поиск

Логотип

+ Коллекция

Логотип

+ Коллекция

Логотип

+ Коллекция

Логотип

+ Коллекция

Логотип

+ Коллекция

Логотип

+ Коллекция

Логотип

+ Коллекция

Логотип

+ Коллекция

Логотип

+ Коллекция

Логотип

+ Коллекция

Логотип

+ Коллекция

Логотип

+ Коллекция

Логотип

+ Коллекция

Логотип

+ Коллекция

Логотип

+ Коллекция

Логотип

+ Коллекция

Логотип

+ Коллекция

Логотип

+ Коллекция

Логотип

+ Коллекция

Логотип iOS

+ Коллекция

Логотип Facebook

+ Коллекция

Логотип iOS

+ Коллекция

Логотип Facebook

+ Коллекция

Логотип микшера

+ Коллекция

Логотип iOS

+ Коллекция

Логотип Facebook

+ Коллекция

Логотип Instagram

+ Коллекция

Анимированные

Логотип Instagram

+ Коллекция

Логотип Apple

+ Коллекция

Логотип Apple

+ Коллекция

Логотип iOS

+ Коллекция

Логотип Facebook

+ Коллекция

Ярлык логотипа

+ Коллекция

Логотип Instagram

+ Коллекция

Логотип iOS

+ Коллекция

Логотип Facebook

+ Коллекция

Логотип Apple

+ Коллекция

Логотип Etsy

+ Коллекция

Логотип Человека

+ Коллекция

Логотип Instagram

+ Коллекция

Логотип Apple

+ Коллекция

2k логотип

+ Коллекция

Логотип Instagram

+ Коллекция

Анимированные

Логотип Instagram

+ Коллекция

Анимированные

Логотип Instagram

+ Коллекция

Логотип Человека

+ Коллекция

Логотип Apple

+ Коллекция

Анимированные

Логотип Apple

+ Коллекция

Логотип iOS

+ Коллекция

Логотип Facebook

+ Коллекция

Логотип Instagram

+ Коллекция

Логотип iOS

+ Коллекция

Логотип Facebook

+ Коллекция

2k логотип

+ Коллекция

Логотип Человека

+ Коллекция

Логотип Apple

+ Коллекция

Логотип NL

+ Коллекция

Логотип Duolingo

+ Коллекция

2k логотип

+ Коллекция

Логотип Adobe

+ Коллекция

Различий между логотипами и значками

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

Итак, в какую категорию попадает ваш дизайн-проект?

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


Нужен логотип? Почему бы не сделать логотип, который вам понравится. Просто введите название своей компании и настройте любой из тысяч созданных для вас логотипов. ПОПРОБОВАТЬ БЕСПЛАТНО!

Давайте определим значки и логотипы и определим их основное использование.

Иконки

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

Иконки обычно используются в приложениях (или приложениях) для обозначения того, что делает приложение, и являются ключевым элементом интерфейса UI / UX.

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

Давайте посмотрим, что известные значки могут рассказать нам о типичных характеристиках значка, который отличает его от логотипа.

iTunes

Значок музыкальной ноты, например, передает идею о том, что использование приложения, которое он представляет, связано с музыкой. Возьмем, к примеру, значок, используемый для запуска iTunes:

Значок приложения Itunes

Хотя на значке выше нет надписи «iTunes», пользователи впервые поймут, что значок представляет собой программу, которая имеет какое-то отношение к музыке.

Facebook Нравится

Этот значок легко узнать — это значок Facebook «Нравится».

Значок состоит из сжатого кулака, держащего большой палец вверх, или буквально «большой палец вверх». Этот жест обычно используется в знак одобрения.

«Кнопка« Нравится »в Facebook»

На сайте социальной сети на этот значок щелкают, когда пользователь желает передать сообщение о согласии на сообщение или комментарий или просто «лайкнуть» его, не говоря ни слова.(Если бы это было в реальной жизни, все бы все время поднимали вверх большие пальцы руки).

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

Dropbox

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

Значок приложения Dropbox

Если на вашем компьютере установлен DropBox, вам нужно найти этот значок и щелкнуть его, чтобы получить доступ к файлам.Значок встроен в логотип DropBox.

Гамбургер-меню

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

Он заменяет обычную панель навигации из-за нехватки места и является одной из тенденций 2016 года.

Гамбургерное меню

Меню гамбургеров в Made In Haus

Иконки на сайтах

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

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

Иконки, используемые в Mixpanel

Иконки, используемые в панели микширования

Ключевые моменты

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

Логотипы

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

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

Логотипы могут быть логотипом, логотипом или их комбинацией.

Начнем с нескольких примеров.

Mastercard

Логотип

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

Комбинация логотипов — MasterCard

Кока-Кола

Логотип Coca-Cola вневременной и запоминающийся.Насколько хорош этот логотип? Люди будут ассоциировать шрифт, штрихи и цвет с компанией, даже если название изменится. Он несет в себе наследие бренда, поскольку является логотипом компании с 1885 года.

Логотип — Кокс

Google

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

Логотип — Google

Яблоко

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

Логомарк — Apple

Макдональдс

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

Логомарк — Макдональдс

Давайте перейдем к техническим вопросам …

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

Форма

На самом деле нет требований к форме для значков, но если это значок приложения для организации, он должен вписываться в квадрат (т.е. он должен быть «квадратичным»).

Иконки на телефонных устройствах

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

Различные стили иконок

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

Размер

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

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

Набор иконок

Многоцелевые и мультимедийные

Логотипы

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

Заключение

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

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

Автор Cherished Alegroso (суперзвезда службы поддержки клиентов DesignCrowd и блоггер в Love Liverspread)

Хотите больше?

Узнайте, как наилучшим образом использовать дизайн:

В 2016 году будут доминировать главные тенденции веб-дизайна

Когда стоит подумать о ребрендинге своего бизнеса?

Приложение или отзывчивый веб-сайт? Что действительно нужно вашему бизнесу?

Написано DesignCrowd в понедельник, 21 марта 2016 г.

DesignCrowd — это онлайн-торговая площадка, предоставляющая услуги по дизайну логотипов, веб-сайтов, печати и графического дизайна, предоставляя доступ внештатным графическим дизайнерам и дизайн-студиям по всему миру.

Logo vs Icon: их основные отличия

Logo vs Icon: в чем основные различия?

Думаете, нет разницы между логотипом и значком ?

Что ж, пора изменить точку зрения. Большинство дизайнеров и пользователей часто стирают различия. Следовательно, они попадают в ошибку взаимозаменяемого использования обоих инструментов.

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

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

Что такое логотипы?

Мы сталкиваемся с логотипами каждый день — от знаменитой «Леди Либерти» от Starbuck на чашке кофе до яркого логотипа на обуви Nike. По сути, логотипы — это символы, которые в основном используются для представления организации или бренда.
На самом деле, думайте о логотипах как об упрощенной рекламе! Логотипы — это не просто создание запоминающегося графического дизайна.Скорее, его концепция основана на основном имидже компании, ее ценностях, целях и даже целевой аудитории. В отличие от значков, логотипы — это определенные графические изображения, которые передают пользователю суть бренда.
Например, на логотипе Mastercard изображены два взаимосвязанных круга, которые обозначают функцию компании как связующего звена в финансовых транзакциях. С другой стороны, некоторые логотипы представляют собой напечатанные слова с определенными шрифтами, штрихами и цветами, к которым пользователи уже привыкли. Поскольку у нас есть четкое представление о том, что такое логотипы, давайте взглянем на значки — их определения и основы.

Что такое значки?

Вот то место, где большинство людей не могут отличить значки от логотипов. Например, они часто неверно интерпретируют популярный логотип Apple с недоеденным яблоком как значок. Они не понимают, что это не значок, поскольку он не представляет услуги или действия бренда. Итак, это подводит нас к сути дня — что такое иконы?

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

Да, подумайте о множестве значков, которые усеивают экраны вашего смартфона или системы. Иконки созданы таким образом, чтобы любой мог легко понять, для чего они нужны. Например, значок iTunes — это белая музыкальная нота на фиолетовом фоне. Хотя название iTunes не написано поперек него, пользователи могут легко указать, что программа предназначена для музыкальных файлов.

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

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

Теперь давайте будем различать значки и логотипы по форме, размеру и даже типу дизайна.

Разница в форме

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

Разница в масштабируемости

Вот еще одно очевидное различие между логотипами и иконками. Во-первых, вы должны знать, что иконки не являются векторными изображениями векторными. Следовательно, их нельзя увеличить до любого размера без потери качества. Фактически, большинство значков имеют размер значка (16 * 16) или (512 * 512).Чтобы изменить размер значка, вам нужно будет воссоздать его для определенного размера.
И наоборот, логотипы представляют собой векторные диаграммы и масштабируются до любого размера без потери качества изображения. Это качество жизненно важно, поскольку логотипы используются в различных печатных материалах, от брошюр до веб-сайтов, визитных карточек, вывесок и даже гигантских рекламных щитов.

Итак, почему люди все путают?

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

Завершение

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

«Сделал свой логотип с помощью инструмента Placeit, и это заняло всего несколько минут!»
Йозеф Бейн 5/5

Различия между логотипами и значками

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

Начните с дизайна логотипа!

Сотни бесплатных подарков в высоком разрешении Только для вас!

Наша халява постоянно обновляется!

Советы по созданию иконок и логотипов в Figma | Автор: Пранав Амбвани

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

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

Фреймы в Figma похожи на артборды в Sketch. В результате вы можете создать фрейм, нажав на клавиатуре A или F . Вам будет предложен выбор из шаблонов для телефонов, планшетов, компьютеров, часов, бумаги или социальных сетей.

Как вы видели выше, каждый раз, когда вы создаете фигуру, она будет иметь светло-серый цвет по умолчанию.
Чтобы переопределить свойства формы по умолчанию, сначала создайте форму, как обычно. Затем установите любые свойства (например, Заливка, Обводка и т. Д.), Которые вы хотите для формы.
Когда вы будете удовлетворены, выберите фигуру и перейдите в меню « Правка»> «Установить свойства по умолчанию» , чтобы задать свойства. В следующий раз, когда вы создадите какую-либо форму, она сохранит эти настройки.

И вуаля!

Выбор объединения

Объединение объединяет несколько объектов в один.

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

Вычесть выделение

Вычесть выделение будет вычитать одну или несколько фигур из основной формы . Здесь под основной формой понимается самая нижняя фигура на панели «Слои».

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

Например, вы можете использовать Subtract для создания интересных значков, таких как кредитные карты.Кому не нравятся кредитные карты 💳?

Выбор пересечения

Пересечение создаст фигуру из области, где встречаются две или более фигур.

Хотя техника пересечения и не столь популярна, как объединение или вычитание, пересечение — отличный способ экспериментировать с новыми формами.

Вот как можно создать резкое изображение, используя одновременно Intersect и Union.

Исключить выделение

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

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

Сглаживая логические значения, вы можете упростить рабочий процесс. Вы можете сделать это, выбрав опцию Flatten Selection под Boolean Groups , чтобы создать новый вектор и работать оттуда.

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

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

Векторные сети Figma не имеют определенного направления и могут разветвляться в разных направлениях без необходимости создания отдельного объекта пути.

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

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

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

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

Для вдохновения посетите веб-сайт Font Awesome и попробуйте воссоздать свои любимые значки.

Я предпочитаю быть кратким и конкретным, поэтому я продемонстрирую, как создавать некоторые часто используемые значки, которые вы найдете в Интернете.

Значок кода

Создайте квадрат (ярлык для создания квадрата: R + Shift + перетащите )
Поверните его на 45 градусов
Дублируйте его ( Command + D ) и немного сдвиньте пикселей вправо
Выберите обе формы и выполните Вычитание ; затем выберите Flatten Selection
Нажмите кнопку Enter , чтобы перейти в режим редактирования
Теперь выберите края и установите радиус угла
Дублируйте форму и поверните ее на 180 градусов

Значок настроек

Создайте звезду с отсчетом и радиусом угла 20
Создайте круг (ярлык для создания круга: O + Shift + перетащите ), который должен быть заключен в звезду
Вычтите круг из звезды

Значок воспроизведения

Создайте круг (ярлык для создания круга: O + Shift + перетащите )
Создайте многоугольник с Count из 3 и Угловой радиус из 10 внутри круга; поверните его на -90 градусов
Вычтите круг из многоугольника

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

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

Я использовал Figma для создания бренда своего веб-сайта. Благодаря невероятно мощным функциям Figma мне удалось сделать это менее чем за десять минут.

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

Идентификационные активы продукта

Firefox 57 знаменует запуск новой системы идентификации продуктов, которая отражает видение дизайна Photon. Первыми элементами, доступными в этой системе, являются значки приложений для браузеров Firefox и других продуктов марки Firefox. Они сохраняют знакомые элементы прошлых значков приложений (например, лиса и глобус), но сигнализируют о глубоких изменениях в продукте с помощью смелых цветов и упрощенных форм из Photon Design System.

Логотип

Варианты каналов

В канале выпуска каждого продукта Firefox отображается собственный вариант значка приложения.

Использование значков со словарными знаками или логотипами Firefox

Стандартный горизонтальный блокиратор

Используйте значки приложений с Firefox и другими обозначениями продуктов, отображаемыми справа в качестве предпочтительной блокировки.

Альтернативная многослойная блокировка

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

Иконки как логотип

Используйте значки приложений в качестве логотипов без словесных знаков только тогда, когда Mozilla и Firefox появляются в непосредственной близости от значка.

Значок в виде символа

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

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

Его также можно использовать для представления Firefox в другой среде с его собственными требованиями к стилю; например, лист iOS Share.

Иконки, что можно и чего нельзя

До

Используйте предоставленные значки без изменений

Не

Обратные значки

Не

Используйте только часть значка

Не

Использовать предыдущие значки

Дополнительные инструкции

Файлы значков, содержащие наши товарные знаки, доступны по следующим лицензиям: файлы векторных логотипов по лицензии CC-BY 3.0 или новее; файлы растровых логотипов в MPL 2. Используя их, вы соглашаетесь с тем, что не будете:

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

Новые логотипы Google плохие — TechCrunch

Google действительно вдохнул новые логотипы для своего «переосмысления» G Suite как Google Workspace, заменив знакомые, узнаваемые и, в случае Gmail, знаковые, если хотите, на маленькие радужные капли, которые теперь каждый будет с трудом отличить друг от друга. свои вкладки. Компании всегда громко и долго говорят о своем языке дизайна и выборе, поэтому в качестве противоядия я подумал, что просто объясню, почему эти новые плохие и, вероятно, недолговечные.

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

За прошедшие годы мы увидели так много языков значков Google, что трудно заставить себя задуматься о новых. Перефразируя Сунь Цзы, если вы достаточно долго будете ждать у реки, тела ваших любимых продуктов Google проплывут мимо.Лучше не привязываться.

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

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

Цвет

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

Отчасти поэтому значки самых популярных приложений Google так легко различимы.Красный цвет Gmail появился уже десять лет назад, и синий цвет Календаря тоже довольно старый. Бирюзовый цвет Meet, вероятно, должен был остаться зеленым, как и его предшественник Hangouts, но он, по крайней мере, несколько отличается. Точно так же Keep (помните Keep?) И несколько других менее значимых актеров. Что еще более важно, это , твердый — за исключением нескольких, которые были лучше по цвету, например Карты, до того, как его значок был убит.

Есть две проблемы с цветами новых значков.Во-первых, у них действительно нет цветов. У них , все , , все цветов, что сразу затрудняет их различение с первого взгляда. Помните, вы никогда не увидите их такими большими, как на картинке вверху. Чаще всего они будут примерно такого размера:

Может быть, даже меньше. И никогда так близко друг к другу. Не знаю, как вы, но я не могу отличить их друг от друга, когда не смотрю прямо на них. Что именно вы ищете? Все они имеют каждый цвет, и даже не в одном и том же порядке или направлении — вы видите, как некоторые из них красные, желтые, зеленые, синие, а один — красный, желтый, синий, зеленый? Три (в Gmail) по часовой стрелке и еще два против часовой стрелки.Звучит неважно, но ваш глаз улавливает подобные вещи, может быть, достаточно, чтобы вы больше запутались.

Может быть, это было бы лучше, если бы все они начинались с красного в верхнем левом углу или что-то в этом роде и проходили по очереди. Они не меняют порядок цветов в главном логотипе Google, верно? В конечном итоге эти маленькие шарики просто напоминают игрушки или скрученные фантики от конфет. В лучшем случае это плед, и это территория Slack.

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

Вы также заметите, что значки имеют некоторый однобокий вес. Это потому, что на светлом фоне разные цвета имеют разную визуальную заметность. Более темные цвета больше выделяются на белом фоне, чем желтый или крошечный красный, из-за чего кажется, что значки имеют тяжелые L-аспекты для них: слева в Gmail и Календаре, слева внизу в Диске и Meet, внизу справа в Документах .Но на неактивной вкладке светлый цвет будет более заметным, а буквы L будут казаться с другой стороны.

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

Форма

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

Вы должны быть очень осторожны с прозрачными частями вашего дизайна — положительным и отрицательным пространством и всем остальным. Если вы отдадите какую-либо часть своего логотипа фону, вы окажетесь по прихоти любого пользовательского интерфейса или темы, выбранной пользователем. Будут ли эти логотипы хорошо смотреться с отверстием посередине, переходящим на темно-серую неактивную вкладку? Или дыра всегда будет заполнена белым, что делает ее положительным пространством на темном фоне и отрицательным — на белом? Я не говорю, что есть стопроцентно правильный ответ, но каким бы он ни был, Google его не выбрал.

Как бы то ни было, проблема с этими значками в том, что они имеют плохую форму. Все они полые, и четыре из них прямоугольные, если включить отрицательное пространство Gmail (а мы делаем — Google научил нас). Общая форма контейнера идеально подходит для использования время от времени, но на первый взгляд четыре из пяти — это просто угловые точки. Вам нужна высокая буква O, заостренная буква O или одна из двух квадратных O с немного разными цветовыми узорами? Кто может сказать на расстоянии? Только теперь они напоминают то, что должны делать, если внимательно присмотреться.

Теперь, когда я думаю об этом, эти фигуры действительно кричат Office и Bing, не так ли? Не хорошо!

Пока мы работаем, тонкий шрифт на открытом пространстве Календаря выглядит довольно анемичным по сравнению с большой толстой рамкой, верно? Может, им стоило использовать жирный шрифт.

И последнее, накладывающиеся друг на друга цвета создают проблемы. Во-первых, это делает логотип Drive похожим на символ биологической опасности. Но это добавляет много сложностей, которые трудно уловить в мелком масштабе. У оригинального логотипа Drive было три цвета, конечно, и небольшая тень, чтобы вы могли увидеть, что это была полоса Мебиуса, подразумевающая бесконечность, а не просто треугольник (его тоже нет — так зачем оставлять треугольник?) — но цвета выделяют друг друга: синий и желтый образуют зеленый, два основных цвета и их второстепенные цвета.

У новых есть все три основных цвета, один вторичный и два третичных (если считать за цвет темноту). Они никоим образом не способствуют существованию форм. Вы их «просматриваете»? Это не кажется правильным. Они вроде складываются, но как? Эти ленты сделаны из скручивания? Я так не думаю. Формы — это не вещи — это просто аранжировки, предложения того, чем они когда-то были, смещенные на один шаг слишком далеко.

Марка

Google не привыкать выбрасывать ценность в мусорную корзину.Но можно подумать, что иногда они узнают, когда у них дела идут хорошо. Логотип Gmail — это хорошо. Должен сказать, что я предпочел старый угловатый значок, когда несколько лет назад они перешли на закругленный значок, но он мне понравился. Естественная M-образная форма конверта так хорошо подчеркнута, а красно-белый цвет так легко узнаваем и читаем — это тот логотип, который вы держите долгое-долгое время. Или не!

Проблема здесь в том, что теперь Gmail, который, по сути, работает как собственный, полностью непобедимый бренд на протяжении более десяти лет (что составляет эоны технологий, не говоря уже о технических логотипах), поставлен наравне с другими службами, которые не являются t как пользующийся доверием или широко используемый.

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

То же самое для всех остальных этих маленьких цветных кругов: вы никогда не забудете, что все они являются частью одного и того же устройства, которое знает все, что вы ищете, каждый сайт, который вы посещаете, а теперь и все, что вы делаете на работе.О, они очень вежливы. Но не заблуждайтесь, однородный брендинг (при всей его цветовой неоднородности) — это прелюдия к кризису бренда, когда вы больше не просто пользователь Gmail, вы находитесь в доме Google целый день, каждый день.

«Это момент, когда мы освобождаемся от определения структуры и роли наших предложений в терминах, которые были изобретены кем-то другим в совершенно другую эпоху», — сказал Fast Company вице-президент Google Хавьер Солтеро.

Идея ясна: покончим со старым — вещами, которые укрепили ваше доверие; а также новое — то, что основано на вашем доверии.

Иконки и логотипы — не одно и то же

Одно из наиболее распространенных заблуждений в разговорах между клиентом и дизайнером — это легкомысленное использование терминов «значок» и «логотип» в качестве взаимозаменяемых. Чтобы облегчить это, давайте посмотрим, что такое значок, что такое логотип и как эти две вещи могут быть перепутаны.

Что такое значок?

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

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

Значки не масштабируются

Чаще всего конечный продукт при создании значков не масштабируется.Сама идея значков состоит в том, чтобы наилучшим образом передать данное сообщение в заранее определенном ограниченном визуальном пространстве. В современных интерфейсах, ориентированных на значки, мы допускаем несколько вариантов одного и того же значка. Значки, которые находятся в вашей док-станции, скорее всего, имеют как минимум 5 встроенных состояний, что делает их четкими во всех аспектах вашего взаимодействия с ними. Представление списка в OS X дает вам версию 16 × 16 пикселей, в то время как док-станция использует адаптацию 256 × 256 пикселей. Это не масштабируемые векторные версии, это растровые шедевры ручной работы.Создатель должен тщательно выбрать, как наилучшим образом использовать холст любого заданного размера, и чаще всего полностью воссоздавать значок в этих размерах.

Мой значок почты маниллы в различных состояниях. Обратите внимание на разное расположение элементов в меньших размерах.

Иконки квадратичные

Большинство иконок работают на полном квадратном холсте. Как вы решите использовать этот холст, зависит от вас, но он ограничен пространством с прямыми краями.

Значок моей почты маниллы в различных состояниях. Обратите внимание на разное расположение элементов в меньших размерах.
Вот и все. Иконки чаще всего не масштабируются, они представляют собой растровые изображения, созданные вручную из желания воплотить операцию или концепцию в ограниченном визуальном пространстве. Чем это отличается от логотипа?
Что такое логотип?
Логотип — это графический элемент, такой как знак и / или тщательно подобранный шрифт, который вместе формирует визуальное представление объекта, организации, продукта, хижины на дереве, секретного клуба или миллиарда других вещей.Существует бесконечное множество способов думать о логотипах и дизайне логотипов, но ради этого аргумента важно снова взглянуть на технические отличия от дизайна иконок.
Логотипы масштабируемы
Логотип должен быть воспроизведен на многих носителях, как представление, которое возглавляет бренд в целом. Логотипы должны хорошо сочетаться со всем, от фирменных бланков до рекламных щитов, от экрана до печати, и они обычно не создаются для просмотра в едином оптимальном размере.Эта многогранная работа оказывает большое влияние на образ мышления, который необходимо использовать при разработке логотипов. Правильный пакет логотипов включает строго векторный вывод и, чаще всего, изящное вырождение цветов вплоть до одноцветной версии.
Логотипы, как правило, масштабируемы.
У логотипов нет границ
Теоретически логотип может быть любым. Помимо очевидных преимуществ работы в формате, который легко масштабируется и воспроизводится, на самом деле существует очень мало правил по сравнению с дизайном иконок.На дизайн иконок очень влияют технические размеры и ограничения систем, которые их отображают. Дизайн логотипа — это совершенно другая площадка. Логотип может быть любой формы, цвета или размера — им можно помахать с баннера в 100 футов или вытатуировать на ягодицах. Единственное ограничение — это физический носитель, на котором он будет отображаться.
Почему мы запутались?
Иконки заняли очень заметную роль в современных интерфейсах, и это, очевидно, распространилось на сферу брендинга, где многие значки служат как значком приложения, так и брендингом для этого объекта.В эпоху значков приложений, когда миллионы людей узнают услуги и продукты по их крошечному пространству на домашних экранах смартфонов, границы между значком и логотипом по понятным причинам стираются.
Panic создает отличное программное обеспечение и использует значки приложений в качестве товарного знака.
Эта волна иконизма ™ (да, я придумал ее только для этой цели) повлияла на многих графических дизайнеров, и многие привлекательные аспекты мультяшности и хитроумного иконизированного стиля нашли свое отражение в современных тенденциях дизайна логотипов.Фактически, этот стиль стал образцом движения веб 2.0, и у многих компаний есть логотипы, использующие тот же визуальный словарь, что и значки.
Логотипы в иконистическом стиле.
И хотя логотипы, безусловно, могут использовать стиль значков и даже имитировать квадратную природу значков, пусть не будет никаких сомнений; Иконки и логотипы — это две совершенно разные дисциплины дизайна. Важно понимать разницу между этими двумя вещами, поскольку они по своей сути стремятся достичь двух совершенно разных целей, как технически, так и концептуально.
Многие люди используют эти термины взаимно.