Перейти к содержимому
  • Курс «Дизайн с белого листа»
  • Журнал
  • Отвечат
  • Дизайн мышления
  • Курс «Дизайн с белого листа»
  • Журнал
  • Отвечат
  • Дизайн мышления

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

30 марта, 2020

Лёша Рева

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

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

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

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

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

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

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

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

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

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

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

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

Школа «Лин Дизайн»

2017...2023

  • Вконтакте
  • Телеграм
  • Инстаграм
  • Вконтакте
  • Телеграм
  • Инстаграм

Подписка на Лин-журнал и все остальные материалы

Статьи журнала публикуются на сайте, в телеграме и сообществе вк. При создании не используется промышленный конвеер, поэтому следующая статья выйдет когда созреет.

Журнал

Журнал в вк

Журнал в телеграме

Подписки

«Дизайн мышления» в вк

«Дизайн мышления» в телеграме