Пошаговый редизайн бухгалтерской карточки для телеграм-канала
Этап 1: подбор формата, акценты
На карточке много хаотично разбросанной информации, поэтому потихоньку начнём приводить в порядок:
- для удобочитаемости сделаем карточку вертикальной размером 1080х1280 пикселей;
- убавим акцент у цитаты и вынесем на серую плашку;
- обозначение цитаты сделаем кавычками за пределами плашки в фирменном оранжевом цвете;
- уберём оранжевое выделение текста, потому что его неудобно читать;
- сделаем внизу единый модуль из текста и стрелки, чтобы образовался невидимый прямоугольник.
Этап 2: выделение, компоновка, стиль
Пока на макете по-прежнему бардак: элементы висят в воздухе, нет хватает акцентов. Попробуем улучшить:
- скомпонуем элементы по правилу якорных объектов: текст сверху ближе к левому верхнему углу, текст снизу — левому нижнему;
- выделим ошибку оттенком оранжевого фирменного цвета;
- добавим 3D элемент для дополнительного акцента с помощью плагина 3dicons. Раз ошибка — значит, палец вниз))
Этап 3: убираем грязь, меняем шрифт
Чтобы текст было легче читать, и он выглядел более стильным — поменяем шрифт. Также постараемся выделить цитату по-другому и добавить стиля макету:
- меняем шрифт на Gilroy,
- добавляем градиент из фирменного цвета с прозрачностью,
- перекрашиваем плашку в белый цвет.
Этап 4: контраст
Сейчас элементы в макете по-прежнему выглядят несобранными. Попробуем добавить дополнительного контраста:
- увеличим заголовок,
- увеличим цитату.
Этап 5: отчаяние, референсы
Всё равно не хватает структурности в карточке, идеи заканчиваются... Давайте сходим посмотрим, а что там делают в других телеграм-каналах:
По композиции и количеству тексту подходит референс из канала @makelove agency: попробуем переложить на наш макет.
Этап 6: оценка референса, попытка переложить стиль
У нас по-прежнему много стилей текста, не хватает доминанты. Исправим это, оглядываясь на референс:
- оставим два стиля текста: заголовок и основной;
- добавим номер карточки — полезная информация для читателя. Не забываем про правило якорных объектов, поэтому ставим в правый верхний угол;
- прямую речь так и оставим выделенной кавычками, но избавимся от дополнительно акцента плашкой;
- разбавим повествование мемов, чтобы читатель не был напряжён: в первую очередь, в соцсетях он хочет похихикать и посмотреть мемасики (конечно, мамы должны вписываться в ваш TOV).
Готово: мы избавились от нагромождения стилей, добавили дополнительную индикацию (номер карточки), доминанту (мемасик).
Этап 7: тёмная тема
Текст легче воспринимается на тёмном фоне, к тому же это просто выглядит стильно. Если брендбук позволяет — перекрасим фон карточки и текст, соответственно:
Вывод
Мы смогли улучшить скучную карточку и привести к более интересному повествованию с помощью простых шагов. Если вы в ступоре и не знаете, как начать улучшать — используйте подобные практики, чтобы сдвинуться с места. Как вы могли заметить — на первых этапах казалось, что карточка лучше не становится.
Если хотите узнавать больше про мир дизайна в мире редактора — подписывайтесь на телеграм-канал.
Если хотите научиться базово работать в Фигме и делать подобные карточки — покупайте онлайн-курс «Фигма для редакторов». Только 31 марта действует скидка 20% по промокоду «БУХКАРТОЧКАVC».
Сравнение, что было на старте и что получилось