Композиция в WEB дизайне

КОМПОЗИЦИЯ

ОСНОВЫ КОМПОЗИЦИИ В WEB-ДИЗАЙНЕ

ЧТО

ТАКОЕ

КОМПОЗИЦИЯ

?

КОМПОЗИЦИЯ

— правильное расположение элементов интерфейса, позволяющее наиболее точно передать идею этого интерфейса

Композиция (от латинского compositio) — это соединение (сочетание) различных элементов в единое целое.

КРАТКАЯ

КОМПОЗИЦИИ

ИСТОРИЯ

ЗОЛОТОЕ

1.61803398875

СЕЧЕНИЕ!

МИФ

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

основных шага развития
технологий, которые привели
к развитию композиции

3

Кодексы

Ранние рукописные книги. Эти тексты лишены большинства современных техник, которые мы знаем — в них нет заголовков, нет строчных и прописных букв, а отсутствие пунктуации превращает их в один длинный абзац

Печать

В новой технологии использовались небольшие глиняные, деревянные или металлические блоки с буквами, которые вставлялись в раму, покрывались краской и использовались для создания множества идентичных оттисков.

Дизайн

Использование печатного станка как символа протеста против изобразительного искусства

Зарождение понятия

Моя революция нацелена на так называемую гармонию печатной страницы, которая противоречит творческому потоку, его бурлению и всплескам, проявляющимся на листе.

Если потребуется, мы будем использовать три или четыре краски, и хоть двадцать разных шрифтов на одной странице.

Умбро Аполлонио (писатель)

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

Сетка

Чихольд в 1928 предложил разделение страницы на мелкие равномерные прямоугольники, организующие текст.

"Новая типографика"

Швейцарский

Новое направление в дизайне, называемое швейцарским стилем, появилось в 60-х годах двадцатого века, когда дизайнеры стали увлекаться еще более систематизированным и математическим подходом.

"Модульные системы
в графическом дизайне"

стиль

Диаграмма из книги Йозефа Мюллера-Брокманна «Модульные системы в графическом дизайне», показывающая, как выравнивать текст по сетке

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

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

Интернет

Газета Нью-Йорк Таймс запустила свой новостной сайт в январе 1996 года, всего через несколько лет после того, как интернет из частной сети академических учреждений превратился в публичную коммерческую среду.

575 на 300 пикселей

1999

2006

Сегодня сетки — неотъемлемая часть веб-дизайна. В диджитал продукции дизайнеры используют сетку для создания пустых контейнеров, динамически наполняемых контентом, индивидуальным для каждого пользователя.

Сетки это хорошо

Важность сетки только возросла с распространением динамического контента, который должен адаптироваться под разные размеры экрана

ТЕОРИЯ

ОСНОВЫ

Геометрический и композиционный центр

Композиционный центр

Основные понятия и правила композиции.

Диагональные линии в композиции:

Применение правила золотого сечения:

Правило трех третей:

Динамика и статика в изображении, движение, ритм.

Симметрия

Асимметрия

Достижение равновесия является одним из самых значимых этапов при построении ассиметричной композиции. Равновесие может достигаться противопоставлением размеров, форм пятен цвета и тени.

Ритм

Ритм - один из ключевых моментов в дизайне

Композиция

Композиция – это сложение малых частей в одно целое

и веб-дизайн

Правила игры

Выстраивая композицию, вы задаете правила игры и управляете поведением оппонента.

Формула поведения
пользователя

Якорные объекты – это ключевые точки взаимодействия мозга пользователя с областью композиции

Якоря

Правило силовых сторон. Якорные объекты также можно разместить вдоль одной из силовых сторон композиции.

Силовые

стороны

Для грамотной подачи контента вам необходимо разработать свою метрическую систему.

Основа любой композиции – контент

Как это сделать?

Сетки — инструмент для создания композиции

Восприятием человека можно управлять. Этого мы и добиваемся в своей композиции

Как человек анализирует информацию?

1. Выделяет объект из общего множества

2. Организует информацию, выстраивает иерархию - мозг ищет у элементов похожие атрибуты

3. Проводит категоризацию и приписывает наблюдаемому объекту свойство других объектов этого класса

Базовые элементы композиции

Компоненты

Особенности

Whitespace

Из этого выведено правило «внутреннего и внешнего».

Существует 3 типа группировки информации по принципу воздействия, которые мы можем подать в плоскостном дизайне:

Группировка элементов

Гештальт

Законы композиции основанные на психологии человека

это целостный образ чего либо, создаваемый нашим восприятием.

Взаимодействие

Закон Фиттса. Закон Хика. Закон Якоба. Закон упрощения. Закон Миллера. Закон крайней позиции и т.д.

трактует свои законы

ВЫВОД

Берем контент -> Разбиваем его на типы информации-> Выбираем сетку для подачи контента -> Контролируем работу пятен -> Приводим хаос к порядку. Убираем ненужные мелочи -> Проверяем по психологическим моментам.

Как правильно сделать композицию?

10 правил

которые дизайнеру стоит учитывать и использовать

1.
АКЦЕНТИРУЙТЕ ВНИМАНИЕ
НА ГЛАВНОМ