Школа
Вёрстка

Вдохновился курсами Ильи и теперь бегаю всё фоткаю и переделываю :‑)

Хочется узнать мнение по поводу такой вёрстки правил пользования детской площадки. Как улучшить макет? Хотелось успокоить вёрстку, сделать читаемее и привлечь больше внимания тому, что это правила эксплуатации, а то как сейчас бросаются в глаза какие‑то второстепенные вещи.

Никита Михайлов
25 окт 2023
👁 4542   🗩4
Вёрстка

Вдохновился курсами Ильи и теперь бегаю всё фоткаю и переделываю :‑)

Хочется узнать мнение по поводу такой вёрстки правил пользования детской площадки. Как улучшить макет? Хотелось успокоить вёрстку, сделать читаемее и привлечь больше внимания тому, что это правила эксплуатации, а то как сейчас бросаются в глаза какие‑то второстепенные вещи.

Никита Михайлов
25 окт 2023
👁 4542   🗩4
Михаил Нозик
Арт‑директор и автор курса «Типографика и вёрстка»
Полезно
Непонятно
Войдите в Бюросферу, чтобы голосовать

Никита!

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

Как обычно, начнём с того, что найдём место самым главным элементам: заголовку, тексту и так далее. Заголовок:

Добавим текст. В соответствии с правилом якорных объектов ему самое место в нижнем углу:

Добавим телефоны городских служб. Очевидно, по смыслу им место в подвале таблички, поэтому они и встанут туда, а текст прижмётся к заголовку:

Добавим информацию про запреты. Я предлагаю сразу почистить лишние слова и оставить только самое важное: что нельзя и какой будет штраф. Новый блок аккуратно встанет следующим слоем после текста:

Тут я понял, что потерял информацию о мусоре. За мусор почему‑то нет штрафа, и поэтому его нельзя легко поставить в ряд с другими запретами. Не беда — поясним почему мусорить плохо и добавим ещё один абзац к общим правилам выше:

Попробуем слегка сократить и облегчить заголовок:

Добавим позабытый герб. Проще всего его поставить напротив телефонов — и место есть, и ощущение официальности этих телефонов усилится:

Финальным штрихом слегка повысим контраст внешних полей таблички и чуть‑чуть уменьшим кегль заголовка, чтобы весь верхний блок приобрёл более ровную прямоугольную форму и увереннее встал в левый верхний угол:

Готово. Как вам?

P. S. Последовательно делать такие штуки я учу на своём курсе «Типографика и вёрстка». Ближайший курс пройдёт с 26 ноября по 16 декабря, а следующий — неизвестно когда. Записывайтесь, пока есть места.

Типографика в вебеФормат: текстНоситель: бумагаДоработка вёрсткиПравило внутреннего и внешнегоМодульностьНоситель: средаГородская среда
Полезно
Непонятно
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментариев пока нет

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

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