Веб-дизайн — маршрут развития
Темы веб-дизайна в энциклопедии разбросаны по разделам "Интерфейс", "Графика", "Веб-сайты", "HTML/CSS", "Тестирование" и "Карьера". Давайте определим, что изучать, в каком порядке и куда смотреть при проектировании конкретного типа сайта.
Статья про проектирование опыта и визуала веб-страниц. Вёрстка и код — HTML
JavaScript; сервер и деплой — веб-сайты и веб-приложения.
Как пользоваться маршрутом
| Шаг | Действие |
|---|---|
| 1 | Пройдите блок 1, если только входите в UX/UI |
| 2 | Блок 2 — перед любым макетом в Figma или коде |
| 3 | Блоки 3–6 — по типу проекта (лендинг, магазин, портал) |
| 4 | Блоки 7–8 — перед сдачей заказчику и сбором портфолио |
| 5 | Теорию закрепите практикой — лабораторный кейс "GitHub Pages", HTML-страницы целиком, учебный макет в CSS — практика, готовые макеты HTML+CSS или Tailwind — готовые блоки |
После каждого блока откройте макет в браузере на телефоне и ноутбуке, пройдите сценарий глазами нового пользователя и сверьте чек-лист из самопроверки раздела. Дизайн без проверки остаётся гипотезой.
Блок 1 — UX/UI и основы визуального дизайна
UX (User Experience) — путь пользователя к цели — что он думает, где застревает, доволен ли результатом. UI (User Interface) — то, что видит и нажимает — кнопки, сетка, цвет, типографика. UI реализует стратегию UX; красивая картинка без сценария редко решает задачу бизнеса.
Базовые понятия раздела "Интерфейс"
| Тема | Материал | Зачем |
|---|---|---|
| UX и UI, виды интерфейса | Пользовательский интерфейс — UX и UI | Словарь и границы дисциплин |
| Визуальные элементы | Визуальные элементы | Цвет, шрифт, иконки, контраст; справочник иконок |
| Функциональные элементы | Функциональные элементы | Кнопки, поля, переключатели |
| Навигация | Навигационные элементы | Меню, хлебные крошки, табы |
| Обратная связь | Элементы обратной связи | Загрузка, ошибки, успех |
| Принципы и юзабилити | Особенности и принципы UX и UI | Согласованность, a11y, интерактивная демо |
Визуальная коммуникация и веб-композиция
| Тема | Материал |
|---|---|
| Макет, типографика, иерархия | Графический дизайн |
| Структура веб-страницы (хедер, hero, блоки) | Дизайн веб-интерфейсов |
| Сетка и адаптив | Flexbox и CSS Grid, Адаптивный дизайн |
| Разметка целой страницы | HTML-страницы целиком |
| Готовые страницы HTML+CSS | HTML + CSS — готовые макеты |
| Tailwind — готовые блоки | Tailwind — готовые блоки |
| CSS-анимации (fade, loader, hover) | CSS-анимации — готовые эффекты |
| Типовые UI-компоненты в CSS | Типовые элементы интерфейса |
| Доступность в стилях | Доступность в CSS |
| Термины | UX, UI |
Блок 2 — референсы и прототипирование
Проект начинается с брифа и аудитории, а не с выбора шрифта. Референсы фиксируют ожидания заказчика; прототип проверяет логику до дорогой отрисовки.
Референсы и moodboard
| Шаг | Что делать | Материал |
|---|---|---|
| Собрать референсы | 5–10 экранов конкурентов и смежных продуктов; выписать, что нравится (сетка, тон, CTA) | Графический дизайн — концептуализация |
| Moodboard | Палитра, фото, текстуры, 2–3 шрифта — единое настроение | Графика — вектор и растр (SVG, srcset для веба); учебные фигуры в SVG — Lab / 1119 |
| Согласовать с заказчиком | Зафиксировать "да / нет" до 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 — о разделе, HTML-страницы целиком, CSS — практика, готовые макеты, Tailwind — готовые блоки, 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 — Основы тестирования веб-приложений — маршрут для QA.
Мини-протокол юзабилити-сессии
- Задача — "найди тариф 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 и визуал | Пользовательский интерфейс - UX и UI → Особенности и принципы UX и UI, Графический дизайн, 2.04/2 |
| 2 | Референсы и прототип | Графика/6, Аналитика/116 |
| 3 | Лонгрид и лендинг | 2.04/2, Tilda |
| 4 | Интернет-магазин | OrderDesk, Ручное тестирование веб-приложений |
| 5 | Новости и корпорат | CMS, Аналитика |
| 6 | Портфолио и агентство | Карьера/7, GitHub Pages |
| 7 | Исследования и юзабилити | Тестирование/1, Основы тестирования веб-приложений — маршрут для QA |
| 8 | Презентация и портфолио | Карьера/7 |
Чек-лист перед сдачей макета
- Есть сценарий "новый пользователь → цель" и он проходится без подсказок
- Контраст текста и фона достаточен (a11y)
- CTA виден на mobile и desktop
- Состояния кнопок и форм — default, hover, disabled, error (обратная связь)
- Шрифты и отступы из одной шкалы (типографика)
- Референсы и бриф согласованы с заказчиком
- Проведена хотя бы одна юзабилити-сессия или экспертный обход по Ручное тестирование веб-приложений
Итоги всего раздела "Интерфейс" — Интерфейс — итоги. Самопроверка по базовым темам — Интерфейс — чек-лист.