Цвета, изображения,

типографика
Цветовые схемы. Психология цвета. Изображения на сайте.
Передача эмоций через графику. Работа со шрифтами.
О чем сегодня
поговорим?
4 кита в создании сайтов

Цвет и композиция

Фотографии

Контрасты на сайте

Шрифты

Стили сайта

!2
Сайт, который Юзабилити

работает на вас 01 Структура и навигация, то есть

расположение элементов сайта и
удобное перемещение между
4 компонента идеального сайта ними.

Архитектура
02 Количество разделов, их
иерархия и структура каталога
продуктов.

Контент
03 Грамотная подача товаров и услуг
– тексты и изображения.

Дизайн
04 Цвета, формы и шрифты.

04 !3

!3
Сайт, который
работает на вас
• Не раздражает глаз
что важно пользователю?
• Не отвлекает от текста
• Приятно и легко читать, без
напряжения
• Удобно пользоваться
• Легко можно найти всю
информацию
• Корректно отображается и не
рассыпается
• Быстро загружается

04 !4

!4
Цвет влияет на
восприятие
Яркие, контрастные – энергия, бодрость

Яркие, контрастные – энергия, бодрость

Приглушенные - спокойствие, расслабленность

Приглушенные - спокойствие, расслабленность

Эмоция, которую пользователь

получает от просмотра сайта –
влияет на принятие решения.

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

чтобы испытывал пользователь –
создавайте при помощи цвета. !5
Как определить
цветовую гамму
вашего сайта
01 Проанализировать ваш бизнес и ЦА

02 Просмотреть конкурентов и сайты по

схожей тематике

03 Собрать референсы

04 Составить палитру цветов

!6
!7
Палитра цветов может помочь
Триада
2 цвета основных + один
дополнительный

Аналоговые
Создадут единую гамму
на сайте

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

Тетрада
2 основных и
2 дополнительных
!8
Контрасты на сайте
Помогают привлечь к объекту больше внимания.
Первое что видит пользователь при открытии
экрана/блока.

• Кнопки
• Иконки
• Дополнительные блоки
• Важные элементы
• Текст

!9
Контрасты на сайте
Помогают привлечь к объекту больше внимания.
Первое что видит пользователь при открытии
экрана/блока.

• Кнопки
• Иконки
• Дополнительные блоки
• Важные элементы
• Текст

!10
Контрасты на сайте
Помогают привлечь к объекту больше внимания.
Первое что видит пользователь при открытии
экрана/блока.

• Кнопки
• Иконки
• Дополнительные блоки
• Важные элементы
• Текст

!11
Шрифты на сайте

С засечками Без засечек

01 02

03 Рукописные

!12
 Законы шрифтов,
которые стоит соблюдать
01 Максимум 3 вида шрифта на макете 05 Не пишите все тексты капсом,
но использовать строчные буквы можно
02 Максимум 3 начертания шрифта НЕ НАДО ТАК ДЕЛАТЬ!
Regular, Bold, Italic
06 Цвет шрифта должен читаться на фоне

03 Не используйте Italic (наклонный)

Так Так Не так Не так
в важных текстах, так как он
плохо читается
07 Не делайте шрифт слишком мелким,
04 Выделяйте бОльшим размером
чтобы пользователю не приходилось
заголовки
всматриваться
Заголовок 08 Используйте Google Fonts и
Дополнительный текст кириллические шрифты

!13
Минимализм

!14
3D элементы

!15
Погружение

!16
НЕ ИСПОЛЬЗУЙ ‣ Фотографии задают атмосферу на
сайте

«ГУГЛ-ФОТО»! ‣ Люди должны соответствовать

вашей ЦА

‣ Фото не должны быть пиксельными

‣ Этот не должны быть постановочные

фотографии (гугл-фото)

‣ Это не должны быть фотографии с

белыми фонами (гугл-фото)

‣ На русских дизайнах нет

темнокожих людей!

‣ Лучше запрашивать съемки у

заказчика.

‣ Не используйте дешевый 3D

!17
!18
!19
Где искать хорошие
фото?
‣ shutterstock.com

‣ https://news.pressfeed.ru/top-20-besplatnyx-
fotostokov-dlya-vsex-kto-rabotaet-s-kontentom/

!20
 Еще немного важного
• Интерфейс должен быть простой и • В одном функциональном блоке
понятный, задачи должны решаться не может быть больше 5-7
минимальным числом действий. элементов.

• Не заставляйте думать. Нужно • Все важные элементы должны

избегать сложных действий, которые быть на виду или выделены.
заставляют пользователей думать.
• Однородность элементов – одни
• Убирайте очевидное. и те же элементы на всем сайте
должны иметь общий дизайн.
• Проверенное лучше модного.
• Учитывайте современные
• Добавляйте привычные элементы тенденции, чтобы сайт не устарел
управления. слишком быстро.

• Люди не читают большие массивы • Правильный копирайтинг.

текста.
• Принцип 3х кликов – не больше
• Принцип умного заимствования – 3х кликов для перехода из одного
не изобретайте велосипед. раздела в другой.
!21
Полезные ресурсы
• dribbble.com
• www.behance.net
• https://www.pinterest.ru
• https://www.artlebedev.ru/
kovodstvo/sections/
• jvetrau.com
• https://creativemarket.com

Книги:
• Модульные системы в
графическом дизайне. Йозеф
Мюллер-Брокманн
• Книга про буквы от Аа до Яя.
Юрий Гордон
• О языке композиции. Юрий
Гордон

!22
Домашнее срок сдачи: до 17 марта

задание
Выбрать тематику сайта, пример «сайт еды».
01 Выбрать рубрики, которые будете освещать на сайте. Пример: «о
компании, каталог, главный экран с кнопкой, команда» и т.д.

02 Подобрать референсы (идеи) по своей тематике или близкой (5-10 штук).

03 https://forms.gle/doSwzb6TCpPbArHD9

!23
Спасибо за
просмотр!