Авторизация Регистрация

Здесь пока все ясно :)

Хелп лист будет формироваться из ваших вопросов.

 

Пять шагов к улучшению модульной сетки – шаг 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

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

Вам также может быть интересным ↓

13 комментариев на «“Пять шагов к улучшению модульной сетки – шаг 1”»

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

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

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

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

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

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

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

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

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

  10. А если формат не прямоугольный, а квадрат, то этот принцип построения сетки можно применять?

Добавить комментарий

Редизайнчик

View Results

Loading ... Loading ...