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

1. Визуальная иерархия
и композиция в веб-дизайне
...или «сделайте мне красиво»
© Ekaterina Andreeva, Epic Skills, 2015

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

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

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

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

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

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

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

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

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

11. Размер и пропорции
Чем больше предмет –
тем больше внимания
он привлекает
Хороший пример:

12. Когда все блоки пример-
но одинаковы по разме-
рам, взгляду невозмож-
но уловить ключевую
идею
Плохой пример:
Не надо так :(
Размер имеет значение:

13. Задание на размер:
Он – тяжелый
Дано: два квадрата, три геометрические
фигуры (выбрать одну)
Задача: визуализировать тезис «он – тя-
желый»

14. Цвет и цветовые отношения
Сочные, контрастные
цвета, подчеркивающие
имидж бренда Orangina
Хороший пример:

15. Цвет и восприятие:
Ваши серые лица не вну-
шают доверия...»
«
Плохой пример:
Земфира
...и никаких ассоциаций

16. Два способа добиться
цветовой выразительности:
Существенная разница в тоне
в рамках одного цвета
Существенная разница в цве-
те на основе цветового круга
Тональный контраст
Цветовой контраст
58%
40/9/56 253/116/0
0%

17. Как смешать и не облажаться
Аналоговые цвета
Непосредственные соседи
на цветовом круге. Не имеют
сильного контраста по те-
плохолодности.
Дополнительные цвета
Противоположны на цвето-
вом круге, создают сильный
контраст. Использовать
с осторожностью.

18. Как смешать и не облажаться
Триада
Самая беспроигрышная схема:
равнобедренный треугольник
на цветовом круге.
Тетрада
Две пары дополнительных
цветов, требует осторож-
ности с теплохолодностью.

19. Ресурсы для вдохновения:
stilyfyme.com materialpalette.com
color.adobe.com
coolors.co
flatuicolorpicker.com
colorcombos.com
paletton.com
Извлекает цветовую палитру
и шрифты с любого заданного url
Выбери два цвета, и он создаст
цветовую гамму в стиле material
design на их основе
Устоявшееся решение от Adobe
для работы с цветом на основе
цветового круга
Супербыстрый генератор цветовых
палитр – просто жми на пробел
Палитра для flat-интерфейсов
Масса готовых палитр
Простой и удобный инструмент
для создания цветовых палитр

20. Текст,выравнивание и сетка
Аккуратное выравнива-
ние и четкая визуальная
иерархия всех блоков
не дает запутаться
даже в таком минима-
листичном дизайне
Хороший пример:

21. Порядок и хаос в тексте:
Хаос, текст ни в одном
из блоков не выглядит
цельным. Что главное?
Плохой пример:
Победитель конкурса
Золотой сайт»???«

22. Как навести порядок:
Все элементы страницы должны подчиняться
главному блоку в плане пропорций и распола-
гаться по сетке
Задав общую иерархию необходимо разобраться
с визуальными отношениями внутри каждого
композиционного блока на сайте
Общая визуальная иерархия
Суб-иерархии в каждом из блоков сайта

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

24. Схожесть
Объекты, которые схожи, воспри-
нимаются более связно, нежели
объекты, которые различны
Принцип схожести:

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

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

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

28. Близость
Объекты, расположенные рядом, име-
ют тенденцию восприниматься еди-
ным целым
...«теорию близости» придумал не Ле-
бедев, а Макс Вертгеймер в 1912 году
Принцип близости:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

44. Баланс и веб-дизайн
Использование осевой
статичной композиции
на сайте веб-студии
Хороший пример:

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

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

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

48. Задание на динамику:
Он – стремительный
Дано: два квадрата, три геометрические
фигуры (выбрать одну)
Задача: визуализировать тезис «он –
стремительный»

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

50. Ритм и веб-дизайн
Применение вертикаль-
ного ритма и выравнива-
ние по сетке в вебе
Хороший пример:

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

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

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

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

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

56. Пропорции и веб:
Twitter.com

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

58. Иоханнес Иттен Иоханнес Иттен Роберт Брингхерст
Искусство цвета Искусство формы Основы стиля
в типографике

59. Спасибо за внимание!
Екатерина Андреева, дизайнер
fb.com/ikadirina