Создавайте лучшие дизайны с помощью советов и рекомендаций по сетке макета.

Эта статья предоставлена ​​вам Buninux.com .
Посетите наш магазин цифровых активов, чтобы повысить уровень своего дизайнерского инвентаря .

вступление

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

Поэтому хочу поделиться своими советами по освоению сетки в UI дизайне. В этом выпуске мы поговорим о сетках разметки. Начнем ✌️

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

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

Терминология

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

Совет 1. Выбирайте числа с умом

Хотя 12-столбцовая сетка лайков Bootstrap является наиболее популярным выбором, она не является обязательной. Выбирая сетку, выберите ту, у которой количество столбцов действительно необходимо вашему дизайну , ни меньше, ни больше .

Совет 2. Знайте свои ограничения

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

Наиболее распространенные разрешения экрана (пикс.)

• Рабочий стол: 1440x1024
• Планшет: 768x1024
• Мобильный: 320 x 640

Учитывайте как вертикальные, так и горизонтальные интервалы, чтобы сделать ваш макет более привлекательным и последовательным.

Совет 4 - Формируйте вертикальный ритм

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

Дополнительный совет: отрегулируйте высоту строки шрифта в соответствии с базовой сеткой.

Например: если вы выберете 4 пикселя в качестве единицы базовой линии / сетки, для выравнивания текста вам нужно будет установить высоту строки шрифта, кратную единице, что означает, что высота строки должна быть 4, 12, 32, 64 и т. Д.

Совет 5. Используйте силу рамки и цвета

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

Совет 6 - Выйдите из сетки

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

Совет 7. Адаптируйте свою сетку

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

Совет 8. Научитесь создавать без сетки

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

Научитесь создавать с сеткой, не перенося ее на холст. Время от времени наблюдайте за своим макетом без «очков-сеток», чтобы найти наиболее креативные решения для ваших задач.

Полезные ресурсы

Ресурсы

• Сетки размещения материалов ;
• Адаптивность и верстка - HIG ;
• Контейнер Flexbox - WC3
• Система сеток Bootstrap

• Визуализатор сетки макета - Улучшенная визуализация макета (Figma);
• Генератор сеток - Генерация сеток за секунды (Фигма);
• Направляющие - быстрое создание направляющих для выбранного элемента (эскиза);
• Копировать / Вставить —Копировать и вставить сетки макета (эскиз).

Этот материал изначально был размещен в моем Instagram .

Если вы хотите поддержать выпуск новых руководств, вы можете посетить мой магазин цифровых активов и поддержать своего местного дилера по дизайну :)

Посетите buninux.com - Цифровые активы для творчества