Иногда лучше изобразить, чем написать

Коллега попросила посмотреть текст «свежим взглядом». А там такой блок:

  • «По акции клиент получит:
    Эвотор 7.2 за 12 800 ₽ вместо 15 700;
    годовую подписку на сервис Маркировка за 3000 ₽ вместо 6000.
    В итоге онлайн-касса для работы с маркировкой будет стоить 15 800 рублей. Суммарная скидка на комплект — 5900 ₽.»

Читаю, а у меня в голове:

Самый короткий путь — отредактировать текст, чтобы читалось проще. Но есть вариант получше: превратить текст в картинку, на которой аккуратно расставить нужные слова. Такое и читать приятнее, и можно применять вне текста, например, в презентациях или соцсетях.

Попробовал сделать картинку

Делал всё в Фотошопе, потому что привык, но можно ковыряться в Фигме, Индизайне, Скетче — где удобнее.

  1. Создал документ 1000 × 750 пикселей и скопировал на него весь текст.
  2. Слова пока что не редактировал, но разбил текст на логические абзацы.
  3. Название акции выделил пожирнее и покрупнее и отделил от основного текста бо́льшим расстоянием.
  4. Остальные предложения разделил пространством.
  5. Весь текст, он же содержание, подружил с прямоугольником, он же формат. Самое простое правило, чтобы всё на плакате было ровно и красиво: левое поле меньше верхнего (фиолетовые прямоугольники), нижнее поле больше верхнего, справа оставляю воздух, весь текст выравнял по левому краю.

Удалил все лишние слова, чтобы самая важная информация на картинке хорошо считывалась. Сразу в лучших традициях распродаж перечеркнул старую цену.

Было 1 → Стало 2

Поменял заголовок. Зачем говорить, что есть некая акция для клиентов Эвотора, если можно сразу в заголовок вынести суть акции. А суть как раз одна из строк: Эвотор 7.2 и «Маркировка» за 15 800 ₽ — так и оставил пока что.

Было 2 → Стало 3

Захотел, чтобы на плакате было что-то главное, за что зацепится глаз читателя. Пусть это будут цены. Я увеличил их. Названия, наоборот, уменьшил.

Было 3 → Стало 4

Появилась проблема. Мне не нравится, что перечёркнутые цены по размеру такие же как и финальные. Главное ведь — это финальная скидка. Уменьшил начальные цены до размеров названия.

(Прошло 10 минут). Мне сначала казалось, что цены после скидки — это главное. Но они не считываются без контекста. Поэтому увеличил заголовок. Теперь видно о чём речь.

Я до сих пор не трогал фразу «Экономия — 5900 ₽». Вот честно, я не понял зачем она. Убрал. И без неё всё отлично. На крайний случай, можно в основном тексте прописать, сколько сэкономит клиент.

Было 4 → Стало 5

Я не профессиональный верстальщик, я только учусь, и сейчас результат мне нравится. Но есть ещё проблема: такая картинка потеряется в ленте соцсетей, потому что выглядит серовато. Шансов на то, что статью заметят — практически нет, особенно, если с двух сторон давят новость о короновирусе и статья о ТОП книгах по саморазвитию.

Сразу покажу на примере, как выглядит белый вариант в гипотетической ленте — слева, и как выглядит вариант поярче — справа. После расскажу, как сделал оранжевый вариант.

Оранжевая иллюстрация выглядит ярче и заметнее в ленте (хотя, новости о вирусе ей всё равно не победить)

Добавляю красоты в чёрно-белую иллюстрацию

Красота — штука субъективная и каждый видит её по-разному и создаёт по-разному. Для меня достаточно аккуратно расставить буквы и добавить на фон цвета... и буквы я уже расставил :) Дело за цветом.

  1. У Эвотора главный цвет — оранжевый, добавил его. Сразу стало бохаче.
  2. Буквы перекрасил в белый цвет.
  3. Говорят что в 2020 году главный тренд в веб-дизайне — это мягкие градиенты. Тренды нельзя игнорировать — смешал оранжевый с белым.
  4. А ещё люблю тонкие рамочки.
  5. Из-за рамочки пришлось ужать текст, потому что теперь рамка — это прямоугольник-формат, который дружит с текстом-содержанием.
  6. Чтобы низ совсем не пустовал, добавил логотип компании в левый нижний угол и адрес сайта в правый нижний угол. Эта парочка, так называемые якорные объекты, прилипла к углам и выровнялась с границами основного текста.
  7. Развернул линии, которые перечёркивают старые цены. Так лучше видно старую цену.
Было 5 → Стало 6
Было 1 → Стало 6
Я всегда рад конструктивной критике, особенно, что касается вёрстки. Так что пишите, будем вместе двигать пиксели ;)

Повторюсь ещё раз. Я не профверстальщик, я только учусь. Но даже такой работы в ФШ хватит, чтобы победить комок сложного текста и превратить его в практически элитную картинку... Хотя, вру... Можно сделать ещё элитнее.

К сожалению, не все поняли шутку. Например, порадовал комментарий «Прежде чем ставить на картинку кого попало, нужно разобраться кто ваша ЦА!». Вот это поворот :)

Вот так. Секс победит любую картинку в ленте соцсетей. А чтоб меня не обвинили в объективации женского тела, добавлю и мужчину. Теперь меня обвинят и в том, и в том.

Стив Джобс бы одобрил

P. S. Я ещё вещаю о кино в телеге — подписывайся ;)

Поделиться
Отправить
Запинить
 421   5 мес  
Популярное