Алексей!
В вашем примере есть масса мест, в которых не помешало бы соблюсти кое‑какие из правил. Вот парочка из них:
Подозреваю, что автор придумал какую‑то сложносочинённую многоколончатую сетку и по ней собрал все страницы. Наверно, пока было видно сетку, всё это выглядело невероятно стройным и собранным. Но как только сетку убрали, остался просто набор случайно выровненных друг с другом элементов.
Помимо того, что местами это выглядит довольно сомнительно, так ещё иногда и разобраться в смысле сложно. Например, как тут понять, к чему имеет отношение красная кнопка — к подвалу или к цитате выше?
Если бы автор учёл хотя бы правило внутреннего и внешнего и поставил кнопку ближе к связанному с ней элементу, стало бы сильно проще. Другой вариант — не допускать выравнивания расположенных рядом связанных элементов.
Я могу допустить, что для какого‑то разового проекта типа промостраницы такие опасные нарушения не повлекут серьёзных проблем. Но здесь, как я понял, нам показали макет обновляемого сайта какой‑то компании. Проблема в том, что макет — это почти всегда приукрашенное приближение к реальности, которое к тому же показывает всего лишь одно‑два из возможных состояний. А что будет, если в заголовке окажется больше текста? А если цитата будет в три раза короче? И без того полуразваленная страница станет ещё хуже.
По‑моему, эта проблема есть у очень многих сверхконцептуальных работ на Дриббле и Бихансе: столкновения с реальностью вся эта красота не выдержит.
Правила вёрстки (да и вообще любые дизайнерские правила) иногда можно не соблюдать, но их нужно понимать. Если вы понимаете, зачем что‑то придумано и как оно работает, то вы отдаёте себе отчёт, почему от этого можно отказаться в конкретном случае или что для этого нужно сделать.
Например, в некоторых случаях можно не учитывать правило внутреннего и внешнего, потому что правило модульности работает достаточно сильно, чтобы связь элементов считывалась без проблем:
Ещё пример. В дипломах Высшей школы главбуха красные элементы в нарушение правила внутреннего и внешнего и модульности влезают в пространство чёрного текста:
Этот трюк сработал, потому что наш мозг связывает элементы не только по близости друг к другу, выравниванию, но и по цвету. Тут он понимает, что красные и чёрные элементы из разных вселенных, и не пытается связать герб со стоящим рядом заголовком. В результате получился такой модный и в то же время отчасти классический на вид диплом. Но в процессе работы над ним мы постоянно соотносили то, что получается, с тем, что мы знаем о вёрстке, — и каждый раз убеждались, что нарушение правил не приводит к беспорядку с точки зрения смысла и внешнего вида.