Пять шагов к улучшению модульной сетки – шаг 1

Первая из пяти частей о модульных сетках в веб-дизайне, мы постараемся перейти от теории к практическому применению их на практике.

Отношения — основа любой хорошей сетки в дизайне. Некоторые из пропорций рациональны, к примеру 1:1 или 2:3 другие рациональны: 1:1,414. Первая часть расскажет как комбинировать и использовать отношения для построения гармоничных сеток.

Начало с чистого листа

Всегда для примеров лучше показывать что-нибудь из реального мира. Итак представим, что нам нужна сетка для галереи. Выходящий размер A4. К фотографиям будет добавлен текст и они будут разных размеров.

Разделение отношений

Сетка, которую мы собираемся проектировать, является простой симметрической сеткой, основанной на непрерывном подразделении формата бумаги в отношении 1:1414. Мы можем использовать это отношение для всей сетки и это даст нам хорошее соотношение между элементами.
Это один из самых простых способов создать сетку. При использовании размера бумаги как основу мы используем это отношение для создания сетки.
На изображениях 1−6 видно, что простым делением мы получаем необходимое.
grid_pt1_1
grid_pt1_2

Добавим изюминку

Некоторые из людей утверждают, что сетки не позволяют творчески подходить к работе, но это не совсем так. Сетки наоборот облегчают разработку, отвечая на ряд вопросов, где и как должно размешаться и насколько широкими могут быть блоки.
Итак у нас есть сетка. Теперь можно экспериментировать. Мы можем наблюдать как разные форматы изображений влияют на всю форму.
grid_pt1_3

На изображении 7 показано текстовое наполнение, 8-9 показывают насколько гибкой может оказаться сетка для разных форматов изображений.

Первый этап

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

Часть 1 Часть 2 Часть 3 Часть 4 Часть 5

Оригинал статьи
Перевод: Опанасенко Сергей

Серж:

июля 11, 2009 в 3:43 дп

Сетка же не от балды строится: она уникальна под свой фирм стиль.

Ответить

natio:

июля 11, 2009 в 6:01 дп

Не от балды, но изначально же фирменный стиль кто-то же проектирует?

dima-mozg:

августа 3, 2009 в 2:45 дп

Картинка 1 получается делением листа пополам (вертикально и горизонтально). Поясните подробнее: при чем тут цифра 1,1414, от куда она взялась (почему именно 1,1414), а также что на что вы делите, получая картинки 2-6.
Заранее благодарю.

августа 3, 2009 в 5:12 дп

1,1414 — это коэфициент отношения сторон листа
а 2-6 чертятся по указанному коэфициенту
относительно прямоугольников, что получились при первом делении пополам

августа 3, 2009 в 6:40 дп

Никак не могу выключить «тупого». Про 1:1414 дошло, спасибо.
Как появились рис.2 и рис.3? — Просто четверть исходного листа расположена по центру? Тогда как строить сетку на рисунках 4-6?

августа 3, 2009 в 7:24 дп

Дима, на рисунках 2-3 показаны примеры того, что при делении у нас сохраняются пропорции, а сетку уже строим так как на это более удобно — то есть берем один из получившихся прямоугольников, делим и снова дели и так далее пока не получаем полную градацию страницы

августа 3, 2009 в 7:29 дп

Т.е. на рис.1 мы делим страницу пополам (вертикально и горизонтально), а далее уже строим произвольные «прямоугольники» с соотношением сторон как на исходной странице.
Так?

августа 3, 2009 в 10:12 дп

ну получается где-то так.
Просто разделив раз в пропорциях листа дальше это отношение будет сохраняться.

августа 3, 2009 в 10:14 дп

Понял, спасибо )

августа 3, 2009 в 10:27 дп

незачто, 4-я и 5-я части статьи еще более интересны и непонятны :)

августа 3, 2009 в 10:28 дп

ждем с нетерпением