Модульная сетка как основа хорошего дизайна. Часть 1 | by Vera Fesianava

В этой статье рассказывается о создании 12-ти колоночной сетки для журнала.

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

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

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

Итак, рассмотрим сетку журнала Свет Евангелия, который издавался ежеквартально в течение 20 лет (с 1990 по 2010 годы) в Ровно (Украина).

Как и многие печатные издания, журнал СЕ создавался на базе модульной сетки. Но с 1990 по 1993 годы в журнале не было компьютерного макета. Сейчас даже трудно представить себе, что тогда журнал делался, в общем-то, почти вручную. Хотя в редакции уже были первые компьютеры, и даже лазерный принтер имелся. Но набирали и распечатывали только текстовые полосы. Макет журнала выклеивался вручную — с помощью бумаги, клея и ножниц — заголовки, рисунки, текстовые полосы. И все-все страницы технический редактор (т.е. я) вымеряла линейкой по миллиметрам…

В 1994 году редакция приобрела программу Adobe PageMaker 5.0. Технический редактор Вера Фесянова и дизайнер Олег Моргун разработали компьютерный макет журнала СЕ с трех-колоночной модульной сеткой.

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

Модульная сетка журнала Свет Евангелия, 1994.

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

Развороты СЕ # 1’95. Для блока текста с 2 колонками (разворот справа) пришлось вручную делать дополнительную разметку станицы — с помощью дополнительных вертикальных направляющих (голубого цвета) обозначен центральный промежуток между двумя колонками. Развороты СЕ #2’96 и #1’97.
Даже такая простая сетка позволяла формировать разные по ширине блоки — в три, две или одну колонки. Вертикальные направляющие по центру промежутка между колонками добавлены вручную, чтобы было легче выровнять информационные блоки с фотографиями.

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

И тогда (в 1998 году) нашему техническому редактору Вере Фесяновой пришла мысль сделать 12 колонок на странице. И это оказалось очень удачной идеей. Мы получили гибкий макет с функциональной моделью модульной сетки для большого количества разной информации и элементов.

Сетка журнала СЕ # 1’98.

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

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

b. соблюдаются равномерные интервалы между элементами.

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

Разворот СЕ #2’98. Графические элементы легко выравнивается в 12-колоночной сетке.
Фотография на правой странице выходит за пределы центральной колонки и легко выравнивается горизонтально в сетке соседних колонок.12-колоночная сетка журнала Свет Евангелия.
Затемненные участки на странице слева показывают, как с помощью этой сетки можно получить 5 типов деления на колонки. Широкие боковые поля также добавляют возможности при выборе колонок и размеров фотографий (страница справа).

Особенность 12-колоночной модели в том, страницу можно легко разделить на модули по 2, 3, 4 и 6 колонок, связанных с сеткой всего документа. Так мы можем играть с шириной и формой колонок, рассматривая текстовые блоки как отдельные модули, и смешивать количество столбцов в каждой истории. Например, если текст и изображения будут располагаться в двух узких колонках, а пояснительная информация — в широкой колонке, или наоборот.

Развороты СЕ #2’98 и #2’2000.

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

Разворот журнала СЕ #3’2004.
Здесь материалы внизу визуально отделены от основного материала не только цветовыми фоновыми плашками, но разной шириной колонок текста.
Основной материал заверстан в 3 колонки на обеих страницах разворота.
Текстовый материал слева внизу растянут на 2 колонки,
внизу справа — текст заверстан в 2 колонки по ширине трех.Разворот СЕ #2’2009.

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

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

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

Интересно, применима ли модульная сетка в детском журнале? Об этом можно прочитать в части 2.

Заметили что-то несуразное, оставьте заметку на полях. Вопросы? Комментарии? Напишите внизу.

You can read English version here >

Спасибо. Если интересно, то здесь следующий рассказ о технике Diotone: Great Design Solutions.

Правила построения журнальной сетки

• 
  Дизайн
• 7 мин на чтение
• 
  17825

Дидактическое вступление

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

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

Построение геометрической основы сетки

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

Итак, размеры А4 формата — 210 на 297 мм. Сколько же модулей может поместиться на этом пространстве? Начнем с ширины: основу модульной сетки при многоколонной верстке задают колонки, а 10-м кеглем больше трех колонок не сделаешь — для книжного издания их вообще было бы 2, но для журналов 2-й категории (популярные, для досуга) согласно СанПиН 1.1.998-00, имеем право сделать 3 колонки.

Соответственно по вертикали имеет смысл сделать 4 модуля, это существенно упростит работу рекламного отдела, образовав нам супермодуль в полстраницы по горизонтали. Да и вообще 3 на 4 — интереснее, чем 3 на 3.

Итак, у нас 3 на 4 модуля, начинаем с ширины. В ширину у нас 3 колонки (равные между собой), 2 средника — для простоты дела предлагаю назначить их по 1 цицеро; почему так проще — станет ясно чуть позже. Остаются еще поля. Поскольку макет условный, будем придерживаться книжных стандартов, т.е. корешковое поле самое узкое, за ним идут головочное, наружное, и нижнее — самое большое.

Получаем:

210 – 9 – 3К = П1 + П2,

где 210 — ширина листа А4 в мм, 9 мм — это 2 средника по 1 цицеро и 3К — три колонки одинаковой ширины.

Сейчас начинаем подбирать значение К, учитывая, что ширина колонки равна целому числу квадратов (либо простой составной дроби квадратов). При ширине колонки… ну, скажем, в 4 квадрата получаем 201 – 3х18х4 = 210 – 216, т.е. отрицательное значение суммы полей. Ясно, что 4 квадрата — это много, возьмем меньше. При ширине колонки в 3 квадрата 201 – 3х18х3 = 201 – 162 = 39 мм, что уже вполне допустимо. Делим эти 39 мм в соотношении 1:2, получаем 13 и 26 мм. Однако давайте вспомним, что на самом деле внешнее поле равняется визуальной сумме двух внутренних, а не геометрической. Думаю, что если мы возьмем 16 и 23, то поступим правильней.

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

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

Откуда это было известно? Да из выбранного шрифта, с которого мы начали рассуждения. Интерлиньяж в 12 пунктов — это как раз и есть шаг в 1 цицеро по вертикали. И вот здесь мы натыкаемся на главное правило построения сетки: расстояния между модулями по вертикали вынуждено должны быть кратны целому числу строк текста. Именно строки текста создают реальный шаг, которым мы можем пользоваться при построении сетки, и ничто другое. Если представить, что мы выбрали вертикальную отбивку, не кратную высоте строки (интерлиньяжу), то неизбежно появляется проблема приводности блоков текста в пределах полосы, и верстка усложняется, вместо того, чтобы стать «автоматически легкой».

Вот как это выглядит:

Поэтому у нас в квадрате 4 строки, а межмодульная отбивка — еще строка. Это позволяет нам точно подогнать постскриптовские значения шрифта под необходимые пункты Дидо — подгонять все равно придется, если мы пользуемся программой верстки, которая не дружит с континентальной типографикой. По СанПиНовской таблице мы должны прибавить полпункта к кеглю (вместо 10 использовать 10,5 постскриптовских пунктов), но интерлиньяж просто увеличить на 0,5 не получится. Поэтому просто построим максимально длинную колонку на полосе (ну, например в 15 квадратов — 270 мм, при 12 пунктах Дидо интерлиньяжа это должно нам дать 60 строк), заполним ее текстом и подгоним интерлиньяж так, чтобы они реально по месту совпали.

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

Мы можем считать аналогично горизонтали:

297 – 3х4,5 – 4М – 20 = П4,

где П4 > 23,
а можем посчитать хитрее. Давайте включим горизонтальную отбивку в 1 цицеро прямо в высоту модульного прямоугольника, а потом уже из нее вычтем — при этом отбивка нижнего модуля увеличит собой нижнее поле (мы ведь помним, что нижнее поле можно увеличивать практически безнаказанно).

297 – 20 – 4М > 23

Итак, 277 / 4М > 23, где М меняется как целое число квадратов или простая дробь квадратов. Пользуясь калькулятором, который есть у каждого студента в сотовом телефоне, после недолгих подборов устанавливаем, что М = 3 1/2 квадрата, следовательно, без отбивки 3 1/4 квадрата, или, как нетрудно подсчитать, 13 строк.

Просто четыре раза откладываем по вертикали 63 мм, а потом от каждого модуля отрезаем снизу 4,5 мм. Таким образом, нижнее поле получается 25 + 4,5 = 29,5 мм. А чтобы лишняя линия, отстоящая от нижнего модуля на цицеро, не пропадала зря, ее вполне можно использовать для привязки колонцифры.

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

У нас 12 модулей по 3 квадрата (54 мм) в ширину и 3 1/4 квадрата (58,5 мм) в высоту, разделенные отбивками в 1 цицеро, что дает нам по дополнительной строке при верстке текстового блока на несколько модулей в высоту.

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

На что я хотел бы обратить внимание — на функциональность сетки.

Во-первых, теперь ясно, какого размера нужны иллюстрации (и рекламные модули!) на полосе. Очевидно, что минимальным размером будет 1 модуль — 54х58,5 мм, затем 2 модуля — горизонтальный 112,5х58,5 мм и вертикальный 54х121,5 мм, и так далее. Это означает, что работу по верстке и обработке иллюстраций можно «распараллелить», разделив между двумя работниками. Это очень облегчает издание журнала.

Во-вторых, у нас теперь точно известно, сколько знаков входит на полосу. У нас 3 колонки по 3 квадрата в ширину, а в высоту — 55 строк (4 модуля по 13 и 3 в интервалах между модулями). Зная емкость квадрата в выбранной гарнитуре при выбранном трекинге, нетрудно посчитать емкость полосы. Конечно, емкость квадрата придется определять экспериментально: это раньше, когда во всех типографиях СССР было по два десятка одинаковых шрифтов, можно было просто в справочнике привести таблицу емкости — загляните в Гиленсона, там так и сделано. Сейчас все зависит от того, какой программой вы пользуетесь, какая версия шрифта у вас установлена, даже под какой фотонаборный автомат вы скомпоновали публикацию — но решить эту проблему просто. Набираем колонку в два десятка строк, считаем число знаков с пробелами (просто кинуть через буфер обмена в «Ворд» и заглянуть в статистику), делим на число строк, умноженное на ширину колонки в квадратах — вуаля!

Вот у меня для того шрифта, что использован в примере — это MagistralC, реальные значения 10,5/12,7 — емкость квадрата получилась 9,55, или 28,65 знаков в строке. Ну, даже если чуть занизить расчетную емкость, это означает что в странице, целиком заполненной текстом, будет 55х3х28,6 = приблизительно 4 700 знаков. Сейчас смотрим на объем статьи, которую нам предлагается заверстать на разворот. Предположим, там 8 600 знаков, и еще хочется поставить 2 иллюстрации: одну побольше и квадратненькую (2х2 модуля), и одну узенькую, но длинненькую (1х3) модуля. Нетрудно подсчитать, что первая картинка съест у нас 27 (2х13 +1) строк в 2 колонках, итого 1544 знака, а вторая — 13х3 строк, или 1115 знаков. На развороте у нас 2х4 719 = 9 400 знаков, а нужно 8 600 + 1 544 + 1 115 = 11 259, что уже на 800 знаков больше.

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

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

Макетирование на основе сетки

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

Автор: Андрей Якубовский

• #indesign
• #дизайн
• #сетка
• #советы
• #статья

• 
  
• 
  2
• 
  

Улучшение дизайна пользовательского интерфейса с помощью Layout Grids — Smashing Magazine

• 17 мин чтения
• Grids
• Поделиться в Twitter, LinkedIn

Об авторе

Ник Бабич — разработчик, технический энтузиаст и любитель UX. Последние 10 лет он работал в индустрии программного обеспечения, специализируясь на…
Больше о
Ник ↬

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

(Это рекламный пост. ) Дизайнеры всех типов постоянно сталкиваются с проблемами со структурой своих проектов. Один из самых простых способов контролировать структуру макета и добиться последовательного и организованного дизайна — это применить систему сетки.

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

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

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

В этой статье я собрал много информации о сетках, например:

• что такое сетки,
• краткая история сетки,
• базовая теория сеток,
• четыре типа сетки макетов,
• сетки макетов в интерактивном дизайне.

Больше после прыжка! Продолжить чтение ниже ↓

Что такое сетка?

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

Сетки позволяют дизайнерам создавать прочную структуру и формы в своих проектах. (Изображение предоставлено Thinking Form)

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

Книжная полка — это своего рода сетка. сетка для размещения окрестностей. Таблицы в Microsoft Excel являются примером системы сеток, применяемой к содержимому. Сетки обычно применяются для дизайна экрана. Эта страница содержит сетку элементов. (Изображение предоставлено Материальным дизайном)

Краткая история сетки

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

Сетка и дизайн ранних книг

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

Псалтирь Сент-Олбанс, Англия, 12 век. (Изображение предоставлено Citrinitas)

Эпоха Возрождения и гармоничный дизайн

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

Мазаччо, «Деньги дани», капелла Бранкаччи, 1425 г. (Изображение предоставлено художником)

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

Диаграмма Виллара де Оннекура остается руководящим принципом в дизайне печатных объектов, таких как обложки книг. Он показывает, как найти баланс для создания элегантного образа. (Изображение предоставлено Retinart)

Сетка и полиграфический дизайн

С начала печати (середина 15 века) до промышленной революции (конец 18 века) книга была основным продуктом печати. За редким исключением, шрифт обычно устанавливался в одну колонку по ширине на странице и располагался симметрично на развороте.

Книга эпохи Возрождения (Изображение предоставлено MOMA)

Промышленная революция и борьба за внимание

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

Газетная страница с рекламой, Париж, Франция, 1919 год. (Изображение предоставлено Wisegeek)

Швейцарская школа

Сетка, какой мы ее знаем сегодня, связана со швейцарской типографикой. Во время Первой мировой войны сохранявшая нейтралитет Швейцария стала местом встречи творческих людей со всей Европы. Поскольку печатные издания должны были быть на трех официальных языках — немецком, французском и итальянском, — дизайнерам понадобилась новая система сетки, которая позволила бы это сделать. Типографы, такие как Ян Чихольд и Герберт Байер, использовали модульный подход. Впервые пустое пространство использовалось в качестве динамического компонента в дизайне макетов, что привело к разработке сложных сеточных систем.

Йозеф Мюллер-Брокманн. Сеточные системы в графическом дизайне , 1961. (Изображение предоставлено Томасом Бредин-Грей)

Основы теории сетей

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

Анатомия сетки

Все сетки, простые или сложные, имеют некоторые общие части:

• Формат
  Формат — это область, в которой размещается дизайн. В бумажной книге форматом является страница. В Интернете формат соответствует размеру окна браузера.
• Поля
  Поля — это свободное пространство между краем формата и внешним краем содержимого.

Поле для блока контента

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

Пространство между колоннами называется аллеями.

• Модули
  Модули — это отдельные единицы пространства, созданные на пересечении столбцов и строк (т. е. горизонтальные эквиваленты столбцов).

Модули — это блоки, созданные на пересечении строк и столбцов.

Четыре типа сеток компоновки

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

• сетка рукописи,
• сетка столбцов,
• модульная сетка,
• базовая сетка.

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

Сетка рукописей

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

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

Сетка рукописи в iA Writer (Изображение предоставлено iA)

Многоколоночная сетка

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

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

Обратите внимание, что в этой многоколоночной сетке один столбец зарезервирован для изображений и подписей. (Изображение предоставлено Thinking With Type)

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

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

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

Каждый прямоугольник в этой сетке является модулем. Модульная сетка используется, когда одинаково важны как вертикальное, так и горизонтальное пространство. (Изображение предоставлено Thinking With Type)

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

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

Базовая сетка формирует вертикальное расстояние в дизайне. Здесь модульная сетка создается путем позиционирования горизонтальных направляющих относительно базовой сетки. (Изображение предоставлено Thinking With Type)

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

Сетки макетов в Adobe XD отображаются на экранах разных размеров.

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

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

Сетки — основная часть руководств по стилю

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

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

Передовой опыт для макетных сеток

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

Выберите сетку, которая вам действительно нужна

«Сколько столбцов?» — это первый вопрос, который задают дизайнеры, начиная работать с сеткой.

Adobe XD позволяет указать количество столбцов, ширину поля и ширину столбца.

Многие популярные фреймворки используют сетку из 12 столбцов одинаковой ширины. Число 12 легче всего делится среди относительно небольших чисел; возможно иметь 12, 6, 4, 3, 2 или 1 равномерно расположенные столбцы. Это дает дизайнерам огромную гибкость в макете.

Сеточная система с 12 столбцами одинаковой ширины надежна и гибка и обеспечивает различные способы организации структуры. (Изображение предоставлено Аароном К. Уайтом)

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

Сетка макета из 8 столбцов в Adobe XD.

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

Бумажный эскиз для макета веб-страницы. Количество столбцов должно определяться содержанием. (Изображение предоставлено Майком Роде)

Учитывайте ограничения

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

Кадр важных объектов

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

Обрамление важных объектов

Не бойтесь выходить за пределы сетки

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

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

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

Обратите внимание как на горизонтальный, так и на вертикальный интервал

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

Обратите внимание как на горизонтальное, так и на вертикальное расстояние. Слева: различный интервал по вертикали. Справа постоянный интервал по вертикали

Использование базовой сетки для выравнивания элементов

Как уже упоминалось, базовую сетку можно использовать для горизонтального выравнивания и иерархии. Выравнивание элементов дизайна пользовательского интерфейса (текста, изображений и контейнеров с контентом) по базовой линии означает, что вам нужно сделать их высоту кратной базовому значению. Например, если вы выбрали 8 пикселей в качестве базового значения и хотите выровнять текст, вам нужно будет сделать высоту строки шрифта кратной базовому значению, что означает, что высота строки может быть 8, 16, 24, 32 и т. д. Обратите внимание, что размер шрифта не обязательно должен быть кратным базовой линии, а только высоте строки.

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

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

Мозаичная сетка на экране мобильного устройства (Изображение предоставлено Dine HQ)

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

Приложение Yoox для Android

Протестируйте

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

Заключение

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

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

Эта статья является частью серии UX-дизайна, спонсируемой Adobe. Инструмент Adobe XD создан для быстрого и плавного процесса проектирования UX, поскольку он позволяет быстрее переходить от идеи к прототипу. Дизайн, прототип и публикация — все в одном приложении. Вы можете ознакомиться с другими вдохновляющими проектами, созданными с помощью Adobe XD, на Behance, а также подписаться на информационный бюллетень Adobe Experience Design, чтобы быть в курсе последних тенденций и идей для дизайна UX/UI.

• «Краткая история сетей», Люсьен Робертс, Графика
• «Секретный закон гармонии страниц», Retinart
• «Пять простых шагов к проектированию сеточных систем», Марк Боултон
• «Проектирование сеток», Марк Боултон

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

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

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

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

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

Вот краткая подборка из 8 сеток, которые можно использовать при редактировании, публикации и загрузке маркетингового контента с помощью Visme. Подробнее см. ниже:

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

СВЯЗАННЫЕ: Визуальное руководство по анатомии типографики [инфографика]

Дизайн макета: части сетки

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

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

Формат

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

Поле

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

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

Потоковые линии

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

Модули

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

Пространственные зоны или регионы

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

Столбцы

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

Ряды

Ряды — это горизонтальные пространственные зоны, полностью умещающиеся слева направо.

Желоба

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

Маркеры

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

Типы сеток

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

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

СВЯЗАННЫЕ: 11 правил композиции для недизайнеров

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

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

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

наш браузер не поддерживает тег видео.

Создавайте идеальные макеты с помощью функции привязки Visme к сетке!

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

Зарегистрироваться. Это бесплатно.

Сетка рукописи

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

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

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

Сетка столбцов

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

Сетки столбцов могут иметь всего два столбца или шесть или более столбцов, но это не очень распространено.

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

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

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

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

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

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

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

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

Источник изображения

Сетка базовой линии

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

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

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

Иерархические сетки

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

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

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

Немного истории дизайна Общая информация

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

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

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

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

Источник изображения

наш браузер не поддерживает тег видео.

Создавайте красивые визуальные эффекты для своего веб-сайта с помощью этого инструмента перетаскивания!

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

Зарегистрироваться. Это бесплатно.

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

СВЯЗАННЫЕ: 16 тенденций веб-дизайна, на которые следует обратить внимание

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

Источник изображения

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

Сетки композиции

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

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

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

Источник изображения

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

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

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

Составные сетки

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

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

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