Порядок разработки UX/UI дизайна сайта: этапы, результат и чек–лист

В этой статье разберем порядок разработки UX/UI-дизайна сайта, от постановки задачи и анализа до подготовки готовых макетов к передаче в разработку. 

UX/UI-дизайн — это один из этапов создания сайта, ему предшествует подготовительная работа, а после утверждения макетов проект переходит к технической реализации. Весь процесс создания сайта и последовательность его этапов мы подробно разобрали в отдельной статье «Этапы разработки сайта: полный пошаговый план».

Здесь же подробнее остановимся именно на этапе UX/UI-дизайна —  разберем, из каких шагов он состоит, что должно быть результатом каждого из них и что необходимо проверить перед передачей макетов в разработку.

Что входит в UX/UI дизайн сайта

UX/UI дизайн – это набор решений, которые определяют, как пользователь будет двигаться по сайту и как сайт будет выглядеть на разных устройствах.

UX отвечает за логику: структуру, навигацию, сценарии, порядок блоков, формы, фильтры, карточки, пользовательские пути и точки принятия решения.

UI отвечает за визуальную систему: цвета, типографику, сетку, кнопки, поля, карточки, иконки, отступы, состояния элементов, адаптивы и общий стиль интерфейса.

На выходе заказчик должен получить:

• структуру сайта;
• прототипы ключевых страниц;
• дизайн главной и внутренних страниц;
• мобильные и планшетные версии;
• состояния кнопок, форм, меню, ошибок и успешных действий;
• UI kit или набор компонентов;
• комментарии для разработчиков, если они нужны;
• подготовленные материалы для передачи в верстку и программирование.

Этап 1. Постановка задачи

Первый этап фиксирует, для чего нужен сайт. На старте нужно определить:

• тип сайта: лендинг, корпоративный сайт, каталог, интернет-магазин, сервис;
• цель: заявка, продажа, регистрация, звонок, запись, скачивание, переход в мессенджер;
• целевую аудиторию;
• источники трафика;
• обязательные разделы;
• ограничения по платформе, срокам и контенту;
• критерии приемки дизайна.

Для лендинга главный сценарий может быть один: быстро объяснить услугу и привести к заявке. Для сайта-каталога сценариев больше: выбрать категорию, отфильтровать предложения, открыть карточку, сравнить варианты, связаться с менеджером. Для сервиса нужно проектировать роли, статусы, таблицы, личные кабинеты и рабочие действия.

Результат этапа – понятное описание задачи. После него команда знает, что сайт должен делать, для кого он создается и какие решения нельзя использовать.

Этап 2. Анализ аудитории, конкурентов и текущего сайта

Анализ нужен, чтобы проектировать интерфейс под реальные ожидания пользователя и рынок. Если сайт создается с нуля, команда изучает конкурентов, поисковую выдачу, рекламные посадочные страницы, типовые возражения клиентов и привычные сценарии в нише. Если идёт редизайн, дополнительно смотрят текущий сайт:

• какие страницы дают заявки;
• где пользователи уходят;
• какие формы не заполняют;
• какие разделы перегружены;
• что плохо работает на мобильных устройствах;
• какие блоки устарели по смыслу;
• какие страницы важны для SEO и их нельзя потерять при переделке.

Задача анализа – дать решения для структуры и прототипа: что оставить, что убрать, что вынести выше, какие страницы добавить, какие сценарии упростить.

Результат этапа – список выводов, на которые можно опираться в проектировании.

Этап 3. Структура сайта

Структура отвечает на вопрос: какие страницы нужны и как они связаны. Если этот этап пропустить, дизайн быстро превращается в набор красивых экранов без общей логики.

На этом этапе формируется карта сайта:

• главная страница;
• страницы услуг;
• каталог или категории;
• карточки товаров или предложений;
• кейсы;
• блог или статьи;
• о компании;
• контакты;
• формы заявки;
• служебные страницы;
• страницы, которые нужны для SEO.

Для многостраничного сайта структура особенно важна. Пользователь должен понимать, где он находится, как перейти к нужной услуге, где посмотреть доказательства и где оставить заявку.

В нашем кейсе для Нисса-тур структура была одной из ключевых задач. Нужно было обновить сайт туристической компании, сохранить привычную логику для пользователей, добавить удобные категории, поиск, конструктор туров, статьи и точки обратной связи почти с каждой страницы. 

Этап 4. Пользовательские сценарии

На этом этапе описывают, как человек проходит путь от входа на сайт до целевого действия. Для сайта услуг это может быть путь от рекламного запроса к странице услуги, затем к кейсу, тарифам, форме заявки и контакту с менеджером. Для интернет-магазина – путь от категории к фильтрам, карточке товара, корзине и оплате.

Важно разобрать не только идеальный сценарий, но и сомнения:

• пользователь не понимает цену;
• не видит отличие от конкурентов;
• боится оставить телефон;
• не может найти нужную услугу;
• не доверяет компании;
• не понимает, что произойдет после заявки.

Хороший UX закрывает эти вопросы до того, как пользователь уйдет. Поэтому рядом с формой нужны объяснения, рядом с ценой – состав услуги, рядом с заявкой – понятный следующий шаг.

Результат этапа – список ключевых сценариев и точек, где интерфейс должен помочь пользователю принять решение.

Этап 5. Прототип

Прототип – это черновая схема страницы без финального визуального оформления. В нем уже видны блоки, навигация, формы, кнопки и логика чтения.

Прототип нужен, чтобы проверить структуру до дизайна. На этом этапе проще убрать лишний блок, поменять порядок разделов, сократить форму, добавить блок доверия или перенести важную информацию выше.

В прототипе обычно прорабатывают:

• первый экран;
• меню и навигацию;
• порядок блоков;
• карточки услуг или товаров;
• формы;
• фильтры;
• блоки кейсов и отзывов;
• FAQ;
• футер;
• мобильную логику ключевых элементов.

Результат этапа – согласованная логика страниц.

Этап 6. UI–концепция

После прототипа можно переходить к визуальной концепции. Обычно сначала прорабатывают главную страницу или один ключевой экран, чтобы согласовать стиль до отрисовки всего сайта.

На этом этапе выбирают:

• сетку;
• типографику;
• цветовую палитру;
• стиль кнопок и форм;
• визуальные акценты;
• иллюстрации, фото или графику;
• подачу карточек;
• стиль иконок;
• плотность интерфейса;
• характер анимаций, если они нужны.

UI-концепция должна поддерживать UX. Если пользователь приходит за сложной B2B-услугой, интерфейс должен помогать читать, сравнивать и доверять. Если сайт продает визуальный продукт, дизайн должен показать товар крупно и точно. Если это сервис, важнее ясность статусов, таблиц и действий.

В нашем кейсе корпоративного сайта для кредитного брокера мы выбрали строгую типографику, 12–колоночную сетку, сдержанную черно–белую палитру и акцентный желтый цвет. Для финансовой тематики это решает практическую задачу: интерфейс должен выглядеть аккуратно, вызывать доверие и вести к заявке.

Этап 7. Дизайн всех страниц и состояний

После утверждения концепции дизайнер отрисовывает остальные страницы и состояния интерфейса. 

• Для корпоративного сайта это могут быть страницы услуг, кейсов, статьи, контакты, формы и модальные окна. 
• Для каталога – категории, карточки, фильтры, поиск, пустые состояния, заявки. 
• Для сервиса – дашборды, таблицы, профили, настройки, уведомления, ошибки, роли и права.

Нужно заранее показать состояния элементов:

• обычная кнопка;
• кнопка при наведении;
• активная кнопка;
• неактивное состояние;
• ошибка в форме;
• успешная отправка;
• загрузка;
• пустой список;
• выбранный фильтр;
• открытое меню;
• поп–up или модальное окно.

Если состояния не отрисованы, разработчик будет принимать решения сам. Иногда это нормально для простого сайта. Для сложного проекта это приводит к разной логике на разных страницах.

В O!task наша команда проектировала не только отдельные экраны, а систему с большим количеством функций. Каждая функция имела свои сценарии, а UI kit для панели управления включал более 300 элементов. Для таких проектов дизайн без компонентов и состояний быстро становится неуправляемым.

Этап 8. Адаптивный дизайн

Пользователь на телефоне часто видит сайт иначе: другой порядок блоков, компактное меню, другой размер кнопок, сокращенные карточки, горизонтальные таблицы, скрытые фильтры.

На этом этапе проверяют:

• как работает первый экран на мобильном;
• видна ли основная CTA–кнопка;
• удобно ли открывается меню;
• читаются ли заголовки и тексты;
• помещаются ли карточки;
• удобно ли заполнять формы;
• как ведут себя фильтры;
• не съезжают ли таблицы;
• достаточно ли крупные кнопки и поля.

Результат этапа – макеты, по которым разработчик понимает, как сайт должен работать на разных экранах.

Этап 9. UI kit и подготовка к разработке

В UI kit обычно входят:

• цвета;
• шрифты;
• кнопки;
• поля ввода;
• чекбоксы и переключатели;
• карточки;
• теги;
• иконки;
• формы;
• меню;
• модальные окна;
• уведомления;
• состояния элементов;
• отступы и сетка.

Для небольшого сайта UI kit может быть компактным. Для интернет–магазина, личного кабинета или сервиса он становится основой масштабирования. Когда появляются новые страницы, их можно собирать из готовых компонентов без разрушения визуальной системы.

Результат этапа – дизайн, который можно передавать в верстку.

Этап 10. Проверка дизайна перед передачей

Перед передачей в разработку дизайн нужно проверить как рабочий интерфейс.

Минимальная проверка:

• у каждой важной страницы есть цель;
• сценарии пользователя не обрываются;
• формы имеют состояния ошибки и успешной отправки;
• кнопки и ссылки не дублируют друг друга без смысла;
• мобильные версии не перегружены;
• тексты в кнопках понятны;
• заголовки не ломают сетку;
• важные элементы видны без поиска;
• компоненты выглядят одинаково на разных страницах;
• SEO–страницы не потеряны в структуре;
• разработчику понятно, что делать с каждым макетом.

На этом этапе полезно пройти сайт глазами пользователя. Найти услугу. Понять цену или состав работ. Посмотреть доказательства. Оставить заявку. Вернуться к нужному разделу. Открыть страницу с телефона.

Что должен получить заказчик

После разработки UX/UI дизайна сайта у заказчика должны быть:

• структура сайта;
• прототипы или согласованная логика страниц;
• дизайн ключевых страниц;
• дизайн внутренних страниц;
• адаптивные версии;
• состояния форм, кнопок, меню и ошибок;
• UI kit;
• графика и изображения, подготовленные к разработке;
• пояснения к сложным сценариям;
• понятная передача разработчику.

Если сайт будет развиваться, особенно важны структура и UI kit. Без них каждая новая страница будет выглядеть как отдельная работа, а не как часть одной системы.

Частые ошибки в UX/UI дизайне сайта

Ошибка 1. Начать с визуала без структуры. Такой сайт может выглядеть современно, но пользователь не понимает, куда идти и что делать.

Ошибка 2. Проектировать только главную страницу. Внутренние страницы часто приводят больше целевого трафика, особенно из SEO и рекламы.

Ошибка 3. Не показывать состояния. Формы, ошибки, загрузка, пустые списки и pop–up окна появляются в реальной работе сайта. Их нужно продумать до разработки.

Ошибка 4. Делать мобильную версию после десктопа без пересмотра сценария. На телефоне нельзя просто уменьшить макет. Нужно проверить порядок блоков, меню, формы и CTA.

Ошибка 5. Перегружать первый экран. Пользователь должен быстро понять предложение, а не разбирать все преимущества сразу.

Ошибка 6. Не учитывать контент. Макет с короткими заглушками может развалиться, когда появятся реальные названия услуг, длинные заголовки и карточки.

Ошибка 7. Не передавать дизайн разработчику нормально. Если макеты не подписаны, компоненты не собраны, а состояния не показаны, часть решений будет додумана уже в коде.

Чек-лист для старта UX/UI дизайна

Перед началом проекта подготовьте короткий документ. Он ускорит оценку и снизит риск переделок.

1. Тип сайта.

2. Цель сайта.

3. Основные целевые действия.

4. Целевая аудитория.

5. Источники трафика.

6. Список разделов.

7. Список обязательных страниц.

8. Примеры конкурентов.

9. Примеры сайтов, которые нравятся по логике.

10. Примеры сайтов, которые не нравятся, с причиной.

11. Готовые тексты или тезисы.

12. Фирменный стиль, логотип, брендбук.

13. Технические ограничения.

14. Платформа или CMS, если она уже выбрана.

15. Кто согласовывает структуру, прототип и дизайн.

Этот список помогает быстрее перейти от общих обсуждений к проектированию.

Как мы в Веб Ду выстраиваем порядок работы

Мы начинаем с анализа и задачи: сначала разобраться, потом проектировать, затем переходить к визуальной части.

В статье «Этапы разработки сайта: полный пошаговый план» раскрыли наш подход подробнее:

Если нужен редизайн, предлагаем прочитать эту статью:

Главная задача UX/UI дизайна сайта – сделать интерфейс, который можно разработать, наполнить, продвигать и использовать как рабочий инструмент бизнеса.

Главное

Порядок разработки UX/UI дизайна сайта должен идти от задачи к интерфейсу: цель, аудитория, анализ, структура, сценарии, прототип, UI–концепция, страницы, состояния, адаптивы, UI kit и передача в разработку.

Если начать с визуала, легко получить красивый макет без логики. Если пройти этапы последовательно, дизайн становится понятной основой для разработки, SEO, рекламы и дальнейшего развития сайта.

Хороший UX/UI дизайн сайта отвечает на простые вопросы: что пользователь ищет, что он должен понять, где он может сомневаться, как он сделает целевое действие и что разработчик должен собрать по макету.