4. Но вы сразу же нашли
способ различить их,
не так ли?
...а теперь задачка посложнее
5. Но тем не менее, вы можете точно
описать любой из объектов здесь
6. При чем тут веб?
...к слову, так выглядит
большинство сайтов
в рунете
7. Во всем виноват
наш мозг
...вернее, способ, которым он привык
классифицировать информацию:
группировать сходные визуальные
элементы и организовывать
их в значимые группы
9. Быстрый запуск
Самый лучший и недорогой способ узнать спрос на нишу:
от ТЗ до первой заявки до 21 дня (разработка от 14 дней).
Самый лучший и недорогой способ узнать спрос на нишу:
от ТЗ до первой заявки до 21 дня (разработка от 14 дней).
Быстрый запуск
Например:
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. Как навести порядок:
Все элементы страницы должны подчиняться
главному блоку в плане пропорций и распола-
гаться по сетке
Задав общую иерархию необходимо разобраться
с визуальными отношениями внутри каждого
композиционного блока на сайте
Общая визуальная иерархия
Суб-иерархии в каждом из блоков сайта
27. Замкнутость и веб-дизайн:
Взгляд интерпретирует
центральную форму как
цельный прямоугольник,
несмотря на то, что он
составлен из множе-
ства объектов
Хороший пример:
28. Близость
Объекты, расположенные рядом, име-
ют тенденцию восприниматься еди-
ным целым
...«теорию близости» придумал не Ле-
бедев, а Макс Вертгеймер в 1912 году
Принцип близости:
29. Близость и веб-дизайн:
Благодаря четкой ви-
зуальной иерархии вну-
три смысловых блоков
и принцпу близости мы
можем сразу разбить
сайт на шесть смысло-
вых блоков, некоторые
из которых равны меж-
ду собой по смыслу.
Хороший пример:
30. Форма/фон
Все объекты воспринимаются либо
как форма, либо как фон: количество
«воздуха» может выгодно подчер-
кнуть окруженный им объект
Отношения формы и фона:
31. Форма/фон и веб-дизайн:
Компания Apple не зря
окружает свои продук-
ты таким большим
количеством белого
пространства – это под-
черкивает изящный
и простой дизайн
техники Apple
Хороший пример:
32. Больше – не лучше
Из-за отсутствия ком-
позиционного центра,
одинаковых размеров
элементов и огромного
количества фона этот
сайт кажется скучным
и взгляду не за что заце-
питься
Плохой пример:
33. Продолжение
Объекты, расположенные на одной
линии или кривой, воспринимаются
более связанно, нежели объекты не
расположенные на этой линии/кривой
Продолжение:
34. Продолжение и веб-дизайн:
Наиболее очевиден прин-
цип продолжения в нави-
гации, однако в данном
примере он используется
практически в каждом
из композиционных бло-
ков: заголовок, первый
экран, меню, поиск
Хороший пример:
40. Контраст,
Контраст — это максимальная
разница в проявлении каких-либо ка-
честв, нюанс — это минимальная
разница, а тождество повторяет
эти качества.
нюанс и тождество
41. Контраст и веб-дизайн
Сильный контраст изо-
бражения и фото, хо-
рошая типографика,
взгляд свободно сколь-
зит по текстовым бло-
кам
Хороший пример:
43. Баланс,
Баланс – это равновесие взаимодейству-
ющих или противоположных сил в ком-
позиции. Как правило, такая композиция
симметрична – однако использование ас-
симетрии может привести к интересным
результатам.
симметрия и ассиметрия
47. Динамика и веб-дизайн
Самый простой способ
создать динамичную
композицию – располо-
жить на ней движущи-
еся объекты: например,
птицу.
Хороший пример:
48. Задание на динамику:
Он – стремительный
Дано: два квадрата, три геометрические
фигуры (выбрать одну)
Задача: визуализировать тезис «он –
стремительный»
49. Ритм
Ритм – это повторение элементов для
достижения определенной цели, например,
чтобы задать направление взгляда или
для непрерывности внимания.
Восприятие дизайна зависит от ритма,
монотонный ритм заставляет пользова-
теля скучать.
и нарушение ритма
52. Значимость
Объекты должны находиться в иерар-
хии по значимости и подчиненности.
Если все объекты будут иметь оди-
наковую значимость, то внимание
пользователя рассеивается.
и подчиненность