Алексей Черенкевич ([info]cherenkevich) wrote,
2010-02-16 09:58:00
Previous Entry  Add to memories!  Share  Next Entry

Часть вторая. Алгоритм построения модульной сетки. Оптика и геометрия

  1. 38 попугаев (Введение)
  2. Алгоритм построения модульной сетки. Оптика и геометрия
    1. Алгоритм
    2. Микромодуль и оптические компенсации
    3. Особенности работы с модульной сеткой при разработке «резиновых» сайтов
  3. PaperGrid — сетка на бумаге
  4. BrowserGrid — сетка в Фотошопе
  5. ModularGrid — сетка-камертон в браузере
  6. Верстка по сетке: проблемы и решения
  7. Список использованной литературы



Алгоритм

Начинаем с определения рабочей области

В случае веба чаще всего ширина холста колеблется от 1024 до 1280 пикселей. Разумеется, ваша задача и идея может стереть эти рамки. А вот высота макета — величина непредсказуема в большинстве случаев. В отличие от полиграфии, веб-страница чаще всего не фиксирована по высоте, и ее собственный контент может ее же и увеличить. Мне кажется, что это совсем не страшно. Сферическая сетка в вакууме никому не нужна, а при больших сплошных объемах контента никто вертикального членения и не увидит, даже если оно соблюдено.

Я ориентирую в своих макетах минимальную ширину на ~980 пикселей, оставляя место для скроллбара.



Рис 2.1. Определяем рабочую область

Делаем шрифтовую сетку

Я уже раньше писал публикацию о вертикальном ритме. Она дополнит все то, о чем будет сказано в этом пункте. Напомню, что мы выбираем высоту строки единую для всего макета. Все элементы рубрикации с кеглем, отличным от кегля основного текста, должны иметь интерлиньяж кратный выбранной высоте строки; в сумме со всеми вертикальными полями высота каждого такого элемента должна содержать целое количество строк шрифтовой сетки.
Здесь мы уже касаемся понятия модуля. Точнее микромодуля. Этим микромодулем мы будем обосновывать большинство небольших расстояний (и больших тоже).
Таким образом, мы получаем прообраз будущей сетки — «зебру». На этой сетке будет лежать весь текст: абзацы, списки, заголовки, иллюстрации, плашки и проч.

В своей практике я чаще всего использую такие параметры для шрифтовой сетки: кегль — 12 пикселей, высота строки — 18 пикселей.


Рис 2.2. Шрифтовая сетка-«зебра»
 

Дальше нам необходимо определиться с шириной модуля — той самой единицы измерения

Исходя из чего мы можем вычислить размер модуля. Первое — это присутствие какого-то блока постоянной величины, от которого нам приходится отталкиваться. В вебе постоянными величинами чаще всего бывают баннеры, иллюстрации, видео-контент и проч. Такие константы могут содержать в своей ширине уже несколько модулей.
Примером второго способа выбора ширины модуля — задача например, в размещении в ряд 9 элементов. Тогда, зная ширину всего холста и количество модулей (в этом примере 9) мы с легкостью определим размер модуля.


Будем придерживаться этого в нашем примере. Скажем, заказчик попросил внизу сайта разместить 6 его любимых бутербродов.
С сеткой работать удобнее, если сразу определить расстояния между модулями — средники или канавки. На помощь с определением ширины средника приходит понятие микромодуля из предыдущего пункта. Ширина средника равна как минимум базовой высоте строки.


Таким образом, расстояния между модулями делаем равным 18 пикселям.
Рассчитать ширину модуля теперь не составит труда. Есть все данные для этого.

Сетка на 6 колонок очень неудобная и некомпактная. Увеличим количество модулей вдвое. Теперь зная то, что у меня 12 колонок, я рассчитал, что ширина колонки будет равна 65 пикселям.

Строим вертикальное членение по полученному значению


Рис 2.3. Колонки


Делаем горизонтальное членение

Высоту одного такого пояса берем кратной базовой высоте строки.


Я объединю по 3 строки в один пояс. Просвет между поясами делаем в одну строку, тем самым сохраняем вертикальный ритм.


Рис 2.4. Пояса
 

Модульная сетка

То, что мы получили на пересечении горизонтального и вертикального членений называют модулями. Все-таки полдела — грамотно выбрать размер модуля. В случае, когда модуль большой, нам негде развернуться, пропадет та гибкость, о которой мы так мечтали. Если сетка очень мелкая — то она попросту теряется, как миллиметр в метре.




Рис 2.5. Модульная сетка

Регионы

Объединяем модули в регионы, создаем композицию, рисуем

Рис 2.6. Регионы


Рис 2.7. Макет сайта с сеткой...


Рис 2.8. ...и без нее




Завтра разговор построения будет продолжен. Спасибо за внимание!
Tags: дизайн, статьи

Loading...
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

     
    Help
    switch

    Your IP address will be recorded 

  • 107 comments
Previous
← Ctrl← Alt
  • 1
  • 2
Next
Ctrl →Alt →

[info]antonkartashov

2010-02-16 08:24 am UTC

Просто и доступно. Ждем продолжения.

[info]mr_cubede

2010-02-17 08:32 am UTC

Таким образом, расстояния между модулями делаем равным 18 писелям.

:)

[info]cherenkevich

2010-02-17 08:34 am UTC

[info]afomichev

2010-02-16 08:24 am UTC

Спасибо за очередной урок:) Объясни пожалста на примере вот это: «Все элементы рубрикации с кеглем, отличным от кегля основного текста, должны иметь интерлиньяж кратный выбранной высоте строки;». То ли утро, то ли просто не понимаю...:)

[info]cherenkevich

2010-02-16 08:29 am UTC

Элементы рубрикации — это всевозможные заголовки и т. д.

Если мы выбрали базовую строку высотой 18 пикселей, то для всех элементов рубрикации желательна высота строки кратная 18: 18, 36, 54 пикселей.

[info]afomichev

2010-02-16 08:30 am UTC

[info]dronoren

2010-02-16 09:07 am UTC

[info]cherenkevich

2010-02-16 09:11 am UTC

[info]bayevalexander

2010-02-16 08:30 am UTC

Спасибо) ждем завтрашнюю порцию бутербродов

[info]rusdrive

2010-02-16 09:04 am UTC

Классный материал! Спасибо за него!

[info]cherenkevich

2010-02-16 09:07 am UTC

Спасибо и Вам!

[info]rusdrive

2010-02-16 09:11 am UTC

[info]cherenkevich

2010-02-16 09:12 am UTC

[info]alexreva

2010-02-16 09:28 am UTC

Достал с полочки калькулятор и сел обсчитывать сетку.

Лёша, а ещё такой вопрос:
А отчего отсчитывается расстояние между вертикальными линиями шрифтовой сетки. Ведь каждая линия размером с пиксель и считается ли этот пиксель или нет?

[info]afomichev

2010-02-16 09:32 am UTC

Присоединюсь к вопросу. Тоже задумался, порисовав сейчас сетку...:)

[info]cherenkevich

2010-02-16 09:35 am UTC

[info]afomichev

2010-02-16 09:37 am UTC

[info]cherenkevich

2010-02-16 09:39 am UTC

[info]afomichev

2010-02-16 09:41 am UTC

[info]afomichev

2010-02-16 09:43 am UTC

[info]cherenkevich

2010-02-16 09:44 am UTC

[info]alexreva

2010-02-16 10:10 am UTC

[info]alex_kolodko

2010-02-16 10:41 am UTC

а почему ширина 980рх, если при разрешении 1024, для скроллбара хватает 24рх. Я оставляю всегда 1000рх, это потом очень удобно, если макет резиновый.

[info]cherenkevich

2010-02-16 10:46 am UTC

Когда у меня был 17" монитор, я к такому выводу пришел. Не всегда у тебя окно развернуто даже на 1024. Может быть, по этому.

Да и потом есть «безопасные зоны», вроде они так называются. Так вот там говорится даже про 960 пикселей, чтобы на Маках не было скролла тоже.

[info]alex_kolodko

2010-02-16 11:12 am UTC

[info]cherenkevich

2010-02-16 11:13 am UTC

[info]igordyakov

2010-02-16 10:30 pm UTC

[info]igordyakov

2010-02-16 10:32 pm UTC

[info]cherenkevich

2010-02-16 10:32 pm UTC

[info]igordyakov

2010-02-17 06:16 am UTC

[info]alex_kolodko

2010-02-17 07:05 pm UTC

[info]cherenkevich

2010-02-17 07:54 pm UTC

[info]alex_kolodko

2010-02-17 08:20 pm UTC

[info]igordyakov

2010-02-17 09:21 pm UTC

[info]alex_kolodko

2010-02-17 10:02 pm UTC

[info]cherenkevich

2010-02-17 10:12 pm UTC

[info]igordyakov

2010-02-18 12:34 am UTC

[info]cherenkevich

2010-02-18 12:36 am UTC

[info]kossmoss

2010-02-16 11:51 am UTC

Очень хорошо объясняете, спасибо.

[info]cherenkevich

2010-02-17 07:47 pm UTC

Спасибо и Вам!

[info]ilushenka

2010-02-16 12:00 pm UTC

Спасибо! Отличные статьи!

[info]cherenkevich

2010-02-16 07:39 pm UTC

Спасибо!

[info]nixon_flava

2010-02-16 12:40 pm UTC

Круто, спасибо!

[info]cherenkevich

2010-02-16 07:39 pm UTC

Спасибо!

[info]den3streifen

2010-02-16 02:59 pm UTC

Спасибо!

[info]cherenkevich

2010-02-16 07:39 pm UTC

И Вам спасибо )

[info]abbakym

2010-02-16 03:18 pm UTC

спасибо большое за чудный материал!
ощущение посвящения в тайну — почему некоторые сайты кажутся нам красивыми и опрятными, как этот с бутербродами, а другие (даже старательно сделанные) — хаотичными и нечитаемыми. ждём продолжения!

[info]cherenkevich

2010-02-16 07:40 pm UTC

Впереди еще много чтива ) Готовьтесь )

[info]peter_the_green

2010-02-19 04:02 am UTC

[info]dr69

2010-02-16 04:58 pm UTC

Отличный блог, очень годные статьи.

Рисую по 960gs, сначало на 12 колонках, сейчас на 16.
после твоего поста решил что буду эту сетку еще дублировать и по горизонтале.

Еще порадовали твои работы в порфолио, и работы вашей студии.
Ну и самое порадовало что из Гомеля.
Раньше жил в Гомеле, пару раз в году езжу в гости.

[info]cherenkevich

2010-02-16 07:42 pm UTC

Спасибо!

Завидую я Вам тому, что вы о Гомеле говорите в прошедшем времени ))) Видать, в Москве нынче, на Ильюшу Лагутенко ходите )

[info]cherenkevich

2010-02-16 07:46 pm UTC

[info]dr69

2010-02-17 11:16 am UTC

[info]ksoftware

2010-02-16 07:26 pm UTC

Круть, этого я ждал. Хотелось бы конечно еще вариантов, не всегда же отталкиваются от рисунков.

Только я не понял, почему вертикальный модуль 3 строки? Почему не 5?

[info]cherenkevich

2010-02-16 07:53 pm UTC

Спасибо, Николай!

А что ты подразумеваешь под «еще вариантами». Все равно публикацию ждет финальная ревизия, и если подскажешь, чем дополнить будет еще круче!

А про пояса — фактически никакого обоснования. Если причина объединять n строчек есть — это хорошо. Например, сегодня на работе я делал макет и там в логотипе я сразу увидел модуль. От него я и танцевал в выборе размеров модуля (в том числе и высоты). А здесь, грубо говоря, — от балды. Действительно, здесь нет ничего, чтобы диктовало высоту модуля. Я взял 3, чтобы модуль получался практически квадратным. Иногда мне это кажется удобным.

[info]ksoftware

2010-02-16 08:21 pm UTC

[info]nfrjtdjnbvz

2010-02-16 08:18 pm UTC

Алексей, простите меня за дерзость, мне кажется ваши публикации сильно приобрели бы, смени вы концепцию «как надо строить сетки» на «каким образом я делаю это здесь и сейчас». Ваш пример в этой публикации прекрасен, ваши теоретические выкладки весьма и весьма спорны. Если это мастер-класс — то он хорош, а если это учебник — он плох.

[info]cherenkevich

2010-02-16 08:22 pm UTC

Спасибо, Евгений, за конструктивный комментарий. Я даже как-то и не обратил на это внимание. Действительно.

Я сделаю так. В итоге будет финальная ревизия в PDF, там я переработаю материал исходя из просьб и замечаний. Там я обязательно учту Ваше замечание.

Спасибо!

[info]nashev

2010-02-17 12:29 am UTC

Меня одного смущает, что на примере верхние надписи расположены в нижней строке своих модулей, значки у клуба, магазина и конкурса - с краю соседних модулей, тостер с его подписью - тоже, рамка у "Кстати" в угоду картинке заехала на разделительную?

В продолжении будет написано, где надо по хорошо бы выравнивать по сетке, а где - плюнуть, и нарисовать без её учёта?

[info]cherenkevich

2010-02-17 12:32 am UTC

Нет, здесь на сетку никто не плевал (но иногда, конечно, стоит и плюнуть не нее).

Утром будет продолжение про оптические компенсации — как раз о том, что Вас смутило.

[info]nashev

2010-02-17 12:50 am UTC

[info]plag

2010-02-17 06:30 am UTC

полезно, спасибо!

[info]cherenkevich

2010-02-17 07:48 pm UTC

И Вам спасибо!

[info]rubiroid

2010-02-17 09:01 am UTC

возник вопрос на практике:
как поступать с нумерованными (или не нумерованными) списками... если у нас интерлиньяж обычного текста 18, то и интерлиньяж списка делать 18? хочется больше, но тогда всё вылазит из сетки :(

[info]cherenkevich

2010-02-17 09:04 am UTC

Я делаю 18, но я еще делаю нижний отступ у каждого айтема списка. Отступ делаю либо в высоту строки, либо в полвысоты. Подробнее может быть здесь — http://cherenkevich.livejournal.com/18952.html

[info]rubiroid

2010-02-17 10:40 am UTC

[info]terion_fallen

2010-02-17 03:58 pm UTC

О как. На Пашин тренинг я так и не попал, так хоть вас почитаю)
я, в принципе, и сам кое-что догнал уже, но так хорошо поданная информация очень полезна)
Спасибо :)

[info]terion_fallen

2010-02-17 04:45 pm UTC

Кстати, больше всего буду ждать 6ю часть, т.к. если в принципе проблем с резиновыми сетками я не испытывал, когда экспериментировал, но вот во что уперся, так это в границы блоков.. чертов border сбивает размеры, добавляя к процентам пиксели, а outline, который мог бы спасти ситуацию, не поддерживается рэдмондским выкидышем даже в 8й версии... а вкладывать только ради бордера внутрь еще один блок – некрасиво...

[info]cherenkevich

2010-02-17 07:51 pm UTC

Почему некрасиво? Некрасиво, это когда в браузере все посыпется. У Чикуенка было хорошо сказано (не помню дословно), дескать, Интернет перестал быть средой обитания для гиков, там тусуются простые люди, которым все равно, как ты сверстал, лишь бы это работало.

Не бойтесь добавить лишний контейнер, если в нем есть смысл. Пусть даже этот смысл «технический».

[info]brilliancyeu

2010-02-17 05:18 pm UTC

Замечательная статья, грамотно преподнес информацию. Спасибо.

[info]cherenkevich

2010-02-17 07:51 pm UTC

Спасибо!

[info]exvion

2010-02-17 08:26 pm UTC

Спасибо за статью. Очень познавательно. Одно не понятно, как вы рисовали и раскрашивали сетку, всё вручную или как-то автоматизировали процесс? Что использовали стандартные инструменты фотошопа или дополнительные экшены?
Будет ли выложен psd-файл с сеткой для скачивания?

[info]cherenkevich

2010-02-17 08:29 pm UTC

Будет. Будет целая глава про управление сеткой в Фотошопе и исходник будет опубликован.

[info]steinebel

2010-02-17 11:41 pm UTC

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

p.s. я после того, как размечу макет, очень болезненно реагирую на каждый выступ картинки за «границу» блока (не всегда получается вписать картинку в намеченную ячейку) (:

[info]cherenkevich

2010-02-17 11:47 pm UTC

Спасибо!

А ты третью часть читал? Там аккурат про выступы да про заступы: http://cherenkevich.livejournal.com/38454.html

[info]steinebel

2010-02-17 11:55 pm UTC

[info]cherenkevich

2010-02-17 11:59 pm UTC

[info]peter_the_green

2010-02-19 04:12 am UTC

Ох... немало скепсиса вызывает всё это, но писать долго не хочу.

Сетка нужна для выравнивания по ней, но когда визуальное выравнивание не совпадает с сеточным, то нужно забывать о сеточном (как пример - ваш тостер, который как бы выровнен по сетке, но визуально - не выровнен по блоку текста).

Кроме того, у вас блок с тостером на рис.2.6 один а на рисунке 2.7 - другой. Почему, не объясните?


Это важно, потому что любой кто начнёт "дрочить на сетку" столкнётся с уродствами, которые потом надо будет править ручками.

Я всё это просто к тому, чтобы вы в этих статьях, которые пиплы с удовольствием едят, не забывали напоминать, что сетка - это только ориентир, от неё можно и нужно отходить, полагаясь на здравый смысл и эстетическое ощущение :)

А наоборот - полностью ей следовать - пиздец и дилетанство!

[info]peter_the_green

2010-02-19 04:15 am UTC

прочитал следуйщий эпос)
- угу. Просто пример с тостером навёл на мысль что вы этого говорить не собираетесь

[info]cherenkevich

2010-02-19 06:58 am UTC

[info]peter_the_green

2010-02-19 07:09 am UTC

[info]cherenkevich

2010-02-19 07:12 am UTC

[info]peter_the_green

2010-02-19 07:15 am UTC

[info]cherenkevich

2010-02-19 07:26 am UTC

[info]peter_the_green

2010-02-19 07:31 am UTC

[info]cherenkevich

2010-02-19 07:33 am UTC

[info]peter_the_green

2010-02-19 07:37 am UTC

[info]romarozhkov

2010-02-19 02:16 pm UTC

[info]cherenkevich

2010-02-19 05:06 pm UTC

[info]romarozhkov

2010-02-20 12:25 am UTC

[info]romarozhkov

2010-02-20 12:31 am UTC

[info]dimkant

2010-02-19 11:38 am UTC

спаибо, очень полезно, но ИМХО саму сетку легче делать в люстре

object-> path-> split into grid…
колбась какую хочешь называется

а типографикой для веб заниматься в Fireworks он под это заточен
одно свойство настраивать непропорциональный GRID чего стоит!!!!

т.е. ретушируем в шопе там блики и шушечки всякие рисуем, а собираем макет в фаерворксе

[info]nizatrum

2010-03-17 10:41 pm UTC

Очень полезно и подробно. Человеческое СПАСИБО
Previous
← Ctrl← Alt
  • 1
  • 2
Next
Ctrl →Alt →
Create an Account
Forgot your login or password?
Facebook Twitter More login options
English • Español • Deutsch • Русский…