Что разберём
1Каждый приём — с причиной из продукта
Визуальный язык объясняют словами о продукте и аудитории. Если причина приёма звучит как «так красивее», это не причина, а вкус автора.
Описание направления DesignStack начинается с сути в четырёх словах: «Спокойный, точный, честный, собранный».
Дальше — образ: «Как размеченный стеллаж в мастерской: всё подписано, у каждой полки дата проверки, а цветное только то, что можно взять в руки».
Из этого образа выводятся приёмы:
| Приём на этом сайте | Причина, как она записана |
|---|---|
| Один акцент — петроль, и только у действий и фокуса | «Цветное только то, что можно взять в руки». В метках, статусах, заголовках и фоне карточек петроля нет никогда |
| Вердикт крупнее названия ресурса | «Оценка куратора важнее названия» |
| Шрифт лежит в файлах темы, без внешнего сервиса | Внешний сервис шрифтов «зависит от доступности из РФ и бьёт по скорости загрузки» |
| Знак — плоская стопка одним цветом | «Прямая отсылка к названию, „стек“ как набор слоёв». Объёмный вариант «не читается на 16–32 px и требует отдельной версии для тёмной темы» |
| Матовые листы с рамкой в 1 пиксель | Суть — «спокойный, точный». Стекло, размытие, глянец, градиенты на поверхностях и тени у карточек записаны в «никогда» |
В том же описании есть проверка, которая годится для любого продукта:
«Узнается ли стиль по одним токенам, без текста и картинок?»
Если язык узнаётся по цветам, рамкам и кеглям без единой картинки, он держится на системе, а не на отдельных красивых кадрах.
2Мода или довод
Мода — это приём, который пришёл из чужих продуктов. Иногда он подходит и вашему, но причина тогда должна быть в вашем продукте, а не в том, что так делают все.
В описании DesignStack есть список того, чего на сайте нет:
- стекло и размытые карточки;
- неоновые градиенты;
- объёмные 3D-иллюстрации;
- плитки с градиентами на первом экране;
- иконка «искры» у каждого элемента;
- люди-иллюстрации в модном плоском стиле.
Всё это не плохо само по себе. Но ни одно из этого не выводится из сути «спокойный, точный, честный, собранный».
А свечение и неон ещё и спорят с единственным акцентом.
Проверьте себя
Восемь объяснений приёмов стиля. Довод, мода или вкус?
«Кремовый фон вместо белого — как бумага пакетов, в которые обжарка фасует зерно».
Довод о продуктеПриём связан с тем, что покупатель держит в руках. Сайт и пакет говорят одним языком.
«Сделаем градиентный фон — сейчас так у всех стартапов».
МодаДовод о чужих продуктах. «Лесная обжарка» — не стартап, и сходство с ними её не отличает.
«Рыжий акцент — цвет зерна средней обжарки, которой магазин известен».
Довод о продуктеЦвет взят из того, чем магазин отличается. Его можно защитить, когда предложат синий.
«Добавим стекло и размытие — выглядит свежо».
Мода«Свежо» — это про моду года, а не про обжарку. Свежесть кофе показывают датой обжарки, а не эффектом.
«Мне нравится, когда много воздуха».
ВкусМожет быть, воздух и нужен, но причина должна быть в продукте: например, на карточке зерна четыре важных факта, и им нужно место.
«Фото — только своих партий зерна, без стоков: покупатель выбирает конкретную Эфиопию, а не кофе вообще».
Довод о продуктеПриём следует из того, как человек выбирает. Стоковое фото этого не покажет.
«Объёмные 3D-зёрна на главной, как у крупных брендов в этом году».
Мода«В этом году» — срок годности, записанный прямо в доводе.
«Этот оттенок зелёного просто красивый».
ВкусКрасивый — но при чём здесь обжарка? Второй акцент без роли размывает единственный.
Красота при этом не бесполезна. Nielsen Norman Group описывает эффект: красивый интерфейс кажется удобнее, и мелкие недочёты ему прощают. Но это довод за качество исполнения, а не за конкретный приём: он не объясняет, почему акцент рыжий, а не синий. И он же предупреждает, что похвала внешнему виду на проверке может скрывать настоящие проблемы.
3Защита стиля перед заказчиком
За просьбой «сделайте ярче» часто стоит опасение за продукт. Спорить со словами бесполезно — отвечают на опасение.
| Просьба | Что за ней обычно стоит | Ответ через продукт | Что предложить |
|---|---|---|---|
| «Сделайте ярче» | Боятся, что главное не заметят | Яркий цвет в стиле один, и он стоит на главном действии. Если ярко всё, главного нет | Проверить на людях, находят ли кнопку «В корзину» за несколько секунд |
| «Как у конкурента» | Хотят выглядеть солидно в своей категории | Похожий стиль мешает узнаванию: покупатель спутает магазины | Положить рядом свои и чужие материалы и назвать, чем магазин отличается |
| «Добавьте 3D и градиенты, это современно» | Боятся выглядеть устаревшими | Современность магазина — в свежей обжарке. Её показывает дата на пакете, а не эффект | Прототип карточки, где дата обжарки — самое крупное после названия |
| «Белый фон чище кремового» | Привычка к стандартным сайтам | Кремовый — приём, по которому узнают: он повторяет бумагу пакетов | Показать сайт, пакет и письмо рядом с кремом и без |
| «Логотип маловат» | Хотят больше узнаваемости | Узнаваемость — от повторения знака везде, а не от размера в одном месте | Проверить, узнают ли знак во вкладке и на аватаре |
Последняя колонка важнее остальных.
Спор двух вкусов заканчивается тем, у кого больше полномочий. Спор, который закончился проверкой, заканчивается фактом — и иногда этот факт на стороне заказчика. Тогда стиль меняют, и это нормально.
О проверке на людях — в уроке «Юзабилити-тестирование».
4Описание без «так красивее»
Черновик описания визуального языка «Лесной обжарки». В пяти строках из десяти вместо причины стоит мода или вкус. Найдите их.
- фонКремовый, как бумага пакетов, в которые фасуют зерно.
- акцентРыжий, потому что так современнее.
- где акцентТолько на знаке и главной кнопке: покупатель должен найти «В корзину» сразу.
- скругления8 пикселей — так красивее.
- шрифтБез засечек и украшений: обжарка говорит о кофе по делу — страна, дата обжарки, помол.
- отступыМного воздуха — это стильно.
- фотоТолько свои партии зерна: покупатель выбирает конкретную партию, а не кофе вообще.
- иллюстрацииТонкие линии, потому что сейчас в тренде минимализм.
- знакЗерно: магазин продаёт зерно и сам его обжаривает.
- тема по умолчаниюТёмная, потому что это премиально.
- Фон: кремовый, как бумага пакетов.Довод. Приём связан с тем, что покупатель держит в руках.
- Акцент: «так современнее».Мода. Причина есть в продукте, но её не написали: рыжий — цвет зерна средней обжарки, которой магазин известен. Строку нужно переписать, цвет оставить.
- Где акцент: только знак и главная кнопка.Довод. Названа задача покупателя, которую решает приём.
- Скругления: «так красивее».Вкус. Причину стоит поискать: мягкие формы зерна в знаке, дружелюбный магазин у дома. Если её нет, число можно поменять без спора — и это сигнал, что приём не несёт смысла.
- Шрифт: без засечек, по делу.Довод. Облик шрифта объяснён тем, как магазин говорит о кофе.
- Отступы: «это стильно».Вкус. Воздух нужен, если у него есть задача: например, в карточке зерна четыре факта, и каждый должен читаться отдельно. Так и нужно написать.
- Фото: только свои партии.Довод. Приём следует из того, как покупатель выбирает.
- Иллюстрации: «в тренде минимализм».Мода. Тренд пройдёт, а строка останется. Тонкая линия может следовать из продукта — например, повторять линию иконок, — тогда это и пишут.
- Знак: зерно.Довод. Знак говорит о том, чем занимается магазин.
- Тёмная тема: «это премиально».Вкус под видом довода. «Премиально» — ощущение, а не свойство продукта. И покупатель магазина у дома, который выбирает кофе утром, скорее ждёт светлый экран. Тему по умолчанию выбирают по тому, где и когда продуктом пользуются.
Все пять найдены. Не во всех пяти приём плохой: рыжий акцент и скругления можно оставить, если найти причину в продукте. Плохо, когда причины нет: такую строку не защитить, и первый же «сделайте по-другому» её снесёт.
5Когда стиль пора менять
Стиль меняют, когда изменился продукт или стиль перестал работать. «Надоел» и «у конкурента новый логотип» — не причины.
| Признак | Менять? | Что обычно делают |
|---|---|---|
| Изменился продукт или аудитория | Да | Обжарка начала продавать зерно кофейням оптом — стилю нужен голос и для них |
| Стиль не выдерживает новых носителей | Да, но точечно | Упростить знак для экрана часов или добавить версию для новой упаковки |
| Стиль стал похож на соседей | Да | Усилить то, что отличает, а не перенять то, что отличает других |
| Проблемы с доступностью | Да, сразу | Поднять контраст акцента, увеличить мелкие подписи |
| Стиль надоел команде | Нет | Команда видит стиль каждый день, покупатель — раз в неделю. Узнавание только начинает работать |
| Конкурент обновил стиль | Само по себе — нет | Проверить, не стали ли вы похожи. Если нет — ничего не менять |
Большие бренды нередко меняют стиль эволюцией: сохраняют то, по чему их узнают, и убирают лишнее.
Например, Mastercard вместе с агентством Pentagram упростил знак: главными стали два пересекающихся круга. А в 2019 году компания объявила, что в части материалов ставит круги без слова: по её данным, больше 80 % людей узнают знак без названия.
6Цельность, когда рисуют несколько человек
Когда над стилем работают несколько дизайнеров, цельность держится не на вкусе главного, а на записанных причинах, решениях и примерах.
| Что | Зачем | Как на этом сайте |
|---|---|---|
| Суть и причины | Новый дизайнер понимает, почему так, и сам выводит приём для нового случая | Описание направления с сутью в четырёх словах и приёмами из неё |
| Журнал решений | Спорный вопрос решается один раз и не поднимается снова | Решения с номерами и причинами: например, решение о знаке-стопке и об отказе от объёмного варианта |
| Список «никогда» | Отказ от модного приёма записан, и его не приносят заново каждые полгода | Раздел «Avoid» в описании направления |
| Примеры «так» и «не так» | Правило понятно без пересказа | Как в уроке Middle: пары на своём знаке |
| Ревью по причинам | Замечание ссылается на причину, а не на вкус проверяющего | Как в уроках Senior про иконки и паттерны |
7Задание
Напишите две страницы о визуальном языке продукта: какой он и почему именно такой. Каждое утверждение — с причиной из продукта или аудитории.
Часть 1 · Суть, 30 минут
- Опишите продукт тремя-четырьмя словами: какой он, а не какой у него стиль.
- Найдите образ — одну фразу, из которой видно, как продукт выглядит и ведёт себя.
Часть 2 · Приёмы и причины, 90 минут
- Выпишите все приёмы стиля: цвет, шрифт, знак, формы, отступы, фото, иллюстрации, движение.
- У каждого напишите «потому что» — о продукте, аудитории или ограничении.
- Где причины нет, решите: найти её, поменять приём или честно записать «причины нет, приём можно менять».
- Составьте список «никогда» — модные приёмы, которые не выводятся из сути, и почему.
ПРОДУКТ: ______________________ дата: __.__.____ владелец: ______________ СУТЬ (3–4 слова о продукте): ______________________ ОБРАЗ (одна фраза): ______________________ ПРИЁМЫ цвет: ______________ потому что ______________________ шрифт: ______________ потому что ______________________ знак: ______________ потому что ______________________ формы: ______________ потому что ______________________ отступы: ______________ потому что ______________________ фото: ______________ потому что ______________________ иллюстрации: ______________ потому что ______________________ НИКОГДА (и почему) ______________ потому что ______________________ ______________ потому что ______________________ ПРОВЕРКА узнаётся ли стиль без текста и картинок, по цветам и формам: да / нет слов «современно», «красиво», «стильно», «премиально», «в тренде» в тексте нет: да / нет КОГДА ПЕРЕСМАТРИВАЕМ ______________________ (признаки, по которым стиль пора менять)
Часть 3 · Проверка, 20 минут
- Найдите в тексте слова «современно», «красиво», «стильно», «премиально», «в тренде» — и перепишите каждую строку с ними.
- Дайте текст коллеге и попросите предложить новый приём. Если он выводит его из сути сам — описание работает.
Что должно получиться
- Суть и образ продукта.
- Список приёмов с причинами.
- Список «никогда» с причинами.
- Признаки, по которым стиль пора пересматривать.
План работы: полчаса на суть, полтора часа на приёмы и причины, двадцать минут на проверку. Всего — два с небольшим часа.
Частые сложности
- «Стиль придумал не я, причин не знаю». Спросите автора или найдите в старых обсуждениях. Не нашлось — впишите причину, которую видите сейчас, и отметьте, что она восстановлена, а не записана автором.
- «У приёма нет причины, но он всем нравится». Так и запишите: «причины нет, держим, пока не мешает». Это честнее, чем придумать причину задним числом.
- «Заказчик всё равно скажет „сделайте ярче“». Скажет. Теперь у вас есть ответ через продукт и предложение проверить.
- «Две страницы — мало». Для сути и причин — достаточно. Правила применения живут отдельно, на странице правил из урока Middle.
8Чек-лист и ошибки ступени
Описание готово, если
- Суть продукта записана тремя-четырьмя словами
- У каждого приёма есть «потому что» о продукте, аудитории или ограничении
- В тексте нет «современно», «красиво», «стильно», «премиально», «в тренде»
- Есть список «никогда» с причинами
- Стиль узнаётся без текста и картинок
- Записаны признаки, по которым стиль пересматривают
- Есть владелец и журнал решений
- Коллега вывел новый приём из сути сам
Что мешает
- «Так современнее». Довод о моде, у которого срок годности меньше, чем у стиля.
- Причина задним числом. Придуманную причину первый же вопрос разрушит.
- Спор вкусов с заказчиком. Побеждает тот, у кого больше полномочий, а не продукт.
- Смена стиля, потому что надоел. Узнавание сбрасывается, едва начав работать.
- Решения только в памяти. Каждые полгода один и тот же спор.
9Три ступени темы целиком
Тема прошла путь от знака во вкладке до языка, который объясняется продуктом. Сначала минимальный набор стиля, потом стиль на носителях и в чужих руках. Теперь — почему он именно такой.
| Ступень | Что нужно уметь | Как проверить результат |
|---|---|---|
| Junior | Делать простой знак, который читается в 16 пикселях; держать один акцент; выбирать шрифт и объяснять выбор одним предложением; собирать первую страницу стиля; проверять знак на светлом и тёмном | Знак читается в размере значка вкладки и работает на тёмном фоне |
| Middle | Проверять стиль от значка вкладки до вывески и на носителях без любимых приёмов; задавать охранное поле, минимальный размер и запреты; отдавать пакет файлов | Другой человек сделал по вашим правилам новый материал, и его не пришлось переделывать |
| Senior — этот урок | Связывать каждый приём с продуктом и аудиторией; отличать моду от довода; отвечать на вкусовые просьбы через продукт и проверку; понимать, когда стиль менять; держать язык цельным в команде | В описании визуального языка нет доводов вида «так современнее» или «так красивее» |
Что почитать дальше
- Mastercard · Mastercard Evolves Its Brand Mark by Dropping its NameКейс от авторов знака: как упростить знак и сохранить узнаваемое, — и релиз 2019 года о знаке без слова. Портфолио агентства, без критики.
- Как делать презентацию логотипа?Как защищать логотип вживую: две раскадровки презентаций, где решение выводится из рассуждений об аудитории. Смотреть — слайды.
- The Aesthetic-Usability EffectПочему красивое кажется удобнее и как это сбивает отзывы на проверке: смотреть, что люди делают, а не что хвалят.
- Как, по-вашему, должны выглядеть современные руководства по фирстилю и брендбуки?Шнайдер против толстых брендбуков: руководство на две страницы и исходники вместо правил. Спорит с уроком Middle — полезно как контрдовод.