Мария!

Из‑за сложной вёрстки ваша инструкция кажется сложнее, чем есть на самом деле.

Во‑первых, не стоит верстать инструкции колонками, ведь из‑за этого очень сложно контролировать последовательность чтения. Приходится или направлять читателя с помощью разделительных линеек, или нумеровать пункты, или всё вместе.

Во‑вторых, из‑за выравнивания элементов между ними появились лишние смысловые связи. Например, кажется, что изображение всего пульта имеет отношение только к последней нижней колонке.

Я бы начал с того, что убрал все лишние декорации — они мешают увидеть проблемы:

Следом давайте сделаем инструкции линейными. Картинки пока уберу, чтобы на них не отвлекаться:

Ну а дальше остаётся лишь слегка переписать текст и аккуратно встроить картинки в последовательность инструкций. К сожалению, я не до конца понял смысл некоторых пунктов и поэтому местами что‑то додумал:

Теперь, если это почему‑то будет полезно, можно подрезать формат до квадрата:

Ещё можно выделить названия кнопок цветом и избавиться от кавычек. Заодно поменял местами колонки, чтобы левый нижний угол не выглядел пустым.

Дальше хочется докрутить качество картинок, смысл текста и стиль инструкции — возможно даже вернуть какие‑нибудь украшательства. Но главное, что конструкция теперь не вызывает разночтений и инструкцию легче воспринимать.

Типографика в вебеМодульная вёрсткаНоситель: бумагаДоработка вёрстки
Отправить
Поделиться
Запинить

Рекомендуем другие советы