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

Какие есть проблемы у блока на сайте?

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

Вопрос: какие есть проблемы у блока?

Даниил Постнов
30 июня 2021
👁 7774  
Вёрстка

Какие есть проблемы у блока на сайте?

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

Вопрос: какие есть проблемы у блока?

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

Даниил!

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

Для начала уберу лишние буллиты и уменьшу вертикальные расстояния в списке. Станет компактнее и менее шумно — это всегда хорошо на ранних этапах вёрстки:

Следом избавлюсь от выравнивания по центру. Во‑первых, блок всё равно некрасиво сплющен и размазан. Во‑вторых, с выровненным по левому краю текстом проще работать — куда‑нибудь поставить, сильнее связать с остальными элементами макета и так далее.

Теперь конечно же бесит левая подмышка. Но и поправить теперь это очень легко — просто переставим картинку направо:

Усилим контраст. Напишем покрупнее заголовок и обобщающий текст. Картинку тоже увеличим, чтобы она заняла всё свободное пространство и держала модуль:

Тут я осознал, что весь текст на макете не чёрный, а тёмно‑серый. Исправим это. Посмотрите, насколько увереннее он стал себя чувствовать:

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

Стало чище, проще и аккуратнее, но безлико — какой‑то вагон текста. Рискну повторить трюк с контрастом и выделю лид и заголовок ещё сильнее:

Ну и напоследок очень хочется попробовать сильнее подружить текст с картинкой и заодно хоть немного уйти от этого дженерик‑стиля в иллюстрации. Подкрасим:

Ещё очень хочется потрогать шрифт и поискать более интересную графику и сюжет иллюстрации, но я остановлюсь.

Хочу отметить, что с самого начала я не знал, что у меня получится в конце. Я и не пытался что‑то заранее себе представить, а просто видел ближайшую проблему и исправлял её: сначала буллиты, потом выравнивание, следом подмышку и т. д. Такой метод последовательного исправления ошибок (а не попыток представить идеальный результат в голове) хорош тем, что помогает не стоять на месте и всегда приводит к результату. Мы активно практикуем метод у меня на курсе по типографике и вёрстке.

P. S. Также хочу отметить, что заголовки абзацев не согласованы между собой: в них то называются шаги процесса, то даются указания. Я бы выбрал что‑то одно.

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

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

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

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