Начинающие дизайнеры часто пытаются улучшить работу через добавление.
Добавить ещё одну плашку.
Добавить тень.
Добавить красивый шрифт.
Добавить стрелку.
Добавить декоративный элемент.
По моему опыту, хороший дизайн чаще становится сильнее не после того, как в него что-то добавили, а после того, как в нём навели порядок.
За 10 лет работы с инфографикой и более чем 600 проектами я постоянно вижу похожие ошибки. Причём проблема обычно не в том, что дизайнер «не умеет красиво».
Гораздо чаще нет иерархии, системы и понимания, что именно должен увидеть покупатель.
Ниже собрала несколько механик, которыми можно проверить практически любую карточку.
1. Определите одну главную мысль слайда
Откройте свой макет и задайте себе простой вопрос:
Что человек должен увидеть здесь первым?
Если ответов несколько, скорее всего, на слайде уже слишком много конкурирующих акцентов.
Например, вы одновременно сделали крупными:
- скидку;
- название товара;
- три преимущества;
- объём;
- плашку «хит»;
- фотографию продукта.
В итоге дизайнер старательно выделил всё.
А значит, не выделил ничего.
Что делать
Попробуйте расставить информацию по трём уровням:
1 уровень — главное.
Одна мысль, которую человек должен считать первой.
2 уровень — пояснение.
Характеристика или аргумент, который раскрывает главную мысль.
3 уровень — дополнительная информация.
То, что можно заметить уже после основного сообщения.
После этого уменьшите всё второстепенное.
Иногда достаточно просто сделать один текст крупнее, а остальные уменьшить на 20-30%, и композиция уже начинает работать лучше.
2. Проверяйте карточку в маленьком размере
Это одна из самых простых механик, которую многие пропускают.
Мы делаем дизайн на большом мониторе.
А покупатель чаще видит его на небольшом экране смартфона.
То, что красиво выглядит в Figma при масштабе 100%, может полностью перестать читаться в каталоге.
Как проверить
Уменьшите макет до размера примерно 20-25% от рабочего.
Посмотрите на него несколько секунд.
Не читайте специально.
Просто зафиксируйте:
- что увидели первым;
- можно ли понять категорию товара;
- читается ли главное преимущество;
- не сливается ли текст с фотографией;
- нет ли слишком мелких элементов.
Если при уменьшении карточка превращается в пятно, проблема обычно не в размере самого макета.
Проблема в иерархии.
3. Уберите 30% элементов
Очень простой тест.
Сделайте копию слайда.
А теперь попробуйте удалить примерно треть второстепенных элементов.
Например:
- декоративную линию;
- одну из плашек;
- дополнительную иконку;
- вторую фотографию;
- лишний градиент;
- подпись, которая повторяет очевидное.
После этого сравните две версии.
По моему опыту, у начинающих дизайнеров облегчённый вариант очень часто выглядит сильнее.
Декор должен либо помогать композиции, либо поддерживать идею.
Если элемент существует только потому, что «здесь было пусто», это хороший кандидат на удаление.
Пустое пространство — тоже часть дизайна.
4. Наведите порядок в типографике
Типографика очень сильно выдаёт уровень дизайнера.
Можно использовать красивую фотографию, хороший цвет и аккуратные элементы, но неправильная работа с текстом всё равно сделает карточку любительской.
Для начала не нужно изучать огромный курс по шрифтам.
Достаточно убрать несколько типичных ошибок.
Используйте меньше начертаний
Для одной карточки часто достаточно:
- одного шрифта;
- 2-3 размеров;
- обычного и более жирного начертания.
Не обязательно каждую новую мысль показывать новым шрифтом.
Следите за шириной текста
Очень длинные строки читать сложнее.
Если заголовок растягивается от одного края карточки до другого, попробуйте сделать текстовый блок уже и разбить фразу на несколько строк.
Не бойтесь разницы в размерах
Если заголовок должен быть главным, он должен действительно отличаться от остального текста.
Не:
24 px
22 px
20 px
А условно:
48 px
24 px
16 px
Цифры здесь не правило.
Смысл в том, чтобы уровни информации отличались визуально.
5. Работайте с цветом через систему, а не настроение
Одна из распространённых ошибок новичков — выбирать каждый цвет отдельно.
Здесь захотелось зелёный.
Тут добавили оранжевый.
Потом понадобился голубой.
А эта плашка почему-то будет фиолетовой.
В результате хороший по отдельности цвет превращается в визуальный шум.
Простая механика
Перед началом проекта выберите:
- основной цвет;
- дополнительный;
- акцентный;
- нейтральный фон;
- цвет основного текста.
И дальше старайтесь работать внутри этой системы.
Если не получается подобрать сочетание самостоятельно, можно использовать бесплатные инструменты.
Adobe Color позволяет собрать палитру по цветовому кругу, извлечь цвета из фотографии и проверить сочетания. У сервиса есть инструменты работы с гармониями и контрастом.
Ещё один вариант — Coolors. В бесплатной версии можно генерировать палитры и работать с базовыми наборами цветов.
Но генератор не должен принимать решение вместо вас.
Он помогает найти сочетание.
А вы уже решаете, подходит ли оно конкретному товару.
6. Проверьте контраст
Бывает карточка, где формально всё аккуратно.
Но текст просто плохо читается.
Светло-серый на белом.
Белый на светлой фотографии.
Бежевый на кремовом.
На большом мониторе это может выглядеть эстетично.
На телефоне — просто исчезнуть.
Что делать
Проверьте главные текстовые блоки отдельно.
Если текст находится поверх фотографии, временно переведите изображение в чёрно-белый режим.
Так проще увидеть реальный контраст без влияния цвета.
Можно также использовать Contrast Checker в Adobe Color. Сервис позволяет проверить контраст текста и фона.
Особенно важно проверять:
- основной оффер;
- характеристики;
- текст внутри плашек;
- мелкие подписи.
Красивый текст, который невозможно прочитать, перестаёт выполнять свою функцию.
7. Подготовьте фотографию товара до начала дизайна
Иногда начинающий дизайнер пытается исправить плохой исходник графикой.
Слабое качество фотографии закрывается плашками.
Неровная обтравка — свечением.
Плохой фон — градиентом.
Но чем больше приходится маскировать фотографию, тем тяжелее становится композиция.
Перед дизайном проверьте
- качество исходника;
- края объекта;
- свет;
- цвет;
- перспективу;
- наличие лишних деталей;
- достаточно ли пространства вокруг товара.
Для простой обтравки можно использовать сервисы удаления фона. Например, remove.bg автоматически отделяет объект от фона и позволяет использовать результат в дальнейшей работе.
После автоматической обработки всё равно увеличьте изображение и проверьте края руками.
Особенно:
- волосы;
- прозрачные материалы;
- мелкие детали;
- сложные контуры;
- тени.
Автоматизация ускоряет работу, но проверка результата всё равно остаётся на дизайнере.
8. Собирайте не отдельные слайды, а систему
Это один из главных переходов от начинающего дизайнера к более сильной работе.
Новичок часто делает так:
первый слайд — один стиль;
второй — новая идея;
третий — увидел красивый референс и сделал вообще по-другому.
Каждый слайд отдельно может быть неплохим.
Но вместе карточка выглядит как пять разных проектов.
Что должно повторяться
Определите заранее:
- шрифты;
- формы плашек;
- радиусы;
- толщину линий;
- стиль иконок;
- набор цветов;
- отступы;
- принцип расположения заголовков;
- обработку фотографий.
В Figma для этого удобно использовать компоненты, Auto Layout и повторяющиеся элементы. Даже бесплатный Starter-план включает базовые инструменты вроде Auto Layout, компонентов и работы с файлами в Drafts.
Например, вы один раз создаёте плашку преимущества.
Вместо того чтобы каждый раз собирать её заново, используете один принцип во всей карточке.
Это и ускоряет работу, и визуально делает проект намного профессиональнее.
Механика, которую я советую делать после каждой карточки
Когда проект кажется готовым, не сдавайте его сразу.
Сделайте четыре проверки.
Проверка 1. Чёрно-белый режим
Уберите цвет.
Посмотрите, сохраняется ли иерархия.
Если без цвета всё стало одинаковым, значит значительная часть композиции держалась только на цветовых пятнах.
Проверка 2. Размытие
Немного расфокусируйте взгляд или размойте скриншот.
Вы всё ещё должны видеть главный акцент.
Если внимание прыгает между пятью одинаковыми пятнами, композицию стоит упростить.
Проверка 3. Маленький экран
Откройте изображение на смартфоне.
Не просто уменьшите окно на компьютере.
Посмотрите на реальном устройстве.
Очень многие проблемы становятся заметны именно там.
Проверка 4. Удаление
Попробуйте убрать один элемент.
Если ничего не изменилось — возможно, он и не был нужен.
Это одна из моих любимых проверок.
Не пытайтесь улучшать дизайн только через референсы
Референсы нужны.
Но есть большая разница между «посмотреть, как решена похожая задача» и «собрать свою карточку из чужих решений».
Если постоянно повторять отдельные приёмы, работа может выглядеть модно, но собственной системы у дизайнера так и не появится.
Я советую анализировать референс по вопросам:
Почему здесь крупный текст?
Почему фотография расположена именно так?
Что дизайнер убрал?
Как построены отступы?
Где находится главный акцент?
Что повторяется на следующих экранах?
Тогда вы забираете не внешний декор, а механику.
Это намного полезнее.
Как быстрее прокачать портфолио
У начинающего дизайнера есть ещё одна проблема.
Чтобы делать сильнее, нужно много практиковаться.
Но на каждый учебный проект можно потратить огромное количество времени просто на базовые элементы.
Рисовать плашки.
Искать иконки.
Придумывать сетку.
Подбирать форму блоков.
И в итоге большая часть энергии уходит не на идею, а на техническую сборку.
На этапе обучения полезно работать с уже собранными системами.
Не для того, чтобы просто заменить текст и выдать работу за полностью собственную.
А чтобы разобрать конструкцию.
Посмотреть:
- какие используются отступы;
- как устроена сетка;
- как сочетаются размеры текста;
- как собраны плашки;
- как элементы повторяются между слайдами;
- как один стиль развивается на 5-10 экранах.
Так гораздо быстрее формируется визуальная насмотренность.
Инструменты не заменяют дизайнера, но сильно ускоряют его
Можно самостоятельно собрать палитру.
Можно нарисовать каждую плашку.
Можно каждый раз заново создавать структуру обложки.
Это полезно делать во время обучения.
Но в реальной работе дизайнеру постепенно становится важна скорость.
Особенно если проектов много.
Поэтому я сама люблю инструменты, которые не принимают решение за дизайнера, а убирают рутину.
Именно по такому принципу я собираю свои готовые продукты для Figma.
Есть дизайн-системы до 10 страниц, конструкторы обложек и отдельные паки элементов.
Например, в конструкторе может быть уже собрана профессиональная композиционная основа, но все элементы остаются редактируемыми.
Можно:
- менять текст;
- менять цвета;
- переставлять элементы;
- заменять фотографии;
- выбирать дополнительные декоративные элементы;
- адаптировать композицию под свой товар.
К готовым дизайн-продуктам идёт инструкция, поэтому даже если вы пока не очень уверенно работаете в Figma, разобраться с основными действиями проще.
Кому подойдут готовые конструкторы
Я бы особенно рассматривала их в трёх случаях.
Первый — вы начинающий дизайнер и хотите быстрее понять, как устроен профессионально собранный макет.
Второй — вам нужно собрать более сильное учебное портфолио и вы хотите сосредоточиться на композиции, фотографии и смыслах, а не каждый раз рисовать базовые элементы с нуля.
Третий — вы уже работаете с клиентами и хотите ускорить техническую часть проекта.
Но здесь важно понимать принцип.
Конструктор не должен думать вместо дизайнера.
Он должен дать сильные инструменты.
А дальше именно вы решаете, что оставить, что изменить и какое решение подходит конкретному товару.
Мне кажется, это и есть самый полезный формат автоматизации для дизайнера.
Не «нажать кнопку и получить готовую карточку».
А убрать рутину и оставить человеку самое важное — идею, композицию и решение задачи.
Основные мысли
- Сильный дизайн чаще начинается с упрощения, а не с добавления декора.
- На каждом слайде должен быть понятный главный акцент.
- Проверяйте карточки в маленьком размере и обязательно на реальном смартфоне.
- Цвет, типографика, плашки и отступы лучше заранее объединять в одну систему.
- Бесплатные инструменты помогают ускорить работу, но решение всё равно принимает дизайнер.
- Готовые дизайн-системы и конструкторы позволяют меньше времени тратить на рутину и больше — на сам дизайн.
Выберите формат под задачу
Для быстрого самостоятельного запуска используйте готовые элементы. Для сложного продукта и уникальной подачи закажите индивидуальную разработку.