Этапы создания современного веб-дизайна: от CJM и прототипа до финального макета

Этапы создания современного веб-дизайна: от CJM и прототипа до финального макета

«Сколько стоит дизайн сайта и почему так долго?» — вопрос, который возникает почти у каждого заказчика. Снаружи кажется, что дизайнер просто рисует красивые экраны. На деле значительная часть работы происходит до первого макета: от неё зависят и сроки, и стоимость, и то, получите вы эффективный продукт или очередной шаблон. Разбираем, из каких этапов состоит дизайн сайта и что на каждом из них происходит

Из чего складывается современный веб-дизайн

• Бриф и цели — что сайт должен делать для бизнеса и по каким показателям вы поймёте, что он справляется.
• Исследование — аудитория, конкуренты, ваши данные из Метрики.
• CJM (карта пути клиента) — схема того, как человек приходит к решению: от первого запроса до заявки, с его вопросами и сомнениями на каждом шаге.
• Структура и контент — какие страницы нужны и что на них должно быть.
• Прототипирование сайта — схематичные экраны без оформления, где проверяется логика.
• Визуальная концепция и макеты — цвета, шрифты, стиль, все типы страниц и мобильная версия.
• Передача в разработку — файлы, UI-кит, состояния элементов

Что вы получаете на каждом этапе

От чего зависят сроки и стоимость

1. Количество уникальных типов страниц, а не общее число страниц.
2. Глубина исследования: достаточно ли имеющихся данных или нужны интервью и анализ рынка.
3. Сложность интерфейса: калькуляторы, личные кабинеты, интерактивные элементы.
4. Готовность материалов: фирменный стиль, тексты, фотографии.
5. Скорость согласований и число людей, которые дают правки.
6. Количество кругов правок, включённых в стоимость.

Как избежать шаблонного результата

1. Не пропускайте исследование и CJM: именно они отличают проработанный дизайн от набора красивых блоков.
2. Согласуйте структуру на прототипе, до оформления: менять схему на макетах дороже.
3. Утверждайте концепцию на одном ключевом экране, прежде чем рисовать остальные.
4. Проверяйте мобильную версию отдельно, а не как уменьшенную копию десктопной.
5. Просите UI-кит: он сохраняет единый стиль, когда сайт растёт

Хотите понимать, за что платите и когда получите результат?

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