.webp)
.webp)
UX/UI и графические дизайнеры имеют много общего. Среди прочего — применение сеток для упорядочивания и организации дизайн-элементов — как на экране, так и за его пределами.
Сетки бывают разных форм и размеров (все зависит от того, что вы проектируете) и имеют долгую историю, которая восходит к самым первым рукописям, созданным человечеством.
Сначала мы определим, что такое сетка, а затем рассмотрим некоторые наиболее популярные типы сеток, которые используются в печатном, веб- и UX/UI-дизайне. Наконец, мы дадим вам 5 полезных рекомендаций, которые пригодятся, когда вы будете использовать сетки в своих проектах.
Что такое сетка?
Сетка — это система для организации лейаута.
Традиционно графические дизайнеры использовали сетки в дизайне печатных материалов (например, книг, журналов или плакатов). UX/UI-дизайнеры также активно работают с сетками, ведь последние играют роль базовой структуры в дизайне интерфейсов (например, веб-страниц, мобильных приложений и т.д.).
Сетки не только помогают визуально упорядочить элементы, они позволяют улучшить опыт взаимодействия за счет повышения читабельности, уточнения информационной архитектуры и создания основы для отзывчивого дизайна.
Почему сетки важны?
Может показаться, что необходимость работать в определенных рамках, с учетом тех ограничений, которые налагает сетка, — это минус, особенно когда речь идет о творчестве. В конце концов, свобода творчества — это отказ от правил, которые нас сдерживают... верно?
Однако опыт подсказывает, что все не так однозначно.
Если вы когда-нибудь сталкивались с творческим блоком, вы знаете, как сильно может пугать чистый лист.
В таких ситуациях ограничения оказываются чрезвычайно эффективными. Они дают нам отправную точку и предоставляют свободу для поиска возможных решений. Именно по этой причине лучшие дизайнеры всегда стремятся работать на основе четкого брифа, который содержит все требования.
Кроме того, сетки — это практическая необходимость. Они делают лейаут структурированным и организованным и формируют основу, на которую могут ориентироваться разработчики, чтобы дизайн вел себя так, как было задумано, на любых устройствах.
6 типов сеток
Каждый тип подходит для определенных целей. Вот несколько основных сеток, которые встречаются в графическом и и UX/UI-дизайне:
1. Сетка из базовых линий
Сетка из базовых линий — это плотная сетка, состоящая из равномерно расположенных горизонтальных линий, которые определяют, где будет располагаться текст. Такие сетки часто применяются в сочетании с колоночными, что позволяет равномерно выровнять строки в столбцах по всему развороту. Простой пример базовой сетки — линованная бумага, которой вы, вероятно, пользовались в школе.
2. Колоночная сетка
Это тот тип сетки, который дизайнеры используют чаще всего. Страница разбивается на несколько вертикальных полей, по которым выравниваются объекты. Такие сетки мы часто можем встретить в газетах и журналах.
3. Модульная сетка
Модульная сетка — своего рода расширенная версия колоночной сетки: здесь к столбцам добавляются строки. Пересекающиеся строки и столбцы создают "модули", которые можно использовать для организации элементов. Модульные сетки часто встречаются в журналах и корпоративных отчетах.