11 принципов использования сеток в графическом и веб-дизайне
Правила и лайфхаки, которые пригодятся для создания сеток в графическом дизайне и веб-дизайне. Проверено в проектах, обязательно бери себе на вооружение ;)
P.S: Даже здесь в этой статье есть сетка, хоть и в 1 колонку
Что такое сетка, какая бывает и зачем она нужна-то вообще?
Сетки — один из ключевых инструментов дизайнера, как я много раз повторял в уроке. Сетка помогает достичь согласованности элементов, установить связи между ними и задать визуальную систему и помочь пользователям ориентироваться на твоем сайте. А еще сетка привносит гармонию в дизайн) вообщем это неотъемлемая часть так сказать.
Лучшие практики в работе с сетками
Разобрал 11 правил работы с сетками. Постарался собрать результаты в практические советы по созданию продуманного дизайна. Держи 👇
Принцип 1. Нет контента — нет сетки
Сетка предназначена для организации объектов в пространстве, в этом и есть ее природа. Если нет контента, нет объектов, значит и нечего организовывать. Поэтому начни с контента и скетча.
«Структурируя при помощи модульной сетки плоскости и пространство, дизайнер получает возможность организовать тексты, фотографии и графические изображения по принципам объективности и функциональности. Логично организованный дизайн поддерживает достоверность информации и располагает к ней читателя».
Принцип 2. Определиться с сеткой помогает дизайн-концепция: сетка и отражение характера бренда если писать по умному.
Сетки — основа современного веб-дизайна. Сетки помогают читателю воспринимать текстовую и визуальную информацию и выделяют сайт в толпе конкурентов.
Сетка — часть дизайн-концепции. Регулируя межколонное расстояние и высоту модуля, ты можешь добиваться таких свойств как уверенность, легкость, открытость, эффективность. С помощью сетки можно задействовать и отразить дополнительные атрибуты бренда, тем самым сделать его идентичность более выраженной.
Разберем примеры сеток сайтов Stripe — Payments infrastructure for the internet и Focus Lab — global b2b branding agency.
Давай побырому построим сетку по шагам.
Шаг 1. Определение оптимального количества колонок
12 столбцов — одна из самых удобных сеток для веба (лично я её очень часто пользуюсь), она помогает размещать в строке как четное, так и нечетное количество элементов, например как 3, так и 4 товара в ряд.
И именно поэтому я на каждом уроке говорю вам, чтобы вы следили чтобы в макете было всё ровно и чётко!
Шаг 2. Регулируем межколоночное расстояние (gutters) и отступы от края экрана (margins)
Итак, мы определили оптимальное количество столбцов. Давай теперь определим межколонное расстояние (gutters) и отступы от края экрана (margins).
Межколоночное расстояние (gutters)
В веб-дизайне принято работать с сетками в 10px. Межколоночный интервал считаем пропорционально модулю, например, межколоночное расстояние может быть 20 или 30, 40, т.е кратко 10.
Отступы от края экрана (margins)
Отступы от края экрана делаем исходя из ширины контентной части макета, то есть области, где будут располагаться изображения и тексты, например 1200px.
Принцип 3. Вертикальный ритм подсказывает как добиться согласованного и приятного дизайна
Вертикальный ритм — это последовательность повторяющихся условных вертикальных линий, расположенных на одинаковом расстоянии друг от друга. Эти линии помогают задать систему отступов между текстом и картинками, заголовками и параграфами, полями ввода внутри формы и их метками и др.
Вертикальный ритм следует одному из принципов дизайна — повторению. Повторение дает возможность создать ощущение, что вещи связаны вместе. Что они части одного плана. И это очень важно!
Принцип 4. Сетка — стандарт разработки дизайна под все экраны и устройства (к этому мы еще будем возвращаться в последующих уроках)
Адаптивный дизайн — это когда любимым сайтом удобно пользоваться дома с компьютера, в машине с мобильника и с планшета.
Причины возникновения адаптивности и актуальность
Сегодня устройств огромное количество: телефоны, планшеты, ноутбуки и т. д. Поэтому создание дизайна рекомендую начинать с составления списка устройств и разрешений, которыми клиенты будут пользоваться.
Нюансы сценариев работы с одним сайтом в разных контекстах на разных размерах экранов
Как правило, пользователи мобильных устройств и пользователи стационарных компьютеров неодинаково смотрят на твою работу. Если у тебя ресторан, то пользователь стационарных компьютеров хочет увидеть на сайте его фотографии, полное меню. Пользователь же мобильных устройств хочет просто получить адрес и часы работы. Понимаешь о чем я?
Пример сетки в работе при создании адаптивного дизайна
Например, сетка из 12 колонок для десктопа может адаптироваться в 8-ми колоночную сетку на планшете и 4-х колоночную сетку для телефона — уменьшаем количество колонок в зависимости от устройства.
Сетка в данном примере помогает ускорить расчет пропорций для колонки с фото и описанием для каждого размера экрана.
!Правила и советы в статье скорее являются общей рекомендацией, нежели строгим руководством к действию