Пример модульной сетки
Чуть раньше я обещала показать как создавалась модульная сетка. В этой статье я расскажу о порядке действий при создании модульной сетки веб-страницы. Моих действий. Демонстрируя как я создавала пример модульной сетки.
- Для начала определяем с какими размерами экрана будем работать: 640*480px. Альбомная ориентация.
- Затем подумаем о минимальном наборе элементов на странице. По крайней мере должен быть домен, и, возможно, логотип.
Предположим, логотип все-таки будет и будет самым мелким элементом. Ориентировочно примем его размер равным 80*80. Разбивая экран на клетки, определяем сколько полных клеток может вместить плоскость по горизонтали и вертикали. По горизонтали уложилось 640:80=8 клеток, а по вертикали — 480:80=6 клеток. За 100% принимаем ширину экрана.
Проверим, окажутся ли зрительные центры в зоне модуля. По горизонтали 3*80=240, следовательно, зрительный центр попадает прямо на границу модуля, что не есть хорошо. И нужно ширину модуля уменьшать или увеличивать.
Итак, зрительный центр располагается в точке с координатами по горизонтали 240, по вертикали — 180. Чтобы он попал в модуль, верхняя граница модуля должна пропорционально отстоять от него. Сделаем небольшой расчет, поместив его в таблицу.
| По горизонтали | |||
|---|---|---|---|
| Зрительный центр ( ЗЦ ) | 240 ( 3 * 640 /8 ) | 640 : 5 = 128 | 640 : 10 = 64 |
| Ширина модуля | 80 | 128 | 192 |
| Граница модуля до ЗЦ | 240 СОВПАДЕНИЕ ГРАНИЦЫ | ||
| Граница модуля после ЗЦ | 320 | 256 СМЕЩЕНИЕ | 256 ОПТИМАЛЬНО |
| По вертикали | |||
| Зрительный центр ( ЗЦ ) | 180 ( 480 * 3/ 8 ) | ||
| Высота модуля | 60 | 480 : 5 = 96 | 480 : 4 = 120 |
| Граница модуля до ЗЦ | 180 | 96 | 120 |
| Граница модуля после ЗЦ | 240 СОВПАДЕНИЕ ГРАНИЦЫ | 192 СМЕЩЕНИЕ | 240 ОПТИМАЛЬНО |
Видим, оптимальный размер модуля 64*120.
По ширине переведем пиксели в проценты: 64px=10%.
Высота элементов используется не так часто. Тем не менее она бывает нужна. Высоту я определяю в относительных единицах em. Потому что высота, выраженная в процентах, не всегда правильно работает. Приблизительно можно применять соотношение 16px=1em.
Получаем высоту шага 7,5em.
Полный размер модуля тогда 10%* 7,5em.
Теперь изобразим модульную сетку:
рис.1. Пример модульной сетки для альбомной ориентации листа
Видим, что такая модульная сетка обеспечит точное расположение левых зрительных центров, но правые будут все-таки смещены. Если нужно обеспечить точное размещение правых или обоих, изменяем модуль, пока ЗЦ не будут расположены должным образом.
Если расположить контент в границах 3 модуля — 7 модулей, ЗЦ попадают в область контента и ничего более менять не нужно. Модуль поможет легко ориентировать страницу на экранах разной ширины.
Попробуем разметить экран портретной ориентации размером 480*640.
ЗЦ левый горизонтальный 480*3/8=180
ЗЦ правый горизонтальный 480-180=300
ЗЦ верхний вертикальный 640*3/8=240
ЗЦ нижний вертикальный 640-240=400
Шаг модуля по горизонтали 120
по вертикали 64.
Получим модульную сетку с шагом модуля 120*64.(рис.2)
рис.2 Модульная сетка для экрана портретной ориентации
Теперь можно варьировать модули различным образом, получая макет. (рис.3). Например, объединив 8 модулей, получим центральную область контента.
Применяя эти несложные приемы, можно создать образцы различных модульных сеток, а затем на их основе строить шаблоны. Прием облегчает взаимопонимание между дизайнером и верстальщиком. Если дизайнер использует модульную сетку и указывает размеры модуля, хотя бы и в абсолютных единицах, верстальщик легко воплотит идеи в коде.
Родионова Галина2018-03-16