Всем привет! С вами sozo. Сегодня я хочу внести ясность в тему сеток: рассказать про основные принципы построения сетки, показать на примерах как она работает, рассказать о своем опыте и предложить парочку информативных источников для более подробного погружения в тему.
Почему сетки – это важно?
Это удобный инструмент для организации пространства. С помощью модульной сетки контент в проекте становится визуально понятным и структурированным.
Сетка помогает избежать ошибок при переносе элементов с одной страницы на другую.
А также сайт на основе сетки проще адаптировать.
«Логично организованный дизайн поддерживает достоверность информации и располагает к ней читателя».
– Йозеф Мюллер-Брокманн, графический дизайнер
Основные принципы
Сетка проектируется благодаря зонированию (разделение контента на функциональные или смысловые зоны). Для того, чтобы создать идеальную сетку для работы, необходимо распределить контент на части – набросать схему будущего продукта.
Далее полученные блоки мы начинаем детализировать. В текстовом выделяем пространство для заголовков, основного текста, а в блоке с картинками намечаем их количество и подписи.
Важно понимать, что несмотря на существование каких-то правил проектирования и детализации, сетки можно трансформировать так, как нужно именно вам.
Timeline конструкция
Вертикаль – это организация времени, в отличие от горизонтали, которая является пространственным элементом, помогающим структурировать пространство экрана.
Вертикальные линии – цепочка каких-то событий. Например, в лендинге сначала экран с кратким описание продукта, более подробный рассказ о нем, потом отзывы.
Для того, чтобы создать приятный, согласованный дизайн, необходимо учитывать ритм. Вертикальный ритм представляет собой ряд повторяющихся условных вертикальных линий, которые располагаются на равном расстоянии друг от друга. Эти линии служат для установления системы отступов между текстом и изображениями, заголовками и параграфами, а также между полями ввода в форме и их метками, и другими элементами.
Сетка – часть дизайн-концепции
Изменяя межколонное расстояние и высоту модуля, вы можете добиться таких характеристик, как уверенность, легкость, открытость и эффективность. Используя сетку, вы можете подчеркнуть и отразить дополнительные атрибуты бренда, тем самым укрепить его идентичность.
Мой опыт
Хочу еще раз подчеркнуть, что иногда можно нарушать «правила».
Большую часть первого курса я посвятила проекту под названием «Галерея мусора» – место, где в мусоре люди замечают что-то прекрасное.
Моя задача как дизайнера заключалась в том, что я должна была передать самобытность и хаос, который тесно связан с такими словами как свалка, отходы и тд.
Но если предлагать простому зрителю неструктурное дизайнерское решение, то скорее всего он не сразу уловит главную мысль продукта, компании, а это – провал проекта.
В представленных плакатах есть четко уловимая структура - выделены направляющие линии. Однако здесь нет как таковой сетки, иначе постеры перестали бы вызывать ассоциацию с мусором и беспорядком.
Более того, плакаты в серии не просто связаны темой и принципом зонирования, но и представлены в движении. Направляющая вертикальная линия с каждым плакатом все дальше от левого края.
Заключение
Сетки имеют большое значение в дизайне. Правильное размещение элементов улучшает визуальное восприятие продукта, способствует объединению различных объектов и созданию гармоничной композиции. Успех проекта зависит от того, как пользователи воспринимают контент, представленный в проекте.
Подборка интересных видео о сетках:
Сетки, композиции и адаптив от UPROCK
7 сеток для интерактивного формата от Сергея Гурова, Prosmotr
Направляющие и паттерны в веб дизайне от German Dolgin
Информационные источники статьи:
Сетка в дизайне: основные принципы от Сергея Гурова, Prosmotr
ТОП-11 принципов использования сеток в графическом и веб-дизайне
Модульная сетка в дизайне лендингов: как сверстать макет быстрее и проще