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

v

Визуальная иерархия и композиция в веб-дизайне...или «сделайте мне красиво»

© Ekaterina Andreeva, Epic Skills, 2015

Дизайн = коммуникацияВоспринимая информацию мгновенно,мозгу свойственно создаватьвизуальные отношения

На этом слайде изображено два круга:

v

Но вы сразу же нашли способ различить их,не так ли?...а теперь задачка посложнее

Но тем не менее, вы можете точно описать любой из объектов здесь

При чем тут веб?...к слову, так выглядит большинство сайтов в рунете

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

v

Большой объем информации можно передать, используя простейшие инструменты

...любая организация информации лучше хаоса

Быстрый запускСамый лучший и недорогой способ узнать спрос на нишу:от ТЗ до первой заявки до 21 дня (разработка от 14 дней).

Самый лучший и недорогой способ узнать спрос на нишу:

от ТЗ до первой заявки до 21 дня (разработка от 14 дней).

Быстрый запуск

Например:

v

Как управлять вниманием:инструментарий...о чем молчат учебники по фотошопу

Размер и пропорции

Чем больше предмет –тем больше вниманияон привлекает

Хороший пример:

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

Плохой пример:

Не надо так :(

Размер имеет значение:

Задание на размер:

Он – тяжелый

Дано: два квадрата, три геометрические фигуры (выбрать одну)

Задача: визуализировать тезис «он – тя-желый»

v

Цвет и цветовые отношения

Сочные, контрастныецвета, подчеркивающиеимидж бренда Orangina

Хороший пример:

Цвет и восприятие:

Ваши серые лица не вну-шают доверия...»

«

Плохой пример:

Земфира

...и никаких ассоциаций

Два способа добиться цветовой выразительности:

Существенная разница в тоне в рамках одного цвета

Существенная разница в цве-те на основе цветового круга

Тональный контраст

Цветовой контраст

58%

40/9/56 253/116/0

0%

Как смешать и не облажаться

Аналоговые цвета

Непосредственные соседи на цветовом круге. Не имеют сильного контраста по те-плохолодности.

Дополнительные цвета

Противоположны на цвето-вом круге, создают сильный контраст. Использовать с осторожностью.

Как смешать и не облажаться

Триада

Самая беспроигрышная схема:равнобедренный треугольникна цветовом круге.

Тетрада

Две пары дополнительныхцветов, требует осторож-ности с теплохолодностью.

Ресурсы для вдохновения:

stilyfyme.com materialpalette.com

color.adobe.com

coolors.co

flatuicolorpicker.com

colorcombos.com

paletton.com

Извлекает цветовую палитру и шрифты с любого заданного url

Выбери два цвета, и он создаст цветовую гамму в стиле material design на их основе

Устоявшееся решение от Adobe для работы с цветом на основе цветового круга

Супербыстрый генератор цветовых палитр – просто жми на пробел

Палитра для flat-интерфейсов

Масса готовых палитр

Простой и удобный инструмент для создания цветовых палитр

Текст, выравнивание и сетка

Аккуратное выравнива-ние и четкая визуальная иерархия всех блоков не дает запутаться даже в таком минима-листичном дизайне

Хороший пример:

Порядок и хаос в тексте:

Хаос, текст ни в одном из блоков не выглядит цельным. Что главное?

Плохой пример:

Победитель конкурсаЗолотой сайт»???«

Как навести порядок:

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

Задав общую иерархию необходимо разобраться с визуальными отношениями внутри каждого композиционного блока на сайте

Общая визуальная иерархия

Суб-иерархии в каждом из блоков сайта

v

Как управлять вниманием:принципы Гештальта...которым не учат в художественной школе

Схожесть

Объекты, которые схожи, воспри-нимаются более связно, нежели объекты, которые различны

Принцип схожести:

Схожесть и веб-дизайн:

Благодаря принципу схо-жести UX Magazine по-зволяет легко отличить информационный кон-тент от рекламного

Хороший пример:

v

Замкнутость

Взгляд интерпретирует сложные и незавершенные формы как про-стую и цельную форму

Принцип замкнутости:

Замкнутость и веб-дизайн:

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

Хороший пример:

Близость

Объекты, расположенные рядом, име-ют тенденцию восприниматься еди-ным целым

...«теорию близости» придумал не Ле-бедев, а Макс Вертгеймер в 1912 году

Принцип близости:

Близость и веб-дизайн:

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

Хороший пример:

v

Форма/фон

Все объекты воспринимаются либо как форма, либо как фон: количество «воздуха» может выгодно подчер-кнуть окруженный им объект

Отношения формы и фона:

Форма/фон и веб-дизайн:

Компания Apple не зря окружает свои продук-ты таким большим количеством белого пространства – это под-черкивает изящный и простой дизайн техники Apple

Хороший пример:

Больше – не лучше

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

Плохой пример:

Продолжение

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

Продолжение:

Продолжение и веб-дизайн:

Наиболее очевиден прин-цип продолжения в нави-гации, однако в данном примере он используется практически в каждом из композиционных бло-ков: заголовок, первый экран, меню, поиск

Хороший пример:

Задание:Какие принципы вы можете здесь распознать?

Задание:Какие принципы вы можете здесь распознать?

Задание:Какие принципы вы можете здесь распознать?

Задание:Какие принципы вы можете здесь распознать?

v

Как «сделать красиво»:формальная композиция...которой де-факто можно научиться только на практике

Контраст,

Контраст — это максимальная разница в проявлении каких-либо ка-честв, нюанс — это минимальная разница, а тождество повторяет эти качества.

нюанс и тождество

Контраст и веб-дизайн

Сильный контраст изо-бражения и фото, хо-рошая типографика, взгляд свободно сколь-зит по текстовым бло-кам

Хороший пример:

Задание на контраст:От каких контрастов здесь необходимо отказаться?

v

Баланс,

Баланс – это равновесие взаимодейству-ющих или противоположных сил в ком-позиции. Как правило, такая композиция симметрична – однако использование ас-симетрии может привести к интересным результатам.

симметрия и ассиметрия

Баланс и веб-дизайн

Использование осевой статичной композиции на сайте веб-студии

Хороший пример:

Задание на баланс:Как создать из этих объектов сбалансированную компо-зицию? Размер и цвет менять нельзя

Динамика

Динамика – действительные или ка-жущиеся движения каких-то объек-тов композиции

в композиции

Динамика и веб-дизайн

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

Хороший пример:

Задание на динамику:

Он – стремительный

Дано: два квадрата, три геометрические фигуры (выбрать одну)

Задача: визуализировать тезис «он – стремительный»

v

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

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

и нарушение ритма

Ритм и веб-дизайн

Применение вертикаль-ного ритма и выравнива-ние по сетке в вебе

Хороший пример:

Задание на ритм:Как улучшить визуальную иерархию на этой странице?

Значимость

Объекты должны находиться в иерар-хии по значимости и подчиненности. Если все объекты будут иметь оди-наковую значимость, то внимание пользователя рассеивается.

и подчиненность

Значимость и веб-дизайн

Большой заголовок соз-дает на сайте агент-ства композиционный центр.

Хороший пример:

Задание на значимость:Чем занимается фирма? Как бы вы организовали контент?

v

Пропорции

Пропорция – это отношение отдельной части ко всему объекту, а также соотно-шение отдельных частей друг с другом.

1.618

Пропорции и веб:

Twitter.com

v

Что почитать:...стратегический минимум

Иоханнес Иттен Иоханнес Иттен Роберт Брингхерст

Искусство цвета Искусство формы Основы стиля в типографике

v

Спасибо за внимание!

Екатерина Андреева, дизайнер

fb.com/ikadirina