Как мы собираем макеты по алгоритму верстки

Published in

Дизайн-кабак

4 min readDec 14, 2019

Расскажу об одном задании с мастер-класса «Большая переверстка» — как мы собираем макеты по алгоритму верстки. Это метод, который я описал в одноименной статье. Если коротко, порядок действий такой: содержание → структура → конструкция → стиль.

Ниже два примера с МК в Новосибирске.

1. Александр Гончаров

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

Бонусная программа
Сделали заказ в нашем Интернет-магазине? Поздравляем! Вы стали участником бонусной программы! Участие в программе ничего не требует от Вас и при желании вы сможете потратить накопленные баллы на следующую покупку в нашем Интернет-магазине. Для накопления баллов просто делайте заказы под одним и тем же аккаунтом при следующих покупках!
Каждый раз при совершении покупки Вы автоматически получаете 10% от стоимости товара бонусными баллами. Баллы, полученные после оплаты заказа станут активными через 14 дней и смогут быть использованы в следующих заказах. Мы с удовольствием напомним Вам об активации баллов на счету электронным письмом. Но, стоит помнить, что срок действия бонусных баллов ограничен и составляет 11 месяцев с момента их активации.
Один бонусный балл = Одному рублю РФ.
Вы сможете оплатить до 30% суммы заказа накопленными ранее бонусными баллами. Бонусами вы сможете оплатить любой товар из ассортимента Интернет-магазина, кроме: подарочных сертификатов, услуг доставки и ремонта. Использование бонусных баллов для оплаты покупки совмещается с любыми акциями на нашем сайте. В случае возврата товара, бонусные баллы будут возвращены на ваш бонусный счет.

Структура
Второй шаг — привести в порядок структуру: решить, что здесь важно, что нет, на какие части разделить текст, в какой последовательности подавать информацию. На этом этапе ничего не рисуем, просто переписываем текст и отжимаем воду. На всё 20 минут.

Александр выделил два основных блока (под жирными заголовками): один про накопление бонусов, второй про их трату. В начале небольшое вступление, в конце что-то вроде примечания. Текст стал короче почти в три раза, при этом все условия бонусной программы на месте:

Вы стали участником бонусной программы!
Для накопления баллов продолжайте покупать товары с этого аккаунта.
Теперь Вы получаете 10% от стоимости товара бонусными баллами
Баллы, полученные после оплаты заказа, станут активными через 14 дней и действуют в течение 11 месяцев.
Оплачивайте до 30% от суммы заказа
Бонусные баллы можно тратить во время всех акций магазина.
При возврата товара — вернём баллы.
Бонусами нельзя оплатить:
— подарочные сертификаты,
— услуги доставки и ремонта.

Конструкция
На основе структуры собираем скелет будущего макета. Размещаем текст на формате, оставляем место для картинки. Оформление условное, без проработки. Время 30 минут.

Стиль
Далее оформляем макет по референсу. Стиль референса необязательно повторять целиком. Берем только те приемы, которые нам подходят. Если в референсе нет нужных элементов, додумываем их самостоятельно. Конструкция под влиянием нового стиля может измениться, это нормально. Время 40 минут.

Важный момент: новое оформление не должно искажать смысл и ухудшать читаемость текста.

Референсами были два разных многостраничника. Александр взял журнал компании Schloss Hohenkammer. Вот один разворот:

Результат первого подхода. Осталось докрутить мелочи:

2. Анастасия Никифорова

Содержание
Текст у всех был одинаковый, поэтому сразу к структуре.

Структура
Анастасия выделила четыре главных условия (= четыре цифры) и собрала их в список. Порядок пунктов соответствует механике бонусной программы: начисление — активация — использование — срок действия. Отдельно стоят заголовок и строчка о конвертации баллов в рубли. Остальные подробности опущены:

Совершай покупки — Получай деньги
Один бонусный балл = Одному рублю РФ
— При совершении покупки Вы получаете кэшбэк 10% бонусными баллами.
— Баллы станут активными через 14 дней после оплаты заказа и смогут быть использованы в следующих заказах.
— Вы сможете оплатить до 30% суммы заказа накопленными баллами.
— Срок действия бонусных баллов — 11 месяцев с момента их активации.

Конструкция
Компоновка полностью соответствует структуре. Блок «1 балл = 1 рубль» планировалось объединить с иллюстрацией под заголовком: