![](https://leandesign.pro/wp-content/uploads/2023/02/3c70258a492f0930102d4d8158dc6894-150x150.jpeg)
Сегодня показываю и рассказываю, как улучшить вёрстку в макете
В одном из заданий спринта участники перевёрстывали билет в театр. Возьмём один из макетов участников и улучшим его.
Исходный макет выглядит так:
![](https://leandesign.pro/wp-content/uploads/2020/03/Cy8YbNdcM1c-1024x450.jpg)
Проанализируем, какие проблемы с вёрсткой есть в макете:
![](https://leandesign.pro/wp-content/uploads/2020/03/WDD1OWwJuE0-1024x447.jpg)
В первую очередь исправим логику: заголовок должен быть над тем, что он озаглавливает, чтобы в билете было проще ориентироваться. Т.к. взгляд цепляется за заголовок и потом идет вниз.
![](https://leandesign.pro/wp-content/uploads/2020/03/sDZvaPVZmtU-1024x435.jpg)
В верхнем этаже сложна структура текста: заголовки, подзаголовоки, бирки, заголовки 2-го уровня и еще какой-то стиль текста. Это слишком много для такого количества контента. Так же такая структура мешает работать с контрастом: много разных стилей и сложно добиться хорошего контраста между ними. Исправим.
![](https://leandesign.pro/wp-content/uploads/2020/03/ozFrGY9ia5g-1024x760.jpg)
Структура проще, информация та же. Возрастное ограничение я пока убрал.
Теперь можно смело потянуть контраст между шрифтами заголовка и остального. Заголовок разместим в угол, чтобы усилить контраст в отступах. Макет уже перестал быть размазанным. Время и дату я пока убрал, т.к. вижу, что его можно заверстать в этаж ниже.
![](https://leandesign.pro/wp-content/uploads/2020/03/JixmxbtmRdM-837x1024.jpg)
В этаже с местами тоже можно упростить структуру и повысить контраст. Цена кажется не важна, когда билет уже куплен, поэтому уберем её пока, а туда поставим дату и время.
![](https://leandesign.pro/wp-content/uploads/2020/03/7jelpWpbOJ4-837x1024.jpg)
Осталось навести порядок в нижнем этаже: избавиться от серого цвета текста, собрать модули и разместить тяжелый элемент в углу. Цена поселится там же. Готово:
![](https://leandesign.pro/wp-content/uploads/2020/03/g5M5ECw4EWk-1024x924.jpg)
Дальше нужно бы поработать с корешком, но я тут остановлюсь.
В сухом остатке: в макете важно работать с контрастами в отступах и весе элементов, тогда макет перестаёт быть размазанным. Никаких «почти, но не совсем»: либо делаем явно, либо не делаем.