Введите данные, и мы вам перезвоним в ближайшее время
Как устроен UX/UI-дизайн сайта по этапам, от аналитики и прототипов до UI-кита и передачи в разработку. Сколько длится каждый шаг, какие файлы должен получить заказчик и как принимать макеты, чтобы не переделывать их на вёрстке.
Оставьте телефон, перезвоним и ответим на вопросы по теме статьи.
UX/UI-дизайн сайта начинается задолго до того, как появляются цвета и шрифты. Сначала проектируют, как посетитель находит нужное и доходит до заявки, и только потом оформляют это визуально. В типовом процессе шесть этапов: аналитика, структура, прототипы, дизайн-концепция, макеты всех шаблонов и UI-кит с передачей в разработку. Для корпоративного сайта это в среднем 4–8 недель, для лендинга 1–3 недели.
Заказчику полезно понимать эту кухню хотя бы в общих чертах, потому что от неё зависит, сколько правок будет на вёрстке и во что обойдутся переделки.
UX, или user experience, отвечает за логику. Какие задачи решает посетитель, в каком порядке он видит информацию, сколько шагов отделяет его от заявки, какие поля в форме действительно нужны. Результат этой работы выглядит скромно: структура сайта, пользовательские сценарии и чёрно-белые прототипы.
UI, или user interface, это визуальный слой. Сетка, типографика, цвета, иконки, кнопки во всех состояниях от обычного до неактивного. Результат UI-работы — макеты и UI-кит.
Для бизнеса разница выглядит так. Плохой UX означает, что посетитель не находит цену, теряется в меню или бросает форму на седьмом поле, даже если сайт выглядит дорого. Плохой UI означает, что логика верная, но кнопку заявки не видно, серый текст на белом читается с трудом, а на смартфоне блоки наезжают друг на друга. Заявки теряются в обоих случаях.
Разделить эти работы между разными подрядчиками можно, но рискованно. Часто бизнес приходит с готовыми прототипами от одной команды и просит другую «просто нарисовать дизайн». Дизайнер, который не участвовал в аналитике, не знает, почему блоки стоят именно так, и начинает двигать их ради композиции. Визуальные решения должны вытекать из логики, а не спорить с ней.
Порядок этапов у большинства студий похож. Отличаются глубина проработки и то, что считается результатом каждого шага.
Не каждый проект проходит все шесть шагов в полном объёме, и это нормально. Для лендинга аналитика может уложиться в одну встречу и разбор конкурентов, а прототип бывает упрощённым. А вот для сайта застройщика или клиники с десятками услуг экономить на структуре и прототипах опасно, потому что именно там решается, как человек найдёт нужную квартиру или врача, и ошибку в структуре потом не спасёт никакая графика.
Типичная ошибка на этапе прототипов в том, что их заполняют «рыбой». Прототип с условным текстом согласовывают быстро. Потом выясняется, что реальное описание услуги в три раза длиннее, у половины врачей нет фотографий, а цены показывать нельзя. Прототип должен работать с настоящими заголовками и хотя бы примерным объёмом текста.
Сроки зависят от количества шаблонов, скорости согласований и готовности контента. Ориентиры для проектов с индивидуальным дизайном приведены в таблице.
| Тип проекта | Шаблонов страниц | Срок дизайна с прототипами |
| Лендинг | 1–2 | 1–3 недели |
| Корпоративный сайт | 8–15 | 4–8 недель |
| Интернет-магазин | 15–25 | 6–10 недель |
| Портал, личные кабинеты | от 25 | от 2–3 месяцев |
Самое непредсказуемое в сроках — согласования. Если решение на каждом этапе принимают пять человек и собирают правки неделю, проект растягивается вдвое. Помогает простое правило. Со стороны заказчика один ответственный, а число итераций правок записано в договоре.
Второй фактор связан с контентом. Настоящие тексты с фотографиями и цифрами часто меняют композицию страницы, поэтому их лучше готовить параллельно с прототипами. Тогда к этапу макетов их можно подставить, и на вёрстке обойдётся без сюрпризов.
По деньгам ориентир такой. В полной разработке на дизайн с прототипами обычно приходится 20–25% бюджета, и для корпоративного сайта стоимостью 300–900 тыс. ₽ это примерно 60–220 тыс. ₽. Точная цифра зависит от количества разных шаблонов и глубины аналитики. Как складывается остальная смета, разобрано в статье о стоимости разработки сайта.
Хороший дизайн сдают рабочим файлом, с которым можно продолжать работать через год и с другой командой, а не набором картинок. Минимальный комплект выглядит так:
Если дизайнер не передаёт исходники или UI-кит, при следующем развитии сайта придётся начинать с нуля. Передачу файлов стоит прописать в договоре.
Спецификацию часто считают необязательной. Зря. Без неё разработчик сам решает, как ведёт себя выпадающее меню на смартфоне или что показывает форма после отправки, и заказчик видит эти решения только на тестовом сайте, когда исправлять их уже сложнее.
Оценивать макеты по вкусу естественно, но это худший критерий. Вопрос не в том, нравится ли цвет, а в том, понятно ли за пять секунд, что компания продаёт и где оставить заявку. Попросите дизайнера пройти с вами главный сценарий по макетам, от первого экрана до отправленной формы.
Мобильную версию смотрите первой. Для многих сайтов смартфоны дают основную часть визитов, а на маленьком экране сразу видны перегруженные блоки и мелкие кнопки. Десктоп выглядит солидно почти всегда, мобильный макет честнее.
Проверяйте макеты на реальном контенте. Страница с аккуратными короткими заголовками выглядит лучше, чем будет выглядеть сайт с настоящими названиями вроде «Проектирование систем вентиляции и кондиционирования производственных помещений». Если в макете такие строки не предусмотрены, они сломают вёрстку.
Правки собирайте одним списком от одного человека. Когда замечания приходят в трёх чатах от директора, маркетолога, руководителя продаж, они противоречат друг другу, и дизайнер тратит время на выяснение, чья версия главная. И сверяйтесь с прототипом. Новый блок, появившийся на этапе дизайна, означает изменение объёма работ, его лучше обсудить сразу, а не обнаружить в счёте.
За последние годы к дизайну добавились требования, которые раньше считались второстепенными. Теперь их закладывают уже в прототипах.
Если вы переделываете уже работающий сайт, к задачам дизайна добавляется сохранение поискового трафика. Как перенести структуру и адреса страниц, настроить редиректы и не потерять позиции после смены интерфейса, разобрано в статье про редизайн без потери трафика.
Бывает, что дизайн заказывают у одного подрядчика, а разработку у другого. Так можно, но стыки придётся контролировать самому заказчику. Дизайнер рисует фильтр каталога, который на выбранной CMS делается неделю вместо дня, или анимацию, которая роняет INP. Разработчик получает макеты без спецификации и додумывает поведение элементов сам, а о расхождениях заказчик узнаёт уже на тестовом сайте.
Когда проектированием и дизайном занимается та же команда, что и разработкой, такие вопросы снимаются по ходу. Так устроен процесс у нас в Вебтехе, и макеты с самого начала учитывают ограничения выбранной CMS и интеграций, а также скорость загрузки. Пример проекта, где интерфейс строился вокруг сценария выбора, это корпоративный сайт застройщика «Жилстрой Девелопмент» с подбором квартир по нескольким ЖК. Для уже запущенных сайтов есть дизайн-сопровождение, в рамках которого делаются новые страницы и акционные баннеры, доработки интерфейса по данным аналитики.
Если планируете новый сайт или обновление дизайна, заполните бриф, и мы оценим количество шаблонов и сроки.
UX-дизайн определяет, как пользователь достигает цели на сайте, то есть структуру, сценарии, порядок блоков и формы. UI-дизайн отвечает за внешний вид интерфейса, сетку, шрифты, цвета, кнопки и их состояния. На практике это один процесс. Сначала логику проектируют в прототипах, затем оформляют визуально.
Можно, но обычно это обходится дороже. Структуру и содержание страниц на прототипе согласуют за несколько дней, а переделка готового дизайна из-за нового блока или сценария занимает недели. Для простого лендинга прототип бывает упрощённым, а полностью без него обходятся только в очень небольших проектах.
Стоимость зависит от количества разных шаблонов страниц и глубины аналитики. В полной разработке на дизайн с прототипами обычно приходится 20–25% бюджета, для корпоративного сайта стоимостью 300–900 тыс. ₽ это ориентировочно 60–220 тыс. ₽. Точную оценку дают после брифа.
Минимум это исходники в Figma с доступом для заказчика, прототипы, макеты всех шаблонов для десктопа и смартфона, UI-кит с компонентами и их состояниями, экспорт иконок и графики. Хорошая практика добавить к этому короткую спецификацию для разработчиков с описанием поведения элементов.
Зависит от договорённостей. Одни студии показывают два-три концепта, другие одну концепцию с обоснованием. Важнее, насколько концепция опирается на аналитику и согласованный прототип, а число итераций правок стоит зафиксировать в договоре.
