Модульная сетка сайта: Модульные сетки // Дизайн в цифровой среде

Что такое модульные сетки и зачем они вам нужны — Блог Setka

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

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

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

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

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

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

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

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

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

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

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

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее

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

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

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

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

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

1. Блочная сетка — грубая разметка площади на блоки.

2. Колоночная — имеющая колонки в своей структуре.

3. Модульная — состоящая из пересекающихся прямых, которые образуют модули.

4. Иерархическая — сетка с интуитивным размещением блоков, без какой-либо логической структуры.

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

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее

Сетка для веб-дизайна 960 Grid System (//960.gs) отвечает концепции «статического» макета, а для создания «резинового» можно обратить внимание на сетку фреймворка Bootstrap (//getbootstrap.com/css/#grid). Модульный каркас 960 GS делит веб-страницу на 12, 16 и 24 колонки.

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

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

самое распространенное разрешение экрана —1024х768;

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

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

Исходя из этого, пропорция выглядит так: 200 пикс. + 550 пикс. или 150 пикс. + 620 пикс.

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

Смотрите и учитесь — модульная сетка сайта BBC

Рассмотрим в качестве примера сетку веб-дизайна известного сайта. На всех сайтах BBC используется универсальная структура с колонками размером 61 х 16 пикселей, что соответствует стандартным фото и видео бренда.

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

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

1. Процесс начинается с определения мест для блоков высшей иерархии. Представляем себя эдакими Шерлок Холмсами – мастерами дедукции и соблюдаем правило «От общего к частному, от большего к меньшему».

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

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

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

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

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

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

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

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma!

Смотреть видео

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

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

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

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

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

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

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

В качестве примера, можно привести простые страницы блогов, статей, новостей, где страницы предназначены для сплошного чтения. Источник:https://www.smashingmagazine.com/2012/12/css-baseline-the-good-the-bad-and-the-ugly/

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

Основные блоки выровнены по вертикальным колонкам, используется узкий межколонник. Обратите внимание, что для цен на билеты символ доллара вынесен за колонку, т.к. он имеет меньший визуальный вес, чем сама цена. Таким образом, дизайнер прибегнул к оптической компенсации, визуально выстраивая вертикальную линию колонки относительно более “тяжелых” цифр цен 39–67. Источник:https://silotheatre.co.nz/here-lies-loveШирокий межколонник может быть дизайнерским решением. Источник:https://www.nationalgeographic.com/

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

Пример модульной сетки из книжной печати, где сетка содержит 4 колонки и 4 ряда. Изображение или текстовый блок могут занимать один или более модулей. Источник:thinkingwithtype.comПример создания концепта страницы с размещением основных блоков по модульной сетке. В качестве модуля используется объединение двух колонок и двух горизонтальных строк.Пример модульной сетки, где в качестве модуля взят квадратный блок заданных размеров. Источник:http://bodhicycling.be/home

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

Источник:https://www.behance.net/gallery/28285019/OEHLIN-B

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

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

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

Примером базовой сетки является 8-ми пиксельная сетка компонентов Material Design. Источник:https://material.io/design/layout/spacing-methods.html#Пример выравнивания элементов попапа по базовой 8-ми пиксельной сетке. Все элементы и расстояния между ними кратны 8. Источник: внутренний проект EPAM

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

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

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

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

Темы

В этой статье мы рассмотрим много материала, включая:

• Сетки

• Терминология

• Правило третей

• 12-колоночная сетка

• Акценты

• Ограничения

• Ментальная карта


Сетки

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

BBC

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

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

Терминология

Колонка

Колонки — это основные составляющие каждой сетки. В приведенном ниже примере от BBC вы видите 12-колоночную сетку. Каждая фиолетовая полоса представляют одну колонку.

Межколоночный пробел

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

Столбцы

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

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

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

Поля

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

Правило третей

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

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

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

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

Сходите с ума, нарушайте правила, повеселитесь немного, и если вам повезет, найдите новые границы!

Золотое сечение

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

Витрувианский человек Леонардо Да Винчи

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

12-колоночная сетка

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

Etsy

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

Давайте посмотрим на макеты, которые используют такую «гибкость» сетки.

4-х колоночная сетка

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

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

form

Harvard Design Magazine

Etsy

Wallpaper

marie claire

3-х колоночная стека

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

Wallpaper

Kickstarter

Kickstarter

Wallpaper

WIRED

6-ти колоночная сетка

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

Wallpaper

The New York Times

Комбинации

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

Etsy

BBC

Etsy

Etsy

BBC

Etsy

Etsy

Etsy

Акценты

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

Etsy

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

Wallpaper

form

Wallpaper

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

Ограничения

Вопрос, который часто возникает: когда использовать сетку в дизайне? Всегда! Это всегда хорошее решение, потому что сетка помогает с балансом, иерархией, выравниванием и последовательностью.

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

В приведенном ниже примере из The Wall Street Journal, вы можете увидеть, что размер рекламы, выделенный зеленым цветом, привело к дизайнерскому решению построить часть сетки с ним.

Ментальная карта

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

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

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

Напоследок

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

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

Все, что окружает нас, имеет свои пропорции – точнее, мы ищем пропорции в вещах вокруг. Для чего? Чтобы проще сравнивать предметы, конструировать и проектировать в пространстве. Еще в детстве мультик “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 – позволяет создать сетку для адаптивного сайта.

Заключение

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

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

Читайте также:

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

14 лучших инструментов для выбора цветовых схем

Дизайнерское исследование или четкие принципы? Когда можно нарушать правила в дизайне

анализ, расчет и построение / Хабр

Intro

Краткая предыстория

Привет, Хабр. Я читаю тебя без малого 10 лет, но ни разу не писал статей. Сначала сказать было нечего, потом — некогда. Но сегодня звёзды сошлись и подвернулась подходящая тема. Модульная сетка.

Казалось бы, набросать сетку — дело пяти минут. Всё разжёвано до нас, и бутстрапы есть на любой вкус, и «Аннушка уже пролила своё масло…». Но на практике у дизайнеров частенько возникают вопросы. Многих вводят в ступор даже небольшие отступления от привычных 12-колоночных сеток, потому что им не до конца понятны принципы построения.

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

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

Как работает сетка

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

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

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

Чем определяется структура сетки

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

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

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

Если контент простой и неизменный, и известен вам заранее, то проще всего будет отталкиваться именно от него. Если же контент сложный и непредсказуемый (например, user-generated — пользовательский), то сетка в большей степени будет определяться форматом носителя и общими принципами типографики и композиции.

Начало построения. Вертикальный ритм

Когда речь идёт о сайтах или печатной продукции, дизайн во многом зависит от типографики и свойств текста. Поэтому построение сетки удобно начинать с вертикального ритма.

В первую очередь вам нужно нащупать два взаимосвязанных ключевых параметра: базовую высоту строки и базовый размер шрифта. Проще говоря (хи-хи), базовые интерлиньяж и кегль. И вот эта простенькая задача постоянно вводит людей в ступор. «Как мне узнать нужную высоту строки?», «А какой шрифт брать?», «А сколько строк нужно делать для буклета? А для визитки?» и т.п.

Вариант «А». Подход «от строки»

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

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

Простой, но подробный пример с картинкой

Допустим, вам нужно сверстать на листе А4 список лучших работников месяца. Их у вас трое. Для каждого сотрудника вы делаете блок-карточку: слева фото, справа текст. Фотография крупнее, поэтому высота карточки равна ее высоте. Кроме того, на листе нужно разместить шапку с заголовком, а внизу — блок контактной информации [профсоюза гениев].

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

Если теперь принять высоту шапки за одну «строку», получится, что весь ваш контент занимает 9 абстрактных «строк». Если вам трудно абстрагироваться от интерлиньяжа, назовите эти «строки» рядами или горизонтальными блоками. Предположим, вы еще захотите добавить по 1/2 строки воздуха перед верхним и нижним краями листа. Итого, ваш макет нужно делить на 10 строк:

В результате вы делите ваш носитель (лист A4) по высоте на 10 «строк». Получаются блоки высотой около 3 сантиметров. Очевидно, что это слишком крупная разлиновка, чтобы верстать по ней тексты, контактную информацию и прочие мелочи.

Вы смотрите на свои текстовки и понимаете, что возле каждой фотографии у вас получается описание где-то на 10—12 строчек текста. То есть, каждый блок нужно разделить еще на 5—6 частей. Предположим, вы перестраховываетесь и берете большее значение, чтобы по одной строчке ушло на отступы. Бинго. Теперь ваш макет представляет собой 10 блоков по 6 строк в каждой. То есть 60 строк. С учетом высоты листа (~300 мм), каждая строка получилась высотой ~5мм. Всё, можно прототипировать прототип, а затем дизайнить дизайн.

А как же быть с размером шрифта? О, теперь всё очень просто! По всё той же логике «правила внешнего и внутреннего», интерлиньяж должен составлять примерно 150—200% от высоты кегля. То есть размер вашего шрифта будет в 1,5—2 раза меньше высоты строки. А это от 2,5 до 3,3мм. Этот размер несложно подобрать в пунктах или даже просто на глаз.

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

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

Вариант «Б». Подход «от кегля»

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

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

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

Всё, что вам нужно, это выбрать для проекта базовый кегль, который будет достаточно крупным, чтобы хорошо читаться, и при этом достаточно компактным, чтобы в строку основных текстовых блоков помещались 7—8 слов. Строго говоря, для русского языка достаточно и 5—6 слов, потому что в среднем у нас, конечно, длиннее и тверже. Но это ориентир, а не догма. Опираться нужно на конкретный макет, конкретный шрифт плюс собственное зрение и опыт.

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

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

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

Итак, определились с базовым шрифтом. Что дальше? А дальше — интерлиньяж. По уже упомянутым традициям современной типографики он составит 150—200% от кегля. А иногда и более.

(Подчеркну: речь о современных реалиях. Просьба не попрекать Брингхерстом и другими классиками книжной типографики — они, безусловно, взорвали свой танцпол, но с тех пор мир немного изменился. Те 120—180% всё-таки рассчитывались для книг, да ещё и в латинице).

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

По личному опыту, для простых коммерческих сайтов довольно удобен базовый интерлиньяж 15px. (Подразумевается 30px, но на уровне верстки удобнее сразу работать с половинчатым, т.к. он дает хорошие отступы в 15px и 45px. Важно понять, что в контексте модульной сетки 15 и 30 суть одно и то же — вы просто работаете либо с половинным значением «тридцатки», либо с целым значением «пятнашки»). Хотя при всей любви к классическим модульным сеткам, не отрицаю плюсы той же трендовой 4-пиксельной сетки для UI-дизайна. Сетки разные нужны, сетки разные важны. Это инструмент, а не религия.

Результат по вертикали

Теперь, когда у нас есть базовый интерлиньяж, мы можем разлинеить макет и следовать, наконец-то, вертикальному ритму. Это значит, что каждый элемент дизайна будет занимать по высоте некоторое число строк. С ритмом становится удобно и легко работать. Не нужно вычислять точные значения в пикселях. Вы меряете всё строками. Заголовок первого уровня — 4 строки, иллюстрация — 8 строк, аватар — 3 строки, кнопка — 3 строки, меню — 5 строк, отступ — 1 строка и т.п. (Надеюсь, вы понимаете, что это фигуральный пример, а не рецепт успеха).

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

Колонки и межколоночный интервал

От чего зависит число колонок

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

Например, если вы верстаете блок про времена года, вашим магическим числом наверняка будет 4. Вы можете сгруппировать их в один ряд или в два. При этом число колонок получится кратным либо двум, либо четырем. То есть есть смысл опираться на числа 2, 4, 6, 8, 12 или 16.

Усложним. Предположим, под блоком с временами года у вас идёт блок с тремя рекламными объявлениями. Очевидно, для этой части макета удобнее было бы число колонок, кратное трем: 3, 6, 12… Но сетка в 3 колонки явно неудачна для времен года. Поэтому нужно искать для них какой-то общий знаменатель. Предыдущий абзац подсказывает, что вам нужна сетка на 6 или 12 колонок.

*Еще пример. Вам нужно сверстать типовой блок-визитку, состоящий из логотипа/аватара (слева) и контактной информации (справа). Сколько нужно колонок? Давайте прикинем.

Если мы хотим сделать равновесную композицию, то можно обойтись даже двумя колонками. В этом случае выравнивание лого будет центральным, а текст придется размещать на глаз. А можно предположить, что текст по ширине занимает места примерно вдвое больше, чем логотип, и соответственно сделать блок в три колонки. А можно пойти еще дальше и заложить в сетку еще и отступы. Допустим, слева и справа будет поля по 1 колонке, логотип займет 2 колонки, текст 4, плюс 1 колонка отступа между лого и текстом — итого 8 колонок.*

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

Когда речь идёт об отдельно взятом макете, подогнать дизайн под новую сетку нетрудно. Если же проект большой и предполагает изобилие страниц или макетов с единой канвой (сайт, брошюра, книга и т.д.), лучше заложить в сетку некоторый запас прочности и хорошенько протестировать ее со случайным контентом из разных страниц. Запас прочности, как правило, достигается кратным увеличением числа колонок: например, вам сейчас нужно только 3, а вы закладываете 6 или 9.

Отмечу один нюанс. Если вы делаете нечто с выраженной центральной композицией и активно используете горизонтальное выравнивание по центру, выгоднее сделать число колонок нечетным. Это позволит равномернее распределять отступы и контент. Совет касается и внутреннего дробления колонок. В примере выше, если у вас было 3 колонки и вам понадобилось их детализировать, при центральной композиции вы разобьете каждую колонку еще на 3, а вот при симметричной — на 2 или 4. В итоге, в первом случае колонок станет 9, а во втором — 6 или 12.

Почему все любят 12-колоночные сетки

Тут всё просто. Число 12 делится на: 12, 6, 4, 3, 2, 1. Поэтому сетка получается гибкой и позволяет органично верстать блоки почти любого количества или ширины. Более того, отбрасывая по краям макета 1 или 2 колонки в качестве полей, вы получаете в центре блок, который делится ещё и на 10, 5 или 8.

Из личного опыта добавлю, что очень удобно рисовать адаптивные макеты, отталкиваясь от ширины в 1200 пикселей, особенно без межколоночных интервалов. Вы получаете 12 колонок с приятной шириной ровно в 100 пикселей и постоянно оргазмируете от круглых чисел в процессе работы. И когда вам нужно поместить на макет плашку кнопки, вы не тянете границы прямоугольника туда-сюда, а мгновенно и не задумываясь вбиваете размер: 300 на 60 и кликаете на макет. К слову, полезно приучить себя позиционировать элементы не мышкой и стрелками, а вбиванием цифры отступов по иксу и игреку — макеты станут опрятнее.

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

Межколоночное расстояние (gutter)

Зачем и когда нужно делать отступы между колонками?

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

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

В большинстве случаев, межколоночный интервал значительно меньше ширины колонки. Его размер тоже определяется особенностями контента. Если вы верстаете интерфейс, где много классических элементов управления, узкое межколоночное расстояние служит удобным разделителем. Например, между поисковой строкой и кнопкой, или между чекбоксом и его лейблом. (Хотя в целом здесь есть смысл подумать о «квадратной» сетке: 4px или иной, вообще без всяких колонок, и для этого тоже есть причины). Если же вы верстаете страницу с крупными текстовыми блоками, организованными всего в 2—3 колонки, то межколоночное расстояние имеет смысл сделать большим, чтобы дать контенту максимум воздуха.

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

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

Модуль

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

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

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

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

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

Допустим, вы делаете портал. У вас есть меню высотой в 3 строки, затем следует баннер главной новости высотой в 9 строк, затем ряд каких-то цифр (курсов валют, погоды и др) в 3 строки, затем ряд из нескольких новостей второго плана на 9 строк. То есть весь контент чередуется: 3-9-3-9-3-9-3… На практике этот прием редко оправдан, он не очень-то гибок. Но стоит держать в голове, что ритм может быть сложным.

Сетка в сетке

Да, бывает и такое. Когда проект сложный и многокомпонентный, вы можете использовать несколько вложенных сеток. Простейший пример: общая раскладка макета (layout) использует гигантские колонки с крупным текстом, а внутри одной из них лежит форма калькулятора с кучей элементов управления, сверстанных по квадратной сетке в 4px. В этом нет ничего особенно криминального.

Более того, когда речь идёт о сайтах, часть вашего контента может быть вообще посторонней и встраиваемой: плееры, онлайн-карты, виджеты, платежные фреймы и т.д. Миллион вариантов. У этих элементов будут свои внутренние сетки, которые вы не контролируете. И это тоже нормально.

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

Оптическая компенсация

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

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

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

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

Резюме

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

Сетка в помощь при создании адаптивного сайта — CMS Magazine

У многих дизайнеров возникают трудности при создании адаптивных и мобильных версий сайта. Зачастую непонятно, где какие элементы располагать и какого размера они должны быть. В данной статье я хочу показать, что это не так уж и сложно, особенно если использовать в работе модульную сетку. Вообще модульные сетки — это прекрасный инструмент, который помогает дизайнеру сильно упростить работу, а результат сделать более профессиональным, эстетичным и приятным для восприятия. Поскольку на данный момент мониторы работают в разрешениях, начиная с 1024?768 рх и выше, я считаю самой удобной 12-ти колоночную сетку, так как она идеально для них подходит. Размер каждой колонки составляет 60 рх, а отступы между ними — 20 рх.

Количество колонок можно легко увеличивать и уменьшать, в зависимости от нужного разрешения. Например, если ваша контентная область будет все 1920 рх, то запросто можно прибавить по 6 колонок с обеих сторон. А если 320 рх, то оставить всего 4 колонки.

Больше не нужно искать и обзванивать каждое диджитал-агентство
Создайте конкурс на workspace.ru – получите предложения от участников CMS Magazine по цене и срокам. Это бесплатно и займет 5 минут. В каталоге 15 617 диджитал-агентств, готовых вам помочь – выберите и сэкономьте до 30%.
Создать конкурс →

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

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

А вот как он выглядит с наложением сетки и линеек:

Мы видим, что абсолютно все элементы вписываются в сетку. Все четко и правильно, аккуратные ровные столбцы. Единственное, с чем могли возникнуть проблемы — это элементы, которые в примере обозначены звездами. Это могут быть как иконки с текстом, так и фотографии в портфолио, или просто столбцы с текстом. Чтобы правильно рассчитать расстояние, мне не пришлось делать сложных вычислений, вымерять каждый пиксель, плодить не нужные в будущем линейки и так далее. А все потому, что есть сетка. Итак, у меня 4 «звезды» и 12 колонок, следовательно, делим 12 на 4 и получаем по 3 колонки на каждый пункт. То есть центр каждой «звезды» должен располагаться посередине центральной из выделенных на нее колонок.

Но, к примеру, у вас не 4, а 11 таких пунктов. Скорей всего, они не поместятся в контентную часть в один ряд, значит, сделаем 2 ряда — 6 сверху и 5 снизу или наоборот. Берем наши 12 колонок и делим на 6. Получаем подве колонки на пункт, то есть центр каждого пункта будет располагаться посередине промежутка между двумя ее столбцами, прямо на линейке, и так далее. Разрешения меньше 1920 рх (вплоть до 960 рх) разбирать не будем. Так как контентная часть у нас 960 рх и перестраивать ничего не нужно, макет просто обрезается с обеих сторон.

Разрешения меньшие 1920 рх вплоть до 960 рх разбирать не будем. Так как контентная часть у нас 960 рх и перестраивать ничего не нужно — макет просто обрезается с обеих сторон.

Рассмотрим разрешение 768?1024. Здесь колонок уже 8. Начнем с шапки. Логотип, номер телефона и другие элементы просто сдвигаем к центру, а вот пункты меню у нас уже не постятся, так что само меню лучше сделать всплывающим:

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

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

Следующий блок тоже перестроился:

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

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

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

Здесь наши пункты со звездами выстаиваются одна под одной. Но бывают случаи, когда картинка, которую заменяет звезда, не слишком важна по смыслу (например, — небольшая иконка). Тогда моно и перестроить этот блок по такому примеру:

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

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

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

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

модулей на ModularGrid

Производитель Прочее / unknown0001010 Music256klabs2hp4ms Company5540lab7 DialsAbstract DataAbyss DevicesAcid дождь TechnologyAcidlabACLACXSynthADDAC SystemAdventure AudioAemitAfter Позже AudioAfterlife LaboratoriesAI SynthesisAion ModularAJH SynthALM Busy CircuitsAlright DevicesAlyseumAMSynthsAnalog OrdnanceAnalogue SolutionsAnalogue SystemsAnimal завод AmplificationAniModuleAntimatter AudioAntumbraAqa ElektrixARCArcaicoArcus AudioARREL AudioArturiaAtomosynthAtoVprojectAudio DamageAudio передач ObsessionAudiospektriAudiothingiesAvonSynthBananalogueBardBarton Музыкальный CircuitsBarulloBastl InstrumentsBearModulesBeast-TekBEBBefacoBehringerBig T MusicbirdkidsBizarre JezabelBizmuth ModularBlack CorporationBlack Рынок ModularBlind Monk ModularBlood Ячейки АудиоМодули Голубого ФонаряBoredbrain МузыкаBragi ModularБританская шумовая электроникаBroken Siliconbrowns only esClankClattersCMSCodex ModulexConjured CircuitsControlCopper TracesCorsynthCosmotronicCPU ModularCre8audioCritter и GuitariCwejmanCylonixCynthiad: MachineryD & D ModulesDannysoundDave Jones DesignDave Smith ModularDelptronicsDelta Sound LabsDer Манн мит дер MaschineDetroit UndergroundDijkstar MusicDinSyncDivision 6DivKidDnipro modularDobozDoepferdotRed Аудио DesignsDove AudioDovemansDPW DesignDreadboxDwarfcraft DevicesE-RMEarthQuaker DevicesEASElby DesignsElectro-Acoustic ResearchElectro-FaustusElectronic вещей… и StuffElectrosmithElektrofonEmblematic SystemsEmpress EffectsEMWEncore ElectronicsEnd Времена ModularEndangered Аудио ResearchEndorphin.esEowaveEpoch ModularEquinoxErdErica SynthsErogenous TonesError InstrumentsErthenvareurorack essentialsEurorack HardwareEvaton TechnologiesEventideExpert SleepersExtralife InstrumentsFalafularFaselunareFeedbackFive12FlameFlight из HarmonyFolktekFonitronikFound SoundFPBFrap ToolsFrequency CentralFunkstillFuture Sound SystemsFutureretroG-Шторм ElectroGeeklapeenoGenki InstrumentsGezeitenGibbon DigitalGieskesGinko SyntheseGMSN! Божья BoxGotharmanGrayscaleGround Grown CircuitsGrove AudioGrpHackMeHappy NerdingHexdevicesHexinverter ÉlectroniqueHikari InstrumentsHinton InstrumentshorstronicHumble AudioIeaskul F.MobentheyIn В TreesIndustrial Музыка ElectronicsInnerclock SystemsInstruments из ThingsInstruōIntellijelIO InstrumentsIOLabsIron EtherIshizenoitijikJ3RKjoeSeggiolaJolin LabJomoxJoranalogue Audio DesignJPSynthKassutronicsKentonKilpatrick AudioKlangbau KölnKlaviskNoB technologyknob.farmKnobulaKOMA ElektronikKonstant LabKorb-ModularL-1LA 67LA CircuitsLaboratorio Elettronico PopolareLadikLaurentide SynthWorksLeafAudioLiivateraLimafloLivestock ElectronicsLivewire ElectronicsLividLorenz NeumannLow-Gain ElectronicsLPZW.modulesLuna ModularLZX IndustriesM.A.S.F.Macbeth Студия SystemsMachineRoomMacro MachinesMad Петух LabMageritMajella AudioMake NoiseMaker.ieMalekko Heavy IndustryManhattan AnalogManikin ElectronicManikkMannequinsMarion системы CorporationMazzatronMedic ModulesMengQiMusicMetabolic DevicesMetalboxMetasonixMetatronic ModsMetro ModularMFBMFOSMichigan Synth WorksMicrobe ModularmidiphyMillion машина MarchMMI ModularMobula MobularModal ElectronicsModbap ModularModcanModdictModor MusicModulaire MaritimeMonde SynthesizerMonomeMoog Music Inc.MordaxMosaicMoseley InstrumentsMotoviloMøffenzeef MødularMRG SynthesizersMungo EnterprisesMusic Thing ModularMutable instrumentsMutant ModularMystic CircuitsNakedboardsNANO ModulesNeutron SoundNeuzeit InstrumentsNew Системы InstrumentsNexus InstrumentsNoise EngineeringNoise LabNoise ReapNonlinearcircuitsNorth побережье Modular CollectiveNorth побережье SynthesisNorthern Light ModularNozoïdNumericalnw2sOakleyOIIIAudioOlegtronOlitronik CircuitsOlivella ModularOmiindustriiesomsonicOrphoOrthogonal DevicesOscillosaurusoZoe.frPanels4DIYParatekPatch & TweakPatching PandaPercussaph modularPharmasonicPittsburgh ModularPlan BPlankton ElectronicsPlum AudioPMFoundationsPolaxisPoly EffectsPolyendPraxis ElectronicsProk ModularProModularPT AudioPucktronixPulpLogicPurrtronicsQosmo ModularQu-Bit ElectronixQuicco SoundRabid ElephantRadical FrequenciesRadikal Technologies Случайные * SourceRare WavesRat King ModularRazmasynthReBachRebel TechnologyReckless экспериментирования AudioRecovery Эффекты и DevicesRed PanelRetro Механические LabsRetroaktivRetrokitsReverse LandfillRides в StormRitual ElectronicsRiverRobauxRolandRossum Electro-MusicRYK ModularRYOSacrament ModularSchenk.WorkSchenktronicsSchippmannSchlappi EngineeringSchottkey ModularSDS DigitalSeismic IndustriesSequentixSerpens ModularSfeoShakmat ModularShift LineShock ElectronixsimpleCircuitsSismoSkull & CircuitsSleepy CircuitsSlow NovaSnazzy FXSnyderphonicsSoftwire SynthesisSognageSOMA LaboratorySonic PotionsSonicsmithSonoclastSonocurrentSoulsbySoundForceSoundmachinesSpecial Stage SystemsSpinal Cat ModularSputnik ModularSquarp InstrumentsSSSR LabsST ModularStarlingSteady государственный FateSteffcorpStem ModularStereopingSTG SoundlabsStochastic InstrumentsStrange Наука InstrumentsStrymonStudio ElectronicsSubconscious CommunicationsSuper SynthesisSupercritical SynthesizersSvarogSyinsiSynovatronSynQuaNonSyntaxsynthCubeSynthesis TechnologySynthetic Sound LabsSynthfoxSynthrotekSynthwerksSyntonieSystem80TakaabtaktaktakTall DogTasty ChipsTeiaTenderfoot ElectronicsTesseract ModularThonkThorn AudioThreeTom ModularTimo RozendalTinrsTiptop AudioTokyo лента Музыка CenterTomaTek -AudioToppobrilloTouellSkouarnTransient Mod ulesTransistor Sounds LabsTrogotronicTronix-Audiotrouby modularTsyklon LabsTubbutecTubeOhmTwisted Electronsu-heUFO ModularVBrazil SystemsVelectronicVenus InstrumentsVerbos ElectronicsVermonaVinicius ElectrikVintageh Synth LabVisible SignalsVoic-Visible SignalsVoic-Visible SignalsdeVultWaldorfWarm Star ElectronicsWarped CircuitsWavefonixWaveLickerWest Oakland Музыка SystemsWestlichtWeston Precision AudioWinter ModularWinterbloomWMDWORNG ElectronicsX-Fade ModularXaoc DevicesXoboXODESXOR ElectronicsYork ModularZebra SynthZerosum InertiaZetaohmZłobZvex

Функция-AttenuatorBlind PanelClock GeneratorClock ModulatorComparatorControllerCV ModulationDelayDigitalDistortionDrumDual / StereoDynamicsEffectEnvelope FollowerEnvelope GeneratorEqualizerExpanderExpressionExternalFilterFrequency DividerFunction GeneratorFuzzLFOLogicLow Pass GateMIDIMixerMultipleNoiseOscillatorPanningPhase ShifterPitch Shifter PolarizerPowerPreAmpQuadQuantizerRandomReverbRing ModulatorSample и HoldSamplingSequencerSlew LimiterSwitchSynth VoiceTubeTunerUtilityVCAVideoWaveshaper

Дополнительная функция-AttenuatorBlind ПанельГенератор часовМодулятор часовКомпараторКонтроллерCV МодуляцияЗадержкаЦифровые Искажения БарабанДвойной / СтереоДинамикаЭффектСледующий за конвертомГенератор конвертаПравильно zerExpanderExpressionExternalFilterFrequency DividerFunction GeneratorFuzzLFOLogicLow Pass GateMIDIMixerMultipleNoiseOscillatorPanningPhase ShifterPitch Shifter PolarizerPowerPreAmpQuadQuantizerRandomReverbRing ModulatorSample и HoldSamplingSequencerSlew LimiterSwitchSynth VoiceTubeTunerUtilityVCAVideoWaveshaper

HeightAllOnly 1U TilesOnly величину

Что такое макет веб-сайта с модульной сеткой? — Тыква Веб-дизайн Манчестер

Модульная сетка — один из самых популярных вариантов компоновки веб-сайтов.Этот простой дизайн структурирует контент и информацию практичным и эффективным способом. Но каковы главные соображения при использовании модульной сетки в веб-дизайне? Что ж, здесь, в Pumpkin Web Design Manchester, мы являемся ведущими экспертами по веб-дизайну Манчестера. Мы создаем потрясающие решения для веб-дизайна для предприятий и компаний Северо-Запада. Сюда входят Саутпорт и Уиган. В результате мы создали это руководство по модульным сеткам в веб-дизайне.

Что такое макет веб-сайта с модульной сеткой?

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

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

Каковы преимущества макета веб-сайта с модульной сеткой?

Модульная сетка дает ряд преимуществ, в том числе:

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

Что нужно учитывать при использовании модульной сетки в веб-дизайне?

Итак, что следует учитывать при использовании модульной сетки в веб-дизайне? Что ж, есть ряд вещей, которые нужно принять во внимание, в том числе:

• Создайте визуальный интерес. Макет сетки может быть немного скучным, если не разработан с творческим подходом. Почему бы не использовать чередующиеся цвета фона для каждого модуля? Или чередуйте текст и изображение для большей визуальной привлекательности. Для действительно яркого эффекта почему бы не использовать меньшие части одного изображения в качестве фона для каждого модуля? Затем их можно объединить, чтобы создать мозаичное изображение. Однако это не сработает для мобильного дизайна.
• Размер сетки. Выбирайте только то количество модулей, которое вам действительно нужно.Помните, что в веб-дизайне популярен минимализм, и часто использование меньшего количества более эффективно, чем использование слишком большого количества. 2 или 3 на 2 или 3 обычно достаточно для целевой страницы или чего-то подобного.
• Размер каждого модуля. Это следует из размера сетки. Очевидно, что большая сетка уменьшит размер каждого модуля. Но для каждого веб-сайта вы должны серьезно подумать, насколько большим должен быть каждый модуль и сколько отрицательного пространства следует использовать между модулями. Это может иметь большое значение визуально.

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

Future Forward Pt. 1 | Преимущества модульного веб-дизайна

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

Практически каждый в какой-то момент собрал набор LEGO. Каждый строительный блок легко встает на место. В буклете с инструкциями указано, куда должны быть помещены детали, но это не значит, что вы не можете перемещать их, чтобы сделать что-то еще, если хотите.Создание пластического убеждения просто, организовано и несложно для понимания. Это очень похоже на модульный веб-дизайн. Мы затронули популярную теорию дизайна в посте о цифровом будущем. Теперь давайте изучим модульное мышление более внимательно (может быть, вы даже решите реализовать его в своем следующем проекте, или Mindstream сделает это за вас).

Модульный? Это значит современный, правда?

Да! Это также означает, что они состоят из стандартных или взаимозаменяемых единиц. Видите ли, модульный дизайн в значительной степени восходит к концепциям, основанным на печати.Газета — из тех, что мы когда-то держали в руках, но сегодня предпочитаем пролистывать, — прекрасный тому пример. Опытные дизайнеры печати первыми начали использовать блоки контента, обозначив каждый компонент, который будет иметь история: заголовок, текстовые столбцы, изображения с подписями и т. Д. Наличие готового шаблона — это именно то, что вам нужно при выпуске ежедневной публикации . В конце концов, время всегда будет иметь значение.

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

Прежде чем мы перейдем к очевидным преимуществам, кратко изложим то, что мы теперь знаем о модульном веб-дизайне:

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

Шаблоны = Ограничения, Модульные = Свобода

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

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

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

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

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

Подходите к веб-дизайну с учетом эффективности.

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

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

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

Более чем эффективно — очень стабильно.

После завершения веб-опыт, созданный с использованием принципов модульного веб-дизайна, кажется целостным. Вы когда-нибудь посещали сайт и думали про себя: «Эта страница имеет смысл, но что там с , что с разделом ?» Вы, вероятно, видите неудачные остатки шаблонного веб-сайта, который помещал контент в раздел, которому он не принадлежал, или просто не имел ничего, чтобы заполнить это пространство; явно не хватает плавности.На самом деле, с модулями сложно быть непоследовательными.

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

Модульная конструкция никуда не денется.

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

Сетка

— мышление с типом

Модульная сетка имеет последовательные горизонтальные деления сверху вниз в дополнение к вертикальным делениям слева направо.Эти модули управляют размещением и обрезкой изображений, а также текста. В 1950-х и 1960-х годах швейцарские графические дизайнеры, в том числе Герстнер, Рудер и Мюллер-Брокманн, разработали модульные сеточные системы, подобные показанной здесь.

Модульная сетка: Карл Герстнер

_{программы проектирования Сетка , 1963
(перерисована). Дизайнер: Карл Герстнер. Издатель: Артур Ниггли, Цюрих.
Эта квадратная сетка состоит из шести вертикальных столбцов и шести горизонтальных модулей
, наложенных друг на друга сетками из одной, двух, трех и четырех единиц.
По вертикали сетка регулируется мерой из 10 пунктов, которая
определяет интервал шрифта от базовой линии до базовой линии.}

Базовая сетка

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

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

Чтобы стилизовать заголовки, подписи и другие элементы, выберите междустрочный интервал, который работает с базовой сеткой, например 18/24 для заголовков, 14/18 для подзаголовков и 8/12 для заголовков. Веб-дизайнеры могут выбирать одинаковые приращения (высота строки в CSS) для создания таблиц стилей с четко согласованными базовыми линиями.По возможности расположите все элементы страницы относительно базовой сетки. Но не заставляйте его. Иногда макет работает лучше, если вы переопределяете сетку. Просмотрите базовую сетку, если вы хотите проверить положение элементов; выключайте его, когда он отвлекает.

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

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

Например, один из подходов к дизайну на основе сетки, часто используемый веб-дизайнерами, называется системой сетки 8pt. Эта концепция была введена в соответствии с рекомендациями Google по дизайну материалов. В системе Material Design используется сетка, состоящая из квадратов 8 x 8 pt.На практике каждый элемент на странице будет кратен / кратен восьми.

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

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

Сетки: столбчатые и модульные — 354

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

Расположение столбцов

Книги расположены в колонках (с сайта «Thinking With Type» Эллен Луптон):

Работает с линии зависания . С сайта Эллен Луптон «Thinking With Type».

Работает с линии зависания . С сайта Эллен Луптон «Thinking With Type».

Модульные сети

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

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

Создание макета страницы в швейцарском современном стиле. Выше из лекции Frost Design.

Modular Grid используется теперь, когда добавлена ​​дополнительная информация . С сайта Эллен Луптон «Thinking With Type».

Подход № 1:
Используйте оптимальную копию основного текста, интерлиньяж и длину строки для построения макета сетки и высоты страницы.

Подход № 2:
Выберите размер страницы и пропорции, затем создайте серию исследований основного текста в этих пропорциях для разработки сетки и макета.

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

Вверху с сайта «Thinking With Type» Эллен Луптон

Главный ресурс по сеточным системам: шаблоны (сетки Indesign, Интернет и фотошоп), книги и многое другое: The Grid System.org.Grid System — это постоянно растущий ресурс, где графические дизайнеры могут узнать о сеточных системах, золотом сечении и базовых сетках. Создано Антонио Карузоне.

C) Используйте оптимальную длину строки для столбцов и постройте вокруг нее сетку.

Все, что составляет 45–75 символов, широко считается удовлетворительной длиной строки для страницы с одним столбцом, установленной с шрифтом с засечками в размере текста. Строка из 66 символов (включая буквы и пробелы) считается идеальной.Для работы с несколькими столбцами лучшее среднее значение составляет 40–50 символов. —Роберт Брингхерст,

Из лекции Фрэнка Чимеро по основам типографики.

Above Лекция Фрэнка Чимеро по основам типографики.

Базовая сетка упорядочивает страницу. Выше из лекции Frost Design.

Базовая сетка упорядочивает страницу. Выше из лекции Frost Design.

Базовая сетка упорядочивает страницу.Выше из лекции Frost Design.

Frost Design использует модульную сетку для годового отчета Goodman.

Frost Design использует модульную сетку для годового отчета Goodman.

Frost Design использует модульную сетку для годового отчета Goodman.

Frost Design использует модульную сетку для годового отчета Goodman.

Модульные сети (в основном)

найдено в сетевой системе

Цветной журнал

Вилли Кунц

Вольта

Матиас Кориа

Создавайте модульные сетки за секунды — Базовый дизайн

Мир невидимых структур

Мой первый опыт работы дизайнером начался с макета журнала.Другими словами, все началось с сетки. Эти тонкие красные линии в InDesign середины 2000-х. Я помню то любопытство, с которым я изучал, как они работают, какие они могут быть и как правильно их использовать в каждой конкретной ситуации. В стране, в которой я жил, было почти невозможно просто пойти и купить прилично выглядящий журнал или какую-то конкретную книгу по какой-либо теме. Что касается сеток, то вокруг циркулировала пара книг — хорошие книги, такие как «Форма книги» Яна Чихольда, «Сеточные системы в графическом дизайне» Йозефа Мюллер-Брокманна и кое-что еще, что я не совсем могу вспомнить.И, конечно же, как и многие другие дизайнеры, я постоянно исследовал мир коммутируемого доступа в Интернет в поисках статей, правил, книг, примеров или даже сопутствующих материалов. Прошло около 10 лет с тех пор, как я сделал и забыл этот макет журнала, но это любопытное чувство не покидает меня до сих пор. Думаю, он даже стал больше.

Как все начиналось

Примерно год назад во время моего короткого визита в Москву меня попросили сделать серию прототипов для одного из главных российских оппозиционных СМИ — Новой газеты.Я был рад принять эту работу в основном по двум причинам: я всегда любил проекты, связанные со СМИ + проект, как правило, выполнялся с одной из самых известных дизайн-студий России под названием Charmer, которая отвечает почти за все достойные редизайны российских СМИ прошлых лет.

Перед тем, как приступить к исполнению, мы провели пару переговоров с арт-директором и соучредителем Charmer Александром Гладких о различных подходах к редизайну медиа, использованию грид-систем, будущем технологий и роли медиа в нем.Я был вдохновлен его работами и системным подходом, которые явно выделяли его проекты среди остальных.

Он показал мне некоторые из своих сеток, которые были пропорциональны в зависимости от типа носителя, который он использовал в своем проекте (например, 16×9 для веб-сайтов с большим количеством видео, 3×2 для фотографий и т. Д.). Для меня это был новый подход, учитывая, что я обычно строил свои сеточные системы на основе значений базового типа — определяя вертикальный ритм и затем составляя макет с учетом этого.Итак, наши разговоры вызвали много размышлений и исследований, которые также побудили меня начать поиск алгоритма, который объединял бы медиа-ориентированный и типоцентричный подходы в одну систему с помощью нескольких вычислений. Идея заключалась в том, чтобы превратить эти расчеты в простой в использовании мастер, который позволил бы любому дизайнеру опробовать его и, к счастью, внести свой вклад в расчеты при проектировании макета.

Почему это вообще важно

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

Итак, начнем с текста. Очевидно, чтобы визуализировать это, нам нужны шрифты, разборчивость которых позволит нашим читателям беспорядочно воспринимать информацию, которой авторы или редакторы веб-сайтов собираются поделиться. Среди всех стилей текста, которые могут быть представлены на вашем веб-сайте (заголовки, заголовки, лиды и т. Д.) Основной текст (тот, который вы читаете прямо сейчас) — это тот, который вы читаете чаще всего. Итак, когда дело доходит до разборчивости текста, это правильное место для начала. Как мы знаем из более ранних исследований, разборчивый текст, будь то книга или веб-сайт, должен иметь хорошо выверенный вертикальный ритм внутри.А когда дело доходит до настройки свойств основного текста, чтобы сделать его разборчивым с точки зрения вертикального ритма и, в соответствии с вашими знаниями, большинство графических редакторов (например, Sketch, Photoshop или Illustrator) помимо процесса выбора шрифта, который мы собираемся рассмотреть позже, заставит вас иметь дело с двумя основными числами — размером шрифта и высотой строки, что в результате даст вам соотношение размера шрифта / высоты строки основного текста (давайте назовем его flr для дальнейшего использования) . На иллюстрации ниже вы можете увидеть основные копии некоторых популярных медиа-сайтов.

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

Когда вы начнете применять разные шрифты к своему основному тексту (используя те же самые flp), вы обнаружите, что (среди других визуальных изменений) вертикальный ритм вашего тела изменится, а иногда и очень сильно.Вы можете увидеть это в примере ниже, где я использовал Helvetica Neue и Baskerville с одинаковыми значениями размера шрифта / высоты строки.

Это означает, что вы не можете просто выбрать любой шрифт с сайта, который вам нравится, применить его к выбранному вами шрифту и ожидать, что он сработает. Этого не будет, и в основном потому, что разные шрифты, среди других различий, имеют разные значения x-height, как в примере с Helvetica Neue (x-height составляет около 50% от font-height) и Baskerville (x-height намного ниже 50 % от font-height).Но значение x-height (как и многие другие значения шрифта) нельзя увидеть в Sketch или Photoshop, поэтому вы можете использовать свои глаза, опыт и чувство красоты, чтобы выбрать шрифт, который будет формировать ритм, который вам подходит. ваша основная копия нужна. Итак, вот где начинается первая задача.

Я искал хорошее прочтение относительно отношений и настроек x-height / font-height и нашел один интересный момент в презентации Xavier Bertels, где он заявил, что существует сильная зависимость между разборчивостью основного текста и x-height / em- отношение высоты бокса (размер строчных букв по сравнению с прописными буквами) и максимально близкое расстояние по оси x до 50% от высоты бокса, что лучше для разборчивости вашего основного текста.Он даже сделал формулу для этого, которая проиллюстрирована ниже, с 16 в качестве размера шрифта и 8 в качестве значения x-высоты внутри него:

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

Итак, после того, как вы выбрали шрифт для основного текста, определили его подходящий размер и высоту строки, у вас есть число, которое теперь можно использовать для построения базовой сетки.В моем случае это число (базовый микромодуль) — это высота строки основного текста, деленная на 2 или 3 в некоторых случаях. Ксавье предлагает разделить его на 3 или 4 в своей презентации, но это действительно зависит от вас, если вы можете разделить его. Итак, если высота строки моего основного текста составляет 22 пт, мой базовый микромодуль будет 11 пт. Вот так просто. Теперь я могу построить что-то вроде этого:

И затем я могу установить на нем свой тип:

Следующий шаг — это немного сложнее. Нам нужно нарисовать вертикальные линии, которые будут нашими столбцами, и скажем, нам нужно 12 из них для этого.Теперь нам нужно указать ширину нашего столбца и значения наших желобов (если, конечно, они нам нужны). Эти ширины могут определяться конкретными пропорциями медиа, которые должны соответствовать любому количеству наших столбцов, типичной шириной рекламного баннера или размерами любого графического объекта, который мы могли бы использовать в любом точном размере. Если мы говорим о наиболее распространенных пропорциях медиа, я бы назвал 3: 2 (обычно используется для фотографий) и 16: 9 (обычно используется для видео). Есть также много других пропорций, которые вы можете найти в Интернете или распечатать.Что интересно в пропорциях, так это то, что они универсальны и имеют смысл не только в графическом представлении, но и, например, в качестве звуков.

«3: 2, помимо общепринятой пропорции для фотосъемки, в музыке называется Perfect Fifth, и служит для настройки скрипки, начиная с 14 века»

Итак, теперь нам нужно выровнять пропорции (давайте выберем 16: 9) с нашим базовым ритмом, чтобы сформировать систему. Когда я впервые столкнулся с этой проблемой, я решил рассчитать ее таким образом — возьмите все блоки 16: 9, которые существуют в диапазоне от 160/90 пикселей до 1280/720 пикселей, и выясните, какой из них делится на 11, значение, соответствующее моему базовому ритму.Если вы хотите понять, как это выглядело, вот сокращенная версия процесса:

Я взял все свои блоки, и, поскольку они имеют одинаковую пропорцию (16: 9), я легко расположил их друг с другом. Затем нарисуйте столбцы по ширине меньшего блока. И, конечно же, все блоки соответствовали моему базовому ритму в 8 пикселей. Позже я обнаружил, что ту же логику можно наблюдать и в аранжировке обертонов в музыке.

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

Как принять участие

Назар Грабовский

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

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

Аналитическое решение

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

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

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

Генератор ритмической сетки

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

Один интересный факт обнаружился при доработке десятков сгенерированных макетов.Некоторые соотношения блоков более гибкие, чем другие. Поскольку в медиа используется довольно ограниченное количество пропорций, мы рассматриваем только пропорции 1: 1, 3: 2 и 16: 9. Для 1: 1 вы можете получить ритмические блоки практически любого размера желоба. Но для 16: 9 все наоборот — вы можете использовать только нулевой промежуток, чтобы получить желаемые пропорции блока. Наконец, 3: 2 посередине, в нем изрядно ритмов, но не так много, как 1: 1. В основном это из-за числа 9, поскольку нечетные числа не так удобны для делимости, как числа 1 и 2.И вы мало что можете с этим поделать, если хотите, чтобы соотношение было строго точным.

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

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

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

На этом этапе обнаруживаются популярные системные шрифты (только их названия), но все же нам нужно как-то извлечь из них метрики шрифтов и визуализировать их. Ни один из браузеров не предоставляет готового решения для получения информации о глифах шрифтов и их метриках, поэтому работа с вертикальными метриками анализируется и извлекается с помощью графических инструментов, доступных в браузере.В частности, выбранный шрифт визуализируется на 2D-холсте браузера, а затем анализируется с помощью небольшого кода и метода сканирования — традиционного в семействе алгоритмов компьютерной графики. Обнаруживая линии нижней и верхней границы для глифов H, , d , x , p по отдельности, мы фактически получаем основные вертикальные метрики для выбранного шрифта — высоту кепки, подъем, x-высоту и спуск соответственно. Теперь, когда у нас есть системные шрифты и их метрики, извлеченные , мы можем вычесть значение UPM x-height, чтобы оценить разборчивость шрифта и визуализировать, насколько оно отклоняется от рекомендованного 500UPM .

Кредит на извлечение метрик динамического шрифта принадлежит Майку Камермансу из команды Mozilla Foundation.

Все эти хлопоты с обнаружением шрифтов и извлечением метрик были сделаны, потому что мы хотели, чтобы веб-приложение генерировало ритмические сетки. Кажется, теперь у нас есть вся информация, необходимая для построения сетки в веб-макете. Но подождите, не так быстро. Выскакивает еще одно препятствие. Похоже, что CSS не обеспечивает контроль над позиционированием текстовой базовой линии (на этот раз мы говорим о фактической базовой линии, а не о номере базовой линии).И очень важно отображать ритмическую сетку с точностью до пикселя, поскольку мы хотим разместить текст точно на базовых линиях, которые равномерно распределены в сетке. Я имею в виду, что в CSS вы можете позиционировать текст по вертикали, как хотите (относительно, абсолютно, смещенный на разные единицы), и указывать высоту строки для многострочного текста, но вы не можете контролировать, где именно базовая линия текста помещается для произвольного шрифта. Простое упражнение по разметке веб-страниц для изучения этой проблемы: поместите текст, нарисуйте горизонтальную линию и расположите эту линию, как если бы она была базовой.Затем произвольно измените гарнитуру или размер шрифта. Попробуй сам. К сожалению, текст больше не соответствует базовой линии после изменения шрифта? К сожалению, консорциум W3C заявляет об этом прямо — «CSS не определяет положение базовой линии строчного блока» (стандарт W3C CSS). Это означает, что вы не можете указать положение базовой линии при размещении фрагмента текста. Поэтому каждый производитель браузеров реализует автоматическое базовое позиционирование в соответствии со своими убеждениями, и, конечно, они различаются между браузерами (хотя и не во всех).

К счастью, ребята из сообщества Adobe столкнулись с подобной проблемой, поэтому я позаимствовал их решение стойки для выравнивания буквицы (кредит Алана Стернса) и адаптировал его только для выравнивания базовой линии, но для многострочного текста. Попытайся. У трюка Strut все еще есть ограничение на минимальную возможную высоту строки, обычно около 120% в зависимости от шрифта. Но это единственное жизнеспособное кросс-шрифтовое и кросс-браузерное решение, которое я смог найти на данный момент. Я хотел бы услышать ваши идеи о том, как найти идеальное решение без ограничений.Если вы хотите лучше понять, что здесь происходит, есть отличная статья Кристофера Ауэ, объясняющая внутреннее устройство выравнивания в CSS и связанные с этим проблемы — «Вертикальное выравнивание: все, что вам нужно знать».

Заключение

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