Содержание

Какие виды сеток существуют в дизайне?

Аудио перевод статьи

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

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

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

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

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

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

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

Виды сеток

Существует 4 вида сеток:

1. Манускриптная (блочная) сетка

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

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

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

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

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

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

4. Кастомная сетка

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

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

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

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

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

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

Темы

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

  • Сетки

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

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

  • 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 успешно решает этот вопрос. Только на этот раз, давайте сосредоточимся на том, как их сетки поддерживают различные потребности контента, и как они миксуют их от одной страницы к другой. По-моему, они проделали большую работу по поддержанию последовательности, которая создает единое впечатление, аккуратно связывая страницы вместе. Таким образом они ведут пользователя по контенту, и он знает, чего ожидать. Их ментальная карта не имеет каких-либо сюрпризов, которые могут испортить взаимодействие пользователей с сайтом.

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

Напоследок

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

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

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

Содержание

  • Что такое сетка веб-сайта?
  • Роль сеток в веб-дизайне​
  • Рекомендации по использованию сеток веб-сайтов