Основой правильного дизайна сайта является информация. Порой ее может быть очень много. Появляется сложность в ее расположении, построении структуры и иерархии. Возникает путаница и неразбериха. Особенно если речь идет о динамично развивающемся веб-ресурсе. Чтобы избежать сложностей, необходимо придерживаться определенных принципов и правил, которые не только облегчат работу веб дизайнера, но и помогут улучшить удобство использования ресурса. Современный правильный дизайн сайта не может обойтись без модульной сетки. Она является основой и значительно упрощает работу разработчикам.
Правильный дизайн сайта – создание модульной сетки
Модульная сетка представляет собой определенную схему расположения элементов и блоков. При помощи модульной сетке создаются макеты в журнал, верстается брендбук, иногда даже создается логотип. Это каркас, который строится в горизонтальном и вертикальном направлениях одновременно. Главным удобством ее использования является то, что принципы построения модульной сетки описываются при создании веб гайдлайна. Здесь закладываются ключевые закономерности, задается ритм и основные пропорции. Таким образом, просчитанная один раз сетка служит основой для всего макета.
Для построения сетки необходимо отталкиваться от двух основных вещей: контента (тексты, таблицы, иллюстрации, медиа-файлы), пропорции и площади носителя. Именно эти два критерия являются главными. Они определяют модульную структуру. Правильно рассчитанная сетка позволит вписать все блоки в каркас, в будущем не возникнет ситуации, что какому-то элементу не найдется места. Это защита конечного продукта, работы разработчика и дизайнера.
Алгоритм работы.
Начало построения – определение вертикального ритма. Для этого необходимо задать и просчитать базовую высоту строки (интерлиньяж) и базовый размер шрифта (кегль). При фиксированном размере носителя и готовом ключевом контенте можно сразу задать межстрочный интервал. Если же такой информации нет – нужно определить размер шрифта. Базовый кегль необходимо брать таким, которым будет набираться основная масса текста (как правило используется 13-16 pt), а интерлиньяж составит 150-200% от кегля. Иногда и более. Так, вертикальный ритм определен и можно разлиновать макет.
Затем задается количество колонок и межколоночный интервал. Количество колонок зависит от контента. Определяются размеры занимаемой площади, соотношение видов и количество информационных блоков, закладываются отступы. При работе с большими проектами, где множество страниц и макетов, лучше сразу увеличить количество колонок в 2-3 раза – создать запас прочности.
Межколоночный интервал задается для того, чтобы блоки не перекрывали друг друга, и между ними был «воздух», что сделает более приятным визуальное восприятие страницы. Разумеется, современный дизайн сайта может создаваться и без учета межколоночного интервала. Это также допустимо. Размер может быть равным размеру колонки либо, что чаще встречается, в несколько раз меньшим ее ширины. Все зависит от контента, который будет размещаться на странице, его вида и целей.
Что такое модуль?
Вот и готова модульная сетка. Что же такое модуль? Это простая пропорция. Его высота равна нескольким строкам, а ширина – ширине колонки. Однако не запрещено строить сложную структуру. Модуль можно вытянуть, растянуть по горизонтали или вертикали, можно чередовать разные по высоте модули. Если в этом есть логика и закономерность, сохраняющая вертикальный ритм.
При создании сложного многокомпонентного проекта часто используется несколько вложенных сеток. Это может быть посторонняя или встраиваемая информация: онлайн-карты, платежные системы, плееры и так далее. Этого не стоит бояться. Просто необходимо учесть отступы для таких блоков, предусмотреть чистое пространство вокруг них, как по вертикали, так и горизонтали. Визуально отделить основной контент – это обособит сторонние элементы и добавит баланса.
Модульная сетка – это просто методология. Она упрощает расчеты и построение правильного дизайна сайта. Она не является законом и может быть изменена, если того требует внутреннее чутье дизайнера и визуальное восприятие. Бывает, что возникают оптические иллюзии и искажения, из-за которых стоит изменить расположение определенных блоков. Это можно с легкостью сделать.
Адаптивность
Существует множество тонкостей современного дизайна сайта. Построение макета с размещением, подачей контента зависит от визуальной массы блоков и массы окружающих их элементов. Также разработка зависит от платформы, на которой будет осуществляться загрузка ресурса. Несомненно, использование различных устройств ведет к искажению отображения страниц. Поэтому пиксельный подгон всех блоков не имеет смысла. Идеальную картинку получить практически не возможно. Поэтому к разработке следует подходить философски и лишний раз не усложнять себе работу.
При создании макета необходимо уметь проектировать систему модульной сетки и навигации, формировать структуру информации, выделять определенные блоки и строить их иерархию. Благодаря этому информация будет легко восприниматься визуально. Пользователю будет удобно работать с ресурсом, находить нужные элементы. Добиться этого проще всего используя модульную сетку. Ведь веб-дизайн – это создание красивой, практичной и, обязательно, удобной системы.
