В начале лекции важно понимать: визуальный дизайн — это язык, который «говорит» с пользователем задолго до того, как он прочтёт тексты или разберётся в функционале. Цвет, шрифт и форма сразу же вызывают у человека определённые эмоции и ожидания
Цвет влияет на доверие не сам по себе, а через поведение пользователя в конкретных сценариях. В интерфейсах с высокой ценой ошибки (финансы, авторизация, работа с данными) холодные и нейтральные палитры чаще показывают более низкий уровень отказов и повторных действий. Это связано с тем, что пользователь быстрее распознаёт интерфейс как «стабильный» и тратит меньше времени на перепроверку шагов
На практике это проявляется в снижении time-to-decision и росте completion rate в сценариях регистрации, оплаты и подтверждения операций. Поэтому синий цвет используется не как универсальный «цвет доверия», а как инструмент снижения тревожности в критических точках пути пользователя.
В противоположность этому, красный цвет — цвет действия и внимания. В брендинге он часто используется для передачи энергии, страсти и динамичности
В то же время необходимо помнить про контекст: красный может одновременно символизировать и любовь, и опасность, поэтому в интерфейсе его используют осторожно — чаще для акцентов или кнопок призыва к действию
Между этими крайностями находится зелёный цвет. Он традиционно связывается с природой, ростом, свежестью и гармонией. В психологии цвета зелёный часто называют цветом безопасности и доверия
Так, в айдентике и интерфейсах Сбербанка доминирует зелёный цвет, который последовательно подчёркивает образ надёжного и устойчивого финансового института. Зелёный ассоциируется с ростом, стабильностью и долгосрочной безопасностью — ключевыми ценностями для банковского сервиса, где доверие критически важно
Этот цвет снижает тревожность, создаёт ощущение контроля и «правильности» происходящего, помогая пользователю спокойнее воспринимать финансовые операции. Неосознанно зелёные элементы интерфейса усиливают ощущение защищённости и уверенности в завтрашнем дне, поэтому визуальный язык Сбера работает не просто как фирменный стиль, а как психологический якорь доверия и надёжности
Мобильное приложение «СберБанк»
Важно подбирать цветовую палитру с учётом устойчивых культурных и психологических ассоциаций: она формирует ожидания пользователя, влияет на уровень доверия, снижает или повышает тревожность и направляет поведение
В интерфейсе типографика важна не как стиль, а как механизм управления вниманием. Шрифт влияет на скорость сканирования экрана, приоритеты восприятия и вероятность пропуска критической информации.
Непродуманная типографика увеличивает время чтения и число ошибок, особенно в формах, инструкциях и сообщениях об ошибках
Поэтому выбор шрифта и его иерархии — это решение про скорость принятия решений, а не про визуальный вкус
Типографика тоже передаёт характер бренда. Существует множество классификаций шрифтов, но для начинающих дизайнеров важно понимать базовые группы: засечные шрифты (serif), гротески (sans-serif) и скриптовые (handwritten/script)
Засечные шрифты подчёркивают традицию и надёжность, гротески делают образ чистым и техническим, а скриптовые добавляют теплоту и игривость. Применяя их в дизайне, нужно учитывать характер продукта: серьёзная финансовая платформа может выбрать строгий гротеск, детский или развлекательный — что-то более живое и игривое
Наконец, поговорим о формах — геометрии интерфейса. Форма элементов кнопок, блоков, иконок тоже задаёт атмосферу. Наша психология мгновенно реагирует на кривизну и углы. Как выяснили исследователи, круглые и изогнутые формы мозг воспринимает как безопасные и дружелюбные, тогда как острые углы сигнализируют бдительность и серьёзность. Проще говоря, закруглённые кнопки «мягче» на вид и вызывают доверие, а угловатые — более «деловые» и заметные
Наш мозг присваивает формам смысл быстрее, чем тексту. Круги кажутся тёплыми и приглашательными, а квадратные формы — структурированными и строгими
Поэтому многие современные интерфейсы стремятся к скруглениям
Например, iOS (операционная система Apple) традиционно использует плавно округлённые кнопки и окна. Это даёт ощущение «удобства»: глаза скользят по гладким формам, и интерфейс кажется приветливым. Даже иконки приложений в iOS имеют закруглённые углы — так пользователь подсознательно ощущает их как «приятные и простые».
Лаунчпад на операционной системе Apple
В отличие от этого, плиточный интерфейс Windows 8 (Metro) был построен на жёстких прямоугольниках и строгой сетке. Это придавало ему ощущение порядка и точности, но иногда казалось менее «тёплым». Такие острые углы символизировали для пользователя серьёзность и функцию: «это бизнес‑инструмент, тут нужно быть внимательным»
Лаунчпад на операционной системе Windows
Важно учитывать контекст задачи. В интерфейсах с высоким уровнем ответственности (админки, финансовые операции, корпоративные системы) избыточная «мягкость» может снижать ощущение контроля и серьёзности. В таких сценариях более жёсткая геометрия помогает пользователю воспринимать действия как точные и необратимые
Форма — это не вопрос тренда, а вопрос соответствия уровню риска и ожиданиям пользователя в конкретном сценарии
Кроме того, важна симметрия и общая структура форм. Симметричный дизайн интуитивно воспринимается людьми как гармоничный и надёжный. Баланс и повторяющиеся паттерны в композиции дают чувство порядка. Симметрия в дизайне создаёт ощущение порядка и гармонии, облегчая восприятие. В интерфейсе это означает, что чётко выровненные по сетке плитки или равномерно распределённые кнопки создают ощущение организованности и упрощают навигацию
Идеально симметричные элементы вызывают доверие и стабильность
Сочетание формы и цвета формирует первое впечатление об интерфейсе. Закруглённые формы и плавные линии транслируют дружелюбие, комфорт и эмоциональную безопасность — поэтому они широко используются в современных продуктах крупных компаний. Жёсткие углы и прямые линии, напротив, создают ощущение строгости и порядка и уместны в деловых или технических интерфейсах. Однако избыток таких решений может сделать продукт холодным и перегруженным, снижая эмоциональную вовлечённость пользователя
В современных гайдлайнах рекомендуют: основным «действующим» кнопкам и полям формы давать закругления, а идеальные квадраты применять к фоновым элементам или таблицам
Визуальные решения работают не на уровне «нравится / не нравится», а на уровне поведения. Цвет, типографика и форма влияют на скорость принятия решений, количество ошибок и вероятность завершения сценария. Когда визуальная система снижает когнитивную нагрузку и неопределённость, это напрямую отражается в метриках — от completion rate до retention
Поэтому визуал в UX — это не декор, а часть продуктовой логики, которую можно и нужно оценивать через поведение пользователя
Практическое задание Цель — на практике почувствовать, как визуал меняет эмоциональное восприятие одного и того же интерфейсного действия
Шаг 1. Выбери одно простое действие: — кнопка «Продолжить» — экран логина — экран подтверждения действия — карточка товара
Шаг 2. Отрисуй 3 варианта одного и того же экрана, меняя только визуальные параметры (без изменения логики):
Спокойный / безопасный — мягкие цвета (синий, зелёный, нейтральные) — закруглённые формы — простой гротеск — минимум контраста
Активный / энергичный — яркие или контрастные цвета (красный, оранжевый, акценты) — более жёсткие формы — крупные элементы — визуальные акценты на действии
Строгий / деловой — монохром или сдержанная палитра — чёткая геометрия — минимальные скругления или их отсутствие — аккуратная типографика
Шаг 3. Под каждым вариантом кратко ответь письменно: — какое настроение он создаёт — какие эмоции может вызвать у пользователя — в каком продукте такой визуал был бы уместен
Формат выполнения: Figma / Sketch / любой удобный графический инструмент