Модульная сетка своими руками

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

Сетка? Зачем она нужна?

Люди всегда интуитивно пользовались чувством пропорции. Это легко подтвердить, потому что уже с самых ранних цивилизаций можно увидеть связь пропорций с измерением и конструированием, размещением предметов относительно друг друга в пространстве. Сетками, как разметкой, системой опорных линий, пользовались для составления планов строительства и разбивки территории, с помощью нее художники Возрождения увеличивали свои эскизы, а в картографии сетки были координатной основой, по которой составлялись военные планы.

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

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

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

Какими бывают сетки

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

Блочная или манускриптная сетка — самый простой вид сетки, которая, как правило, используется в печатных изданиях. Обычно такая сетка представляет собой стандартизированный прямоугольник, который содержит контент на странице или на экране.

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

Модульная сетка характеризуется наличием как вертикального членения, так и горизонтального. То, что образуется на пересечениях, есть модуль — прямоугольник с заданной высотой и шириной, который лежит в основе композиции. Сетка определяет как в целом будет выглядеть макет и где будут расположены отдельные элементы: текстовые блоки, заголовки, изображения.

Иерархическая — сетка с интуитивным размещением блоков, которая фокусируется на пропорциях и визуальном весе элементов в дизайне. Этот тип сетки часто используется, когда контент не стандартизированный и не однообразный. Часто встречается для бизнес доменов, связанных с модой, фотографией, искусством.

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

Принципы построения модульной сетки

Модульная сетка — это инструмент, но не метод, поэтому прежде чем создавать сетку, необходимо сделать черновой макет страницы, продумать элементы, которые могут использоваться, и только потом переходить к её созданию. Чтобы построить модульную сетку, необходимо последовательно построить сначала базовую, потом применить к ней колоночную и, задав размер модуля, мы получим дизайнерскую, т.е. вашу разработанную под конкретный проект сетку.

И так, начнем с базовой сетки. Она напоминает миллиметровую бумагу. Она позволит перемещать самые мелкие элементы макета, сохраняя все расстояния между ними равными и единообразными. Шаг сетки зависит от неделимых элементов (атомов) макета. Ими могут быть базовый шрифт и высота строки, радио-кнопка, чекбокс, минимальное расстояние между видимыми блоками контента, например, между фотографиями в галерее или карточками товаров.

Источник

Создаем свою модульную сетку по-быстрому.

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

Готовые рабочие среды для модульных сеток. Преимущества и недостатки.

Существует достаточно большое количество уже готовых к использованию рабочих сред для организации модульных сеток (например, 960.gs). такие готовые решения помогают ускорить разработку. Не надо думать над тем, как организовать колонки. Просто подключаем уже готовую систему к проекту, а освободившееся время посвящаем продумыванию дизайна.

Однако такие готовые решения имеют и недостатки. Для начинающих разработчиков большинство из них представляют достаточно громоздкие структуры кода и простота создания шаблона часто теряется за поиском наиболее подходящего стиля для элемента HTML.

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

Ну и вдобавок, обобщенные расплывчатые имена классов могут смутить других членов вашей команды, которые являются приверженцами строгой семантики кода.

Строим свою модульную сетку.

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

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

Для такого типа систем логично будет отказаться от любых рабочих сред. Но вполне удобно будет построить вместо них подобие системы для построения колонок на лету.

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

Создаем колонки в CSS

Если вы новичок в деле создания шаблонов CSS, то создание многоколоночного шаблона может показаться для вас пугающим процессом. Очевидно, что если бы он был простым, то не существовало столько различных библиотек.

Допустим, вы хотите установить четыре колонки. Первое, что придется взять в расчет — ширина. Например, наш контейнер имеет ширину 900 px. Если разделить 900 px на 4 колонки, то получим 225 px на одну колонку. Все просто! Но такие колонки будут прилипать друг к другу. Поэтому между ними должны быть отступы. Но отступы раздуют наш шаблон и вытолкнут колонки за пределы контейнера.

Нам необходимо принять во внимание ширину отступов между колонками. Допустим, первая, вторая и третья колонки имеют отступ справа равный 3 px (свойство margin-right ). Тогда три отступа будут занимать 9 px, а ширина колонки будет (900 px — 9 px)/4=225.75 px.

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

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

Используем проценты

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

Вместо того, чтобы держать все вычисления в голове можно воспользоваться инструментом для вычислений. Существует достаточно удобный онлайновый программируемый калькулятор, который вполне подходит для решения таких простых задач — Instacalc.

Instacalc позволяет создавать формулы для повторных вычислений. Для наших расчетов создан специальный калькулятор (вы можете создать свой, если пожелаете), в котором можно изменять количество колонок, величину отступа между колонками и получать рассчитанные значения для ширины колонок. Для ширины используются проценты, 100% — ширина родительского контейнера.

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

Построим нашу сетку

Достаточно теории. Ничто не поможет лучше понять материал, чем практическое решение насущного вопроса.

Допустим мы хотим расположить наш текст на странице в четыре колонки Код HTML будет достаточно простым. Нужно поместить содержание каждой колонки в элемент div , которому будет присваиваться определенный класс. Для последней колонки используется также класс last, который помогает отключить ненужные отступы.

Теперь перейдем к CSS. Сначала установим ширину контейнера и свойство overflow: hidden . Затем зададим стиль класса с помощью результатов проделанных вычислений. Они хранятся в калькуляторе.

Вместо большой библиотеки у нас задано несколько строчек кода, которые также создают четыре колонки текста.

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

Комбинируем колонки

А что если нам нужно будет две или несколько колонок в одну широкую? Нужно произвести расчеты и создать соответствующие классы, которые потом будут применяться к элементам div .

В калькуляторе есть формулы для расчета двух и трех объединенных колонок.

HTML код будет очень похожим на предыдущий. Но содержание последней колонки заключено в элемент с div классом широкой колонки.

В коде CSS надо добавить класс для широкой колонки:

Наш код в браузере будет выглядеть следующим образом:

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

Заключение

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

Так можно строить и более сложные модульные сетки. Причем их создание не требует значительных усилий со стороны разработчика.

5 последних уроков рубрики «CSS»

• 

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

Раскрывающаяся навигация

Экспериментальный скрипт раскрывающейся навигации.

Источник

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

Приветствую Вас друзья.

Наконец я добрался и до сайта все как-то времени маловато, вот решил написать статью на тему модульных сеток в веб-дизайне, может, кому информация будет полезна и интересна. Модульная сетка это очень полезный инструмент для веб-дизайнера, и многие начинающие пренебрегают им почему-то, а зря.

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

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

Что такое модульная сетка?

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

Модулем можно назвать единицу измерения, создаваемую для придания соразмерности и пропорциональности.

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

Плитка в ванной комнате, тоже, вся стена модульная сетка (при условии, что вся плитка одного размера), а одна плитка это модуль или единица измерения как в нашем случае.

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

Для чего нужна сетка, и какие задачи она выполняет?

Сетка необходима для быстрой разработки макета, прототипа, дизайна сайта или приложения. Она значительно экономит время на разработку, структурирование, шаблонизирование макета. Убирает необходимость рутинной работы по позиционированию и выравниванию блоков дизайна. Упрощает работу как дизайнеру, верстальщику так и команде разработчиков в целом.

• Ускоряет процесс разработки. Нам требуется гораздо меньше времени на подборку места для блоков в макете.
• Помогает в позиционирование. Все элементы выравниваются относительно друг друга по сетке, и позиционирование занимает минимум времени.
• Позволяет шаблонизировать. Разработав модульную сетку, мы создаем шаблонную основу для всего проекта, как при разработке, так и для решений на будущее. А также предоставляем возможности быстрой модификации.
• Исключает ошибки. Сетка позволяет избежать ряда самых обычных ошибок с позиционированием, структурированием, размерами и отступами между блоков.
• Является единой системой пропорций. Благодаря модулям все элементы в макете пропорциональны и соизмеримы между собой.
• Структурирует и упорядочивает. Благодаря модульной сетке макет становится более структурированный и упорядоченный, дизайн воспринимается более комфортным.
• Приводит к более эстетичному виду. Четкая и логическая структура получаемого сайта придает более эстетичный вид.
• Помогает в дальнейшей разработке другим участникам проекта. Дизайн, построенный посредством модульной системы верстки, верстать значительно легче, нежели макет, построенный без сетки. Сетка дает верстальщику стандартизацию решений, ускоряет процесс верстки. Позволяет легче работать большой команде над масштабными проектами. А так же позволяет гораздо быстрее разобраться в макете новым разработчикам участникам проекта. Что в свою очередь приводит к получению более целостного результата работы.

Строим модульную сетку

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

Минимальным разрешением чаще всего принимаются разрешения монитора в 1024х768 и 1280х720 пикселей. Конечно, могут быть выбраны и другие разрешения, все как всегда зависит от стоящей перед Вами задачи. Исходя из этих параметров, нам и придется создавать размеры макета сайта. Из них нам наиболее важна ширина, так как она зачастую фиксирована у сайтов, а высота наоборот варьирует из-за наполнения сайта.

В данном случае я создам холст с шириной в 1000 пикселей под минимальное разрешение в 1024х768 пикселей. Контентную часть сделаю в 960 пикселей, по 20 пикселей отступы по краям (ширина наших полей).

Создаем шрифтовую сетку

Первым делом мы создаем шрифтовую сетку. Выбираем одну высоту строки для всего макета сайта. Разлиновываем его как тетрадь в пропись, на которой у нас будут располагаться все тексты, списки, иллюстрации, заголовки, абзацы и прочие плашки. Высоту строки я создаю обычно в 18 пикселей, но может быть и другой размер все зависит от выбранного кегля и шрифта.

Межстрочный интервал ( в css line‑height ) можно рассчитать двумя способами:

1. Размер основного шрифта для контента (16пт.) / 2 + размер основного шрифта для контента (16пт.) = 24пт.
2. Размер основного шрифта для контента (16пт.) x 1.5 = 24пт.

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

Теперь самое интересное, нам необходимо создать колоночную сетку. Ширина колонки определяет ширину нашего модуля. Итак, нам необходимо определить эту самую ширину, как это можно сделать.

1. Если на сайте планируется присутствие блока с постоянной величиной (баннера, видео, иллюстрации и т.д.). Эти блоки имеют фиксированные размеры и зачастую включают в себя несколько модулей. Таким образом, зная их размер, мы можем с легкостью определить ширину модуля, достаточно понимать, что блок должен находиться в пределах ширины модулей.
2. Второй способ это когда у Вас есть конкретные задачи, на которые можно опираться. Например, по задаче стоит расположить в линию на всю ширину тела сайта определенное количество блоков, скажем 6. Тогда, зная этот параметр, мы можем прикинуть, что один такой блок включает в себя два модуля по ширине. Соответственно нам подойдет 12 колоночная сетка.

Дополнительно нам необходимо определить расстояние между модулями или колонками. Я в основном использую размер строки шрифтовой сетки, в данном случае это 18 пикселей.

Таким образом, у нас получается ширина модуля равная 63,5 округлим до 63 пикселей. У нас остается по 0,5 пикселей на каждый модуль их у нас 12 итого 6 пикселей, раскидаем их на поля по 3 пикселя, тем самым наши поля увеличатся и станут равные 23 пикселям, а не 20, соответственно и контентная часть станет равная 954 пикс.

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

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

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

Создаем прототип макета

Теперь на небольшом примере я покажу, как эту сетку можно использовать. Очень часто рисую первым делом эскиз на бумаге, так просто получается быстрее набросать варианты исходя из поставленной задачи, а когда уже есть некая структура, переношу ее на сетку, делаю прототип сайта. Создавая прототип, где необходимо объединяю по несколько модулей в регионы и накидываю плашками все блоки.

Оформляем, детализируем, прорабатываем

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

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

Макет делался исключительно для данной статьи. Для того чтобы показать на примере, как использовать модульную сетку в веб-дизайне. Хочется заметить, что сетку можно использовать в комплексе с направляющими, данный метод еще более эффективен.

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

Ниже можно ознакомиться с пошаговым процессом создания дизайна от прототипа до готового макета сайта из этой статьи.

Видео процесс по созданию дизайна сайта с использованием модульной сетки:

Источник