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


Содержание

Анатомия логотипа: изучаем модульную сетку

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

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

Модульная сетка (МС) — это набор направляющих, которые образуют «каркас» будущего логотипа. Минимальная единица сетки — «модуль» — может быть совершенно разной формы и размера. Так, логотип Twitter образован окружностями разных диаметров:

Логотип Twitter и его модульная сетка

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

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

Благодаря модульной сетке, логотип сайта Twitter выглядит аккуратным, правильным, гармоничным.

Почему модульная сетка — это круто

Если взглянуть на запоминающиеся фирменные знаки, можно заметить, что у них есть определенная структура. Внешний вид логотипа Volkswagen хоть и не имеет «кирпичиков»-модулей, но зато подчиняется геометрическим правилам:

Логотип Volkswagen

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

Страница, в которой нет никакой модульной сетки

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

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

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

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

Диагональная модульная сетка

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

Модульная сетка логотипа Budfox

Сложный или простой — логотип может быть любым. Даже текстовый лого «Газпрома» имеет свою сетку. В ней модулем является квадрат шириной «x», а все элементы расположены пропорционально с ним.

Логотип «Газпром»

Какие существуют модульные сетки

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

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

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

Логотип Nudge создан на основе прямоугольной МС с применением персонального математического подхода. Так, ширина внутренней части равна межбуквенному интервалу. «Хвостики» у символов d и g срезаны под углом 45°.

Логотип nudge на основе прямоугольной сетки

Логотип Toyota основан на прямоугольниках со сторонами a и b. В эту сетку вписаны 3 овала. Пересечение линий овалов совпадает с пересечением прямоугольников — они образуют зрительные центры, то есть те места, в которые в первую очередь будет смотреть человек.


Логотип Toyota

Однако, такая структурность — скорее редкость, чем правило. Гораздо чаще встречаются логотипы на основе МС, состоящей из окружностей или комбинированной сетки.

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

Логотип Pepsi

Такая модульная сетка позволяет создавать запоминающиеся логотипы в стиле «минимализм».

Логотип в минималистичном стиле — «Енот»

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

Логотип Apple

Пропорция Фибоначчи («золотое сечение») — соотношение между двумя величинами 1:1,618. Широко используется во всех видах дизайна, так композиция, построенная на основе этого соотношения, лучше всего считывается человеческим глазом.

Пропорция Фибоначчи

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

Логотип Бековского пищекомбината

Комбинированные (или воздушные) модульные сетки обычно не заметны глазу. Логотипы на их основе очень легки, красивы и универсальны. Сетка в них играет второстепенную роль. Она определяет расстояние и пробелы между различными элементами, иногда — высоту логотипа, но форма лого не привязана к МС. Прекрасный пример — работа дизайнера Davit Chanadiri, который создает логотипы из пересечения окружностей.

Логотип дизайнера Davit Chanadiri

Эффектно в комбинированных модульных сетках выглядит пропорция Фибоначчи и грамотное использование «негативного пространства».

Логотип шведской дизайн-студии Helvetic Brands

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

Симметрия — всегда красиво. Симметричный баланс означает, что вес композиции равномерно распределен по отношению к оси симметрии. Симметричные логотипы выглядят более спокойными и надежными.

Симметричное и асимме тричное расположение элементов

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

Симметричный и асимме тричный логотип

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

В каких случаях модульная сетка будет излишней

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

Логотип состоит из элементов, не связанных между собой

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

Логотипы, в которых модульная сетка нужна и не нужна

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

«Демонстрация любых схем лишена смысла, когда итоговый эмоциональный образ логотипа заслоняет собой всю геометрию. В примере ниже в первую очередь считывается медведь на велосипеде. Именно он имеет эмоциональное значение. Зритель не станет заморачиваться, насколько совершенно попа медведя круглая и чему равен её диаметр»Иван Богданов, «Бюро Горбунова».

Случай, когда геометричность — вторична


Если геометрические формы сочетаются с плавными, гибкими и кривыми линиями или отрезками — использование МС также будет неуместно. В знаке качества СССР гармония элементов основана на размерах, углах и пересечениях, а не на соотношениях геометрических форм.

Знак качества СССР

7 причин использовать модульную сетку при разработке логотипа

  1. Сетка помогает организовать рабочий процесс.
  2. Ускоряет разработку логотипа.
  3. Позволяет создать симметричный или асимметричный дизайн.
  4. Полезна для установки расстояния между буквами.
  5. Позволяет обозначить «безопасную зону» — расстояние от логотипа до других элементов.
  6. Акцентирует внимание на определенной части логотипа.
  7. Помогает достичь визуальной гармонии.

Заключение

Модульная сетка — полезный инструмент при разработке логотипа сайта. С момента выхода в 1981 году книги Йозефа Мюллера-Брокмана «Модульные системы в графическом дизайне» интерес к сеткам то угасает, то вновь разгорается. Они применяются везде: для разработки дизайна интернет-магазина, для определения расположения различных элементов оформления сайта, в логотипах, типографике, даже при проектировании интерфейсов. И хотя многие классные логотипы начинаются с наброска на листочке, самый верный способ получить эффектный логотип — обратиться в профессиональную студию.

Модульные сетки в веб-дизайне

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

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

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

Рассмотрим два макеты страниц представлена ​​на рисунке ниже:

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

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

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

Использование сетки не означает, что ваш дизайн будет иметь скучный дизайн. Хороший дизайнер должен знать и уметь применять основные правила использования сетки, но это не означает, что он не может нарушать правила.

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

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

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

Стоит отметить, что существует два способа создания сетки шаблона:

Способ №1: Создайте свою собственную сетку

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

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

Возможно, в этом вам помогут следующие статьи:

Вот несколько примеров сетей, созданных в Photoshop с помощью направляющих (View> New Guide):

Плагины для создания сеток в Фотошопе

1. GuideGuide — полезный плагин для дизайнеров, которые вручную чертят сетки. Есть версии для Photoshop CS4 и CS5+. Подробнее читайте здесь.

4. Скрипт для создания сетки из шейпов в Фотошопе

Способ №2: Скачайте готовый шаблон сетки

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


Сетки фиксированной ширины

1. 960.gs — пожалуй, самый популярный инструмент для создания сеток. О том, как пользоваться этим фреймворком читайте здесь.

3. Modular Grid Pattern (о том, как использовать этот сервис, читайте здесь )

5. Grid System Generator -генератор таких популярных сеток, как 960.gs, Golden Grid, 1Kb Grid, Simple Grid/ установите нужные параметры и нажмите «GENERATE».

6. Grid Calculator — калькулятор, который позволяет рассчитать параметры сетки.

Сетки для резиновых/ адаптивных сайтов

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

Цукерберг рекомендует:  Как изучить четыре профессии на одном факультете GU

1. Gridpak — генератор адаптивной сетки

2. Fluid grid calculator — сервис, который позволяет создать резиновую сетки. Введите параметры и получите готовый код.

3. Fluid Baseline Grid — резиновая сетка с базовой линией

Учимся работать с сеткой

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

Смотрите демонстрацию

Часть1 — рисуем макет в Фотошопе

Часть3 — натягиваем на WordPress

Полезные статьи и ресурсы:

  • Сеточная система вёрстки — принципы для полиграфии
  • Сеточный дизайн. Выравниваем сайт — статья для верстальщиков
  • Модульная сетка в веб — статья для верстальщиков
  • Grids Are Good – презентация (PDF-документ) на английском языке
  • Thegrids — русскоязычный сайт о сетках
  • The Grid System — англоязычный сайт о сетках
  • Что такое визуальная организация?

При написании статьи использованы материалы из :

Модульные сетки в веб дизайне

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

Модульные сетки в веб дизайне – это условный каркас проекта, позволяющий создать композицию и ритм сайта. Пример использования сеток вы можете посмотреть на сайте 960.gs. Прокрутите сайт до примеров проектов, нажмите кнопку “Show grid” (показать сетку) и вы увидите, как по ней “легли” все фотографии и тексты.

Для чего нужны модульные сетки в веб дизайне?


Модульные сетки в веб дизайне, позволяют упорядочить и структурировано расположить весь объем вашей информации. Таким образом, используя их, мы можем из хаоса и груды информации создать порядок.
Ярким примером хаотичного размещения информации является фейковый сайт avos.me, на котором все элементы носят ситуативный характер, т.е. расположены не по каким-то правилам и не в определенной последовательности, а как попало. Такой продукт не может вызывать доверие со стороны пользователя, т.к. не может качественно донести до него всю суть.
Представьте, что вы столкнетесь с похожим хаосом и беспорядком в интернет-магазине. Каковы будут ваши действия? Скорее всего вы закроете сайт и забудете о нем, потому что он не сможет решить ваши задачи.

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

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

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

В другой раз мы рассмотрим виды модульных сеток. Подписывайся, а то все пропустишь! :)

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

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

Что это вообще
такое?

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

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

Обратите внимание на один из эскизов развития Манхэттена 1807 года, который подчиняется строгой сетке улиц, проходящих с запада на восток и с севера на юг

Зачем нужны сетки?

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

Следуя новым веянием, в начале 1960-х художник-оформитель Питер Палаццо обновил дизайн газеты New York Herald Tribune. В 1966-м художественный редактор Джанет Коллинз ввела новую верстку в лондонской Times. Оба этих преобразования показали работникам индустрии, что единый стиль оформления повышает качество взаимодействия читателей с изданием. Газетчики и редакции журналов быстро поняли необходимость сеток и начали применять их в своей практике.

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

Йозеф Мюллер-Брокманн в своем пособии «Модульные системы в графическом дизайне» пишет о сетках так:

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

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

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

Мы собрали наиболее распространенные и ставшие уже «классическими» образцы, знакомство с которыми поможет лучше понять модульное проектирование:

Квадратная сетка

Простейшая сетка, которая легла в основу модульной системы, состояла из квадратов и была похожа на обычную разграфленную таблицу. Она начала использоваться уже в конце первой четверти ХХ века. Дизайнеры-типографы из Цюриха и Базеля усовершенствовали ее в послевоенные годы, что совпало со скачком интереса к Гельветике и подобным ей шрифтам, породив школу «швейцарской типографики».

На примере: Роберт Бюхлер, 1914 г.
Источник: Thinking Form

Cетки Макса Билла

Первым опытом применения сетки в книжном деле была разработанная Максом Биллом система для книги «Die Neue Architektur». В этой книге, вышедшей в 1940 году, Альфред Рот применил деление страницы на девять горизонтальных модулей. Они позволили свободно располагать иллюстрации и размещать на них текст на трех языках. Несколькими годами ранее, опираясь на идеи «новой типографики» Баухауса, Билл использовал шестимодульную сетку в своем знаменитом плакате «Negerkunst», созданном для выставки южноафриканской наскальной живописи в 1931 году.

НА ПРИМЕРЕ: Макс Билл, «Die Neue Architektur», 1940 г.
Источник: Pinterest

12-колоночная сетка Вилли Флекхауза

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

На примере: Журнал Twen, февраль 1970 г. Источник: VFiles

Многослойная сетка Карла Герстнера


Примером радикального усложнения может служить сетка Карла Герстнера, разработанная для журнала Capital. Аллен Херлберт описывает ее так: «Фактически она представляет собой шестиколонник с наложенным на него четырехколонником. Эта сетка также дает возможность выбрать шесть, четыре, три или две колонки, но в придачу предусматривает еще и возможность оригинального пятиколонного макета. Такая сетка требует тщательного изучения, и художнику-оформителю придется немало потрудиться, прежде чем он сможет свободно и творчески ею пользоваться».

НА ПРИМЕРЕ: Журнал Capital
Источник: Flat File

Есть ли какие-то альтернативы сеткам?

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

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

С распространением мобильных устройств многие приемы пришлось пересмотреть. Дизайнеры поняли, что сложная верстка плохо смотрится на экране смартфона, а броские баннеры с анимацией могут раздражать пользователя, который не может рассмотреть их в маленьком масштабе. Кроме того, от некоторых элементов пришлось отказаться из-за медленной скорости загрузки. Для создания адаптивных веб-сайтов, которые легко отображаются не только на компьютерах, но и на планшетах и смартфонах, многие стали использовать колоночные сетки (они используются и в Setka Editor). По-прежнему есть дизайнеры, которые не используют этот метод. Они считают, что сетки сильно ограничивают возможности, но мы советуем все равно разобраться в сетках — лучше понимать правила, прежде чем нарушать их.

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

Модульные сетки в дизайне сайтов. За и Против.

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

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

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

Вот пример стандартной газеты с 5 колончатой модульной сеткой.

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

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

Вот примеры часто используемых и достаточно примитивных сеток.

На сайтах, которые хотят привлечь посетителя эксклюзивным дизайном, придется проявить фантазию и придумать свою модульную сетку. Или так замаскировать стандартную своей «изюминкой», что никто и не догадается, что лежит в основе.

Давайте рассмотрим основные преимущества использования модульной сетки в дизайне сайта.

1. Простота. Никто, думаю, не будет спорить, что одним из преимуществ использования модульной сетки в построении контента сайта — является простота восприятия такой информации. Примером двух колонной модульной сетки может быть сайт, который вы читаете в данный момент — «Дизайн в жизни».

2. Строгая упорядоченность, которая становится незаменимой в крупных проектах, например, в интернет-магазинах.

3. Адаптивность — возможность подстроиться под любой экран. Это, кстати говоря, существенный аргумент в пользу модульных сеток.

В данном случае удобно использовать 12 колонную модульную сетку, так как число 12 делится на 2, 3, 4 и такой дизайн легко подстроить под смартфоны, планшеты и десктопы. Это видно на следующем примере.

Адаптивность дизайна, подстроенного под данную сетку может быть достигнута за счет использования так называемых стяжек (элементов, которые будут масштабироваться в зависимости от изменения разрешения экрана, например, слайдер) и карточек (элементов с контентом, которые будут перестраиваться в зависимости от изменения разрешения экрана). Рассмотрим это на примере фрагмента сайта популярного фитнес приложения «Мой тренер» — Mycoach-app.ru

Здесь карточки — это 3 элемента с описанием преимуществ приложения, заметьте, что они не заключены в строгий прямоугольник. Ведь это и не обязательно. Перетяжка — это слайдер. И вот как будет выглядеть фрагмент сайта в адаптиве.

Цукерберг рекомендует:  Раскрывающееся меню картинок на jQuery

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

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

Теперь давайте рассмотрим недостатки использования модульных сеток.

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

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

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

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


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

Это, пожалуй основные доводы противников модульных сеток.

А есть ли альтернатива? — Спросите вы. Есть! Сейчас широко применяется теория струн, которая призвана избавить дизайнеров от стереотипов использования модульных сеток, которые чаще всего строятся на основании применения правила золотого сечения, о котором я уже рассказывала в своей статье « Главное — композиция ». Многие считают, что в современном мире оно уже не имеет такой актуальности.

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

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

Правильный дизайн сайта – создание модульной сетки

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

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

Алгоритм работы.

Начало построения – определение вертикального ритма. Для этого необходимо задать и просчитать базовую высоту строки (интерлиньяж) и базовый размер шрифта (кегль). При фиксированном размере носителя и готовом ключевом контенте можно сразу задать межстрочный интервал. Если же такой информации нет – нужно определить размер шрифта. Базовый кегль необходимо брать таким, которым будет набираться основная масса текста (как правило используется 13-16 pt), а интерлиньяж составит 150-200% от кегля. Иногда и более. Так, вертикальный ритм определен и можно разлиновать макет.

Поняли, что пора инвестировать в создание бренда?

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

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

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

Вот и готова модульная сетка. Что же такое модуль? Это простая пропорция. Его высота равна нескольким строкам, а ширина – ширине колонки. Однако не запрещено строить сложную структуру. Модуль можно вытянуть, растянуть по горизонтали или вертикали, можно чередовать разные по высоте модули. Если в этом есть логика и закономерность, сохраняющая вертикальный ритм.

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

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

Адаптивность

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

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

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

В начале, разберемся с понятием, что же такое модульная сетка и для чего она применяется в web-дизайне.

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

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

Преимущества использования модульной сетки

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

  5. Исключение стандартных ошибок. Исчезнут проблемы с неправильными отступами и размерами между блоками и т.п.
  6. Эстетичный вид. Дизайн макета приобретает красивый, аккуратный и удобный для работы вид.
  7. Стандарт. Вы в самом начале макета закладываете стандарт в дизайне, что облегчает дальнейшую разработку для других участников проекта.

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

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

1. 960 Grid System

Многим известный сайт, позволяющий скачать сетку размером до 960px для большинства популярных графических редакторов: Acorn, Fireworks, Flash, InDesign, GIMP, Inkscape, Illustrator, OmniGraffle, Photoshop, QuarkXPress, Visio, Exp Design.

Вашему вниманию предлагается 2 варианта сеток:

  1. Разделение участков на 12 столбцов по 60px в ширину.
  2. Разделение участков на 16 столбцов по 40px в ширину.

Каждая колонка имеет отступ по 10px слева и справа. В сумме ширина между столбцами составляет 20px. Здесь вы можете посмотреть пример 12-ти и 16-тиколонной сетки.

2. Grid Calculator

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

3. Modular Grid Pattern

На данном сайте вы можете создать сетки под любые разрешения экрана. Также здесь доступен плагин для модульной сетки в программе Photoshop. Минимальные требования плагина Adobe Photoshop CS5.1.

Для тех кто хочет использовать сетку прямо в Photoshop и программно управлять размерами — еще одно бесплатное и интересное расширение для Photoshop от другого разработчика.

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

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

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

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

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

1. Определяем функциональность

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

Выявляем самые сложные и важные страницы. Именно с них начнется работа. Формируем для них список функциональности и сортируем его по приоритетам.

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

Это наше «лего» — кубики, которые высыпали горкой из ведерка. Теперь осталось только их взять из списка и поставить на нужное место.

2. Эскиз

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

Переносим наш список функциональности, блок за блоком. Экспериментируем, смело рисуем, перебираем варианты, ищем оптимальное решение. Рисуем, черкаем. Бракуем, не жалея. Благо, схематичное выражение мыслей на бумаге занимает буквально минуты.


Вот что получилось у меня:

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

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

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

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

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

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

Возможно, некоторым это покажется удивительным, но в веб-дизайне творчество напрямую связано с использованием бесчисленного числа технических приемов, элементов и знаний. Грамотное использование сетки — не исключение. Рядовым заказчикам сайтов знать такие тонкости ни к чему. Главное – выбрать подрядчика, который все это знает. Как это сделать?

Например, при помощи Рейтинга креативности веб-студий. В нем уже учтены победы компаний в таких престижных конкурсах сайтов как «Рейтинг Рунета», «Золотой сайт», Awwwards, FWA, Webby Awards и CSS Design Awards. Так что, выбирая себе подрядчика из числа участников топ-100, можете не сомневаться в его компетенциях.

4. Прототипируем

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

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

5. Оформляем

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

Цукерберг рекомендует:  Php - PHP и чекбоксы,- помогите.

Дорабатываем типографику, вводим цвета, эмоции, расставляем акценты, прорабатываем детали. При необходимости подключаем иллюстраторов или фотографов.

6. Развиваем идею

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

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

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

Вуаля! Пара рабочих дней — и дизайн проекта готов к передаче разработчикам.

Вместо резюме

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

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

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

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

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

Павел Колодяжный

Компания: Бюро «make»
Должность: Арт-директор и основатель
Персональный сайт: pavel.make.com.ua

Занимается дизайном с начала 1999 года.

Руководит различными командами разработки с 2004 года.


Как автор, соавтор и руководитель причастен к появлению на свет более сотни сайтов и полусотни интерфейсов.

Среди работ есть проекты для таких компаний, как Sunbay Software, Space Adventures, Pulsar Software Systems, Яндекс, Canon Europe, Grammarly, Yamaha Motors Ukraine, Red Keds Agency, Panasonic Russia и множества других.

Дизайн логотипа: нужна ли модульная сетка?

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

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

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

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

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

ПРЕИМУЩЕСТВА МОДУЛЬНОЙ СЕТКИ

Какой тип сетки выбрать, зависит от многих причин – имеет значение лишь конкретный случай. При этом важно не забывать, что дизайнеру должно быть комфортно работать в этой среде. Если использование сетки вызывает дискомфорт и не идет на пользу логотипу, то ее структуру нужно пересмотреть. Невидимые рамки действительно могут мешать, поэтому нужно достаточно спокойно относиться к тому, что некоторые элементы будут нарушать строгую организацию. И это совершенно нормально – ведь символы, которыми набран логотип, имеют разную ширину. В логотипах, в которые используется кириллица, очень сложно придерживаться геометрических принципов. В кириллическом алфавите есть буквы, которые могут привести в дизайнера в отчаяние. Если посмотреть на ту же букву Ю, то становится ясно что мы видим совершенно нелепую конструкцию, которая плохо гармонирует с начертанием других букв, взятых из латинского алфавита. А насекомоподобная Ж? Это вообще страшный сон для любого логотипщика. Но приходится работать с тем, что есть и тут уж не до модульной сетки. Такие символы все равно будут выходить за границы направляющих и с этим нужно смириться.

ПОЧЕМУ СТОИТ ИСПОЛЬЗОВАТЬ СЕТКУ

Логотип можно создать и без использования модульной сетки. Берется готовый шрифт, им набирается название бренда и все. Для графического знака часто тоже не нужно работать с направляющими. Таких логотипов великое множество и это зачастую никак не отражается на узнаваемости бренда. К примеру, логотип Google набран шрифтом Catull. Дизайнер Рут Кедар лишь раскрасила буквы в разные цвета и добавила тени.

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

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

КОГДА НЕ НУЖНО ИСПОЛЬЗОВАТЬ СЕТКУ

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

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

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

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

ВЫВОД

Все дизайнеры логотипов работают по-разному. Кто-то предпочитает сначала сделать наброски на бумаге, другие сразу же начинают отрисовывать лого на компьютере. Некоторые начинают работу с построения модульной сетки, а другие предпочитают сначала сгенерировать образ и лишь затем сделать его более цельным. Так что нельзя однозначно сказать, что модульная сетка обязательна при создании логотипа. Однако разработку лого можно сравнить со строительством здания. Правильно спроектированный дом простоит дольше, ведь в его основе лежит хорошо продуманный чертеж. То же касается и логотипа: если это корпоративная айдентика, лицо бренда, то лучше всего использовать модульную сетку – ведь логотип будет использоваться компанией на протяжении многих лет. И будет очень хорошо, если он будет композиционно правильным. Ну а для какого-нибудь сайта, который создается, что называется, для души, вполне подойдет логотип, набранный любым красивым шрифтом. И модульная сетка в этом случае не понадобится.

Что такое модульная сетка и для чего она нужна в веб-дизайне

Все, что окружает нас, имеет свои пропорции. Еще в детстве мультик “38 попугаев” научил нас тому, что все можно поделить на части, равные друг другу (длина удава состояла из 38 попугаев). Также все мы знаем о том, что рост человека равняется семи его головам, сантиметр состоит из десяти миллиметров, метр из ста сантиметров и так далее. Таким образом, попугай из мультика, голова человека, миллиметр и сантиметр – это модули.

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

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

Давайте же рассмотрим, какими бывают сетки.

1. Самый простой тип – блочная сетка. То есть, она делает грубую разметку, разделяя площадь на блоки.

2. Сетка, разделенная на колонки.

Сетка, разделенная на колонки

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

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

Итак, как же создать модульную сетку.

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

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

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

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

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

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

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

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

5. Горизонтальное членение сделать достаточно просто. Его высота должна быть кратна высоте нашей строки. А уж сколько строк вы вставите в одно членение – это уже зависит от вашего эскиза.

6. Теперь осталось только объединить модули в регионы и создать композицию.

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

Для облегчения ваших поисков инструментов построения сеток вот вам несколько ссылок:

1. Guide Guide и GridMaker – плагины для Photoshop.

2. Grid System Generator, Modular Grid Pattern и 960 Grid System – онлайн инструменты, с помощью которых вы можете скачать уже готовую сетку нужных вам размеров.

3. Gridpak – позволяет создать сетку для адаптивного сайта.

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих