Композиция в веб-дизайне
TRANSCRIPT
![Page 1: Композиция в веб-дизайне](https://reader034.vdocuments.net/reader034/viewer/2022051113/55ceaa0fbb61eb24138b47cd/html5/thumbnails/1.jpg)
v
Визуальная иерархия и композиция в веб-дизайне...или «сделайте мне красиво»
© Ekaterina Andreeva, Epic Skills, 2015
![Page 2: Композиция в веб-дизайне](https://reader034.vdocuments.net/reader034/viewer/2022051113/55ceaa0fbb61eb24138b47cd/html5/thumbnails/2.jpg)
Дизайн = коммуникацияВоспринимая информацию мгновенно,мозгу свойственно создаватьвизуальные отношения
![Page 3: Композиция в веб-дизайне](https://reader034.vdocuments.net/reader034/viewer/2022051113/55ceaa0fbb61eb24138b47cd/html5/thumbnails/3.jpg)
На этом слайде изображено два круга:
![Page 4: Композиция в веб-дизайне](https://reader034.vdocuments.net/reader034/viewer/2022051113/55ceaa0fbb61eb24138b47cd/html5/thumbnails/4.jpg)
v
Но вы сразу же нашли способ различить их,не так ли?...а теперь задачка посложнее
![Page 5: Композиция в веб-дизайне](https://reader034.vdocuments.net/reader034/viewer/2022051113/55ceaa0fbb61eb24138b47cd/html5/thumbnails/5.jpg)
Но тем не менее, вы можете точно описать любой из объектов здесь
![Page 6: Композиция в веб-дизайне](https://reader034.vdocuments.net/reader034/viewer/2022051113/55ceaa0fbb61eb24138b47cd/html5/thumbnails/6.jpg)
При чем тут веб?...к слову, так выглядит большинство сайтов в рунете
![Page 7: Композиция в веб-дизайне](https://reader034.vdocuments.net/reader034/viewer/2022051113/55ceaa0fbb61eb24138b47cd/html5/thumbnails/7.jpg)
Во всем виноватнаш мозг...вернее, способ, которым он привык классифицировать информацию: группировать сходные визуальные элементы и организовывать их в значимые группы
![Page 8: Композиция в веб-дизайне](https://reader034.vdocuments.net/reader034/viewer/2022051113/55ceaa0fbb61eb24138b47cd/html5/thumbnails/8.jpg)
v
Большой объем информации можно передать, используя простейшие инструменты
...любая организация информации лучше хаоса
![Page 9: Композиция в веб-дизайне](https://reader034.vdocuments.net/reader034/viewer/2022051113/55ceaa0fbb61eb24138b47cd/html5/thumbnails/9.jpg)
Быстрый запускСамый лучший и недорогой способ узнать спрос на нишу:от ТЗ до первой заявки до 21 дня (разработка от 14 дней).
Самый лучший и недорогой способ узнать спрос на нишу:
от ТЗ до первой заявки до 21 дня (разработка от 14 дней).
Быстрый запуск
Например:
![Page 10: Композиция в веб-дизайне](https://reader034.vdocuments.net/reader034/viewer/2022051113/55ceaa0fbb61eb24138b47cd/html5/thumbnails/10.jpg)
v
Как управлять вниманием:инструментарий...о чем молчат учебники по фотошопу
![Page 11: Композиция в веб-дизайне](https://reader034.vdocuments.net/reader034/viewer/2022051113/55ceaa0fbb61eb24138b47cd/html5/thumbnails/11.jpg)
Размер и пропорции
Чем больше предмет –тем больше вниманияон привлекает
Хороший пример:
![Page 12: Композиция в веб-дизайне](https://reader034.vdocuments.net/reader034/viewer/2022051113/55ceaa0fbb61eb24138b47cd/html5/thumbnails/12.jpg)
Когда все блоки пример-но одинаковы по разме-рам, взгляду невозмож-но уловить ключевую идею
Плохой пример:
Не надо так :(
Размер имеет значение:
![Page 13: Композиция в веб-дизайне](https://reader034.vdocuments.net/reader034/viewer/2022051113/55ceaa0fbb61eb24138b47cd/html5/thumbnails/13.jpg)
Задание на размер:
Он – тяжелый
Дано: два квадрата, три геометрические фигуры (выбрать одну)
Задача: визуализировать тезис «он – тя-желый»
![Page 14: Композиция в веб-дизайне](https://reader034.vdocuments.net/reader034/viewer/2022051113/55ceaa0fbb61eb24138b47cd/html5/thumbnails/14.jpg)
v
Цвет и цветовые отношения
Сочные, контрастныецвета, подчеркивающиеимидж бренда Orangina
Хороший пример:
![Page 15: Композиция в веб-дизайне](https://reader034.vdocuments.net/reader034/viewer/2022051113/55ceaa0fbb61eb24138b47cd/html5/thumbnails/15.jpg)
Цвет и восприятие:
Ваши серые лица не вну-шают доверия...»
«
Плохой пример:
Земфира
...и никаких ассоциаций
![Page 16: Композиция в веб-дизайне](https://reader034.vdocuments.net/reader034/viewer/2022051113/55ceaa0fbb61eb24138b47cd/html5/thumbnails/16.jpg)
Два способа добиться цветовой выразительности:
Существенная разница в тоне в рамках одного цвета
Существенная разница в цве-те на основе цветового круга
Тональный контраст
Цветовой контраст
58%
40/9/56 253/116/0
0%
![Page 17: Композиция в веб-дизайне](https://reader034.vdocuments.net/reader034/viewer/2022051113/55ceaa0fbb61eb24138b47cd/html5/thumbnails/17.jpg)
Как смешать и не облажаться
Аналоговые цвета
Непосредственные соседи на цветовом круге. Не имеют сильного контраста по те-плохолодности.
Дополнительные цвета
Противоположны на цвето-вом круге, создают сильный контраст. Использовать с осторожностью.
![Page 18: Композиция в веб-дизайне](https://reader034.vdocuments.net/reader034/viewer/2022051113/55ceaa0fbb61eb24138b47cd/html5/thumbnails/18.jpg)
Как смешать и не облажаться
Триада
Самая беспроигрышная схема:равнобедренный треугольникна цветовом круге.
Тетрада
Две пары дополнительныхцветов, требует осторож-ности с теплохолодностью.
![Page 19: Композиция в веб-дизайне](https://reader034.vdocuments.net/reader034/viewer/2022051113/55ceaa0fbb61eb24138b47cd/html5/thumbnails/19.jpg)
Ресурсы для вдохновения:
stilyfyme.com materialpalette.com
color.adobe.com
coolors.co
flatuicolorpicker.com
colorcombos.com
paletton.com
Извлекает цветовую палитру и шрифты с любого заданного url
Выбери два цвета, и он создаст цветовую гамму в стиле material design на их основе
Устоявшееся решение от Adobe для работы с цветом на основе цветового круга
Супербыстрый генератор цветовых палитр – просто жми на пробел
Палитра для flat-интерфейсов
Масса готовых палитр
Простой и удобный инструмент для создания цветовых палитр
![Page 20: Композиция в веб-дизайне](https://reader034.vdocuments.net/reader034/viewer/2022051113/55ceaa0fbb61eb24138b47cd/html5/thumbnails/20.jpg)
Текст, выравнивание и сетка
Аккуратное выравнива-ние и четкая визуальная иерархия всех блоков не дает запутаться даже в таком минима-листичном дизайне
Хороший пример:
![Page 21: Композиция в веб-дизайне](https://reader034.vdocuments.net/reader034/viewer/2022051113/55ceaa0fbb61eb24138b47cd/html5/thumbnails/21.jpg)
Порядок и хаос в тексте:
Хаос, текст ни в одном из блоков не выглядит цельным. Что главное?
Плохой пример:
Победитель конкурсаЗолотой сайт»???«
![Page 22: Композиция в веб-дизайне](https://reader034.vdocuments.net/reader034/viewer/2022051113/55ceaa0fbb61eb24138b47cd/html5/thumbnails/22.jpg)
Как навести порядок:
Все элементы страницы должны подчиняться главному блоку в плане пропорций и распола-гаться по сетке
Задав общую иерархию необходимо разобраться с визуальными отношениями внутри каждого композиционного блока на сайте
Общая визуальная иерархия
Суб-иерархии в каждом из блоков сайта
![Page 23: Композиция в веб-дизайне](https://reader034.vdocuments.net/reader034/viewer/2022051113/55ceaa0fbb61eb24138b47cd/html5/thumbnails/23.jpg)
v
Как управлять вниманием:принципы Гештальта...которым не учат в художественной школе
![Page 24: Композиция в веб-дизайне](https://reader034.vdocuments.net/reader034/viewer/2022051113/55ceaa0fbb61eb24138b47cd/html5/thumbnails/24.jpg)
Схожесть
Объекты, которые схожи, воспри-нимаются более связно, нежели объекты, которые различны
Принцип схожести:
![Page 25: Композиция в веб-дизайне](https://reader034.vdocuments.net/reader034/viewer/2022051113/55ceaa0fbb61eb24138b47cd/html5/thumbnails/25.jpg)
Схожесть и веб-дизайн:
Благодаря принципу схо-жести UX Magazine по-зволяет легко отличить информационный кон-тент от рекламного
Хороший пример:
![Page 26: Композиция в веб-дизайне](https://reader034.vdocuments.net/reader034/viewer/2022051113/55ceaa0fbb61eb24138b47cd/html5/thumbnails/26.jpg)
v
Замкнутость
Взгляд интерпретирует сложные и незавершенные формы как про-стую и цельную форму
Принцип замкнутости:
![Page 27: Композиция в веб-дизайне](https://reader034.vdocuments.net/reader034/viewer/2022051113/55ceaa0fbb61eb24138b47cd/html5/thumbnails/27.jpg)
Замкнутость и веб-дизайн:
Взгляд интерпретируетцентральную форму какцельный прямоугольник,несмотря на то, что онсоставлен из множе-ства объектов
Хороший пример:
![Page 28: Композиция в веб-дизайне](https://reader034.vdocuments.net/reader034/viewer/2022051113/55ceaa0fbb61eb24138b47cd/html5/thumbnails/28.jpg)
Близость
Объекты, расположенные рядом, име-ют тенденцию восприниматься еди-ным целым
...«теорию близости» придумал не Ле-бедев, а Макс Вертгеймер в 1912 году
Принцип близости:
![Page 29: Композиция в веб-дизайне](https://reader034.vdocuments.net/reader034/viewer/2022051113/55ceaa0fbb61eb24138b47cd/html5/thumbnails/29.jpg)
Близость и веб-дизайн:
Благодаря четкой ви-зуальной иерархии вну-три смысловых блоков и принцпу близости мы можем сразу разбить сайт на шесть смысло-вых блоков, некоторые из которых равны меж-ду собой по смыслу.
Хороший пример:
![Page 30: Композиция в веб-дизайне](https://reader034.vdocuments.net/reader034/viewer/2022051113/55ceaa0fbb61eb24138b47cd/html5/thumbnails/30.jpg)
v
Форма/фон
Все объекты воспринимаются либо как форма, либо как фон: количество «воздуха» может выгодно подчер-кнуть окруженный им объект
Отношения формы и фона:
![Page 31: Композиция в веб-дизайне](https://reader034.vdocuments.net/reader034/viewer/2022051113/55ceaa0fbb61eb24138b47cd/html5/thumbnails/31.jpg)
Форма/фон и веб-дизайн:
Компания Apple не зря окружает свои продук-ты таким большим количеством белого пространства – это под-черкивает изящный и простой дизайн техники Apple
Хороший пример:
![Page 32: Композиция в веб-дизайне](https://reader034.vdocuments.net/reader034/viewer/2022051113/55ceaa0fbb61eb24138b47cd/html5/thumbnails/32.jpg)
Больше – не лучше
Из-за отсутствия ком-позиционного центра, одинаковых размеров элементов и огромного количества фона этот сайт кажется скучным и взгляду не за что заце-питься
Плохой пример:
![Page 33: Композиция в веб-дизайне](https://reader034.vdocuments.net/reader034/viewer/2022051113/55ceaa0fbb61eb24138b47cd/html5/thumbnails/33.jpg)
Продолжение
Объекты, расположенные на одной линии или кривой, воспринимаются более связанно, нежели объекты не расположенные на этой линии/кривой
Продолжение:
![Page 34: Композиция в веб-дизайне](https://reader034.vdocuments.net/reader034/viewer/2022051113/55ceaa0fbb61eb24138b47cd/html5/thumbnails/34.jpg)
Продолжение и веб-дизайн:
Наиболее очевиден прин-цип продолжения в нави-гации, однако в данном примере он используется практически в каждом из композиционных бло-ков: заголовок, первый экран, меню, поиск
Хороший пример:
![Page 35: Композиция в веб-дизайне](https://reader034.vdocuments.net/reader034/viewer/2022051113/55ceaa0fbb61eb24138b47cd/html5/thumbnails/35.jpg)
Задание:Какие принципы вы можете здесь распознать?
![Page 36: Композиция в веб-дизайне](https://reader034.vdocuments.net/reader034/viewer/2022051113/55ceaa0fbb61eb24138b47cd/html5/thumbnails/36.jpg)
Задание:Какие принципы вы можете здесь распознать?
![Page 37: Композиция в веб-дизайне](https://reader034.vdocuments.net/reader034/viewer/2022051113/55ceaa0fbb61eb24138b47cd/html5/thumbnails/37.jpg)
Задание:Какие принципы вы можете здесь распознать?
![Page 38: Композиция в веб-дизайне](https://reader034.vdocuments.net/reader034/viewer/2022051113/55ceaa0fbb61eb24138b47cd/html5/thumbnails/38.jpg)
Задание:Какие принципы вы можете здесь распознать?
![Page 39: Композиция в веб-дизайне](https://reader034.vdocuments.net/reader034/viewer/2022051113/55ceaa0fbb61eb24138b47cd/html5/thumbnails/39.jpg)
v
Как «сделать красиво»:формальная композиция...которой де-факто можно научиться только на практике
![Page 40: Композиция в веб-дизайне](https://reader034.vdocuments.net/reader034/viewer/2022051113/55ceaa0fbb61eb24138b47cd/html5/thumbnails/40.jpg)
Контраст,
Контраст — это максимальная разница в проявлении каких-либо ка-честв, нюанс — это минимальная разница, а тождество повторяет эти качества.
нюанс и тождество
![Page 41: Композиция в веб-дизайне](https://reader034.vdocuments.net/reader034/viewer/2022051113/55ceaa0fbb61eb24138b47cd/html5/thumbnails/41.jpg)
Контраст и веб-дизайн
Сильный контраст изо-бражения и фото, хо-рошая типографика, взгляд свободно сколь-зит по текстовым бло-кам
Хороший пример:
![Page 42: Композиция в веб-дизайне](https://reader034.vdocuments.net/reader034/viewer/2022051113/55ceaa0fbb61eb24138b47cd/html5/thumbnails/42.jpg)
Задание на контраст:От каких контрастов здесь необходимо отказаться?
![Page 43: Композиция в веб-дизайне](https://reader034.vdocuments.net/reader034/viewer/2022051113/55ceaa0fbb61eb24138b47cd/html5/thumbnails/43.jpg)
v
Баланс,
Баланс – это равновесие взаимодейству-ющих или противоположных сил в ком-позиции. Как правило, такая композиция симметрична – однако использование ас-симетрии может привести к интересным результатам.
симметрия и ассиметрия
![Page 44: Композиция в веб-дизайне](https://reader034.vdocuments.net/reader034/viewer/2022051113/55ceaa0fbb61eb24138b47cd/html5/thumbnails/44.jpg)
Баланс и веб-дизайн
Использование осевой статичной композиции на сайте веб-студии
Хороший пример:
![Page 45: Композиция в веб-дизайне](https://reader034.vdocuments.net/reader034/viewer/2022051113/55ceaa0fbb61eb24138b47cd/html5/thumbnails/45.jpg)
Задание на баланс:Как создать из этих объектов сбалансированную компо-зицию? Размер и цвет менять нельзя
![Page 46: Композиция в веб-дизайне](https://reader034.vdocuments.net/reader034/viewer/2022051113/55ceaa0fbb61eb24138b47cd/html5/thumbnails/46.jpg)
Динамика
Динамика – действительные или ка-жущиеся движения каких-то объек-тов композиции
в композиции
![Page 47: Композиция в веб-дизайне](https://reader034.vdocuments.net/reader034/viewer/2022051113/55ceaa0fbb61eb24138b47cd/html5/thumbnails/47.jpg)
Динамика и веб-дизайн
Самый простой способ создать динамичную композицию – располо-жить на ней движущи-еся объекты: например, птицу.
Хороший пример:
![Page 48: Композиция в веб-дизайне](https://reader034.vdocuments.net/reader034/viewer/2022051113/55ceaa0fbb61eb24138b47cd/html5/thumbnails/48.jpg)
Задание на динамику:
Он – стремительный
Дано: два квадрата, три геометрические фигуры (выбрать одну)
Задача: визуализировать тезис «он – стремительный»
![Page 49: Композиция в веб-дизайне](https://reader034.vdocuments.net/reader034/viewer/2022051113/55ceaa0fbb61eb24138b47cd/html5/thumbnails/49.jpg)
v
РитмРитм – это повторение элементов для достижения определенной цели, например, чтобы задать направление взгляда или для непрерывности внимания.
Восприятие дизайна зависит от ритма,монотонный ритм заставляет пользова-теля скучать.
и нарушение ритма
![Page 50: Композиция в веб-дизайне](https://reader034.vdocuments.net/reader034/viewer/2022051113/55ceaa0fbb61eb24138b47cd/html5/thumbnails/50.jpg)
Ритм и веб-дизайн
Применение вертикаль-ного ритма и выравнива-ние по сетке в вебе
Хороший пример:
![Page 51: Композиция в веб-дизайне](https://reader034.vdocuments.net/reader034/viewer/2022051113/55ceaa0fbb61eb24138b47cd/html5/thumbnails/51.jpg)
Задание на ритм:Как улучшить визуальную иерархию на этой странице?
![Page 52: Композиция в веб-дизайне](https://reader034.vdocuments.net/reader034/viewer/2022051113/55ceaa0fbb61eb24138b47cd/html5/thumbnails/52.jpg)
Значимость
Объекты должны находиться в иерар-хии по значимости и подчиненности. Если все объекты будут иметь оди-наковую значимость, то внимание пользователя рассеивается.
и подчиненность
![Page 53: Композиция в веб-дизайне](https://reader034.vdocuments.net/reader034/viewer/2022051113/55ceaa0fbb61eb24138b47cd/html5/thumbnails/53.jpg)
Значимость и веб-дизайн
Большой заголовок соз-дает на сайте агент-ства композиционный центр.
Хороший пример:
![Page 54: Композиция в веб-дизайне](https://reader034.vdocuments.net/reader034/viewer/2022051113/55ceaa0fbb61eb24138b47cd/html5/thumbnails/54.jpg)
Задание на значимость:Чем занимается фирма? Как бы вы организовали контент?
![Page 55: Композиция в веб-дизайне](https://reader034.vdocuments.net/reader034/viewer/2022051113/55ceaa0fbb61eb24138b47cd/html5/thumbnails/55.jpg)
v
Пропорции
Пропорция – это отношение отдельной части ко всему объекту, а также соотно-шение отдельных частей друг с другом.
1.618
![Page 57: Композиция в веб-дизайне](https://reader034.vdocuments.net/reader034/viewer/2022051113/55ceaa0fbb61eb24138b47cd/html5/thumbnails/57.jpg)
v
Что почитать:...стратегический минимум
![Page 58: Композиция в веб-дизайне](https://reader034.vdocuments.net/reader034/viewer/2022051113/55ceaa0fbb61eb24138b47cd/html5/thumbnails/58.jpg)
Иоханнес Иттен Иоханнес Иттен Роберт Брингхерст
Искусство цвета Искусство формы Основы стиля в типографике