1. Принципы визуальной иерархии
Контраст, выравнивание, повтор, близость
Что такое визуальная иерархия
Визуальная иерархия — это способ показать пользователю, что на странице главное, а что второстепенное. Благодаря ей человек сразу понимает, куда смотреть и куда кликать.
Основные принципы:
- Контраст
— Используется, чтобы выделить важные элементы: цветом, размером, толщиной, формой.
— Пример: большая кнопка «Купить» контрастирует с остальным текстом. - Выравнивание
— Визуальные элементы должны быть выстроены по логическим линиям (левое, правое, центральное).
— Это создаёт порядок и профессиональный вид. - Повтор (Consistency)
— Повторяющиеся элементы (цвета, кнопки, шрифты) создают узнаваемость.
— Пользователь понимает: зелёная кнопка = действие. - Близость (Proximity)
— Элементы, расположенные рядом, воспринимаются как связанные.
— Пример: подпись под картинкой должна быть ближе к ней, а не к соседнему блоку.
Практический совет
Возьми любую страницу сайта и попробуй задать себе вопрос: «Куда падает взгляд первым делом?» — если не туда, куда нужно, иерархию стоит усилить.
2. Основы композиции и сетки (Grid, Flexbox)
Что такое композиция
Композиция — это распределение элементов на странице для создания визуального баланса.
Хорошая композиция помогает пользователю «читать» интерфейс, не теряясь в хаосе.
Принципы композиции:
- Баланс — элементы должны быть уравновешены: текст ↔ изображения, левая ↔ правая часть.
- Ритм — чередование повторяющихся элементов (например, карточки товаров).
- Центр композиции — точка фокуса, куда в первую очередь направлен взгляд.
Что такое сетка (Grid)
Сетка — невидимая структура, которая помогает дизайнерам выравнивать элементы.
Веб-дизайнеры часто используют 12-колоночную сетку — она гибкая для адаптивных экранов.
Flexbox и CSS Grid — инструменты, которые используют разработчики, чтобы реализовать сетку в коде.
Если дизайнер понимает принципы их работы, ему проще создавать макеты, которые легко адаптируются под разные устройства.
Практический совет
При проектировании лендинга включай сетку в Figma и выравнивай все блоки по ней — даже незначительное смещение разрушает восприятие гармонии.
3. Цветовая теория (цветовые схемы, контраст, психология цвета)
Что такое цветовая теория
Цветовая теория помогает создавать гармоничные палитры, которые передают нужное настроение и усиливают восприятие бренда.
Основы:
- Цветовой круг Иттена — базовый инструмент подбора цветов.
- Типы сочетаний:
- Монохромная — оттенки одного цвета.
- Комплементарная — противоположные цвета (синий и оранжевый).
- Аналоговая — соседние цвета (зелёный, жёлто-зелёный, жёлтый).
Контраст и читаемость
Контраст между текстом и фоном должен быть достаточным, чтобы текст читался на любых экранах.
Советы:
- Тёмный текст на светлом фоне читается лучше.
- Не использовать яркие контрастные сочетания (например, красный на синем).
Психология цвета
Каждый цвет вызывает эмоции:
- Синий — доверие, стабильность (банки, IT).
- Красный — энергия, страсть (акции, спорт).
- Зелёный — природа, безопасность (медицина, экология).
- Жёлтый — оптимизм, внимание (детские бренды).
Практический совет
Создай палитру из 3–5 цветов:
1 — основной,
2 — акцентный,
3 — фоновый,
4–5 — нейтральные.
Тестируй её на контраст через contrast-ratio.com.
4. Типографика (гармония шрифтов, иерархия, читаемость)
Почему это важно
Типографика — 70% визуального впечатления от сайта. Даже при простом дизайне правильные шрифты делают интерфейс «дорогим».
Основные принципы:
- Иерархия — выделяй уровни заголовков (H1, H2, H3) и текстовых блоков.
- Гармония шрифтов — сочетай не более 2–3 шрифтов:
- Основной (для текста).
- Акцентный (для заголовков).
- Иногда — дополнительный (для меню/цитат).
- Читаемость — размер шрифта 16–18px для текста, интерлиньяж 1.5–1.6.
- Контраст — различие в весе (bold, regular), размере, цвете помогает создать визуальный ритм.
Советы:
- Не используй декоративные шрифты в тексте.
- Для веба выбирай Google Fonts (Roboto, Open Sans, Inter, Lato, Montserrat).
- Проверяй отображение на мобильных.
Практический пример
Плохой пример: 4 разных шрифта на одной странице.
Хороший пример: заголовки — Montserrat Bold 32px, текст — Roboto Regular 16px.
5. UX и UI — чем отличаются, роль каждого
UX (User Experience)
UX — это опыт взаимодействия пользователя с сайтом.
UX-дизайнер отвечает за:
- Логику навигации.
- Путь пользователя (user flow).
- Простоту выполнения целей (купить, найти, заказать).
- Исследование аудитории и тестирование прототипов.
Пример: UX определяет, где должна находиться кнопка «Добавить в корзину» и что произойдёт после клика.
UI (User Interface)
UI — это внешний вид интерфейса, то, как выглядит каждый элемент.
UI-дизайнер отвечает за:
- Цвета, шрифты, отступы, кнопки.
- Визуальную иерархию.
- Эстетику и консистентность интерфейса.
Пример: UI определяет, какого цвета будет кнопка «Добавить в корзину», и какой у неё эффект при наведении.
Как UX и UI работают вместе
- UX = логика → UI = форма.
- UX делает сайт удобным, UI делает его красивым и понятным.
- Без UX — красивая, но бесполезная картинка.
- Без UI — логичный, но скучный и сложный интерфейс.