Иконки приложений как новые товарные знаки. Десять принципов эффективного дизайна и охраны
Март 2021 г.
Зейгер Финк*, директор по ИС в MF Brands Group, Швейцария
*Зейгер Финк является директором по ИС в MF Brands Group (Lacoste) и автором книги «ВЕЛИКАЯ КАТАПУЛЬТА. Как комплексное управление ИС приведет ваш бренд к успеху». Эта статья была изначально опубликована в журнале «Юрист по товарным знакам». Она подготовлена на основе магистерского курса «ИС и коммуникация» в Школе управления и инноваций Института политических исследований. Автор благодарит курс 2018 г. за участие в исследовании. Все точки зрения, изложенные в этой статье, принадлежат автору.
Смартфоны коренным образом изменили характер взаимодействия между потребителями и брендами. Иконки приложений теперь играют ключевую роль и часто служат для различения множества конкурирующих приложений. Они являются новыми товарными знаками, а значит, требуют такого же обращения. Далее приводятся рекомендации, которые помогут самым разным компаниям — от стартапов до многонациональных корпораций — оптимизировать процесс разработки и охраны приложений, что является обязательным условием создания сильного бренда.
ИС быстро становится самым ценным бизнес-активом, так как успех и длительность существования компаний все больше зависит от проприетарных брендов, образцов и контента. Книга «Великая катапульта» показывает, как найти путь в этой глобальной реальности. В ней простым бизнес-языком рассказывается о том, почему ИС является ключевым элементом основанных на бренде компаний, а также содержатся практические советы по фактической организации работы с ИС внутри компании.
На основе опыта ряда наиболее известных мировых брендов в книге излагаются принципы
Информация, представленная в книге, будет полезна для любого человека, связанного с управлением компанией (от стартапа до международной корпорации, включенной в реестр фондовой биржи), а также для всех, чья деятельность касается создания бренда, включая маркетологов, инвесторов и консультантов по управлению.
Чтобы товарные знаки могли выполнять свою функцию коммерческого идентификатора, они должны быть отличительными. Поэтому слишком простые или абстрактные графические изображения не подходят для этого, и ведомство по товарным знакам может отказать в регистрации подобного знака по причине его банального, декоративного или функционального характера.
Рисунок 1. Примеры дизайна иконок с ограниченной изначальной отличительностьюИконка, состоящая из элементов, которые описывают деятельность компании, или являющаяся типовой с визуальной точки зрения, не в состоянии обеспечить отличение от конкурентов из той же категории. Поэтому подобная иконка не может использоваться как товарный знак, либо права на нее будет защитить, как минимум, непросто.
Рисунок 2. Примеры визуальной описательностиЭтот принцип является в некотором смысле неочевидным, так как многие маркетологи считают описательные элементы логичным способом привлечения внимания потребителей. Помимо отсутствия отличительности, отказ от регистрации подобных элементов в качестве товарных знаков обусловлен еще и тем, что такая регистрация стала бы неоправданным предоставлением монопольных прав одному участнику рынка. Но это не значит, что описательные иконки приложений в принципе не могут выполнять функции товарных знаков, свидетельством чего является тот факт, что большинство людей знают иконку WhatsApp, изображенную выше. Однако это связано с ее интенсивным использованием и огромным глобальным вниманием к этому приложению. Такая удача выпадает немногим. А значит, зачем ставить себя в невыгодное положение с самого начала? Самые сильные товарные знаки — это оригинальные логотипы, не связанные с теми услугами, к которым они относятся.
использование цвета
Цвета — это мощные идентификаторы, и они могут значительно усилить товарный знак. Старайтесь выделиться среди конкурентов и используйте один или несколько оригинальных цветов в качестве части знака.
Некоторые цвета превратились в типовые идентификаторы для определенных категорий приложений: например, зеленый — для коммуникационных приложений, а желтый — для приложений, связанных с такси. Следует избегать использования подобных цветов, чтобы укрепить отличительность, а значит, и силу товарного знака.
Рисунок 5. Цвета, характерные для определенных категорий и ослабляющие силу товарного знака: коммуникационные услуги и услуги таксиС точки зрения дизайна иконок одно из основных ограничений — это недостаток места, что мешает размещать на них названия брендов. Часто прибегают к такому решению: размещение на иконке первой буквы названия бренда, стилизованной или написанной особым шрифтом. Хотя это логичное решение для брендов, которые уже обладают большой узнаваемостью, эту стратегию нельзя считать удачной с точки зрения правовой охраны. Регистрация названия бренда не обеспечивает охрану его первой буквы. Во многих странах ведомства по товарным знакам отказывают в регистрации отдельных букв. Даже если знак, состоящий из первой буквы, будет зарегистрирован, это не поможет избежать использования той же буквы другим приложением. В принципе велика вероятность того, что среди миллионов существующих приложений есть довольно много тех, где уже используется эта буква!
Бренды, имеющие короткие названия или аббревиатуры из нескольких букв, могут использовать их в качестве логотипа и считать, что им повезло. Укреплению товарного знака будет способствовать использование отличительного шрифта или стиля.
В последнее время многие компании начали разрабатывать отдельную брендинговую стратегию для коммерческой деятельности в Интернете, чтобы подчеркнуть, что они начали работать в цифровой среде. Такой подход, очевидно, не является предпочтительным с точки зрения целостности бренда и может даже полностью утратить актуальность из-за появления многоканальных стратегий, цель которых заключается в объединении онлайнового и офлайнового потребительского опыта в единое целое. Так почему бы не вспомнить про старый логотип компании и не использовать его в качестве иконки приложения? Это позволяет воспользоваться наработанной известностью, консолидировать существующие права в глобальном масштабе и избежать подачи новой заявки на товарный знак.
Прежде чем превратить новый логотип в товарный знак, важно удостовериться в том, что он не является объектом действующих прав, так как это может стать препятствием к регистрации и использованию. С помощью поиска на предмет доступности можно найти сторонние товарные знаки, которые представляют правовую угрозу и могут стать причиной внесения дорогостоящих изменений на более позднем этапе.
В контексте пункта 6 нужно также удостовериться в том, что права на ваш логотип
Как ни странно, но владельцы приложений редко регистрируют свои иконки. Вне зависимости от того, почему это так (из-за незнания, невнимательности или ошибочного представления о том, что названия компании будет достаточно), гарантией исключительности и охраны является только регистрация самой иконки. Конечно, регистрация требует затрат, а бюджет компаний, особенно стартапов, часто ограничен. Однако в цифровой экономике права интеллектуальной собственности (ИС), такие как товарные знаки, нередко являются основными активами компании. Их охрана вполне оправдывает вложенные средства.
Товарные знаки сохраняют свою действительность, если используются в том виде, в котором зарегистрированы. Следовательно, изменение дизайна зарегистрированной иконки приложения может привести к утрате прав. Поэтому рекомендуется придерживаться дизайна иконки точно так же, как компании хранят верность логотипам своих брендов. (Теперь вы знаете, почему они так редко меняются!) Если нужно сохранить возможность менять время от времени цвет иконки, то следует зарегистрировать ее в черно-белом варианте, так как в большинстве юрисдикций такая регистрация автоматически распространяется на все цвета. (Примечание: в этом случае невозможно воспользоваться цветовой отличительностью, см. пункт 3). В случае изменения дизайна приложения следует подать заявку на новый товарный знак, чтобы обеспечить охрану такого дизайна.
Рисунок 10. Изменение товарных знаков: эволюция знака UberКажется вполне логичным, что знак приложения в заявке должен быть представлен в той форме, которая типична для сегодняшних приложений, т. е. в форме скругленного квадрата. Однако не нужно забывать, что эта форма — результат графических требований iOS, Android и других платформ. Что если они изменятся? Это может изменить характер использования иконки и, соответственно, повлиять на действительность знака (см. предыдущий пункт). Аналогичная ситуация возможна в тех случаях, когда начинают доминировать другие типы интерфейсов. Чтобы знак в виде иконки выдержал испытание временем, следует регистрировать его технологически нейтральным образом, т. е. в стандартной (квадратной) форме и без указания в описании на то, что он будет использоваться в «приложении для смартфона».
В заключение попробуем взглянуть в будущее: движущиеся иконки могут появиться раньше, чем кажется. И это сделает правильную стратегию в области ИС еще более актуальной.
Проблемы новых логотипов приложений Google — UXPUB
Мы расскажем, что с ними не так и, как это можно исправить.
Вероятно, вы уже видели новые иконки приложений 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, а также моей быстрой попытке их оптимизировать!
Что плохо в новых значках Google / Хабр
Компания Google «переосмыслила» G Suite как Google Workspace и выродила удивительное семейство разноцветных логотипов вместо всем привычных, узнаваемых, а в случае Gmail — даже культовых — иконок. На их месте появились маленькие радужные капли, которые мы теперь будем изо всех сил пытаться отличить друг от друга на вкладках браузера. Компании любят громко и много разглагольствовать о фирменном дизайне, поэтому в качестве противоядия попробую просто на пальцах объяснить, почему эти иконки такие плохие и почему они не продержатся долго.
Во-первых, я понимаю намерение Google. Они пытаются унифицировать визуальный язык различных приложений в своём наборе. Это может быть важно, особенно для такой компании, которая отказывается от приложений, сервисов, языков проектирования и других вещей, словно сбрасывая балласт с падающего воздушного шара (удивительно удачное сравнение, на самом деле).
За все эти годы мы видели у Google так много стилей значков, что даже трудно заставить себя рассуждать о новых. Перефразируя Сунь-цзы, если вы достаточно долго ждёте у реки, тела ваших любимых продуктов Google проплывут мимо. Лучше к ним не привязываться.
Но иногда они делают что-то настолько бессмысленное, что любой, кому это вообще интересно, обязан высказать своё мнение компании в лицо — и заявить, что они явно не справились. В последний раз такое настроение у меня было после закрытия Google Reader. Поскольку мне и сотне миллионов других людей придется смотреть на эти уродливые новые значки постоянно целыми днями, пока их не заменят, возможно, немного шума чуть ускорит процесс.
Извините за прямоту, но это необходимый антидот против бесконечных дизайнерских историй, которыми сопровождаются почти все эти опрометчивые редизайны. Мы ограничим обсуждение ошибок в этих логотипах только в трёх отношениях: цвет, форма и бренд.
Цвет — один из самых заметных атрибутов, вы легко распознаёте цвета даже периферийным зрением. Таким образом, чёткий цвет во многих отношениях важен для текста и дизайна. Как думаете, почему компании сходят с ума от всех этих оттенков синего?
Это одна из причин, почему так легко различить иконки самых популярных приложений Google. Красный цвет Gmail уходит на 10+ лет в прошлое, синий Календарь тоже довольно стар. Цвет окраски птицы чирок (сине-зелёный) Meet, вероятно, должен был просто остаться зелёным, как его предшественник Hangouts, но он хотя бы немного выделяется. Так же, как Keep (помните Keep?) и несколько других малозначительных сервисов. Что ещё более важно, они однотонные — за исключением нескольких, которые хорошо использовали цвета, как Maps, прежде чем их тоже убили.
Есть две проблемы с цветами новых значков. Во-первых, у них на самом деле нет цвета. Во всех радуга, что сразу затрудняет различение с первого взгляда. Помните, что вы никогда не увидите их такими большими, как на картинке вверху. Чаще всего они будут примерно такого размера:
Может, даже меньше. И никогда так близко друг к другу. Не знаю, как вы, но я не могу их отличить, если не рассматривать вплотную. Что именно вы ищете? В каждом значке разные цвета, иногда даже в разном порядке или направлении — у некоторых идёт красный, жёлтый, зелёный, синий, а в одном красный, жёлтый, синий, зелёный? Три (с Gmail) по часовой стрелке и два против часовой стрелки. Звучит неважно, но ваш глаз улавливает подобные вещи, чтобы вы ещё больше запутались.
Может, лучше все начинать с красного в левом верхнем углу или что-то в этом роде. В главном логотипе Google цвета ведь не меняются в случайном порядке, верно? В конечном счёте эти маленькие комочки просто словно игрушки или смятые фантики от конфет. В лучшем случае плед, а это уже территория Slack.
Сначала я подумал, что хорошим визуальным индикатором станут маленькие красные треугольные язычки в углах, но их зачем-то тоже испортили. Язычки в значках можно было расположить в разных углах, но в Календаре и Диске они в правом нижнем углу. Треугольники хотя бы разной формы, но это просто повезло из геометрии фигур.
Вы также заметите, что значки словно перевешивают набок. Это потому что на светлом фоне у разных цветов разная визуальная значимость. Более тёмные сильнее проявляются на белом фоне, чем жёлтый или крошечный кусочек красного, из-за чего значки скатываются в жирные литеры L, слева в Gmail и Календаре, внизу слева в Drive и Meet, внизу справа в Docs. Но в неактивной вкладке светлый цвет более заметен, и эти L окажутся на другой стороне.
Предполагаю, что дизайнеры долго рассматривали логотипы большого размера — и не слишком задумывались, как они будут выглядеть в реальном использовании на экране дешёвого хромбука или Android-телефона. Такой вывод можно сделать, потому что у каждого значка есть очень маленькие детали, которые исчезнут на ширине 20 пикселей.
Так мы подошли к проблемам формы, потому что воспринимаемая форма этих значков будет меняться в зависимости от фона. Оригинальные иконки решали проблему за счёт уникальной цельной формы, и фон действительно не просачивался. Даже камерообразное «отверстие» в Meet получило текстуру и тень.
С прозрачными фрагментами следует обращаться очень осторожно: позитивное и негативное пространство и всё такое. Если в части логотипа просвечивает задний план, то на ситуацию может повлиять произвольный UI или кастомная тема. Будут ли хорошо смотреться эти дырявые логотипы на тёмно-серой неактивной вкладке? Или же дыра всегда останется белой, что превращает её в положительное пространство на тёмном фоне и отрицательное на белом? Я не говорю, что есть стопроцентно правильный ответ, но каков бы он ни был, Google его не выбрал.
В любом случае у этих значков плохая форма. Все они полые, а четыре из них прямоугольные, если включить отрицательное пространство Gmail (и мы это делаем — Google научил нас этому). Общая форма контейнера иногда идеально подходит для использования, но на первый взгляд четыре из пяти — это по сути угловатые буквы О. Вам нужна высокая O, заострённая или одна из двух квадратных O с немного разными цветовыми узорами? Издали непонятно, только если очень внимательно всмотреться.
Теперь, когда я подумал об этом, то формы действительно сильно напоминают Office и Bing, не так ли? Это тоже не очень хорошо!
Раз уж мы об этом заговорили, тонкий шрифт в открытом пространстве в иконке Календаря довольно анемичен по сравнению с большой толстой границей, верно? Может, следовало выбрать жирный.
И последнее: перекрытие цветов создаёт проблемы. Во-первых, логотип Диска становится похож на символ биологической опасности. Во-вторых, это добавляет много сложностей, которые трудно проследить в малом масштабе. На оригинальном логотипе Диска было три уверенных цвета и небольшую тень, чтобы вы видели, что это лента Мёбиуса, подразумевающая бесконечность, а не просто треугольник (это ушло, так зачем оставлять треугольник?), но цвета оттеняют друг друга: синий и жёлтый составляют зелёный, два первичных — и их производная.
Теперь у нас целых три первичных цвета, один вторичный и два третичных (если считать темноту цветом). Они фактически никак не помогают в выражении форм. Вы смотрите «сквозь» них? Это кажется неправильным. Они вроде как сложены, но как? Неужели ленты сделаны скручиванием? Не думаю. Формы — это не вещи, а всего лишь схемы, намёки на то, чем они когда-то были, чьи признаки удалены чуть сильнее, чем следовало.
Google не первый раз спускает ценности в унитаз. Но иногда ведь очевидно, что всё идёт хорошо. Логотип Gmail был хорошей вещью. Признаюсь, мне больше нравилась старая угловатая иконка, когда несколько лет назад они переключились на закруглённую, но и эта прижилась. Естественная форма конверта в виде буквы М так хорошо выражена, а красно-белый цвет мгновенно узнаваем и читаем — это тот самый логотип, который мы используем долгое-долгое время.
Проблема в том, что Gmail является отдельным, совершенно непобедимым брендом уже десять лет (это целая эпоха в технике, не говоря уже о логотипах). И его поставили на одну полку с другими сервисами, которым не так доверяют или которые не так широко используются.
Теперь Gmail — это просто ещё одна форма радуги в море очень похожих радуг, которая говорит пользователю: «Этот сервис не является для нас особенным. Это не та служба, которая так хорошо и так долго для вас работала. Это всего лишь один палец на руке гиганта. И теперь вы никогда не можете смотреть на одно, забывая о другом».
То же самое со всеми остальными маленькими цветными колёсиками: вы никогда не забудете, что все они являются частью одного и того же аппарата, который знает всё, что вы ищете, каждый сайт, который вы посещаете, а теперь также всё, что вы делаете на работе. О да, они очень вежливы. Но не ошибитесь, однородный брендинг (при всей его цветовой неоднородности) — это прелюдия к брендовому кризису, в котором вы больше не просто пользователь Gmail, вы находитесь в доме Google, весь день, каждый день.
«Это момент, когда мы освобождаемся от определения структуры и роли наших предложений в терминах, которые изобретены кем-то другим в совсем другую эпоху», — объяснил вице-президент Google Хавьер Солтеро в интервью Fast Company.
Идея ясна: покончить со старым временем, когда было построено ваше доверие — и войти в новое время, где из этого доверия извлекается выгода.
В соцсетях раскритиковали новый логотип 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. Он намного более масштабируемый, но его сложно сделать правильно»
Подробности по теме
«Да кто такой этот ваш «Мессенджер»: пользователи прощаются с «Сообщениями» «ВКонтакте»
«Да кто такой этот ваш «Мессенджер»: пользователи прощаются с «Сообщениями» «ВКонтакте»Логотипы и иконки — маленькие произведения искусства
Изготовление логотипов и иконок, которые запоминаются с 1 секунды
Логотип, как фото в паспорте — показывает настоящее «лицо» бренда. Взглянув на чужой документ, мы сразу понимаем: это паспорт мужчины или женщины. По одной лишь фотографии можно оценить, нравится человек или нет.
Качественно исполненные логотипы на заказ дают нам не меньше информации. Одного взгляда бывает достаточно, чтобы понять, чем занимается компания и как давно работает на рынке. А главное – хочется ли начать с ней сотрудничество?
Сегодня логотипы есть не только у каждого сайта, продукта или бренда. Разработка фирменного стиля и логотипа проводится для онлайн- и оффлайн-конференций, событий и даже для городов.
Стоит отметить, что решение заказать логотип не приходит спонтанно. Это обязательный пункт успешной маркетинговой политики.
Главный шаг к успеху
Многим кажется, что для изготовления знака бренда достаточно открыть Google и выбрать подходящую картинку. Или купить шрифт и написать им имя компании (или сайта). Немало начинающих предпринимателей вместо того, чтобы заказать логотип у профессионалов, пытаются сделать его самостоятельно.
Конечно, стоимость разработки логотипа далеко не дешевая. Но и польза от уникального, узнаваемого и легко запоминающегося знака намного выше, чем от логотипа, который сделали онлайн.
У каждого имиджевого элемента есть функции
Логотипы на заказ нужны для того, чтобы:
- вызывать эмоции и желание купить товары или заказать услуги;
- визуально сообщать о сфере деятельности компании;
- рекламировать бренд.
Разработка логотипа нужна даже самым маленьким фирмам, ведь с этого начинается бизнес. В последующем визуальный элемент потребуется не только для сайта, а и для всех документов, включая коммерческие предложения. И чем удачней окажется изготовление, тем выше вероятность выделиться среди конкурентов.
Что лучше: эмблемы или буквы?
Создание логотипа — очень кропотливый процесс. Нельзя сразу сказать, что понравится целевой аудитории, воспримет ли она новый символ бренда. Поэтому сотрудники «Студии Дениса Каплунова» не станут показывать вам готовый универсальный вариант сразу после обсуждения условий.
Для начала мы изучим цели и задачи вашего бизнеса. И только после тщательного анализа начнется разработка логотипа компании.
Поэтому лучше выбирать и тестировать сразу несколько вариантов:
- графическое начертание;
- фирменный знак;
- блок (изображение+надпись).
На логичный вопрос о том, сколько стоит разработка логотипа, мы отвечаем однозначно: ровно столько, сколько будет потрачено усилий. Стоимость услуги указана на сайте и не зависит от выбранного типа изображения.
Разработка иконок: как, зачем, почему
Не только разработка логотипа фирмы помогает добиться коммерческих и рекламных целей. Создание иконок для оформления сайта и бренда не менее важно.
Большинство дизайнеров пользуются стандартным набором графики, скачанной с какого-нибудь сайта. Цена на наборы минимальна, как и эффект, который они производят.
Куда бы ни зашел пользователь интернета, он везде видит одинаковые иконки: в разделе «цена» изображен доллар, в категории настроек — шестерёнки.
И это правильно. Ведь если поместить несвойственное изображение на иконку, людям придется угадывать её назначение.
Создание иконок имеет свои стандарты. Но оригинальным, запоминающимся и ярким можно сделать любой элемент. Необычность – вот что сегодня побуждает пользователей купить у вас, а не у конкурентов.
В «Студии Дениса Каплунова» знают, как обратить онлайн-стандарты в вашу пользу. Предлагаемые услуги имеют реальный результат — доказано клиентами.
Логотипы и иконки на сайт рейтинг. Топ сервисов и отзывы.
КАКИЕ ЗАДАЧИ МОЖЕТ РЕШИТЬ ИКОНКА
- Навигация. В нынешнее время иконки очень часто применяются на торговых площадках. К примеру, их можно использовать для обозначений категорий товаров.
- Для обозначения списка предоставляемых услуг. При условии создания данного вида перечня с использованием иконок, наглядная привлекательность может существенно увеличится.
- При чтении длинной веб-страницы. Современные особенности чтения страницы сайта таковы, что любой посетитель или пользователь скорее всего беглым взглядом просмотрит текстовые материалы, чем будет читать их. Очень трудно заставить такого пользователя прочитать и изучить длинный текст до конца. В таком случает вам на помощь может прийти иконка, которая послужит неким графическим разделителем и будет находится между абзацами, тем самым выделяя части текста. Всё это существенно облегчает и упрощает процесс чтения текстового контента, что в свою очередь повышает качество понимания вложенного в текст смысла. Вообще иконками принято именовать картинки, которые используются в маркированных перечных. Также благодаря использованию иконок можно перечислять как достоинства так и недостатки того или иного товара или услуги.
- Иконки как кнопки действий. При использовании иконок в роли кнопок для сайта возможно сильно повысить уровень внимания пользователей на данные кнопки действия. К примеру любую понравившуюся и ориентированную под конкретную задачу иконку можно использовать как «целевую кнопку», к примеру с помощью неё можно «задать вопрос» при этом украсив значок иконкой вопроса или же «скачать файл» украсив значок иконкой диска, итд.
Для любого интернет-ресурса иконка является своеобразным маяком, благодаря которому можно сделать любой сайт более узнаваемым и запоминающимся, следователь его будет легко найти на панели веб-обозревателя или в закладках «Избранные». Как ни крути, такая совсем маленькая вещь как иконка предоставит для ваших пользователей дополнительный комфорт и удобства. Если вы хотите создать обычную иконку, то вам, в её сотворении не потребуется специальные знания или подготовка. Для претворения иконки в жизнь достаточно воспользоваться любым графическим редактор, который бы смог поддерживать формат *ico. Обычно, стандартный размер иконки составляет 16х16 пикселей, при этом используется палитра в 16 цветов. Но также можно в процессе создании использовать более богатый цветовой набор, к примеру в 256 цветов. Для того, что бы у вас не возникало проблем с загрузкой и отображением иконки на вашем сайте, необходимо всегда сохранять их как favicon.ico. Если вы хоти сделать такую икону, которая бы отображала логотип вашей фирма или компании, то существуют специальные веб-сервисы, которые могут сгенерировать иконку из изображения логотипа.
Завершая данную статью, можно с уверенностью сказать, что иконки являются средством индивидуальности вашего веб-сайта или торговой площадки, с помощью которых вы как владелец ресурса сможете повысить узнаваемость собственного проекта, увеличить юзабилити, привлечь дополнительный целевой трафик, а также улучшить восприятия текстового контента. В нынешнее время заполучить желаемою иконку не составляет никакого труда т.к. есть специальные сайты на которых вы сможете бесплатно скачать или купить понравившуюся иконку.
Автокадабра — Турбомилк
Автокадабра
Автор: Денис Кортунов
16 января 2008
Компания «Тематические Медиа» задумала реализовать социальную сеть для автолюбителей, но не простую, а с элементами ролевых игр. Имя этому проекту — Автокадабра.
Задача
Идея сети — в объединении людей, передвигающихся в пространстве с помощью легкового транспортного средства. В проект заложена уникальная модель, делающая реальным сосуществование на одном ресурсе всех онлайновых автомобильных клубов.
Автокадабра — довольно необычный сайт. Его метафору не каждый сможет осилить, по крайней мере с первого раза. Раздел «Помощь» на Автокадабре
У каждого пользователя Автокадабры есть виртуальный гараж, где хранятся его машины. Разработчики обратились к нам с непростой задачей: нарисовать иконки для всех легковых автомобилей на свете. Но не простые иконки, а перекрашиваемые, чтобы пользователь мог выбрать любой цвет для своего авто.
Кроме того, для проекта нужен был логотип, который бы в полной мере отразил идею социальной структуры, состоящей из узлов и связей. В общем, что-то запутанное и автомобильное.
Процесс
Как правило, размер иконок в рамках одного набора одинаков, но реальные автомобили имеют разные размеры, и нам нужно было решить, как это отобразить. Сначала мы думали разделить машины на классы и для каждого класса ввести фиксированную длину в пикселах. Но потом решили использовать более точную систему: рисовать в масштабе. Мы приняли 60 миллиметров длины реального автомобиля за 1 пиксел длины иконки. Таким образом, чтобы получить длину иконки, нужно было измерить реальный автомобиль и разделить получившееся значение на 60.
Чтобы машинки можно было легко перекрашивать, нам пришлось придумать особую технологию рисования. Сначала рисуется контур автомобиля, а потом сверху кладутся черные тени и белые блики. Получается вот такая полупрозрачная машинка:
Если такую картинку положить сверху на цветной фон, то машина волшебным образом перекрашивается в цвет этого фона:
Теперь про логотип. Заказчик возжелал, чтобы знак Автокадабры был крутым и сохранял бы преемственность с логотипом успешного проекта Хабрахабр. Мы долго думали: «Что же нарисовать? Может, руль или рычаг переключения передач? А может, написать название спиралью?». Но однажды пришло озарение: «Клубок шин!».
Всем в «Тематических Медиа» идея понравилась. «Чувствуется дух сайта», — сказал Денис Крючков.
Результат
На текущий момент нарисованы иконки для большей части популярных в России автомобилей. Они украшают виртуальные гаражи и радуют пользователей Автокадабры. Вот лишь некоторые:
А страницы сайта украшает вот такой разноцветный логотип:
Создатели проекта были очень довольны результатом. Не будем скрывать, мы и сами получили огромное удовольствие от работы.
Связанные записи
Какие значки лучше всего использовать для дизайна логотипа?
Когда дело доходит до разработки логотипа, вы хотите, чтобы он был запоминающимся. У большинства людей возникает вопрос: какие значки лучше всего использовать для дизайна логотипа? Что ж, вы хотите сделать логотип компании, который выделялся бы из общей массы. Что касается бизнес-логотипа, некоторые значки лучше других. Поскольку у вас под рукой целый мир дизайнов, вы можете творчески подумать о том, что подойдет вам лучше всего. В идеале при выборе этих логотипов следует соблюдать некоторые рекомендации.Будь то один из ваших логотипов в социальных сетях или ваш фирменный логотип, вам нужно сначала узнать, что эти логотипы представляют.
Логотипы и компьютер
Есть определенные логотипы, которые вы не хотите использовать. Эти дизайны что-то значат в компьютерном мире. Например, вы не хотите выбирать логотип Apple, потому что у Apple этот дизайн в значительной степени загнан в угол. Вы не захотите столкнуться с путаницей, которую люди испытывают по поводу брендинга, поэтому старайтесь избегать яблок.Другие конструкции, такие как винт-колесо, люди сразу узнают как настройки. Вы, конечно же, не хотите, чтобы это было логотипом вашей компании или социальной сети. Строчная буква e обычно используется для Explorer. Папка с файлами представляет собой панель управления на компьютере, поэтому эта папка также используется. Прежде чем прыгать, подумайте, связан ли логотип с символом компьютера, и откажитесь от этого дизайна.
Логотипы и товарные знаки
Да, логотипы могут быть товарными знаками.Вы не захотите использовать логотип другой компании, потому что на самом деле это их собственная интеллектуальная собственность. Хотя вы не всегда можете узнать логотип каждой компании, вы наверняка поймете, что если вы получаете что-то из Интернета, это не просто автоматически ваше. Вы же не хотите иметь дело с иском об интеллектуальной собственности постфактум. Кроме того, вам придется заплатить денег, чтобы удалить все, на чем вы разместили название и логотип вашей компании. Лучший способ избежать этих головоломок — не выбирать что-то необычное, что вы провожаете в Интернете.
Как создаются логотипы
Обычно эти логотипы для предприятий создают графические дизайнеры. Вы можете нанять графического дизайнера удаленно или в типографии. Каким бы ни был ваш метод, вы должны попытаться найти того, кто сделает для вас что-то оригинальное. В конце концов, ваш логотип навсегда останется частью рекламы вашего бизнеса. Убедитесь, что вы описали своему графическому дизайнеру, что вы хотите, если у вас есть идея. Если нет, вы можете позволить графическому дизайнеру разработать то, что, по мнению профессионала, вам понравится.
Проблема с аутсорсингом
Аутсорсинг — отличный способ добиться цели. Вы можете положиться на людей, не входящих в вашу команду, которые сделают что-то для вас. Вы даже можете купить авторские права на логотип. Это беспроигрышный вариант. Однако помните, что в мире графического дизайна время — деньги. Вы можете двигаться вперед и назад, но вы должны платить за время графического дизайнера. Вы должны быть уверены, что общаетесь эффективно. Худшее, что вы можете сделать, — это заплатить за товар и не получить желаемое.Вот почему вам необходимо определить, подойдет ли вам профессионал. Вы всегда будете рисковать на кого-то, кто находится за пределами вашей компании. Однако если вы занимаетесь малым бизнесом, у вас может не быть в штате людей, которые могли бы взяться за дело и потерпеть неудачу. По крайней мере, здесь вы знаете, что они имеют представление о сущности компании. И наоборот, аутсорсинг приведет к более холодному обращению. Это может сработать очень хорошо, поскольку некоторые графические дизайнеры очень талантливы.
Создание стикера с логотипом
Когда дело доходит до вашего логотипа, вам нужно что-то, что действительно соответствует индивидуальности, миссии, продуктам, услугам и бренду магазина. Знаете, как говорят, что картинка может сказать тысячу слов? Это то, что вы хотите, чтобы ваш логотип делал. Взять, к примеру, логотип Starbucks. Starbucks — это компания, которая заявила о себе на основе зеленой русалки. Зеленая русалка не очень красивая, но запоминающаяся. Он тоже похож на своего рода Медузу, но Starbucks — это просто счастливая и удобная сеть кофеен. Когда дело доходит до вашего бренда, вы захотите почувствовать это. Ваш логотип не обязательно должен быть самым красивым значком, который вы когда-либо видели, но вам нужно, чтобы значок был ярким и уникальным.Вы хотите, чтобы люди смотрели на него и думали о названии вашей компании. Вот почему логотипы приживаются и почему люди тратят так много времени на мозговой штурм иконок.
Небо — ваш предел
Вам не нужно делать то, что делают все остальные. Фактически, большинство новаторов выходят на рынок новыми и разными способами. Эти люди видят мир по-другому. Скорее всего, если вы находитесь на стадии мозгового штурма, вы обдумываете всевозможные возможности.Вы видите, как мир открывается перед вами так, как вы даже не мечтали. Начальный этап бизнеса, несомненно, самый захватывающий. Это тоже немного страшно. Мы видим, что люди не обязательно знают, во что ввязываются, но делают это шаг за шагом. Следующим шагом будет ваш значок, так что обратите внимание на эти безграничные возможности. Просто будьте тем человеком, который помогает графическому дизайнеру, если вы хотите создать его самостоятельно. Нет ничего хуже, чем сказать им, чтобы они выбирали то, что они хотят, и тогда выбор — не то, что вы хотите.Дайте направление и возьмите штурвал, если значок для вас особенно важен. Вы даже можете нарисовать что-то и раскрасить, а затем позволить графическому дизайнеру воссоздать это в цифровой форме.
Скачать бесплатно векторные логотипы и иконки бренда
BrandEPS — это база данных логотипов и значков брендов. Логотипы и значки брендов можно бесплатно скачать в векторных форматах EPS, SVG, JPG и PNG!
ПОСЛЕДНИЕ БРЕНДЫ
ЕЩЕ ПОСЛЕДНИЕ БРЕНДЫВектор логотипа рабочего места
93
Вектор логотипа Warner Bros
197
Вектор логотипа Uber
104
TodayTix логотип вектор
45
Thoughtworks логотип вектор
27
Тако Белл логотип вектор
66
Скрепки логотип вектор
25
8
Сантандер логотип вектор
75
Показать логотип вектор
12
Вектор логотипа группы Renault
18
Вектор логотипа группы Renault
25
Renault логотип вектор
37
Reebok логотип вектор
249
REMAX логотип вектор
42
Qantas логотип вектор
25
Общественный логотип вектор
22
Pringles логотип вектор
116
Вектор логотипа pfizer
91
Пежо логотип вектор
119
Вектор логотипа NJBO
17
НАСКАР логотип вектор
65
Mailchimp логотип вектор
56
Вектор логотипа Lufthansa
25
ПОПУЛЯРНЫЕ ЛОГОТИПЫ
БОЛЬШЕ ПОПУЛЯРНЫХ ЛОГОТИПОВSHAREit логотип вектор
111873
UC Browser логотип вектор
86416
Facebook логотип вектор
75141
Instagram значок логотип вектор
38131
Вектор логотипа Adidas Originals
35840
Логотип Nike
35352
Adobe Photoshop CC векторный логотип
25457
Adobe Illustrator CC вектор логотипа
19240
YouTube Play логотип вектор
18906
Вектор логотипа Air Jordan Jumpman
18169
Векторный логотип чемпиона
15814
Полный логотип Nike
15402
Red Bull логотип вектор
14064
Youtube логотип вектор
13836
Вектор логотипа brazzers
13576
Вектор логотипа Adidas
13403
Вектор логотипа Monster Energy
13099
Векторный логотип Adobe InDesign CC
12878
Векторный логотип Adobe Premiere Pro CC
10904
Вектор логотипа Microsoft Word
10668
10423
Вектор логотипа Adobe AfterEffects CC
10091
Гусеница логотип вектор
9969
Adobe PDF файл логотип вектор
9967
ПОСЛЕДНИЕ ИКОНЫ
ЕЩЕ ПОСЛЕДНИЕ ИКОНЫВектор значок мыши
2
Уменьшить вектор значок карты
2
Уменьшить значок вектора
14
Увеличить вектор значка
8
Youtube искал вектор иконок
21 год
Обернуть вектор значок текста
17
Вектор значок наброски работы
2
Вектор значок работы
1
Вектор значок работы
3
Вектор значок модема Wi-Fi
4
Вектор значок отключения Wi-Fi
6
Вектор значок блокировки Wi-Fi
1
Вектор значок Wi-Fi
16
Вектор значок виджеты
13
Где голосовать значок вектор
5
Whatshot значок вектор
3
Выходные значок вектор
13
Вектор значок веб-активов
0
Интернет значок вектор
0
Вектор значок туалета
6
Wb солнечный значок вектор
3
Wb радужный значок вектор
0
Вектор значок лампы накаливания WB
0
Wb облачно значок вектор
0
ПОПУЛЯРНЫЕ ИКОНЫ
ЕЩЕ ПОПУЛЯРНЫЕ ИКОНЫВектор значок Instagram
9541
Вектор значок Instagram
7836
Вектор значок книги
7387
Вектор значок Facebook
7018
Вектор значок телефона
6832
Вектор значок электронной почты
6522
Вектор значок сердца
5455
Вектор значка пользователя
5452
Расположение на значок вектора
4435
Телефон квадратный значок вектор
4373
Значок Google вектор
4306
Вектор значок маркера карты
4203
Вектор значок Linkedin
3933
Скачать вектор значок
3757
Вектор значок дома
3715
Вектор значок Twitter
3627
Вектор значок Linkedin
3547
Вектор значок базы данных
3297
Вектор значок Linkedin
3232
Вектор значок самолета
3192
Вектор значок настроек
3030
Вектор значок Facebook
3029
Вектор значок Facebook
2978
Вектор значок земного шара
2934
Советы по созданию иконок и логотипов в Figma | автор: Пранав Амбвани
Чтобы начать создавать свои собственные значки и логотипы, вам необходимо понимать на фундаментальном уровне, как логические группы работают с фигурами.
После того, как вы выбрали более двух фигур в вашем фрейме, вы увидите опцию Логические группы на верхней панели.
Фреймы в Figma похожи на артборды в Sketch. В результате вы можете создать фрейм, нажав на клавиатуре A или F . Вам будет предложен выбор из шаблонов для телефонов, планшетов, компьютеров, часов, бумаги или социальных сетей.
Как вы видели выше, каждый раз, когда вы создаете фигуру, она будет иметь светло-серый цвет по умолчанию.
Чтобы переопределить свойства формы по умолчанию, сначала создайте форму, как обычно. Затем установите любые свойства (например, Заливка, Обводка и т. Д.), Которые вы хотите для формы.
Когда вы будете удовлетворены, выберите фигуру и перейдите в меню « Правка»> «Установить свойства по умолчанию» , чтобы задать свойства. В следующий раз, когда вы создадите какую-либо форму, она сохранит эти настройки.
И вуаля!
Union Selection
Объединение объединяет несколько объектов в один.
В настоящее время большинство иконок используют эту технику. Вы можете создать значки, такие как значок ➕ или ✖, или, например, для приложения для управления задачами.
Subtract Selection
Subtract Selection вычитает одну или несколько фигур из основной формы . Здесь под основной формой понимается самая нижняя фигура на панели «Слои».
Важно отметить, что все последующие формы всегда будут вычитаться из основной формы.
Например, вы можете использовать Subtract для создания интересных значков, таких как кредитные карты.Кто не любит кредитные карты 💳?
Intersect Selection
Intersect создаст форму из области, где встречаются две или более фигур.
Пересечение, хотя и не так популярно, как объединение или вычитание, — отличный способ экспериментировать с новыми формами.
Вот как можно создать резкое изображение, используя одновременно Intersect и Union.
Исключить выделение
Исключить выделение выполняет противоположное действие при выборе пересечения; он создает фигуру из области, где две или более фигур не встречаются.
По мере роста числа фигур простое использование логических значений может сделать ваши значки сложными и многослойными.
Сглаживая логические значения, вы можете упростить рабочий процесс. Вы можете сделать это, выбрав опцию Flatten Selection в Boolean Groups , чтобы создать новый вектор и работать оттуда.
Большинство инструментов «Перо» имеют тенденцию рисовать контуры в виде цикла с определенным направлением, всегда стремясь повторно соединиться с их исходной точкой.
Figma позволяет создавать веб-соединения из векторов вместо того, чтобы соединять пути один за другим.
Векторные сети Figma не имеют определенного направления и могут разветвляться в разных направлениях без необходимости создания отдельного объекта пути.
Вам больше не нужно продолжать ваши векторные точки. Вы можете просто нарисовать новые векторы из существующих или связать их с другими. Это позволяет создавать сложные объекты внутри одних и тех же объектов с одинаковыми свойствами.
Нажмите клавишу Enter на выбранной фигуре, чтобы перейти в режим редактирования. Это полезно, когда вы хотите настроить перспективу ваших фигур.
Мы рассмотрели здесь много всего. Найдите минутку, чтобы перечитывать это снова и снова, пока твердо не усвоите эти концепции.
Теперь применим полученные знания для создания пользовательских значков. Как я уже упоминал, вы можете создать столько значков и логотипов, сколько позволяет ваше воображение.
Для вдохновения посетите веб-сайт Font Awesome и попробуйте воссоздать свои любимые значки.
Я предпочитаю быть кратким и конкретным, поэтому я продемонстрирую, как создавать некоторые часто используемые значки, которые вы найдете в Интернете.
Значок кода
- Создайте квадрат (ярлык для создания квадрата: R + Shift + перетащите )
- Поверните его на 45 градусов
- Дублируйте его ( Command + D ) и немного сдвиньте пикселей вправо
- Выберите обе формы и выполните Вычитание ; затем выберите Flatten Selection
- Нажмите кнопку Enter , чтобы перейти в режим редактирования
- Теперь выберите края и установите радиус угла
- Дублируйте форму и поверните ее на 180 градусов
Значок настроек
- Создайте звезду с Count и радиусом угла 20
- Создайте круг (ярлык для создания круга: O + Shift + Drag ), который должен быть заключен в звезду
- Вычтите круг из звезды
Значок воспроизведения
- Создайте круг (ярлык для создания круга: O + Shift + Перетащите )
- Создайте многоугольник с Count из 3 и Угловой радиус из 10 внутри круга; поверните его на -90 градусов
- Вычтите круг из многоугольника
Логотип — это графический элемент, похожий на идеограмму, который идентифицирует вашу компанию как бренд.Логотип уникален для каждой компании и ее миссии. Все сводится к тому, что вы хотите общаться со своими пользователями.
Дизайн логотипа — это больше свободного места, чем дизайн иконок. Логотип может иметь любую форму, цвет или размер. Иконки, однако, должны оставаться согласованными, поскольку именно это пользователи, которые с каждым днем становятся умнее, ожидают увидеть на веб-сайтах или в приложениях.
Я использовал Figma для создания бренда своего сайта. Благодаря невероятно мощным функциям Figma мне удалось сделать это менее чем за десять минут.
Поскольку я также добавил поддержку темного режима, мне пришлось создать два отдельных логотипа для каждого режима.
Иконки и логотипы — Связь
Здесь вы можете найти SVG всех основных иконок, используемых на западных сайтах. Вместо того, чтобы загружать еще одну копию значка на свой сервер, вы можете просто связать эти файлы. Это не только упрощает веб-дизайн для команд по всему университетскому городку, но также упрощает обслуживание и обновление в случае изменения значка.Вы можете связать эти файлы, скопировав и вставив приведенный ниже код на свои страницы.
Примечание. Значки, изображенные ниже, имеют ширину 96 пикселей, а в предоставленном коде их ширина составляет 32 пикселя. Это сделано для наглядности, чтобы упростить просмотр значков на этой странице.
Иконки социальных сетей
Значок Facebook
| |
Значок Twitter
| |
Значок Instagram
| |
Значок Linkedin
| |
Значок Weibo
| |
Значок YouTube
| |
Значок Tik Tok
|
Значки утилит
Значок RSS-канала
| |
Значок календаря
| |
Значок PDF
|
Логотипы
Western логотип
| |
Логотип Western Mustangs
|
Значки утилит
Значок Google Scholar
| |
Значок Academia
| |
Значок исследовательских ворот
|
PHP: Загрузить логотипы
Не включайте просто графику с наших серверов на свою страницу! Скопируйте изображение на свой сайт, пожалуйста.
Если вы обнаружили несколько логотипов PHP, значков или других материалов вокруг в Интернете, не стесняйтесь указывать нам на них, чтобы мы могли включить их сюда, если уместно. И о, если вам интересно, какой шрифт мы использовали, это называется Гендель Готика.
Логотип PHP
Автор Колин Виброк выпустил логотип PHP как Creative Commons Attribution-Share Alike 4.0 International, не стесняйтесь использовать повторно, не забудьте условия использования:
- Атрибуция — Вы должны указать соответствующую ссылку, предоставить ссылку к лицензии и укажите, были ли внесены изменения.Вы можете сделать это в любом разумным образом, но ни в коем случае не предполагающим, что лицензиар одобряет вы или ваше использование.
- ShareAlike — Если вы делаете ремикс, трансформируете или дополняете материал, вы должны распространять свои материалы по той же лицензии, что и оригинал.
Альтернативный логотип
Леви Моррисон создал эту альтернативную версию для использования на PHP.net.
Прочие логотипы и графика
Изображения, отмеченные *, являются изображения, которые мы рекомендуем разместить на вашем сайте, если вы не можете выбирать из форматов.Однако обратите внимание, что некоторые комбинации браузер / операционная система не очень хорошо обрабатывает прозрачные изображения PNG.
(не совсем так, как показано) | * | |
(не совсем так, как показано) |
| |
* |
| |
| ||
| ||
* |
| |
| ||
* |
| |
| ||
* |
| |
| ||
| ||
(не совсем так, как показано) |
| |
(не совсем так, как показано) |
| |
(не совсем так, как показано) |
| |
(не совсем так, как показано) |
|
значков и логотипов приложений — приложения для Windows
- Статья .
- 9 минут на чтение
Оцените свой опыт
да Нет
Любой дополнительный отзыв?
Отзыв будет отправлен в Microsoft: при нажатии кнопки «Отправить» ваш отзыв будет использован для улучшения продуктов и услуг Microsoft.Политика конфиденциальности.
Представлять на рассмотрение
Спасибо.
В этой статье
У каждого приложения есть значок / логотип, который представляет его, и этот значок отображается в нескольких местах оболочки Windows:
- Список приложений в стартовом меню
- Панель задач и диспетчер задач
- Плитки вашего приложения
- Заставка вашего приложения
- В Microsoft Store
В этой статье рассказывается об основах создания значков приложений, о том, как использовать Visual Studio для управления ими, а также о том, как управлять ими вручную, если это необходимо.
(Эта статья предназначена специально для значков, которые представляют само приложение; общие рекомендации по значкам см. В статье «Значки».)
Типы значков, расположение и масштабные коэффициенты
По умолчанию Visual Studio хранит ваши ресурсы значков в подкаталоге ресурсов. Вот список различных типов значков, где они появляются и как называются.
Название значка | Появляется в | Имя файла активов |
---|---|---|
Маленькая плитка | Меню Пуск | SmallTile.png |
Средняя плитка | Меню «Пуск», список в Microsoft Store * | Square150x150Logo.png |
Широкая плитка | Меню Пуск | Wide310x150Logo.png |
Плитка большая | Меню «Пуск», список в Microsoft Store * | LargeTile.png |
Значок приложения | Список приложений в меню «Пуск», на панели задач, в диспетчере задач | Square44x44Logo.png |
Заставка | Заставка приложения | Экран-заставка.png |
Значок с логотипом | Плитки вашего приложения | BadgeLogo.png |
Логотип на упаковке / Логотип магазина | Установщик приложений, Центр партнеров, параметр «Сообщить о приложении» в магазине, параметр «Написать отзыв» в магазине | StoreLogo.png |
* Используется, если вы не выбрали отображение только загруженных изображений в магазине.
Чтобы эти значки выглядели четко на каждом экране, вы можете создать несколько версий одного и того же значка для разных масштабных коэффициентов отображения.
Коэффициент масштабирования определяет размер элементов пользовательского интерфейса, например текста. Коэффициенты масштабирования варьируются от 100% до 400%. Большие значения создают более крупные элементы пользовательского интерфейса, что упрощает их просмотр на дисплеях с высоким разрешением.
Windows автоматически устанавливает масштабный коэффициент для каждого дисплея на основе его DPI (точек на дюйм) и расстояния просмотра устройства. (Пользователи могут изменить значение по умолчанию, перейдя на страницу Настройки> Экран> Масштаб и макет .)
Поскольку ресурсы значков приложения представляют собой растровые изображения, а растровые изображения плохо масштабируются, мы рекомендуем предоставить версию каждого актива значка для каждого коэффициента масштабирования: 100%, 125%, 150%, 200% и 400%.Это много значков! К счастью, Visual Studio предоставляет инструмент, который упрощает создание и обновление этих значков.
Изображение в каталоге Microsoft Store
«Как указать изображения для размещения моего приложения в Microsoft Store?»
По умолчанию мы используем некоторые изображения из ваших пакетов в Магазине, как описано в таблице вверху этой страницы (вместе с другими изображениями, которые вы предоставляете в процессе отправки). Однако у вас есть возможность запретить Магазину использовать изображения логотипов в пакетах вашего приложения при отображении вашего списка для клиентов в Windows 10 (включая Xbox), и вместо этого Магазин будет использовать только изображения, которые вы загружаете.Это дает вам больше контроля над внешним видом вашего приложения на различных дисплеях в Магазине. (Обратите внимание, что если ваш продукт поддерживает более ранние версии ОС, эти клиенты могут по-прежнему видеть изображения из ваших пакетов, даже если вы используете эту опцию.) Вы можете сделать это в разделе логотипов магазина раздела Store листинг на этапе отправки. процесс.
Когда вы установите этот флажок, появится новый раздел под названием Store display images . Здесь вы можете загрузить изображения трех размеров, которые Магазин будет использовать вместо изображений логотипов из пакетов вашего приложения: 300 x 300, 150 x 150 и 71 x 71 пиксель.Требуется только размер 300 x 300, хотя мы рекомендуем предоставить все 3 размера.
Дополнительные сведения см. В разделе Отображение только загруженных изображений логотипов в магазине.
Управление значками приложений с помощью конструктора манифестов Visual Studio
Visual Studio предоставляет очень полезный инструмент для управления значками приложений под названием Manifest Designer .
Если у вас еще нет Visual Studio 2019, доступно несколько версий, включая бесплатную версию (Visual Studio 2019 Community Edition), а другие версии предлагают бесплатные пробные версии.Вы можете скачать их здесь: https://developer.microsoft.com/windows/downloads
.
Для запуска конструктора манифестов:
- Используйте Visual Studio, чтобы открыть проект UWP.
- В обозревателе решений дважды щелкните файл Package.appmxanifest.
Visual Studio отображает конструктор манифестов.
- Щелкните вкладку Visual Assets .
Создание всех активов сразу
Первый пункт меню на вкладке Visual Assets , All Visual Assets , выполняет именно то, что предполагает его название: генерирует все визуальные ресурсы, необходимые вашему приложению, одним нажатием кнопки.
Все, что вам нужно сделать, это предоставить одно изображение, и Visual Studio сгенерирует небольшую плитку, среднюю плитку, большую плитку, широкую плитку, большую плитку, значок приложения, экран-заставку и ресурсы логотипа пакета для каждого коэффициента масштабирования.
Для одновременной генерации всех активов:
Щелкните … рядом с полем Source и выберите изображение, которое хотите использовать. Если вы используете растровое изображение, убедитесь, что оно составляет не менее 400 на 400 пикселей, чтобы получить четкие результаты.Лучше всего работают векторные изображения; Visual Studio позволяет использовать файлы AI (Adobe Illustrator) и PDF.
(Необязательно.) В разделе Display Settings настройте следующие параметры:
а. Краткое имя : укажите короткое имя для своего приложения.
г. Показать имя : укажите, хотите ли вы отображать короткое имя на средних, широких или больших плитках.
г. Фон плитки : укажите шестнадцатеричное значение или имя цвета для цвета фона плитки.Например,
# 464646
. Значение по умолчанию —прозрачный
.г. Фон экрана-заставки : укажите шестнадцатеричное значение или имя цвета для фона экрана-заставки.
Щелкните Создать .
Visual Studio создает файлы изображений и добавляет их в проект. Если вы хотите изменить свои активы, просто повторите процесс.
Ресурсы масштабированных значков соответствуют этому соглашению об именах файлов:
filename -scale- масштабный коэффициент .png
Например,
Square150x150Logo-scale-100.png, Square150x150Logo-scale-200.png, Square150x150Logo-scale-400.png
Обратите внимание, что Visual Studio не создает логотип значка по умолчанию. Это потому, что ваш логотип значка уникален и, вероятно, не должен совпадать с другими значками ваших приложений. Дополнительные сведения см. В статье Уведомления о значках для приложений Windows.
Подробнее об активах значков приложений
Visual Studio сгенерирует все ресурсы значков приложения, необходимые для вашего проекта, но если вы захотите их настроить, это поможет понять, чем они отличаются от ресурсов других приложений.
Значок приложения появляется во многих местах: на панели задач Windows, в представлении задач, ALT + TAB и в правом нижнем углу плиток «Пуск». Поскольку ресурс значка приложения появляется во многих местах, у него есть некоторые дополнительные параметры определения размера и покрытия, которых нет у других ресурсов: ресурсы «целевого размера» и «неотмеченные» ресурсы.
Ресурсы значков приложения целевого размера
В дополнение к стандартным размерам коэффициента масштабирования («Square44x44Logo.scale-400.png») мы также рекомендуем создавать ресурсы «целевого размера».Мы называем эти ресурсы целевым размером, потому что они нацелены на определенные размеры, такие как 16 пикселей, а не на конкретные масштабные коэффициенты, такие как 400. Ресурсы целевого размера предназначены для поверхностей, которые не используют систему плато масштабирования:
- Стартовый список переходов (рабочий стол)
- Начальный нижний угол плитки (рабочий стол)
- Ярлыки (рабочий стол)
- Панель управления (настольная)
Вот список активов целевого размера:
Размер актива | Пример имени файла |
---|---|
16×16 * | Square44x44Logo.targetize-16.png |
24×24 * | Square44x44Logo.targetsize-24.png |
32×32 * | Square44x44Logo.targetsize-32.png |
48×48 * | Square44x44Logo.targetsize-48.png |
256×256 * | Square44x44Logo.targetsize-256.png |
20×20 | Square44x44Logo.targetsize-20.png |
30×30 | Square44x44Logo.targetsize-30.png |
36×36 | Square44x44Logo.targetsize-36.png |
40×40 | Square44x44Logo.targetsize-40.png |
60×60 | Square44x44Logo.targetsize-60.png |
64×64 | Square44x44Logo.targetsize-64.png |
72×72 | Square44x44Logo.targetsize-72.png |
80×80 | Square44x44Logo.targetsize-80.png |
96×96 | Square44x44Logo.targetize-96.png |
* Как минимум, мы рекомендуем предоставить эти размеры.
Вам не нужно добавлять отступы к этим ресурсам; При необходимости Windows добавляет отступ. Эти ресурсы должны занимать минимум 16 пикселей.
Вот пример этих ресурсов, отображаемых в виде значков на панели задач Windows:
Активы без покрытия
По умолчанию Windows использует целевой ресурс поверх цветной задней панели по умолчанию.При желании вы можете предоставить целевой актив без покрытия. «Без покрытия» означает, что актив будет отображаться на прозрачном фоне. Имейте в виду, что эти ресурсы будут отображаться на разных цветах фона.
Вот поверхности, на которых используются ресурсы значков приложений без покрытия:
- Панель задач и эскиз панели задач (рабочий стол)
- Список переходов панели задач
- Просмотр задач
- ALT + TAB
Ресурсы и темы без покрытия
Выбранная пользователем тема определяет цвет панели задач.Если актив без покрытия специально не подходит для текущей темы, система проверяет его на контраст. Если он имеет достаточный контраст с панелью задач, система его использует. В противном случае система ищет высококонтрастную версию актива. Если он не может найти его, система вместо этого рисует пластинчатую форму актива.
Размер мишени и без покрытия
Вот рекомендации по размеру для целевых активов в масштабе 100%:
Подробнее об активах экрана-заставки
Дополнительные сведения о экранах-заставках см. В разделе Экраны-заставки приложений Windows.
Подробнее об активах логотипа значка
Когда вы используете генератор ресурсов для создания всех необходимых вам ресурсов, есть причина, по которой он не генерирует логотипы значков по умолчанию: они сильно отличаются от других ресурсов приложения. Логотип значка — это изображение состояния, которое отображается в уведомлениях и на плитках приложения.
Дополнительные сведения см. В разделе Уведомления о значках для приложений Windows.
Настройка дополнения активов
По умолчанию генератор ресурсов Visual Studio применяет рекомендуемые отступы к любому изображению.Если ваши изображения уже содержат отступы или вы хотите, чтобы изображения без полей доходили до конца плитки, вы можете отключить эту функцию, сняв флажок Применить рекомендуемые отступы .
Рекомендации по укладке плитки
Если вы хотите создать собственную набивку, вот наши рекомендации по плитке.
Существует 4 размера плитки: маленький (71 x 71), средний (150 x 150), широкий (310 x 150) и большой (310 x 310).
Размер каждой плитки равен размеру плитки, на которой он размещен.
Если вы не хотите, чтобы ваш значок доходил до края плитки, вы можете использовать прозрачные пиксели в своем активе для создания отступов.
Для небольших плиток ограничьте ширину и высоту значка до 66% от размера плитки:
Для средних плиток ограничьте ширину значка 66% и высоту 50% от размера плитки. Это предотвращает наложение элементов в полосе брендинга:
Для широких плиток ограничьте ширину значка до 66% и высоту до 50% от размера плитки.Это предотвращает наложение элементов в полосе брендинга:
Для больших плиток ограничьте ширину значка до 66% и высоту до 50% от размера плитки:
Некоторые значки предназначены для горизонтальной или вертикальной ориентации, в то время как другие имеют более сложную форму, которая не позволяет им точно соответствовать целевым размерам. Значки, которые кажутся центрированными, можно отнести к одной стороне. В этом случае части значка могут выступать за пределы рекомендуемой площади основания, при условии, что они имеют такой же визуальный вес, что и прямоугольный значок:
При использовании ресурсов без полей учитывайте элементы, взаимодействующие на полях и краях плиток.Сохраняйте поля не менее 16% от высоты или ширины плитки. Этот процент представляет собой двойную ширину полей при наименьшем размере плитки:
В этом примере поля слишком малы:
Оптимизация для определенных тем, языков и других условий
В этой статье описывается, как создавать активы для определенных масштабных коэффициентов, но вы также можете создавать активы для самых разных условий и комбинаций условий. Например, вы можете создавать значки для высококонтрастных дисплеев или для светлых и темных тем.Вы даже можете создавать ресурсы для определенных языков.
Инструкции см. В разделе Настройка ресурсов для языка, масштаба, высокой контрастности и других квалификаторов.
Изменение логотипа и значков
При установке материала для MkDocs вы сразу получаете доступ к более 8000 значкам , готовым к использованию для настройки определенных частей темы и / или при написании документации в Markdown. Недостаточно? Вы также можете добавить дополнительные значки с минимальными усилиями.
Конфигурация
Логотип
0.1.0 · По умолчанию: материал / библиотека
Логотип можно изменить на изображение, предоставленное пользователем (любого типа, включая * .png
и * .svg
) расположенный в папке docs
, или к любому значку, связанному с темой. Добавьте следующие строки в mkdocs.yml
:
Обычно логотип в заголовке и боковой панели ссылается на домашнюю страницу документации, которая совпадает с site_url
.Это поведение можно изменить с помощью следующей конфигурации:
extra:
домашняя страница: https://example.com
Favicon
0.1.0 · По умолчанию: assets / images / favicon.png
Значок может быть изменен на путь, указывающий на предоставленное пользователем изображение, которое должно находиться в папке docs
. Добавьте следующие строки в тему mkdocs.yml
:
:
favicon: images / favicon.png
Настройка
Дополнительные значки
Чтобы использовать настраиваемые значки, расширьте тему и создайте новую папку с именем .значки
в каталоге custom_dir
, который вы хотите использовать для переопределений. Затем добавьте значки * .svg
в подпапку папки .