x
 
Артём
20 октября 2014

Как собрать страницу из модулей: без иллюстраций



По традиции начнём с текста без иллюстраций. Простой способ собрать страницу — сделать «бутерброд», то есть расположить модули слоями друг под другом:

Приемлемо


«Бутерброд» прекрасно подходит для шаблонов сайтов, сервисов и приложений, потому что страницы хорошо выглядят независимо от набора «слоёв» и их наполнения. Если данных будет слишком мало или слишком много, бутерброд укоротится или вырастет по вертикали без неуклюжих дыр и просветов.

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

Но однородная страница без иллюстраций не цепляет глаз. Введём ритм и расположим модули по колонкам:

Лучше


Доминирующий блок стал лучше выделен. Но если второстепенных модулей будет слишком много, ритм быстро наскучит, как песня, играющая по кругу:

Скучно


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

Приемлемо


Если полностью игнорировать сетку и устроить вакханалию колонок, страница развалится:

Плохо


Этим часто грешат промостраницы в интернете — так и атакуют нас рядами преимуществ и достоинств.

Введём новый приём — плашку. Плашка помогает отделить модуль от соседнего и объединить его собственные части:


Плашка выделяет модуль на странице. Поэтому из соседних блоков нужно ставить на плашку более важный.

Существует миллион разновидностей стилей плашек и рамок от плоских минималистичных до объёмных с градиентами и тенями:


Оформление плашки — дань текущей моде или фирменному стилю, но её функция остаётся одной и той же — объединять и выделять.

Хорошая идея — одновременно сломать сетку важного модуля и поставить его на плашку. Плашка и нестандартный ритм выделят блок среди других, при этом плашка «склеит» нестандартный модуль:

Хорошо


Если бутерброд выглядит суховато, вертикальная колонка разбавит горизонтальную монотонность:

Хорошо


Продолжение следует.

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

Поделиться
Отправить

Комментарии

Максим Черномор
13 ноября 2014

Объясните, в чём разница между цветными модулями (с синими полосочками) и одноцветными в примерах к этой статье?


10 марта 2015

Максим!

Синие полосочки — это обозначение ссылок.


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Как собрать страницу из модулей: зачем нужна сетка? 1 8




Недавно всплыло

6 6 3 6