Веб-дизайн
Дизайн интерфейсов сайтов: UI/UX, адаптивность, прототипирование. Figma, Sketch, Adobe XD.
UI-компоненты
Кнопки, формы, карточки, модальные окна, навигация. Дизайн-системы, состояния элементов (hover, active, disabled).
Респонзивный дизайн
Адаптация под разные экраны: брейкпоинты, гибкие сетки, mobile-first подход. Тестирование на устройствах.
Прототипирование
Интерактивные макеты в Figma, Adobe XD. Переходы между экранами, микроанимации, тестирование на пользователях.
Веб-доступность
Дизайн для всех: контраст, размеры кликабельных зон, alt-тексты, работа со скринридерами. WCAG-стандарты.
UI-дизайн (User Interface)
Визуальные элементы интерфейса: кнопки, формы, меню. Сетки (grid system): 12-колоночная, Bootstrap. Цветовые схемы: первичный, вторичный, акцент. Material Design (Google, 2014): тени, анимации, elevation. Figma, Sketch, Adobe XD для прототипирования. Pixel-perfect вёрстка.
UX-дизайн (User Experience)
Удобство, пользовательский путь. Wireframes (каркасы) → прототипы → юзабилити-тесты. Heatmaps (тепловые карты): Hotjar, Crazy Egg. A/B-тестирование кнопок, заголовков. Метрики: конверсия, bounce rate, time on page. Дон Норман "Дизайн привычных вещей" (1988). Jobs-to-be-Done framework.
Респонсивный дизайн
Адаптация под экраны: десктоп, планшет, мобильный. CSS media queries (с 2010). Mobile-first подход (Google PageSpeed с 2018). Брейкпоинты: 320px (мобильный), 768px (планшет), 1024px+ (десктоп). Fluid grids (гибкие сетки), flexible images. Этан Маркотт ввёл термин (2010).