Визуальный прототип сайта
Это упрощённая чёрно-белая схема страницы, на которой обозначается примерное расположение блоков, текста, изображений, кнопок и других элементов.
Текстовый прототип
Это документ, который содержит подготовленную структуру страницы: блоки, заголовки, тексты, тезисы и другие элементы контента.
Что в видео-уроке:
В уроке разбираем, что такое текстовый и визуальный прототип сайта, чем визуальный прототип отличается от wireframe и в каких проектах он действительно необходим. Рассмотрим особенности прототипирования лендингов и многостраничных сайтов, оптимальный уровень детализации и разберём, как прототип помогает согласовать структуру с заказчиком и начать работу над дизайном.
Главная задача прототипа
Прототип нужен прежде всего для того, чтобы заранее определить:
- структуру страницы;
- последовательность блоков;
- расположение контента;
- основные функциональные элементы;
- логику взаимодействия пользователя с сайтом.
На этом этапе не требуется создавать полноценную визуальную стилистику. Важнее убедиться, что структура понятна, логична и соответствует задаче проекта.
Нужен ли прототип для лендинга
Одностраничные сайты предполагают больше свободы в работе над композицией. Уже в процессе дизайна отдельные элементы могут менять положение, увеличиваться, объединяться или полностью перестраиваться.
Если слишком детально зафиксировать страницу на этапе прототипирования, дизайнер может начать воспринимать эту структуру как ограничение и меньше экспериментировать с визуальными решениями.
Поэтому при разработке лендинга часто эффективнее максимально хорошо подготовить текстовый прототип, а затем переходить к промежуточным вариантам дизайна.
Но если заказчику сложно воспринимать текстовую структуру сайта, визуальный прототип помогает дополнительно показать последовательность блоков. На этом этапе заказчик может заметить, что хочет добавить раздел, изменить порядок информации или скорректировать отдельные элементы.
Такие изменения гораздо удобнее внести до разработки полноценного дизайна.
Когда прототип особенно полезен
Прототипирование становится особенно важным при работе над:
- многостраничными корпоративными сайтами;
- интернет-магазинами;
- информационными порталами;
- сайтами со сложным функционалом;
- веб- и мобильными приложениями.
Чем больше страниц, элементов и пользовательских сценариев содержит проект, тем важнее заранее определить их логику.
Например, на сайте с календарём мероприятий уже в прототипе можно проработать календарь, карточки, выпадающие списки, чекбоксы, кнопки и другие элементы интерфейса.
Это позволяет заказчику оценивать не готовую графику, а саму структуру и функциональность продукта.
Почему изменения лучше вносить в прототип
Исправить схематичный блок значительно проще, чем перерабатывать уже оформленный экран. Если заказчик ещё на этапе прототипирования понимает, что нужен дополнительный блок, другое меню или иной функционал, изменения можно внести сравнительно быстро.
Поэтому для многостраничных проектов прототип помогает:
- раньше выявить спорные решения;
- согласовать структуру;
- учесть функциональные требования;
- уменьшить количество переделок дизайна;
- сократить время дальнейшей работы.
Прототип становится промежуточным этапом между текстовой структурой и полноценным дизайном.
Насколько детальным должен быть прототип
Единого уровня детализации не существует. Для обычного корпоративного сайта чаще достаточно простой схемы, показывающей блоки и основные элементы страницы. После неё дизайнер всё равно может предложить различные визуальные концепции и изменить композицию.
Для сложных ресурсов прототип может быть значительно подробнее. Иногда заранее прорабатываются даже формы карточек, кнопок и отдельных элементов интерфейса.
В веб- и мобильных приложениях детализация может быть ещё выше: прототип должен отражать логику взаимодействия и различные пользовательские сценарии.
Главное правило — детализация должна соответствовать задаче проекта.
Не нужно тратить большое количество времени на элементы, которые всё равно будут переосмысляться во время разработки дизайна.
Прототип не равен готовому дизайну
Заказчику важно заранее объяснить, что визуальный прототип показывает структуру, а не окончательное оформление сайта.
На следующем этапе могут измениться:
- композиция;
- размеры элементов;
- расположение изображений;
- форма кнопок;
- структура отдельных блоков;
- визуальное представление меню.
То есть прототип задаёт основу, но не ограничивает дальнейший поиск дизайн-решения.
Прототип как способ начать дизайн
Прототип может быть полезен не только для согласования с заказчиком, но и для самого дизайнера.
При работе над лендингом иногда сложно перейти от текста сразу к визуальной концепции. Перед дизайнером находится чистый фрейм, и непонятно, с какого элемента начинать.
В такой ситуации достаточно сделать простой прототип для себя. Перенесите текст, обозначьте основные блоки, приблизительно расположите изображения и кнопки. В процессе появятся первые композиционные решения, а пустая страница превратится в основу, с которой уже можно работать.
Такой прототип необязательно показывать заказчику. Его задача — помочь дизайнеру начать работу и постепенно перейти от структуры к полноценной визуальной концепции.
Необходимость прототипа всегда определяется задачей
Для лендинга отдельный визуальный прототип может быть необязательным: иногда эффективнее тщательно проработать структуру и сразу перейти к вариантам дизайна.
Для многостраничных сайтов, интернет-магазинов и сложных ресурсов прототип становится важным инструментом согласования. Он позволяет заранее определить структуру и функционал, выявить необходимые изменения и уменьшить количество переделок на следующих этапах.
При этом прототип не должен быть сложнее, чем требует проект. Его основная задача — быстро и понятно показать логику будущего сайта.
