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

В презентации много нарушений правил типографики и вёрстки, но при этом она нравится

Михаил, добрый день!

В этой презентации есть множественные нарушения классических правил типографики и вёрстки, но при этом не вызывает отторжения, скорее наоборот — нравится.

Вопрос: как нарушать правила так, чтобы было хорошо?

Алексей Федоров
19 фев 2020
👁 10751   🗩1
Вёрстка

В презентации много нарушений правил типографики и вёрстки, но при этом она нравится

Михаил, добрый день!

В этой презентации есть множественные нарушения классических правил типографики и вёрстки, но при этом не вызывает отторжения, скорее наоборот — нравится.

Вопрос: как нарушать правила так, чтобы было хорошо?

Алексей Федоров
19 фев 2020
👁 10751   🗩1
Михаил Нозик
Арт‑директор и автор курса «Типографика и вёрстка»
Полезно
 35
35
Непонятно
  
Войдите в Бюросферу, чтобы голосовать

Алексей!

В вашем примере есть масса мест, в которых не помешало бы соблюсти кое‑какие из правил. Вот парочка из них:

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

Помимо того, что местами это выглядит довольно сомнительно, так ещё иногда и разобраться в смысле сложно. Например, как тут понять, к чему имеет отношение красная кнопка — к подвалу или к цитате выше?

Если бы автор учёл хотя бы правило внутреннего и внешнего и поставил кнопку ближе к связанному с ней элементу, стало бы сильно проще. Другой вариант — не допускать выравнивания расположенных рядом связанных элементов.

Я могу допустить, что для какого‑то разового проекта типа промостраницы такие опасные нарушения не повлекут серьёзных проблем. Но здесь, как я понял, нам показали макет обновляемого сайта какой‑то компании. Проблема в том, что макет — это почти всегда приукрашенное приближение к реальности, которое к тому же показывает всего лишь одно‑два из возможных состояний. А что будет, если в заголовке окажется больше текста? А если цитата будет в три раза короче? И без того полуразваленная страница станет ещё хуже.

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

✸✸✸

Правила вёрстки (да и вообще любые дизайнерские правила) иногда можно не соблюдать, но их нужно понимать. Если вы понимаете, зачем что‑то придумано и как оно работает, то вы отдаёте себе отчёт, почему от этого можно отказаться в конкретном случае или что для этого нужно сделать.

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

Да, это очень шумный и не модный дизайн с кучей проблем. Но посмотрите, как легко считывается структура страницы. А всё, потому что дизайнер понимает, как устроена модульная вёрстка

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

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

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

Комментарии

Женя Арутюнов

Алексей, вот заметка об этом же:
https://intuition.team/…/arutyunov/?go=all/vospriyatie

Ответа «как» там тоже нет, но есть подсказки.

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

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