Веб-дизайн — маршрут от UX до портфолио
Зачем эта статья. Темы веб-дизайна в энциклопедии разбросаны по разделам «Интерфейс», «Графика», «Веб-сайты», «HTML/CSS», «Тестирование» и «Карьера». Здесь — единый маршрут: что изучать, в каком порядке и куда смотреть при проектировании конкретного типа сайта.
Статья про проектирование опыта и визуала веб-страниц. Вёрстка и код — HTML, CSS, JavaScript; сервер и деплой — веб-сайты и веб-приложения.
Как пользоваться маршрутом
| Шаг | Действие |
|---|---|
| 1 | Пройдите блок 1, если только входите в UX/UI |
| 2 | Блок 2 — перед любым макетом в Figma или коде |
| 3 | Блоки 3–6 — по типу проекта (лендинг, магазин, портал) |
| 4 | Блоки 7–8 — перед сдачей заказчику и сбором портфолио |
| 5 | Теорию закрепите практикой — лабораторный кейс «GitHub Pages» или учебный макет в CSS — практика |
После каждого блока откройте макет в браузере на телефоне и ноутбуке, пройдите сценарий глазами нового пользователя и сверьте чек-лист из самопроверки раздела. Дизайн без проверки остаётся гипотезой.
Блок 1 — UX/UI и основы визуального дизайна
UX (User Experience) — путь пользователя к цели: что он думает, где застревает, доволен ли результатом. UI (User Interface) — то, что видит и нажимает: кнопки, сетка, цвет, типографика. UI реализует стратегию UX; красивая картинка без сценария редко решает задачу бизнеса.
Базовые понятия раздела «Интерфейс»
| Тема | Материал | Зачем |
|---|---|---|
| UX и UI, виды интерфейса | Пользовательский интерфейс — UX и UI | Словарь и границы дисциплин |
| Визуальные элементы | Визуальные элементы | Цвет, шрифт, иконки, контраст |
| Функциональные элементы | Функциональные элементы | Кнопки, поля, переключатели |
| Навигация | Навигационные элементы | Меню, хлебные крошки, табы |
| Обратная связь | Элементы обратной связи | Загрузка, ошибки, успех |
| Принципы и юзабилити | Особенности и принципы UX и UI | Согласованность, a11y, интерактивная демо |
Визуальная коммуникация и веб-композиция
| Тема | Материал |
|---|---|
| Макет, типографика, иерархия | Графический дизайн |
| Структура веб-страницы (хедер, hero, блоки) | Дизайн веб-интерфейсов |
| Сетка и адаптив | Flexbox и CSS Grid, Адаптивный дизайн |
| Типовые UI-компоненты в CSS | Типовые элементы интерфейса |
| Доступность в стилях | Доступность в CSS |
| Термины | UX, UI |
Блок 2 — референсы и прототипирование
Проект начинается с брифа и аудитории, а не с выбора шрифта. Референсы фиксируют ожидания заказчика; прототип проверяет логику до дорогой отрисовки.
Референсы и moodboard
| Шаг | Что делать | Материал |
|---|---|---|
| Собрать референсы | 5–10 экранов конкурентов и смежных продуктов; выписать, что нравится (сетка, тон, CTA) | Графический дизайн — концептуализация |
| Moodboard | Палитра, фото, текстуры, 2–3 шрифта — единое настроение | Графика — вектор и растр (SVG, srcset для веба) |
| Согласовать с заказчиком | Зафиксировать «да / нет» до high-fi | Формализация требований |
Уровни прототипа
| Уровень | Содержание | Инструменты (примеры) |
|---|---|---|
| Low-fi | Блоки, текст-рыба, порядок секций | Бумага, FigJam, Balsamiq |
| Mid-fi | Wireframe — без финального визуала | Figma, Penpot |
| High-fi | Цвет, типографика, компоненты | Figma + дизайн-система |
| Интерактивный | Клики, переходы, состояния | Figma Prototype, HTML-прототип |
Где углубиться
- Wireframe снимает споры «я имел в виду другое» — Коммуникация в команде
- Прототипирование в жизненном цикле ПО — Конструирование — RAD и прототипы
- Wireframes / Figma в стеке разработки — Конструирование — инструменты
- ИИ-помощники для UI (Magician и аналоги) — Нейросети — экосистема; результат всё равно проходит ревью дизайнера
Блок 3 — лонгрид и лендинг
Лендинг — одна страница под одну цель (заявка, регистрация, покупка). Лонгрид — длинная страница или серия материалов, где читатель идёт сверху вниз по сюжету (статья, отчёт, кейс).
Лендинг — типовая структура
| Секция | Задача | Проверка |
|---|---|---|
| Hero | Ценность за 5 секунд + CTA | Понятно без прокрутки? |
| Проблема / решение | Зачем продукт | Текст для целевой аудитории |
| Преимущества | 3–6 тезисов | Иконки + короткие заголовки |
| Социальное доказательство | Отзывы, логотипы клиентов | Реальные цитаты |
| FAQ | Снять возражения | Не дублирует блок выше |
| Финальный CTA | Повтор призыва | Контрастная кнопка |
Подробнее про hero, модульные блоки и CTA — Дизайн веб-интерфейсов.
Лонгрид — типовая структура
| Приём | Зачем |
|---|---|
| Оглавление с якорями | Навигация по длинному тексту |
| Визуальные паузы | Инфографика, цитаты, подзаголовки каждые 3–4 абзаца |
| Прогресс чтения | Полоска или «осталось N мин» |
| Единая типографическая шкала | Текст — о разделе |
Сборка без кода и с кодом
| Подход | Когда | Материал |
|---|---|---|
| Конструктор (Tilda и др.) | Быстрый маркетинговый лендинг | Конструкторы сайтов, Справочник Tilda |
| HTML + CSS | Учебный проект, полный контроль | HTML — о разделе, CSS — практика |
| Статика на GitHub Pages | Портфолио и визитка | Кейс «GitHub Pages» |
Блок 4 — интернет-магазин
Магазин — это каталог + корзина + оплата + личный кабинет. Дизайн должен вести к покупке и не терять пользователя на каждом шаге.
Ключевые экраны
| Экран | UX-фокус | Связь с разработкой |
|---|---|---|
| Каталог / листинг | Фильтры, сортировка, карточка товара | REST-практикум OrderDesk |
| Карточка товара | Фото, цена, наличие, «в корзину» | Функциональные элементы |
| Корзина | Редактирование, доставка, итог | Тестирование корзины |
| Оформление заказа | Минимум полей, прогресс шагов | Формы в веб-тестировании |
| Личный кабинет | История, статусы, повтор заказа | Паттерн State в архитектуре |
Дизайн-чек-лист магазина
- Поиск и фильтры видны на первом экране каталога
- Цена и кнопка «Купить» не прыгают при смене варианта (размер, цвет)
- Пустая корзина объясняет следующий шаг
- Ошибки оплаты — понятный текст и путь «попробовать снова»
- Мобильная версия — палец дотягивается до CTA (адаптив)
Блок 5 — новостной и корпоративный сайт
Новостной портал и медиа
| Задача | Решение в дизайне |
|---|---|
| Много материалов | Лента, рубрики, теги, «похожие» |
| Быстрое сканирование | Крупные заголовки, дата, автор, превью |
| Удержание | Блок «читайте также», подписка |
| Доверие | Раздел «Редакция», контакты, политика |
Технически часто CMS (WordPress, 1C-Bitrix, headless) — Конструкторы и CMS. Вёрстка статей — семантические теги article и time в разделе HTML.
Корпоративный сайт
| Раздел | Содержание |
|---|---|
| О компании | Миссия, история, команда |
| Услуги / продукты | B2B-воронка, кейсы |
| Карьера | Вакансии, культура |
| Контакты и реквизиты | Карта, форма, документы |
| Пресс-центр / новости | Связка с медиа-блоком |
Корпоративный сайт часто интегрируется с CRM, ERP и личными кабинетами партнёров — см. Корпоративное ПО, Аналитика — о разделе. Дизайн согласуют с брендбуком и юридическими требованиями (152-ФЗ, cookies).
Блок 6 — портфолио и сайт агентства
Портфолио специалиста
| Элемент | Зачем |
|---|---|
| Hero с ролью | «Frontend-разработчик / UX-дизайнер» за 10 секунд |
| 3–6 кейсов | Задача → процесс → результат (метрики, если есть) |
| Навыки и стек | Таблица или теги |
| Контакты | Email, Telegram, GitHub, резюме PDF |
Подробный разбор визитки и GitHub Pages — Личный профиль и портфолио. Для дизайнера в кейс кладут скриншоты, wireframe, финал и короткий текст «что улучшилось».
Сайт агентства (студии, интегратора)
| Блок | Отличие от личного портфолио |
|---|---|
| Услуги | Пакеты, отрасли, SLA |
| Кейсы | Логотипы клиентов, цифры (конверсия, срок) |
| Команда | Фото, роли, экспертиза |
| Блог / insights | SEO и доверие |
| Бриф / «Обсудить проект» | Форма + календарь созвона |
Агентский сайт — витрина процесса: покажите этапы «исследование → прототип → дизайн → передача в разработку» — это снижает страх заказчика перед «чёрным ящиком».
Блок 7 — UX-исследования и юзабилити-тестирование
Дизайн проверяют на реальных людях, а не только на команде. Даже 5 коротких сессий находят проблемы, которые месяцами не замечали в офисе.
Виды исследований
| Метод | Когда | Результат |
|---|---|---|
| Интервью | Старт проекта, неясная аудитория | Боли, мотивация, словарь пользователя |
| Опрос / анкета | Много респондентов, количественные данные | Приоритеты функций |
| Картирование сценария (CJM) | Оптимизация воронки | Точки отвала |
| A/B-тест | Живой продукт, две гипотезы | Метрика конверсии |
| Юзабилити-сессия | Есть прототип или сайт | Список проблем по severity |
Теория юзабилити в QA — Основы тестирования, Классификация — usability и a11y. Веб-чек-листы — Ручное тестирование веба, маршрут QA — 132.
Мини-протокол юзабилити-сессии
- Задача — «найди тариф Pro и оформи пробный период» (без подсказок «нажми слева»).
- Думай вслух — попросите комментировать действия.
- Наблюдатель — фиксирует время, ошибки, цитаты.
- 5 пользователей — по Нильсену часто хватает для выявления большинства проблем интерфейса.
- Отчёт — таблица «проблема → частота → рекомендация → приоритет».
Продуктовые метрики после запуска — Продуктовая аналитика.
Блок 8 — презентация проектов и сбор портфолио
Презентация заказчику или на защите
| Слайд / блок | Содержание |
|---|---|
| Контекст | Кто клиент, задача, ограничения |
| Исследование | Цитаты, персоны, CJM (кратко) |
| Альтернативы | 2–3 направления, почему выбран финал |
| Решение | Ключевые экраны, дизайн-система |
| Результат | Метрики, отзыв, ссылка на прод |
| Следующие шаги | Итерации, A/B, техдолг |
Визуал кейса — до/после, wireframe рядом с финалом, скриншот на реальном устройстве. Избегайте «голых» мокапов на сером фоне без пояснения задачи.
Портфолио — оформление работ
- 3–6 сильных кейсов лучше двадцати скриншотов
- Структура кейса — STAR для дизайна: Situation → Task → Actions (исследование, прототип, UI) → Result
- Behance / Dribbble / личный домен — каналы; GitHub — для дизайн-систем и HTML-верстки макета
- PDF one-pager — для отклика на вакансию за 30 секунд
- Карьерный контекст — Карьера в IT — о разделе
Сводная таблица маршрута
| Блок | Тема | Старт в энциклопедии |
|---|---|---|
| 1 | UX/UI и визуал | 1 → 6, Графический дизайн, 2.04/2 |
| 2 | Референсы и прототип | Графика/6, Аналитика/116 |
| 3 | Лонгрид и лендинг | 2.04/2, Tilda |
| 4 | Интернет-магазин | OrderDesk, 128 |
| 5 | Новости и корпорат | CMS, Аналитика |
| 6 | Портфолио и агентство | Карьера/7, GitHub Pages |
| 7 | Исследования и юзабилити | Тестирование/1, 132 |
| 8 | Презентация и портфолио | Карьера/7 |
Чек-лист перед сдачей макета
- Есть сценарий «новый пользователь → цель» и он проходится без подсказок
- Контраст текста и фона достаточен (a11y)
- CTA виден на mobile и desktop
- Состояния кнопок и форм — default, hover, disabled, error (обратная связь)
- Шрифты и отступы из одной шкалы (типографика)
- Референсы и бриф согласованы с заказчиком
- Проведена хотя бы одна юзабилити-сессия или экспертный обход по 128
Итоги всего раздела «Интерфейс» — 98. Самопроверка по базовым темам — 99.
См. также
Другие статьи этого же раздела в боковом меню (как на странице "О разделе"). Различие между пользовательским опытом и пользовательским интерфейсом. Цветовая палитра — это набор цветов, которые используются в интерфейсе для создания визуальной идентичности продукта. %%{init: { "theme": "default", "themeVariables": { "fontSize": "14px", "fontFamily": "Segoe UI, Tahoma, sans-serif" } }}%% flowchart TD classDef group. %%{init: { "theme": "default", "themeVariables": { "fontSize": "14px", "fontFamily": "Segoe UI, Tahoma, sans-serif" } }}%% flowchart TD classDef group. Элементы обратной связи — материал энциклопедии Вселенная IT. Юзабилити (Usability) — это мера того, насколько легко и эффективно пользователь может взаимодействовать с интерфейсом для достижения своих целей. Итоги раздела «Интерфейс» — FAQ и краткие ответы по теме. Чек-лист раздела «Интерфейс» — вопросы для самопроверки.Пользовательский интерфейс - UX и UI
Визуальные элементы
Функциональные элементы
Навигационные элементы
Элементы обратной связи
Особенности и принципы UX и UI
Интерфейс — итоги
Интерфейс — чек-лист