Когда клиент приходит в студию и говорит «хочу сайт», первый вопрос обычно не «какой цвет кнопки», а «что именно должен делать этот сайт и как пользователь будет по нему двигаться». Ответ на этот вопрос — и есть старт дизайн-процесса.
Дизайн проходит три стадии: wireframe, макет и прототип. Их часто путают, используют как синонимы или пропускают «ненужные» этапы ради экономии. Честно разберём, что за чем стоит и почему каждый этап существует не для красоты, а для конкретной цели.
Wireframe: скелет будущего сайта
Wireframe — это схема страницы. Грубо говоря, чёрно-белый чертёж: вот тут будет шапка, здесь блок с текстом, ниже — три карточки, под ними — кнопка. Никаких цветов, шрифтов, фотографий. Только структура.
Делается wireframe обычно в Figma, Balsamiq или даже от руки на бумаге. Главная цель — понять, как устроена логика страницы, до того, как кто-то потратил время на дизайн.
Типичный wireframe лендинга выглядит так: прямоугольники, подписи «[изображение продукта]», «[заголовок секции]», стрелки, показывающие, куда ведёт кнопка. Это намеренно некрасиво — чтобы никто не отвлекался на эстетику и все думали только о структуре.
Что wireframe даёт проекту:
- Позволяет проверить логику навигации раньше, чем дизайнер нарисовал хоть пиксель
- Помогает заказчику и команде говорить об одном и том же, а не о разном
- Выявляет проблемы на этапе, когда их ещё дёшево исправить
На практике: если вы поняли, что раздел «О компании» нужно переставить выше после wireframe — это 20 минут работы. Если то же самое выяснилось после финального макета — это несколько часов переработки со всеми вытекающими.
Макет: дизайн с настоящим лицом
Макет (его ещё называют мокап, от английского mockup) — это то, как сайт будет выглядеть визуально. Полноценный дизайн с цветами, типографикой, фотографиями, иконками, тенями, отступами — всем тем, что в итоге увидит пользователь.
Макет статичный. Это картинка, а не интерактивный объект. Вы смотрите на него в Figma или PDF и понимаете: вот так будет выглядеть главная страница, вот так — карточка товара, вот так — форма заявки.
Хороший макет — это не просто красивая картинка. Это документ, из которого разработчик берёт все параметры: отступы, размеры, цвета в HEX-кодах, поведение элементов в разных состояниях — кнопка в обычном виде, при наведении, при нажатии, неактивная. Поэтому профессиональные макеты делаются в компонентном подходе: создаётся библиотека элементов, которая переиспользуется по всему проекту.
Чего в макете нет:
- Анимаций — только если специально прорисованы отдельно
- Интерактивности — нельзя «нажать» кнопку и увидеть результат
- Адаптива по умолчанию — макет обычно делается отдельно для десктопа и мобильного
Сколько страниц должно быть в макете — зависит от проекта. Для лендинга это одна-две страницы: основная плюс мобильная версия. Для корпоративного сайта — все ключевые шаблоны: главная, услуга, статья, контакты, 404.
Прототип: когда дизайн начинает «работать»
Прототип — это интерактивный макет. Внешне он может выглядеть так же, как макет, но по нему можно «ходить»: нажать на кнопку и перейти на другую страницу, открыть меню, увидеть выпадающий список.
Прототипы делают в Figma, InVision, Axure. Они бывают разные по детализации.
Низкодетализированный прототип — кликабельный wireframe. Серые блоки, по которым можно кликать и переходить между экранами. Нужен, чтобы проверить логику пользовательского пути.
Высокодетализированный прототип — финальный дизайн с анимациями, переходами, микровзаимодействиями. Почти неотличим от готового сайта, но в браузере не работает — это всё ещё Figma.
Прототип нужен не всегда. Для простого лендинга он, скорее всего, избыточен. Но для сложного продукта — интернет-магазина, сервиса с личным кабинетом, мобильного приложения — прототип окупает себя многократно: позволяет поймать нелогичные переходы и сломанные сценарии до разработки, а не после.
Как три этапа связаны между собой
В идеальном мире процесс выглядит так:
- Сначала — wireframe. Определяем структуру, согласовываем с заказчиком.
- Потом — макет. Делаем полноценный дизайн поверх утверждённой структуры.
- Опционально — прототип. Добавляем интерактивность для проверки и презентации.
Каждый следующий этап опирается на предыдущий. Если пропустить wireframe и сразу рисовать макет — дизайнер тратит время на красивую картинку с непродуманной структурой. Потом заказчик говорит «я хотел бы переставить эти блоки», и начинается переработка.
Если пропустить прототип на сложном проекте — разработчик реализует то, что нарисовано, и только на этапе тестирования выяснится, что пользователь не понимает, как пройти оформление заказа.
Простая математика: час работы дизайнера на wireframe — условно 2 000 рублей. Час работы разработчика, который переделывает уже написанный интерфейс — в два-три раза дороже. Поэтому wireframe — это экономия, а не трата.
Типичные ошибки заказчиков
«Нам wireframe не нужен, сразу рисуйте красиво»
Это примерно как строить дом без проекта. Технически возможно, но в процессе выяснится, что розетки не там, дверь открывается не в ту сторону, а ванная слишком маленькая. Переделывать потом дороже, чем продумать заранее.
«Пришлите макет в PDF, я посмотрю»
PDF не передаёт интерактивность и скрывает контекст. Смотреть дизайн нужно в среде, где он сделан — в Figma или хотя бы через интерактивную ссылку. Иначе вы видите картинку, но не понимаете, как пользователь будет с ней взаимодействовать.
«Это же просто лендинг, зачем прототип»
Прототип для лендинга — действительно лишнее. Но заменить им макет, то есть не делать полноценный дизайн, а ограничиться только кликабельным wireframe — риск получить на выходе серый сайт, который выглядит как черновик.
«Нам нужен прототип с анимациями, как живой сайт»
Высокодетализированный прототип с анимациями — это большой объём работы. Иногда проще и быстрее сделать реальный фронтенд, чем имитировать его в Figma. Обсудите с командой: возможно, для демонстрации инвесторам хватит хорошего макета, а живая версия подождёт.
Что это значит для вашего проекта
Если вы заказываете сайт, спросите у студии или фрилансера: что входит в дизайн? Только макет? Или сначала wireframe? Будет ли прототип?
Нет единственно правильного ответа. Для сайта-визитки от 2 000 ₽ wireframe может быть простым и быстрым — всего несколько блоков. Для корпоративного сайта от 15 000 ₽ проработанный wireframe с согласованием — обязательный этап. Для интернет-магазина от 10 000 ₽ без прототипа ключевых сценариев — корзина, оформление заказа, каталог — высок риск дорогостоящих доработок на этапе разработки.
В REEXY мы всегда начинаем с обсуждения структуры до того, как берёмся за дизайн. Это занимает время, но экономит деньги — и ваши, и наши.
Как читать дизайн-документы, если вы заказчик
Wireframe смотрите на логику, а не на красоту. Вопросы для проверки:
- Всё ли понятно на главной странице без пояснений?
- Есть ли призыв к действию в нужных местах?
- Не перегружена ли страница информацией?
Макет смотрите на соответствие бренду и читаемость. Вопросы:
- Это похоже на нас?
- Легко ли читается текст?
- Хочется ли нажать на главную кнопку?
Прототип проверяйте сами — как пользователь. Пройдите ключевой сценарий: пришли на сайт, нашли продукт, оставили заявку. Где зацепились? Что было непонятно?
Когда один этап закрывает несколько задач
Строго говоря, эти три этапа — не всегда три отдельных документа. В небольших проектах они могут совмещаться.
Например, в Figma можно нарисовать низкодетализированный макет, который одновременно служит wireframe, и добавить к нему базовые переходы — получится простой прототип. Для лендинга этого достаточно. Тратить бюджет на три отдельных раунда согласований ради пятиблочного промо-сайта — нецелесообразно.
Для сложных проектов — наоборот. Каждый этап требует отдельного согласования, потому что каждая ошибка обходится дороже. Интернет-магазин с сотнями сценариев или сервис с личным кабинетом — это проекты, где wireframe и прототип спасают от катастрофических переработок.
Вопросы, которые стоит задать до начала работы
Прежде чем подписать договор на дизайн, уточните:
- Включён ли wireframe в стоимость или это отдельный этап?
- Сколько итераций правок предусмотрено на каждом этапе?
- В каком формате сдаётся макет — Figma, PDF, архив с файлами?
- Будет ли прототип или только статичный дизайн?
- Как организовано согласование — по почте, в мессенджере, в Figma-комментариях?
Эти вопросы — не занудство. Они экономят нервы и время обеих сторон. Студия, которая не может внятно ответить на них до старта, скорее всего, не сможет внятно работать и в процессе.