Веб-дизайн для разработчиков: основы UX и UI
Практическое руководство по созданию удобных интерфейсов. Структура, типографика, сетка и визуальная иерархия.
Дизайн — это не "красиво"
Веб-дизайн — это не украшательство, а решение задач пользователя. Хороший интерфейс — удобный, понятный и конверсионный.
UX vs UI
- UX (User Experience) — как пользователь взаимодействует с продуктом. Путь от входа до цели.
- UI (User Interface) — визуальная реализация. Кнопки, формы, цвета, шрифты.
UX определяет что и где, UI определяет как выглядит.
Структура страницы
Типы страниц
- Главная — первое впечатление, навигация к разделам
- Лендинг — одна цель, одно действие
- Каталог — список с фильтрами и сортировкой
- Карточка — детальная информация об объекте
- Форма — сбор данных от пользователя
- Личный кабинет — управление аккаунтом
Навигация
- Главное меню — не больше 7 пунктов
- Хлебные крошки для глубоких разделов
- Поиск на сайтах с большим количеством контента
Визуальная иерархия
Типографика
- Заголовки — крупные, контрастные
- Основной текст — 16-18px, высота строки 1.5
- Подписи — мельче, приглушенный цвет
Сетка и отступы
- 8-point grid — все размеры кратны 8px
- Одинаковые отступы между однотипными элементами
- Воздух помогает восприятию
Контраст
- Важное — крупнее и ярче
- Второстепенное — мельче и бледнее
- Фокус внимания на целевом действии
Компоненты
Кнопки
- Primary — главное действие (яркая)
- Secondary — альтернатива (контурная)
- Состояния: default, hover, active, disabled
Формы
- Понятные лейблы
- Плейсхолдеры — не замена лейблам
- Валидация с понятными сообщениями
Карточки
- Единообразие в списках
- Картинка + заголовок + краткое описание + действие
Адаптивность
- Desktop — полная версия
- Tablet — упрощенная навигация
- Mobile — приоритет ключевого контента
Проектируйте mobile-first: начните с маленького экрана, затем расширяйте.
Итог
Дизайн = структура + иерархия + консистентность. Не нужно быть художником — нужно думать о пользователе.