Сетки в веб-дизайне, или Как поймать внимание пользователя в Сети

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

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

Как выглядит сетка в печати

Рассмотрим пример простой сетки. Раскройте любую книгу и журнал. Текст в книге занимает всю страницу, исключая поля. Это вид простой одноколоночной верстки.

А в журнале информация делится на несколько колонок.

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

Откуда все началось

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

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

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

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

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

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

Виды сеток в веб-дизайне

Сетки бывают фиксированными и динамическими, простыми и сложными. Рассмотрим классификацию сеток по структуре.

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

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

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

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

Фиксированная или динамическая сетка

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

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

Существует ли альтернатива сеткам?

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

Экскурс в терминологию по рисункам

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

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

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

Но профессионалы предпочитают работать с 12-колоночными макетами, и мы сейчас объясним, почему.

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

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

С чего начать проектирование сетки?

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

• Выберите вертикальный ритм - это последовательность повторяющихся вертикальных линий, которые расположены друг от друга на одинаковом расстоянии. Они задают отступы между текстом и изображениями, параграфами, заголовками, полями и др. Повторение создает ощущение, что элементы дизайна связаны между собой и являются частями одного плана.
• Определите оптимальное количество столбцов.
• Отрегулируйте межколоночное расстояние и отступы от краев экрана. В веб-сообществе принято работать с сетками в 10px. Межколоночное расстояние считается пропорционально модулю - кратно 10. Сетка 10 - воздушная и подходит для веб-дизайна, а 8 - более плотная и хорошо работает в интерфейсах.
• Выделите места для важных информационных блоков. Представьте себя Шерлоком Холмсом и соблюдайте правило дедукции - от общего к частному. Проработайте общую композицию и крупные элементы, затем уточняйте мелочи. Возможно, вы нарисуете несколько черновых эскизов.
• Опуститесь на следующий уровень и разместите блоки, следующие по иерархии. Базируйтесь на приоритете контента и ожиданиях пользователей.
• После детальной проработки сетки на бумаге садитесь за компьютер.
• Выберите шаг для базовых элементов: полей ввода, кнопок, чекбоксов и т.д.
• Распределите контент по текстовым блокам, при этом заголовки должны служить визуальными якорями.
• Сетка помогает в дизайне, но не диктует условия. Поэтому, от нее иногда можно отступить. Если какой-то один блок не помещается в вашу сетку - не подстраивайте его.

Основные принципы работы с системой сеток

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

• Применяйте адаптивный дизайн - для этого создавайте несколько сеток для различных разрешений экрана, накладывайте их друг на друга и старайтесь, чтобы между ними оставалась логическая преемственность. Например, 12 колонок для десктопа адаптируются в 8 колонок на планшете и 4 для телефона.
• Учитывайте контент. Предусматривайте все варианты заголовков, списков, цитат, форматирования изображений и мультимедийных форм. Помните: нет контента - нет сетки.
• Не загоняйте страницы строго в рамки сетки. Иногда можно отступить от правил. Но если в процессе прорисовки дополнительных страниц у вас появляются все новые элементы, которые не вписываются в каркас - значит, ваша сетка не подходит, и ее придется дорабатывать.
• Соблюдайте пропорции. При выборе ширины полосы набора учитывайте высоту строки и кегль (высоту букв). В строке должно быть 7-10 слов. Интерлиньяж (межстрочный интервал) тоже выбирайте в соответствии с кеглем.
• Заголовки и подзаголовки должны обращать на себя внимание - служить некими якорями. Но на странице может размещаться текст и без заголовков. Используйте в нем другие акценты, чтобы повысить восприятие контента.
• Обязательно оценивайте, как страницы выглядят при наполнении контентом. Например, как смотрится длинное интервью в Сети? Часто в блогах оно "подвисает" в воздухе, прижимаясь к краю экрана, а колонки справа и слева остаются пустыми. Такая страница выглядит неряшливо, читатель чувствует себя некомфортно.
• Помните, что изображение или блок текста могут занимать один или несколько модулей как по вертикали, так и по горизонтали.
• Колонка с функцией информационного модуля всегда шире, чем навигационная колонка с меню.
• Не гонитесь за геометричностью. Часто дизайнеры свободно используют сетку, и пользователь не подозревает, что у страницы есть строгая структура. Главное - не сложность готового проекта, а результат.
• Иногда дизайнер обнажает сетку, превращая ее в элемент дизайна, чтобы сработать на ощущение точности и системности.
• Если вы перед разработкой макета задаете модульную структуру - придерживайтесь ее до последней страницы веб-ресурса.
• Когда необходима гибкая верстка - применяйте двенадцатиколоночные сетки.
• Блоки можно делить на симметричные и несимметричные части.
• С помощью сетки задействуйте и отразите атрибуты бренда, делая его идентичность более выраженной.

Резюме

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