11 принципов модульных сеток в графическом и веб-дизайне

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

В 2009 году Люк Вроблевски произвел революцию в веб-дизайне с помощью книги «Сначала мобильные! » Ссылаясь на резкий рост мобильного веб-трафика и новые технические возможности телефонов, Люк предложил создавать в первую очередь мобильные версии сайтов. Итак, мы определили оптимальное количество столбцов. Давайте теперь определим межколонное расстояние (gutters) и отступы от края экрана (margins). Регулируя межколонное расстояние и высоту модуля, вы можете добиваться таких свойств как уверенность, легкость, открытость, эффективность. С помощью сетки вы можете задействовать и отразить дополнительные атрибуты бренда, тем самым сделать его идентичность более выраженной.

Лучшие практики в работе с сетками

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

Фактически этот отступ – это свободное пространство от ширины страницы сайта до рамки браузера. Мы задали значение по 100 пикселей с каждой стороны. Стоит помнить, что двенадцатиколоночную сетку рационально использовать, когда структура страницы достаточно сложная. Если же планируется 2-3 заголовка, пять текстовых блоков и изображения, хватит и шестиколоночной, чтобы не затруднять работу. В веб-странице ширина является конечной величиной (и тут вспомнился горизонтальный скролл), высота же ее определяется объемом контента и может иметь произвольный размер. Если дизайнер получил ТЗ и начал работать, страница в разработке многократно разрастается от первоначального размера.

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

На рисунке 5 вы видите отличный пример использования модульной сетки и сознательное нарушение её границ, что в свою очередь смотрится довольно интересно и заметно оживляет весь разворот. В веб-дизайне в основном используются модули размером 12, 16 или 24 px. Некоторые рекомендуют брать за основу межстрочное расстояние, что в принципе тоже логично. Человек издавна пытался понять природу красоты, “разложить” ее на отдельные составные части, “поверить гармонию алгеброй”. Древнейший пример использования модульной сетки – средневековый канон, которым пользовались переписчики книг при разметке книжных страниц.

Существуют и другие варианты сеток, но в этой статье я расскажу о тех, которые сама применяю в работе. Для квадратных модулей это сетки 8, 4 и 5 px или dp. Модульная сетка – это очень полезный инструмент для веб-дизайнера, и многие начинающие пренебрегают им почему-то, а зря. Начинающим дизайнерам рекомендуем устанавливать ширину колонки 64 пикселя и межколонник 24, а под поля отвести все оставшееся.

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

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

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

Как рассчитать сетку

Вам не нужно на самом деле даже идеально пиксель в пиксель выравнивать макет – достаточно ему сказать, что у нас тут отступы вот такие. Если у меня в макете где-то 39 или 31, то это неправильно – нужно исправить на 30. Вдобавок я и шрифты тоже пишу, что у нас есть только такие шрифты. Не смотря модульная сетка для фотошопа на то, что у меня довольно много осей, которые мне каким-то образом понадобились на протяжении всего макета, все равно у меня есть три основные, которые я для верстальщика выделяю. Практические советы и фишки, которые будут полезны при построении сеток в графическом дизайне и веб-дизайне.

• Логично организованный дизайн поддерживает достоверность информации и располагает к ней читателя».
• Сейчас я постараюсь обьяснить что же такое модульная сетка.
• Вам не нужно на самом деле даже идеально пиксель в пиксель выравнивать макет – достаточно ему сказать, что у нас тут отступы вот такие.
• Например, по характеру внутреннего разделения выделяют колонные, модульные, коллажные и совмещённые сетки.
• Исходя из этих параметров, нам и придется создавать размеры макета сайта.
• Попробую объяснить простым языком, в нашем мире достаточно много примеров модульных сеток, к примеру, кирпичная стена в полкирпича она как раз будет модульной сеткой, а кирпич будет модулем.

Обратите внимание, как с помощью вертикального ритма мы задаем систему отступов, чтобы группировать содержимое карточки коллекции и разграничить внимание между двумя карточками. Вы также можете поставить привязку к этой сетке или настроить её по своему желанию. Модуль может быть размером в 2 квадратных метра, 3 на 3 миллиметра или 12 на 12 пикселей.