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

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

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

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

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

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

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

Виды сеток

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

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

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

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

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

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

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

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

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

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

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

Значение сеток в дизайне

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

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