Практика

1.4 Разработать модульную сетку

Модульная сетка существенно упростит отрисовку дизайн-макетов и последующую верстку шаблонов.

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

Сначала определим следующие параметры шрифта и микромодуля:

  • шрифт: Arial,
  • базовый размер кегля: 12 пикселей,
  • базовая высота строки: 18 пикселей,

и, как следствие,

  • ширина середника: 18 пикселей,
  • размер микромодуля: 18×18 пикселей.

Имя шрифта мы унаследовали от текущих стилей оформления «Кладовки».

Размер кегля в 12 пикселей выбран из-за получаемой сочетаемости компактности набора и удобства его чтения на различных современных устройствах.

Микромодуль

Далее определимся с размерами модуля.

Сначала определим ширину.

Учитывая, что верстка будет «резиновая», а ширина страницы ничем не ограничена, за базис нужно выбрать некий фиксированный по ширине элемент внутри будущей страницы. Пусть это будет картинка с плакатом фильма или обложкой диска.

Размер картинки составляет 133×180 пикселя.

Обложка диска

133 не кратно 18.

Рассчитаем новую ширину, наиболее близкую к оригинальной и кратную 18. При этом, для большей гибкости создаваемой сетки, «впишем» в ширину картинки не один, а два модуля и один середник.

Считаем и получаем ширину картинки в 7 середников, или в 126 пикселей.

Новая ширина картинки

Далее вычитаем из ширины картинки один середник и результат делим пополам. Таким образом, ширина модуля равна 54 пикселям.

Аналогичным образом определим высоту модуля.

Опять же, для гибкости, «вписывая» по высоте в картинку два модуля и один середник, получаем, что высота модуля равна 72 пикселя (4 базовых линии).

4 модуля в одной картинке

С модулем определились.

Теперь, забегая немного вперед, рассмотрим особенности будущей композиции, которые могут повлиять на параметры модульной сетки.

Первый момент.

Краткое описание раздачи будет располагаться справа от обложки. Определим, что описание должно занимать примерно такую же площадь, что и картинка — 2×2 модуля. Пусть между обложкой и описанием будет зазор в один середник.

Обложка с описанием

Обложка и описание вместе образуют блок раздачи.

Второй момент.

Разделим страницу на две основных секции.

Основные секции

В секции «А» будут располагаться: логотип, меню, поиск и другие функциональные элементы.

Секция «Б» будет полностью занята блоками раздач.

Чтобы эффективно использовать и заполнять доступное экранное место в секции «Б», каждый блок раздачи будет выполнен в виде «плавающего» элемента, стремящегося влево.

Определим, что в данном случае пользователь должен считывать блоки построчно.

Порядок считывания раздач

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

Отступы между блоками раздач

Необходимо выполнить два условия:

  1. Горизонтальный отступ между блоками h должен быть больше, чем середник между картинкой и описанием раздачи.
  2. Для сохранения задуманного порядка считывания блоков, горизонтальный отступ между блоками h должен быть меньше, чем вертикальный отступ v.

Исходя из условий, определим, что

  • горизонтальный отступ h равен 36 пикселям (2 середника),
  • а вертикальный отступ v — 54 пикселям (3 базовых линии).

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

Подготавливаем паттерн.

Паттерн

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

Макет, залитый паттерном

Сдвигаем позицию начала заливки относительно начала координат для получения нужных отступов от края макета до первых модулей.

Подбираем ширину и высоту макета (получилось 954 и 755 пикселей, соответственно).

Макет с сеткой

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

Реклама
Стандартный

4 ответ. на "1.4 Разработать модульную сетку"

  1. Фёдор:

    Подскажите пожалуйста сервис, с помощью которого вы сделали такую сетку. Есть хороший http://modulargrid.org, но он как то ограничен в функционале

    • К сожалению, я пока не встречал сервисы, способные генерировать аритмичные модульные сетки. Тоже самое могу сказать и про плагины к фотошопу.

      Такую сетку пришлось разрабатывать самостоятельно в фотошопе.

      • Фёдор:

        Скажите, вот лично вы всегда пользуетесь горизонтальной сеткой при разработке дизайна? Я не имею большого опыта в веб дизайне, поэтому часто мучаюсь вопросами типа имеет ли смысл все выстраивать по сетке, соблюдать одинаковые расстояния между блоками/объектами и т.д. Например взять сайт такого типа https://st.fl.ru/users/nid/upload/f_267525800f42f696.jpg. Что в данном случае будет ровняться по сетке, и что будет ровняться на глаз? Я думаю что в любом случае в таких случаях сетка будет как то ломаться.

        • Да, я всегда использую сетку с вертикальным и горизонтальным ритмом.

          Все выстраивать по сетке не обязательно. Помните, что сетка – это всего лишь инструмент. Она скорее рекомендует и подсказывает позицию элементам, но не диктует ее.

          Сетка позволяет решить задачу геометрической гармонии. Но есть еще и оптическая гармония. Это когда «на глаз» лучше немного отойти от сетки, чтобы скомпенсировать отступы, например. Доверяйте собственному чутью.

          В конечном счете выбор решения всегда за вами.

          Не стоит примерять сетку на готовый дизайн, который создавался без ее использования. Можно, конечно, повыстраивать колонки и вертикальный ритм по вашему примеру, но зачем?

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

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход /  Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход /  Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход /  Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход /  Изменить )

Connecting to %s