Мой Справочник | WEB-DESIGN | Композиция

КОМПОЗИЦИЯ

Виды композиций:

• Симметрия - асимметрия
• Статика - динамика

Акценты

1. Иллюстрации
2. Крупные заголовки
3. Кнопки, Иконки
4. Текст

Рекомендации:

• ПРОСТРАНСТВО и ОТСТУПЫ - это тоже часть композиции. Нужно оставлять пространство ("воздух") для контента слева-справа, сверху-снизу, чтобы не было заграмажденности
• при выборе композиции всегда отталкивайтесь от типа и количества контента (текст на фото нужно размещать так, чтобы его было видно; большие блоки текста нужно разбивать на абзацы и располагать с левой стороны макета и т.д.).
• у всех элементов сайта должно быть свое место, которое знакомо пользователю по опыту (например, меню находится вверху сайта, кнопка размещается только после какого-то текста, который подготавливает пользователя к клику).
• не изобретайте велосипед, всегда смотрите на готовые композиционные решения уже созданных сайтов и перенимайте их опыт и опыт пользователей.
• Элементы в идеале не должны быть сильно большими, лучше отталкиваться от меньших размеров

Задачи композиции

1. Поймать ВНИМАНИЕ (Визуальная доминанта). Цвет, размер, контраст, пространство
2. Задать НАПРАВЛЕНИЕ (Иерархия заголовков, объектов, направление чтения )
3. УПОРЯДОЧИТЬ (Выравнивание, сетка)

Визуальная доминанта - точка в композиции, которая однозначно цепляет ВНИМАНИЕ. Должна быть однозначной. Акцент. Заголовок, рисунок, цвет, пространство, контраст

Акцентные области. ЯКОРИ



КАК СОЗДАВАТЬ ДОМИНАНТЫ

1. Размером. Чем больше - тем заметнее. Контраст размеров
2. Цветом. Выделение контрастным цветом
3. Простраство. Усиливает фокус внимания. Отступы. Якорные области
4. Иерархии заголовков. Самое важное большое, остальное - меньше
5. Иерархии объектов. Важные объекты должны выделяться размером
6. Фоном. Можо объединять или разделять отдельные смысловые элементы, выделять важные
7. Сетка, модульность. Создаёт порядок, ритм

• Размер

  

• Контрпространство

  

• Выделение цветом

  

• Выделение размером

  

ХОРОШИЙ ДИЗАЙН выделяет ГЛАВНОЕ и ПОДЧИНЁННОЕ, создаёт ИЕРАРХИЮ объектов, помогает пользователю найти свой путь





---

ГЕОМЕТРИЯ

Формы



---

Фигуры в макете

Точка •

В типографике можно рассматривать любой элемент небольших размеров (кнопка, иконка, логотип, отдельные буквы и цифры). Имеют только один фокус внимания. Круг - частный случай точки, самая "эгоистическая фигура", максимально притягивает внимание, максимальный ацкцент. Точечные объекты чаще всего располагают в ЯКОРЯХ.

Линия —

В типографике это строка, самый удобный, читабельный, скромный, спокойный и лаконичный элемент в вёрстке. Это заголовки, хэдэр, футер, невысокие блоки. Как якорный объект строка лучше всего себя чувствует СВЕРХУ или СНИЗУ модуля.

Прямоугольник ▆

Универсальный контейнер для всех типов объектов: точечных, строчных и прямоугольных.

---

Теория близости

Объекты, расположенные близко друг к другу, рассматриваются ближе и по логике и по смыслу

Геометрия должна направлять пользователя, должно быть ощущение СКРОЛЛИНГА сайта

---

Золотое сечение (пропорция Φ)

Это такое деление целого на 2 части, при котором отношение БОЛЬШЕГО / МЕНЬШЕМУ = ЦЕЛОГО / БОЛЬШЕМУ ≈ 1.618

Это такое деление целого на 2 части, при котором отношение МЕНЬШЕГО / БОЛЬШЕМУ = БОЛЬШЕГО / ЦЕЛОМУ ≈ 0,618

1 = 0.618 + 0.382 ≈ 62% + 38%;
Φ = 0.618 / 0.382 = 1.618;
Φ2 - Φ = 1;
Если нужно найти БОЛЬШУЮ часть, то значение ЦЕЛОГО нужно поделить на Φ (либо умножить на 0,618)
Если нужно найти МЕНЬШУЮ часть, то значение ЦЕЛОГО нужно поделить на Φ² (либо умножить 0,382)


Последовательность Фибоначчи:

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

1 + 1 + 2 + 3 + 5 + 8 + 13 + 21 + 34 + ... + n + (n+1) + ...;
(n+1):n ---> Φ