Развиваем дизайн навыки вместе с Денисом (Типичный дизайнер)!

Сетка 2025 + Направляющие

Сетки и направляющие — скелет страницы, основа для контента. Сильный инструмент, а добавив щепотку знаний, можно вызывать яркие ощущения и эмоции. Эмоциональный дизайн и хороший уровень в UI является нормой в наше время в продукте, а модульные сетки и направляющие в этом помогают!

001. Модульные сетки нужны?

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


002. Вы тут главный

Когда речь идет о сетках и направляющих, то главное понимать важное правило — вы управляете ими, а не они вами. В начале работы над макетом вы выстраиваете их под свои идеи, продумывая структуру заранее, но не наоборот. Если выставлять сетки и направляющую без анализа, то произойдет ситуация, где 12 колоночная система вас сковывает и ограничивает в решениях, а композиция никак не может выстроиться красиво. Обязательно подумайте с каким видом контента вы работаете, кто ваш пользователь и как будут расставлены акценты.

003. Направляющая

Направляющая (силовая линия) — является визуальными, вертикальными рельсами, по которым юзер считывает контент и придаёт ощущения визуального баланса. Силовая линия создает привычный пользователю паттерн сканирования информации, по которому, дизайнер расставляет выгодные ему акценты. Поэтому важно ставить акценты по ней. Акценты это: заголовки, фотографии, карточки, кнопки и всё то, на чем важно сфокусировать внимание пользователя.

004. Эмоции и ощущения

Сетки и направляющие — это архитектурный и эмоциональный подход, как и весь дизайн. Благодаря сеткам и направляющим дизайнер может выставить контент и акценты так, чтобы вызывать у пользователя нужные эмоции. Если контент выстроен по вертикали вниз без смещений и изгибов, это дает ощущение стабильности, фундаментальности, что отлично подходит для архитектурного бюро или юридической фирмы. Динамику и движение можно показать через смещение акцентов от одной направляющей к другой, что может быть супер актуально для спортивных сайтов. Ну и просто, сетка это красиво!

Забери с собой:
Главное помнить, что типографика, цвета, анимации, сетки и направляющие это инструменты дизайнера, а как ими воспользоваться и для чего — решать нам.

Илья Абраменко х Типичный Дизайнер
Коллаба дня💪🏻

А как вы используете эти инструменты в своих работах? (кидайте проекты в комментарии!)

Долго я пропадал, работал, выгорал, работал и творил. Не самый легкий период позади, но движение вперёд никто не отменял.

Закончил и выложил свой следующий кейс, о которым я когда-то говорил и спустя полгода он готов ( но в планах ещё чуть допилить).

Редизайн интернет магазина Norse Project с упором на типографику, сетку и композицию, где главная идея была в том, чтобы разделить взаимодействие пользователя на две функциональные части.

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

Dprofile
Behance

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

Посмотреть книжку можно тут