Улучшаем билет в театр или как не размазывать макет

Улучшаем билет в театр или как не размазывать макет

Сегодня показываю и рассказываю, как улучшить вёрстку в макете

В одном из заданий спринта участники перевёрстывали билет в театр. Возьмём один из макетов участников и улучшим его.

Исходный макет выглядит так:

Улучшаем билет в театр или как не размазывать макет, изображение №2

Проанализируем, какие проблемы с вёрсткой есть в макете:

Улучшаем билет в театр или как не размазывать макет, изображение №3

В первую очередь исправим логику: заголовок должен быть над тем, что он озаглавливает, чтобы в билете было проще ориентироваться. Т.к. взгляд цепляется за заголовок и потом идет вниз.

Улучшаем билет в театр или как не размазывать макет, изображение №4

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

Улучшаем билет в театр или как не размазывать макет, изображение №5

Структура проще, информация та же. Возрастное ограничение я пока убрал.

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

Улучшаем билет в театр или как не размазывать макет, изображение №6

В этаже с местами тоже можно упростить структуру и повысить контраст. Цена кажется не важна, когда билет уже куплен, поэтому уберем её пока, а туда поставим дату и время.

Улучшаем билет в театр или как не размазывать макет, изображение №7

Осталось навести порядок в нижнем этаже: избавиться от серого цвета текста, собрать модули и разместить тяжелый элемент в углу. Цена поселится там же. Готово:

Улучшаем билет в театр или как не размазывать макет, изображение №8

Дальше нужно бы поработать с корешком, но я тут остановлюсь.

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