Привести в порядок типографику (демо) · 3

Типографика · Вадим Паясу

§15. Нижний набор абзацев выравнивается по верхнему набору абзацев. Раз не работаем с универсальной сеткой, так нужно хотя бы остаться в рамках приличий:

Кстати, если воображаемая линия выключки слева от текстового блока есть, то справа ее нет. Даже воображаемой. Даже несмотря на то, что в фотошопе текст-бокс ее четко показывает.

§16. Новая форма перекосилась, но не до нее сейчас. В первую очередь — первоочередное.

§17. Кстати о перекосах. Начинающему дизайнеру кажется, что с розовым блоком все ок, он выровнен по центру:

§18. Но на самом деле он уехал влево. Из-за того, что лохмотья на правом краю текст-бокса кажутся легче, чем массивный левый край. Вот почему настоящие центральные струны находятся не по центру текст-бокса, а левее.

§19. Если убрать текст, перекос станет совсем очевидным:

§20. Вот почему выключенные по левому краю текстовые блоки нужно сдвигать правее, когда вы хотите сделать симметричный макет.

§21. Результат: три абзаца смотрятся ровнее, чем раньше. Отмотайте пост назад и осознайте просветление.

§22–23. После того, как с нижним блоком проделано то же самое, в макете появилась закономерность (форму я убрал, чтоб не мешала). Закономерность контекстная и родилась сама собой, что гораздо лучше бездушной квадратно-гнездовой 960.gs. Теперь из этой закономерности можно выстраивать принципы верстки для следующих «этажей» (на 2, 5, 7 блоков), если захочется. То есть модульную сетку для нового макета нужно строить начиная аж с этого шага. Можно даже посторонние элементы зацепить на те же струны:

§24. Теперь форма. Форма — тоже часть типографики, а вы как думали. В интерфейсах без типографики вообще никак. Обратите внимание, как поле с почтой и кнопка выровнены относительно общего центра страницы. Это тоже абсолютно не обязательно, но мне нравится, когда получаются такие ходы.

§25–26. Кстати, если в абзацы добавить иконок, придется забыть об оптике и выровнять их так, чтобы расстояние между иконками было одинаковым.

§27. После всех манипуляций количество струн уменьшилось до трех важных: это центральная струна, линия выключки и симметричная ей линия справа (точное положение которой не существенно). Остальные струны важны только вокруг объектов, к которым относятся. Причем, половину с этой картинки вообще можно убрать: крайние струны симметричных объектов не имеют вообще никакого значения. Надеюсь, не запутал (а если запутал, приходите на Типографику, тысяча чертей!).

§28. Итог:

§29. Было — стало. За кадром остались:

— Удачный и неудачный подбор шрифтов.
— Верстка сложных форм.
— Способы вверстывания картинок.
— Нарушения принципов типографики.
— Иерархия текстов.
— Распределение информации по слоям восприятия.
— Подбор цветов.
— Гибкая верстка горизонтальных блоков.
— Особенности выворотки.
— Оптические фиксы на 1–2 пикселя, которые делают вас профессионалами.

И о-очень много чего еще. Так что Типографика — однозначный Must Go. Даже если вы пойдете учиться не ко мне, а к кому-то другому.