04/06 Функциональный минимализм. Визуальная гармония и симметрия

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

В основном минимализм полагается на отцентровку контента (успешная и безопасная стратегия, но, конечно же, не единственная). Иногда текст смещается относительно центра, чтобы придать динамику, но самый эффективный способ – это избегать центра макета в целом.

Это требует понимания различных форм симметрии и того, как скомпоновать большие и маленькие элементы на экране. Мы можем классифицировать симметрию на 4 вида:

1. Половинчатая симметрия

Это компоновка элементов на половинах экрана, чаще всего горизонтально, но иногда и вертикально.

halved-symmetry

Источник: Velvet Hammer

2. Приблизительно равная симметрия

В то время как компоновка элементов может быть одной и той же, «визуальный вес» в этом случае равен на обеих сторонах экрана. Например, один большой элемент может быть сбалансирован несколькими меньшими элементами. В примере внизу большая иллюстрация слева несколько уравновешивается текстом и кнопкой призыва к действию справа (Call-To-Action button).

approximate-symmetry

Источник: Squarespace

3. Веерная Симметрия

Начиная с центральной точки элементы располагаются симметрично почти в круговом узоре.

radial-symmetry

Источник: Carlo Barberis

4. Асимметрия

Назовем это организованный хаос. Эта рискованная и трудноприменимая планировка придаст вашему сайту «иное» ощущение по сравнению с остальными сайтами, что может стать именно тем, что вы ищите. Асимметрия добавляет живости интерфейсу, позволяя пользователю «наслаждаться видом» по мере того, как он будет двигаться к цели. Практика показывает, что асимметрия требует огромного опыты и определенных навыков, чтобы сделать все правильно. Иначе у вас получится просто неравномерный макет.

assymetry

Источник: Julie Flogeac

Теги: , , , ,