Первая из пяти частей о модульных сетках в веб-дизайне, мы постараемся перейти от теории к практическому применению их на практике.
Отношения — основа любой хорошей сетки в дизайне. Некоторые из пропорций рациональны, к примеру 1:1 или 2:3 другие рациональны: 1:1,414. Первая часть расскажет как комбинировать и использовать отношения для построения гармоничных сеток.
Начало с чистого листа
Всегда для примеров лучше показывать что-нибудь из реального мира. Итак представим, что нам нужна сетка для галереи. Выходящий размер A4. К фотографиям будет добавлен текст и они будут разных размеров.
Разделение отношений
Сетка, которую мы собираемся проектировать, является простой симметрической сеткой, основанной на непрерывном подразделении формата бумаги в отношении 1:1414. Мы можем использовать это отношение для всей сетки и это даст нам хорошее соотношение между элементами.
Это один из самых простых способов создать сетку. При использовании размера бумаги как основу мы используем это отношение для создания сетки.
На изображениях 1−6 видно, что простым делением мы получаем необходимое.
Добавим изюминку
Некоторые из людей утверждают, что сетки не позволяют творчески подходить к работе, но это не совсем так. Сетки наоборот облегчают разработку, отвечая на ряд вопросов, где и как должно размешаться и насколько широкими могут быть блоки.
Итак у нас есть сетка. Теперь можно экспериментировать. Мы можем наблюдать как разные форматы изображений влияют на всю форму.
На изображении 7 показано текстовое наполнение, 8-9 показывают насколько гибкой может оказаться сетка для разных форматов изображений.
Первый этап
Первый этап окончен, в следующих главах рассмотрим более сложные и интересные схемы построения сеток.
Часть 1 Часть 2 Часть 3 Часть 4 Часть 5
Оригинал статьи
Перевод: Опанасенко Сергей
RSS
twitter
lj
Сетка же не от балды строится: она уникальна под свой фирм стиль.
Не от балды, но изначально же фирменный стиль кто-то же проектирует?
Картинка 1 получается делением листа пополам (вертикально и горизонтально). Поясните подробнее: при чем тут цифра 1,1414, от куда она взялась (почему именно 1,1414), а также что на что вы делите, получая картинки 2-6.
Заранее благодарю.
1,1414 — это коэфициент отношения сторон листа
а 2-6 чертятся по указанному коэфициенту
относительно прямоугольников, что получились при первом делении пополам
Никак не могу выключить «тупого». Про 1:1414 дошло, спасибо.
Как появились рис.2 и рис.3? — Просто четверть исходного листа расположена по центру? Тогда как строить сетку на рисунках 4-6?
Дима, на рисунках 2-3 показаны примеры того, что при делении у нас сохраняются пропорции, а сетку уже строим так как на это более удобно — то есть берем один из получившихся прямоугольников, делим и снова дели и так далее пока не получаем полную градацию страницы
Т.е. на рис.1 мы делим страницу пополам (вертикально и горизонтально), а далее уже строим произвольные «прямоугольники» с соотношением сторон как на исходной странице.
Так?
ну получается где-то так.
Просто разделив раз в пропорциях листа дальше это отношение будет сохраняться.
Понял, спасибо )
незачто, 4-я и 5-я части статьи еще более интересны и непонятны :)
ждем с нетерпением
А если формат не прямоугольный, а квадрат, то этот принцип построения сетки можно применять?
2Marina, конечно применим, делим но такому же принципу и работаем над сеткой!