🎯 О чём этот конспект: Разбор фундаментальных основ UI/UX дизайна, которые превращают «программистский интерфейс» в профессиональный продукт. В видео рассматриваются принципы иерархии, типографики, работы с цветом, состояниями элементов и микро-взаимодействиями.

👤 Кому будет полезно: Вайбкодерам и разработчикам, которые создают продукты в одиночку и хотят, чтобы их приложения выглядели дорого и были удобны для пользователей без найма отдельного дизайнера.

✨ Что получите: Набор конкретных правил, параметров (px, %, цвета) и техник, которые можно внедрить в CSS или UI-библиотеку (Radix, Tailwind, Shadcn) прямо сейчас.

1. Сигнификаторы и визуальные подсказки

Контекст: Хороший интерфейс не нуждается в инструкциях. Пользователь должен интуитивно понимать, что элемент кликабелен, активен или заблокирован. Это достигается через «сигнификаторы» — визуальные знаки, указывающие на возможности взаимодействия (affordances). Если элементы логически связаны, их нужно объединять в контейнеры, чтобы мозг считывал их как единую группу.

Выгода: Снижение когнитивной нагрузки на пользователя и уменьшение количества ошибок при использовании продукта.

Как применить:

• Шаг 1: Группировка — Используйте контейнеры (карточки, обводки) для логически связанных элементов. Если два пункта меню находятся в одной рамке, а третий — отдельно, пользователь поймет, что третий не относится к этой категории.
• Шаг 2: Визуальные состояния — Для неактивных элементов используйте серый цвет (opacity 40-60%). Для активных — контрастную заливку или акцентную линию.
• Шаг 3: Ховеры — Всегда добавляйте :hover состояния для кнопок и ссылок.

2. Создание иерархии через контраст

Контекст: Интерфейс не должен выглядеть как Excel-таблица. Чтобы выделить главное, нужно использовать три рычага: размер, позицию и цвет. Самая важная информация (название товара, цена) должна быть крупной и располагаться сверху. Второстепенная (дата, локация) — меньше и бледнее.

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

Как применить:

• Шаг 1: Работа с текстом — Сделайте заголовок жирным (Bold) и крупным (например, 20-24px), а подзаголовок — Regular и 14-16px.
• Шаг 2: Выравнивание цены — Располагайте цену в верхнем правом углу карточки, выделяя её акцентным цветом (например, синим). Это отделяет её от основного текстового блока.
• Шаг 3: Использование иконок — Вместо слов «Откуда» и «Куда» используйте иконки и линию между ними. Это считывается быстрее, чем текст.

3. Сетки и «Правило 4-х пикселей»

Контекст: Не обязательно строго следовать 12-колоночной сетке для лендингов, но для структурных страниц (дашборды, галереи) сетка необходима для адаптивности. Важнее сетки — свободное пространство (whitespace). Использование системы отступов, кратных 4 или 8, создает визуальный порядок и упрощает разработку.

Выгода: Консистентность дизайна на всех экранах и упрощение верстки (все отступы предсказуемы).

Как применить:

• Шаг 1: Настройка отступов — Установите базовый шаг 4px или 8px. Все отступы (padding, margin) должны быть кратны этому числу: 4, 8, 12, 16, 24, 32.
• Шаг 2: Группировка через отступы — Между заголовком и подзаголовком делайте меньший отступ (например, 8px), а между логическими блоками — больший (32px).
• Шаг 3: Адаптивность — Используйте 8 колонок для планшетов и 4 колонки для мобильных устройств.

4. Профессиональная типографика (Трюк с Letter Spacing)

Контекст: 90% дизайна — это текст. Вам не нужно 10 шрифтов, достаточно одного качественного Sans Serif (Inter, Roboto, Geist). Чтобы текст выглядел «дорого», нужно поработать с межстрочным и межбуквенным интервалом, особенно в крупных заголовках.

Выгода: Мгновенное улучшение визуального стиля приложения без изменения структуры.

Как применить:

• Шаг 1: Выбор шрифта — Используйте один шрифт. Рекомендуемые: Inter, Plus Jakarta Sans, Satoshi, General Sans.
• Шаг 2: Трюк для заголовков — Для крупных заголовков (H1, H2) примените следующие стили в CSS:

.heading {
  letter-spacing: -0.02em; /* или -3% */
  line-height: 1.1; /* или 110-120% */
}

• Шаг 3: Ограничение размеров — Для лендингов используйте не более 6 размеров шрифта. Для дашбордов — не более 24px для основного контента, чтобы сохранить плотность информации.

5. Работа с цветом и семантика

Контекст: Начинайте с одного основного (брендового) цвета. На его основе создавайте оттенки: светлее для фона, темнее для текста. Цвет в интерфейсе должен быть функциональным, а не только декоративным.

Выгода: Понятный интерфейс, где цвет сообщает о статусе операции.

Как применить:

• Шаг 1: Монохромная палитра — Возьмите основной синий #007AFF. Для фона блока используйте его очень светлую версию (например, 5-10% насыщенности).
• Шаг 2: Семантические цвета — Используйте стандартные паттерны:
  • Синий: Доверие, основные действия.
  • Красный: Опасность, ошибки, удаление.
  • Желтый: Предупреждения.
  • Зеленый: Успех, подтверждение.

6. Особенности Dark Mode (Темная тема)

Контекст: Темная тема — это не просто инверсия цветов. В ней не работают тени, поэтому глубина создается за счет изменения яркости фона: чем «ближе» объект к пользователю, тем он светлее.

Выгода: Комфорт для глаз пользователя и современный вид приложения.

Как применить:

• Шаг 1: Создание глубины — Вместо теней делайте карточки на 5-10% светлее, чем основной фон страницы.
• Шаг 2: Смягчение контраста — Уменьшите яркость белых границ (borders) и текста. Чисто белый на чисто черном слишком сильно режет глаза.
• Шаг 3: Насыщенность — Снижайте насыщенность (saturation) ярких цветов для чипов и меток, чтобы они не «горели» на темном фоне.

7. Кнопки, иконки и состояния (States)

Контекст: Каждое действие пользователя должно иметь визуальный отклик. Кнопка — это не просто прямоугольник, это интерактивный элемент с набором обязательных состояний.

Выгода: Интерфейс кажется «живым» и надежным.

Как применить:

• Шаг 1: Размер иконок — Иконка должна быть того же размера, что и line-height текста рядом (обычно 24px).
• Шаг 2: Пропорции кнопок — Хорошее правило для паддингов кнопки: ширина должна быть примерно в два раза больше высоты.
• Шаг 3: Обязательные 4 состояния кнопки:
  1. Default: Обычный вид.
  2. Hover: При наведении (чуть светлее/темнее).
  3. Active/Pressed: В момент клика (эффект «вдавленности»).
  4. Disabled: Серый цвет, курсор not-allowed.

8. Микро-взаимодействия и оверлеи

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

Выгода: Повышение лояльности пользователей через «приятные мелочи» (delight).

Как применить:

• Шаг 1: Обратная связь — При клике на кнопку копирования добавьте всплывающий чип (tooltip/toast).
• Шаг 2: Читаемость на фото — Если текст лежит на картинке, используйте линейный градиент от прозрачного к черному в нижней части:

.overlay {
  background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.8) 100%);
}

• Шаг 3: Progressive Blur — Для супер-современного вида добавьте размытие (backdrop-filter: blur) поверх градиента.

FAQ

В: Можно ли использовать два разных шрифта в одном проекте?

О: Можно, но новичкам рекомендуется придерживаться одного. Обычно это Sans Serif. Если нужно два, берите один Serif для заголовков и Sans Serif для основного текста, но это требует тонкого чувства стиля. Один качественный шрифт (например, Inter) покроет 100% задач.

В: Как выбрать правильный размер теней (Shadows)?

О: Главное правило — тень не должна быть первым, что бросается в глаза. Уменьшайте непрозрачность (opacity) до 5-15% и увеличивайте размытие (blur). Для карточек нужны мягкие, едва заметные тени, для выпадающих меню (popovers) — более плотные и выраженные.

В: Обязательно ли использовать сетку 8px?

О: Это стандарт индустрии. Она удобна тем, что числа 4, 8, 16, 32 легко делятся пополам, что обеспечивает идеальное выравнивание элементов при масштабировании и на разных плотностях пикселей (Retina).

В: Что такое "Ghost Button" и когда её использовать?

О: Это кнопка без фоновой заливки, только с текстом (и иногда иконкой). Она используется как вторичное действие (Secondary CTA) рядом с основной яркой кнопкой, чтобы не отвлекать внимание от главного целевого действия.

В: Как сделать темную тему, если интерфейс кажется плоским?

О: В темной теме используйте «световые слои». Самый нижний слой (фон) — самый темный. Элементы над ним (карточки) — чуть светлее. Всплывающие окна — еще светлее. Это заменяет тени из светлой темы и создает ощущение глубины.

Конспект создан на основе видео «UI UX Design Tutorial for Beginners» канала Caleb Kingston. Все права на оригинальный материал принадлежат авторам. Источник: https://youtu.be/EcbgbKtOELY