UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Проблемы новых логотипов приложений Google
Редакція
Редакція

Опубліковано

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

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

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

https://twitter.com/danidonovan/status/1322356167063031814?s=20

https://twitter.com/anu\_gram/status/1321056042671919107?s=20

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

Основная цель иконки – быстро передать концепцию. — 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, а также моей быстрой попытке их оптимизировать!


Перевод статьи medium.com

Топ коментарі (0)