Сегодня показываю и рассказываю, как улучшить вёрстку в макете
В одном из заданий спринта участники перевёрстывали билет в театр. Возьмём один из макетов участников и улучшим его.
Исходный макет выглядит так:
Проанализируем, какие проблемы с вёрсткой есть в макете:
В первую очередь исправим логику: заголовок должен быть над тем, что он озаглавливает, чтобы в билете было проще ориентироваться. Т.к. взгляд цепляется за заголовок и потом идет вниз.
В верхнем этаже сложна структура текста: заголовки, подзаголовоки, бирки, заголовки 2-го уровня и еще какой-то стиль текста. Это слишком много для такого количества контента. Так же такая структура мешает работать с контрастом: много разных стилей и сложно добиться хорошего контраста между ними. Исправим.
Структура проще, информация та же. Возрастное ограничение я пока убрал.
Теперь можно смело потянуть контраст между шрифтами заголовка и остального. Заголовок разместим в угол, чтобы усилить контраст в отступах. Макет уже перестал быть размазанным. Время и дату я пока убрал, т.к. вижу, что его можно заверстать в этаж ниже.
В этаже с местами тоже можно упростить структуру и повысить контраст. Цена кажется не важна, когда билет уже куплен, поэтому уберем её пока, а туда поставим дату и время.
Осталось навести порядок в нижнем этаже: избавиться от серого цвета текста, собрать модули и разместить тяжелый элемент в углу. Цена поселится там же. Готово:
Дальше нужно бы поработать с корешком, но я тут остановлюсь.
В сухом остатке: в макете важно работать с контрастами в отступах и весе элементов, тогда макет перестаёт быть размазанным. Никаких «почти, но не совсем»: либо делаем явно, либо не делаем.
