Сетка

Что это?

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

Для чего нужно это знать?

В работе дизайнера, когда макеты состоят из различных элементов, сетка помогает их упорядочить. Сетка позволяет, не вычисляя каждое расстояние и размер в отдельности, заложив ключевые закономерности при её построении всего один раз, затем просто их переиспользовать. Например, сетка позволяет соблюсти правило теории близости и, в частности, правило внешнего и внутреннего, согласно которому внутренние расстояния должны быть меньше внешних. Как только ты начинаешь пользоваться сеткой, сложно не заметить её преимущества: 1. Сетка определяет единый стиль оформления, правила расположения элементов, выравнивания, добавления новых элементов в макет; 2. Ускоряет работу с макетом, так как следуя единым правилам, время на принятия решения где, что, каким образом будет расположено, минимально, кроме того позволяет получать предсказуемый результат при работе в команде; 3. Снижает вероятность ошибок при переиспользовании компонентов макета. Компонентный подход используют в своей работе и разработчики, поэтому компоненты позволяют команде работать синхронно, легко поддерживать изменения и экономить время; 4. Макет выглядит более эстетично, элементы пропорциональны и структурированы. Кроме того, если в дизайне используется сетка, это помогает пользователю быстрее считывать информацию. Сетка создает визуальный порядок и ориентироваться становится легче.

Какие базовые понятия включает этот навык?

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

Где я могу освоить этот навык?

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