Проектирование и прототипы сайта
Покажем структуру, ключевые экраны и действия пользователей. Вы увидите логику будущего сайта и сможете передать согласованную схему своей или внешней команде.
- Карта разделов и связей между ними
- Ключевые экраны и шаблоны страниц
- Пользовательские пути, формы и состояния
- Комментарии и согласованный формат для передачи
Сначала договориться о логике
Прототип полезен там, где рано рисовать дизайн, пока неясно, из чего состоит сайт и как человек пройдет к нужному действию.
Есть идея сайта, но нет общей схемы.
Разложим задачу на разделы, страницы и ключевые переходы, чтобы дизайн и разработка начинались с согласованной основы.
Пользователю нужно пройти несколько шагов, выбрать условия или передать много данных.
Покажем последовательность действий, развилки, формы и состояния, которые важно предусмотреть до реализации.
Клиенты, партнеры, сотрудники или другие роли решают на сайте разные задачи.
Разделим их пути и покажем, какие экраны, данные и действия нужны каждой роли.
Одного списка страниц недостаточно: важны фильтры, карточки, статусы и действия внутри сервиса.
Свяжем структуру разделов с рабочими сценариями и состояниями интерфейса.
Дизайнер или разработчик подключится позже и должен понять замысел без устных пояснений.
Зафиксируем экраны, переходы, данные и комментарии в согласованном формате для передачи.
Участники по-разному понимают, какие страницы и функции нужно оценивать.
Сначала соберем видимую схему, обозначим границы и только затем передадим объем на оценку следующему исполнителю.
Прототип и готовый дизайн одной страницы
Слева схема первого экрана, справа готовый дизайн той же страницы.
Глубина зависит от задачи
Локальный сценарий и сервис с несколькими ролями требуют разной проработки. Точный состав и оценку определим после вводных.
Локальная схема
от 9 000 руб. Один выбранный участокОдин сложный участок: форма, переход, раздел или отдельный пользовательский путь.
Когда подходитОсновной сайт уже понятен, но конкретный сценарий нужно согласовать до реализации.
Основные страницы и сценарии
от 15 000 руб. Основной контур сайта или разделаСтруктура сайта, ключевые шаблоны, переходы, формы и состояния.
Когда подходитНужна общая схема нового сайта или крупного раздела до дизайна.
Сложный сервис или несколько ролей
от 50 000 руб. Несколько связанных сценариевСвязанные пути разных пользователей, данные на экранах, развилки, формы и состояния.
Когда подходитПроект включает каталог, личный кабинет, несколько ролей или взаимозависимые сценарии.
Цены на прототипы
- Простая страница — от 9 000 руб.
- Лендинг или страница услуги — от 15 000 руб.
- Сложный экран или модуль — от 20 000 руб.
- Корпоративный сайт — от 30 000 руб.
- Каталог или магазин — от 50 000 руб.
- Портал, кабинет, сервис — от 70 000 руб.
Результат — схема, а не готовый сайт
До начала фиксируем глубину проработки и формат передачи, чтобы прототип решал конкретную задачу и не подменял дизайн или разработку.
Что согласовывается отдельно
Визуальный дизайн и материалы
Цвета, типографика и финальный вид интерфейса относятся к дизайну. Готовые тексты, съемка, подбор и создание изображений также остаются отдельными задачами.
Верстка, программирование и CMS
Превращение схемы в работающие страницы, реализация интерактивной и серверной логики, подключение системы управления и перенос страниц выполняются отдельно.
Исследования рынка и пользователей
Анализ аудитории, конкурентов и спроса, а также подготовка и проведение тестов с пользователями требуют отдельного согласования.
Полная мобильная детализация
Глубину проработки мобильных экранов определяем по задаче до начала.
Кликабельность, глубина мобильной версии и дополнительные состояния определяются и оцениваются отдельно до начала.
Как выглядит прототип
Серые блоки без дизайна, переходы и комментарии для следующего исполнителя.
Порядок блоков и переходы в разделы
Серые блоки, карточки услуг и форма расчета. Цифры на схеме — комментарии для дизайнера или разработчика.
Путь к заявке, форма и ее состояния
Путь пользователя от поиска до заявки, схема страницы и три состояния формы: до отправки, при ошибке и после завершения действия.
Важные действия на узком экране
Три экрана телефона: главная, открытое меню и форма.
Из чего складывается прототип
Сначала связываем структуру с экранами, затем уточняем действия и состояния. Благодаря этой связи следующему исполнителю передается цельная схема, а не набор разрозненных элементов. Направления и глубину выбираем по задаче проекта.
Показываем состав сайта и связи разделов
Собираем карту, по которой видно, какие разделы нужны, как они связаны и куда ведут основные переходы.
- Главные разделы
- Вложенные страницы
- Связи и переходы
- Границы выбранного объема
Определяем ключевые экраны и повторяемые шаблоны
Показываем назначение страницы, порядок смысловых блоков и данные, которые нужны человеку для следующего действия.
- Первый экран
- Страница раздела
- Карточка объекта
- Служебные экраны по задаче
Связываем намерение пользователя с нужным действием
Для выбранных аудиторий отмечаем точки входа, шаги, развилки и завершение сценария.
- Точки входа
- Последовательность шагов
- Развилки выбора
- Целевые действия
Показываем не только поля, но и поведение формы
Определяем, какие данные вводит человек и что он видит до отправки, при ошибке и после завершения действия.
- Состав полей
- Подсказки и ограничения
- Ошибки заполнения
- Состояние после отправки
Проверяем важные действия на узком экране
Отмечаем, как меняются навигация, порядок блоков, формы и ключевые действия. Глубину мобильной детализации согласовываем отдельно.
- Мобильная навигация
- Порядок блоков
- Формы на узком экране
- Основные действия
Фиксируем смысл решений для следующего исполнителя
Дополняем схему пояснениями о логике, данных, состояниях и границах, чтобы дизайнер или разработчик продолжил работу на общей основе.
- Назначение экранов
- Логика переходов
- Требования к данным
- Границы следующего этапа
Сайты, которые мы сделали
С 2004 года мы сделали более 500 корпоративных сайтов для малого и среднего бизнеса во множестве тематик.
Сайт-каталог с сотнями товаров, фильтрами и региональными страницами.
Посмотреть проект →
Сайт академии тенниса с занятиями, тренерами, расписанием и ценами.
Посмотреть проект →
Сайт школы финансовой грамотности с программами и онлайн-оплатой.
Посмотреть проект →
Корпоративный сайт с услугами, ценами, проектами и статьями.
Посмотреть проект →
Сайт сети центров кузовного ремонта с услугами и быстрым обращением.
Интернет-магазин морепродуктов с каталогом и оформлением заказа.
Интернет-магазин электроинструмента с большим каталогом и поиском.
Сайт-каталог строительной компании с проектами домов и бань.
Корпоративный сайт компании с направлениями работы и каталогом продукции.
Интернет-магазин косметики с каталогом, акциями и подборками.
Сайт детейлинг-центра с услугами, ценами и записью.
Златолит-Урал
Определим задачу и глубину проработки
Расскажите, что нужно спроектировать, какие материалы уже есть и кто продолжит работу. Точный состав и оценку определим после вводных.
- Выясним, что нужно согласовать
- Выберем глубину проработки
- Зафиксируем формат передачи
От вводных к передаваемой схеме
Каждый этап готовит проверяемое основание для следующего. После согласования отдельные решения складываются в общую версию, которую уже можно готовить к передаче.
- 01
Определяем задачу
Разбираем тип проекта, аудитории, ожидаемые действия, ограничения и того, кто продолжит работу после прототипа.
Результат: К структуре можно переходить, когда понятны цель прототипа, границы задачи и необходимые исходные данные.
- 02
Собираем структуру
Раскладываем сайт или выбранный участок на разделы, страницы и связи между ними.
Результат: Структура готова к детализации, когда видны состав, связи и спорные места, которые нужно разобрать на экранах.
- 03
Связываем экраны с действиями
Прорабатываем ключевые шаблоны, переходы, формы, данные и состояния для выбранных пользовательских путей.
Результат: Сценарий готов к сверке, когда путь можно проследить от точки входа до действия, а нужные данные и состояния обозначены.
- 04
Сверяем логику
Проходим по схеме вместе, уточняем спорные решения и фиксируем согласованный объем.
Результат: Здесь отдельные решения становятся общей версией: участники одинаково понимают структуру, сценарии и границы результата.
- 05
Готовим результат к передаче
Собираем согласованную версию и комментарии в выбранном формате для следующего исполнителя.
Результат: Результат готов к передаче, когда в выбранном формате собраны согласованная схема и необходимые пояснения.
Начнем с задачи, а не с макета
Нам важно понять, что вы проектируете, для кого и какое действие должен поддержать сайт. Материалы помогут быстрее разобраться, но не заменят постановку задачи.
Тип проекта
Новый сайт, отдельный раздел, сложная форма, каталог, личный кабинет или другой сервисный сценарий.
Задача прототипа
Что нужно согласовать до дизайна и разработки и какое решение должен дать результат.
Основные аудитории
Кто будет пользоваться сайтом, какие у этих людей роли и различаются ли их задачи.
Действия пользователей
Что человек должен найти, выбрать, отправить, заказать или выполнить на каждом важном пути.
Кто продолжит работу
Внутренняя команда, наш дизайнер и разработчик или внешние специалисты, которым предстоит получить схему.
ТЗ, старый сайт и референсы
Передайте существующие материалы, если они помогают понять исходную систему или ожидаемый подход.
Аналитика и схема каталога
Данные о поведении пользователей и устройстве каталога помогут проработать связанные сценарии.
Требования интеграций
Укажите внешние системы и обмен данными, если они влияют на экраны, формы или состояния.
Профессионально оформленное ТЗ не обязательно; содержание вводных уточним вместе.
Решения можно увидеть и проверить
Выбирайте проектировщика не только по стажу, а по тому, насколько ясно он связывает задачу бизнеса с действиями человека на сайте.
Работаем с 2004 года
Дата сама по себе ничего не доказывает. В нашей работе практику можно проверить по тому, насколько последовательно схема связывает задачу, действия человека и поведение интерфейса.
Не подгоняем проект под шаблон
Сначала выясняем, что именно нужно согласовать и какое действие должен поддержать сайт. Только после этого выбираем глубину проработки.
Делаем сложность видимой
Развилки, роли и взаимозависимые сценарии можно обсудить до того, как они станут решениями в дизайне и коде.
Понимаем следующий этап
При проектировании учитываем, какие решения затем предстоит воплотить в интерфейсе и логике работающего сайта.
Показываем не только итог
По схеме можно проследить, для какой задачи нужен экран и к какому действию ведет пользовательский путь.
Убираем разночтения до реализации
Участники обсуждают одну видимую схему и могут указать на конкретный экран, связь или сценарий, который нужно уточнить.
Среди клиентов Менокома
Общие клиенты Менокома по разработке, продвижению и другим проектам. Это не список заказчиков прототипов.
Главное о прототипировании
Сначала — о результате и его применении, затем — о составе и оценке работы.
01Чем прототип отличается от ТЗ, дизайна и готового сайта?
ТЗ фиксирует требования, а прототип показывает структуру, экраны, переходы и действия в наглядной схеме. Визуальный дизайн задает внешний вид. Верстка, программирование и CMS превращают согласованные решения в работающий сайт. Эти результаты связаны, но один не заменяет автоматически другой.
02Можно проработать только один сложный участок?
Да. Если остальная система понятна, отдельно собираем схему формы, раздела, перехода или пользовательского пути. По вводным определяем, где этот участок начинается, чем заканчивается и какие связанные состояния нужно показать.
03Нужны ли готовые тексты и референс?
Нет. Для схемы достаточно обозначить нужные данные и смысловые части экрана. Референс может помочь обсудить отдельное решение, но основу задают цель, аудитории и сценарии проекта. Написание готовых текстов остается отдельной задачей.
04Каким будет прототип: мобильным и кликабельным?
Это зависит от задачи. Для одного проекта достаточно статичной схемы и ключевых мобильных сценариев, для другого нужны связанные переходы или более подробная мобильная проработка. Кликабельность и глубину мобильной версии определяем и оцениваем отдельно до начала.
05Можно передать результат другой команде и оценить по нему разработку?
Да, результат можно подготовить в выбранном формате для внешнего дизайнера или разработчика. Прототип делает состав и сложные сценарии видимыми, поэтому служит основой для отдельной оценки следующего этапа. Сама оценка зависит от требований к реализации и команды, которая продолжит работу.
06Что считается новым объемом?
То, что выходит за согласованные границы: дополнительные роли, сценарии, разделы, состояния или интеграции. Такие изменения сначала уточняем и оцениваем отдельно.
07Сколько стоит прототип сайта?
Простая страница — от 9 000 руб., лендинг или страница услуги — от 15 000 руб., сложный экран или модуль — от 20 000 руб., корпоративный сайт — от 30 000 руб., каталог или магазин — от 50 000 руб., портал, кабинет или сервис — от 70 000 руб. За одним названием услуги могут стоять локальная форма, структура сайта или сервис с несколькими ролями. Их состав и глубина различаются. Поэтому сначала определяем конкретный объем, а затем оцениваем работу.
08Будет ли прототип сам приносить заявки?
Нет. Прототип помогает согласовать логику, но сам не является работающим сайтом. Трафик, заявки и продажи зависят от продукта, предложения, продвижения, дизайна, разработки и других условий.
После прототипа — подходящий формат сайта
Если нужна не только схема, а работающий сайт, формат следующего этапа зависит от задачи проекта.
Определим границы будущего прототипа
Расскажите, что нужно спроектировать, какие материалы уже есть и кто продолжит работу. Результат первого контакта — понятная граница будущего прототипа.
