что такое прототип сайта и зачем он нужен
Зачем нужен прототип сайта
Создание прототипа — один из этапов разработки сайта. Обычно к нему приступают после того, как определились общей идеей и структурой, провели исследование рынка и конкурентов. Давайте разберёмся, зачем нужен прототип и как его создать.
Прототип — это детальный план веб-страницы. Он помогает сфокусироваться на смысле и продумать структуру, не углубляясь в дизайн. Обычно прототип выглядит как схематичное изображение страницы, которое показывает, какие есть блоки и сущности.
👀 Зачем нужен прототип?
1. Понять, что должно быть на сайте
Прототип помогает выстроить точную структуру: сколько должно быть блоков, какое будет меню, сколько в меню пунктов, какой длины заголовки. На этапе прототипирования важно не просто понять, какие нужны блоки, но и решить, что они будут содержать.
2. Продумать контент до начала работы над дизайном
При создании сайта контент часто оставляют на потом и заполняют черновую версию текстами-пустышками. Но при доработке может оказаться, что нужное количество строк не умещается в блок или разделов слишком много для меню. Прототип позволяет заранее решить, какая информация должна быть на сайте, и подобрать структуру под неё.
3. Быстро отработать несколько гипотез
Вы можете исследовать разные варианты без траты времени на дизайн. Например, на этапе создания прототипа можно решить, где лучше расположить виджет и как сделать номер телефона заметнее.
4. Иметь возможность быстро внести правки
Глядя на прототип, вы должны понять, достаточно ли ясная у сайта структура, не забыты ли ключевые блоки, логично ли развивается повествование. Поменять разделы местами или изменить структуру легче, когда работа над дизайном ещё не началась. Кроме того, если вы создаёте сайт на заказ, прототип позволит договориться с заказчиком без многочисленных правок готового сайта.
Прототип — это своего рода тестирование разных вариантов. Он помогает взглянуть на картину целиком, проработать ошибки и создать эффективный сайт 🙌
Прототип сайта: что это такое и зачем он нужен
Работу над сайтом обычно начинают с макета: обсуждают цели и задачи, а затем продумывают структуру и оформляют прототип. Примитивный макет можно нарисовать на салфетке. Но чем сложнее задача и ответственнее проект, тем выше требования к прототипу.
У нас за плечами несколько своих проектов, над которыми работали целые команды. Скажем честно: макет на салфетке — дурь. Чтобы сделать нормальный прототип, мы используем специальные онлайн-инструменты и сервисы. О них мы сделаем подробный обзор в декабре. А сегодня начнем с основ: рассказываем, что такое прототип сайта и как начать над ним работу.
Что такое прототип сайта
Прототип сайта — это макет, черновик, схема если хотите. Он помогает схематически визуализировать основные элементы и функции вашего будущего портала. Вы наглядно изображаете структуру, элементы интерфейса, расположение иллюстраций и кнопок, меню и иконок. Рисуете черновки, по которому разработчики и дизайнеры будут создавать готовый продукт.
Прототип — это изображение результата. Прототипы могут отличаться по уровню детализации. Они могут быть нарисованы на 2–3 страницах А4 или иметь полноценную разветвленную структуру в Фигме с кликабельными элементами. Как бы не выглядел прототип, его задача — изобразить итоговый результат, который хочет увидеть заказчик и должен воплотить в жизнь исполнитель.
Вот так может выглядеть прототип страницы, нарисованный на бумаге. Его сложно править, добавлять или убирать элементы. Зато на его основе можно быстро собрать цифровой макет. Подойдет для начала работы над сайтом.
А вот цифровой прототип, нарисованный в программе. Он уже больше похож на сайт. Его элементы легко менять между собой, корректировать концепцию и проверять юзабилити. По такому прототипу разработчик будет делать сайт.
Зачем прототип заказчику
Будущий владелец сайта с помощью прототипа решает сразу несколько задач:
Отсутствие представления о том, как должен выглядеть сайт — нормальная ситуация для заказчика. Обычно у него есть задача: «хочу продавать через интернет». А ко всем остальным моментам, включая внешний вид сайта, применяется мерило «нравится/не нравится». Часто из-за этого члены команды конфликтуют. Прототип поможет устранить разногласия и прийти к единому видению на старте.
Другой момент — бюджет. На этапе прототипирования можно моделировать разные наборы функций и элементов, выбрать наиболее удачные и так оптимизировать расходы на разработку. Верстальщику не придется несколько раз переделывать результат, заказчик сэкономит на разработке.
Зачем прототип команде разработчиков
С прототипом работать проще и продуктивнее:
Прототип — часть технического задания. Разработчик может быть гуру верстки сайтов, но какой от этого смысл, если ТЗ составлено устно? Макет — схематическая визуализация технического задания. Утвержденный макет гарантирует, что заказчик не изменит резко своих требований. А если изменит, всегда можно показать ему макет и доказать свою правоту.
Какие бывают прототипы сайтов
Разные. Вы можете нарисовать примитивный эскиз на салфетке, а можете — интерактивный макет с высокой детализацией проработки и кликабельными элементами. Объем работы над прототипом зависит только от сложности проекта и бюджета. Чем сложнее и дороже сайт, тем детальнее и объемнее должен быть рабочий вариант макета.
Эскиз на бумаге
Подойдет «на берегу», чтобы найти наиболее удачную конструкцию. Берете карандаш, лист А4 и делаете схематичную разметку блоков. Вы сможете найти удачную компоновку элементов и создать общее видение без лишних деталей. Можно увидеть общую картину и нарисовать целую карту сайта. Размещайте на таком эскизе только ценные элементы, а детали опускайте.
Примерный набросок интерфейса сайта, эскиз с отображением переходов. Такой макет подойдет для старта работы и общего представления архитектуры.
Макет с низкой детализацией
Такой прототип страницы сайта еще называют LoFi Wireframe. Его рисуют на основе примерного эскиза. Помогает упаковать идею в цифровой документ и согласовать примерный объем работ.
На этом этапе прорабатывают общие моменты: размеры и пропорции блоков, разметку, структуру и каркас. Каждый участник процесса разработки дает свои замечания, выдвигает гипотезы и идеи для развития. Обычно макет с низкой детализацией не содержит контента — это страница с примерным представлением блоков в виде геометрических фигур. Простейший цифровой прототип выглядит вот так.
Макет с низкой детализацией. Глубина проработки на этом этапе не так важна, как общая структура и каркас.
Макет с высокой детализацией
Когда примерная структура готова, начинают работать с содержанием: текстами, иллюстрациями, описаниями и подписями, иконками и фотографиями. Контент формирует основной посыл и помогает расставить акценты, донести до аудитории ценное сообщение бизнеса. Текст должен давать объяснение, иллюстрации — формировать образы, а общая картинка — создавать историю.
Над детализацией и глубиной проработки обычно работает команда: дизайнер, иллюстратор, копирайтер, фотограф (для интернет-магазинов и продуктовых сайтов). С таким прототипом проще организовать командную работу, когда у каждого участника своя функциональная задача.
Страница прототипа с высокой глубиной проработки. Есть описания, заголовки, характеристики продукта, изображение иконок, тексты кнопок, примеры отзывов. Уже похоже на полноценную страницу сайта.
Статичный макет
Это прототип в виде графического изображения. Возможность взаимодействия с таким макетом отсутствует, элементы не кликабельные. По сути, это просто картинка, как бы скриншот будущего сайта. Сначала черновик разрабатывают статичным, чтобы оптимизировать ресурсы на разработку. Дизайнер просто рисует шаблон, который будет размножен и перенесен на остальные страницы. Делать сходу интерактивный прототип нет смысла — потому что примерно в 100% случаев будут доработки. А проще перерисовать все в фотошопе, чем переделывать интерактивные элементы.
Статичный макет с детализацией. Кликнуть по элементам не получится, потому что по сути это картинка, а не сайт.
Интерактивный макет
Или Interactive Hi-Fi. Когда есть визуальное представление и часть контента, беруться за проработку поведенческих моментов. Дизайнер смотрит, как отображаются анимации, визуальные эффекты, как работают переходы и слайдеры, как ведут себя элементы сайта при взаимодействии, как всплывают формы и фильтры, как кнопки реагируют на пользовательские действия на разных гаджетах.
По сути, это уже рабочий вариант сайта. Только прототип. Он помогает зафиналить дизайн перед запуском веб-разработки, проработать детали, упростить тестирование и согласовать окончательный результат. С таким макетом можно взаимодействовать и даже вставлять кликабельные ссылки. Interactive Hi-Fi создают при разработке сложных сайтов, когда выделен серьезный бюджет и нужен безупречный результат с минимальным количеством косяков.
Интерактивный прототип похож на рабочий сайт. Можно кликнуть по каждому или почти по каждому элементу и проверить, как он реагирует. Будущий сайт будет выглядеть именно так. Интерактивный макет позволяет зафиналить концепцию и приступить к веб-разработке.
Процесс разработки хорошего прототипа
Прототип сайта — результат взаимодействия целой команды, которая не раз собирается, не раз вносит правки и много, иногда очень много работает. Бывает, что создание хорошего прототипа занимает больше времени, чем остальная разработка.
Ниже мы собрали ключевые шаги — как ориентир. Каждый из них достоин отдельного материала, есть о чем рассказать и чем поделиться. Используйте эти этапы как ориентир для своих будущих проектов. Это не руководство к действию, а краткое описание нашего опыта. Попробуйте перенести его на свою команду.
1. Обсуждение и постановка целей
Все начинается с постановки целей. Команда собирается и обсуждает цели будущего продукта. Допустимы размытые формулировки, но их лучше избегать. Чем яснее и конкретнее будут сформулированы цели, тем грамотнее будут гипотезы, которые вы будете формулировать.
Обсудите, чего вы хотите добиться с помощью сайта и какие инструменты в этом помогут. У бизнес-ресурса может быть разный набор целей, он зависит от специфики предпринимательской деятельности. От этого зависит и профиль портала. Например:
2. Формирование гипотез
Когда есть цели и примерное понимание того, какой ресурс нужен, мы выдвигаем гипотезы. Это предположения, которые мы будем проверять с помощью сайта. От гипотез обычно отталкиваются при формировании структуры. короче: определитесь, что именно вы будете проверять с помощью сайта и используйте эти гипотезы при прототипировании.
Допустим, мы собираемся продавать на сайте ноутбуки. Мы предполагаем, что фильтр, который будет подбирать компьютеры под задачи покупателя, уменьшит количество касаний с момента перехода и до момента отправки заявки, а также даст более высокую конверсию.
Вот вам и гипотеза. При разработке прототипа мы можем проверить потенциальное количество касаний при наличии и отсутствии такого фильтра на главной. Другой пример.
Допустим, мы разрабатываем интернет-магазин. Мы знаем, что большое количество полей при заполнении формы отпугивает покупателей и конверсия сильно снижается. Мы предполагаем, что 2-шаговое заполнение формы сократит количество действий покупателя и повысит конверсию. Еще на странице товара мы предложим выбрать количество единиц, вписать имя и номер телефона. А на втором шаге (в корзине) останется заполнить только адрес доставки.
Еще одна полноценная гипотеза. Когда мы будем проектировать сайт, сформулированные гипотезы помогут со структурой.
3. Исследование
На этом этапе команда погружается в сам продукт и изучает бизнес-процессы в компании. Понимание бизнес-процессов позволяет принимать более эффективные решения, делать сайт продолжением бизнеса клиента. Иначе есть риск, что компания и разработанный для нее сайт будут существовать отдельно друг от друга. Нехорошо.
Исследование — вопрос бюджета. Если он сильно ограничен, исследованием пренебрегают: просто делают сайт, который не учитывает бизнес-процессы. А потом начинают вылазить косяки.
Например, у нас недавно появился клиент — онлайн-витрина товаров для животных. Изначально это офлайн-магазин, который в период пандемии решил продавать товары через интернет. Заказали лендинг с незамысловатым дизайном, который человек собрал на коленке. С сайтом-то все хорошо — все работает. Но когда его запустили, оказалось, что у магазина нет CRM-системы.
В итоге вместо упрощения, работа менеджера сильно усложнилась: все заявки приходится фиксировать вручную, записывать на бумажке, собирать уведомления о новых заказах с почты. Ни о какой клиентской базе и управлении взаимоотношениями говорить не приходится.
Такая ситуация возникла, потому что пренебрегли исследованиями бизнес-процессов. На аналитику просто не было бюджета. Но сейчас уже все хорошо — подключили OkoCRM, все стабильно, работать стало проще.
4. Прототипирование
Прототипирование — преобразование целей, гипотез и результатов исследований в конкретные требования к продукту. Сначала мы описываем примерные требования к интерфейсу словами: требования к навигации, количество разделов, количество страниц, иконок, элементов и блоков, общий функционал, функционал фильтра и пр. Получается такая выжимка на много страниц. И только потом переходим к прорисовке эскиза с низкой глубиной проработки деталей.
Первые наброски — уже прототип. Их согласует каждый участник команды, вносит свои замечания и правки. Потом смотрит главный и высказывает свое впечатление. Этот процесс цикличен и повторяется с каждым новым этапом разработки макета.
5. Проработка деталей
Когда есть общее представление, макет начинает обрастать контентом и деталями. Чем выше степень детализации, тем проще и результативнее тестирование. На выходе должен быть продукт, который даст представление о работе будущего проекта. Вы сможете определить проблемные места, сможете продумать логику интерфейса и определить путь пользователя от первого касания до оформления заказа.
Итерация с проработкой деталей — финал прототипирования. Теперь можно работать над дизайном. Но это уже совсем другая история…
Немного про инструменты прототипирования
Макет на салфетке развивает вашу фантазию и мелкую моторику. Но его мало — нужен прототип сайта онлайн. Есть несколько приложений, которые сильно упростят вашу работу с макетом. Их подробный разбор мы сделаем в декабре в продолжение темы. А пока коротко 4 хороших инструмента:
Figma. Просто топчик, который используют примерно все. Отличное приложение для создания прототипов и дизайна интерфейсов. Можно работать совместно с командой и расшаривать проекты для демонстрации черновиков руководству или заказчику. Сами пользуемся и людям советуем.
Интерфейс Фигмы очень минималистичен — для профессионалов все просто и понятно.
Axure. Наверное, самая популярная в мире приложка для прототипирования и спецификации сайтов, приложений. Подойдет для глубокой проработки даже в сложных проектах. При этом достаточно простая — поковыряйтесь 10–15 минут в интерфейсе и уже сможете делать простенькие макеты.
В интерфейсе Акшур сможет разобраться даже неподготовленный пользователь. Попробуйте приложение, если Фигма окажется слишком сложной.
Sketch. Векторный графический для MacOS. Отлично подходит для проектирования интерфейсов веб-ресурсов, если вы работаете на «яблоке». Предлагает большие возможности для детализации, но не подойдет тем, кто сидит на Виндовс и Линуксе. Увы.
Скетч отлично справляется с интерфейсами, но только на яблочных устройствах. Сам интерфейс мало чем отличается от конкурентов. Все просто и понятно.
Adobe XD. Адобовский редактор для разработки пользовательских интерфейсов. Отлично подходит для создания интерактивных прототипов. Проблема в том, что он платный. Если вы только начинаете работать с макетами, начинайте с бесплатных инструментов.
Адобовский редактор радует функционалом, но не радует ценами.
А вообще, если вы ортодокс и не признаете все вот эти новомодные инструменты и штуки, используйте фотошоп. В связке с Marvel или Invision вы сможете собрать простенький, но вполне себе годный макет, который не будет стыдно показать людям и команде.
Прототип сайта — что это и зачем нужен
Каждый сайт должен продавать. Даже если речь идет о некоммерческом проекте, где нет прямого предложения «купи что-то», все равно посетитель «расплачивается» своим вниманием и временем, а приобретает необходимую информацию, развлечение, общение. Поэтому дизайн ресурса должен быть не просто «красивым» или «гармоничным», а еще и продающим.
Прототип сайта — это «основа», на которой потом будет держаться вся структура. Существует ошибочное мнение, что прототипы нужны только дизайнерам, чтобы понимать, какие куда поставить картинки, видеоролики, элементы векторной графики. На самом деле, использование прототипа гораздо шире.
Кому нужен прототип сайта
Прототипирование — этап, который позволит представить функционал сайта, его внешний вид, подобрать tone of voice, то есть, способ общения с посетителями. Он нужен далеко не только дизайнерам, хотя и им тоже трудно обойтись без предварительной визуализации. Прототип нужен:
Главное преимущество прототипа: это еще «макет», поэтому вносить изменения можно быстро, без усилий, равно как и делать несколько копий с изменениями, чтобы оценить «лучше поместить ту картинку справа или слева». На готовом сайте, конечно, все это сложнее, дороже и более проблематично.
Какие бывают прототипы
При изготовлении сайта сейчас используют 2 вида прототипов:
Далее уже утверждают и делают окончательный дизайн. Рекомендуется не «пропускать» ни первую, ни вторую стадии, потому что у каждой есть свои возможности и функции.
Low-fidelity прототип (Черновой прототип)
Это черно-белый набросок, элементы которого просто называются определенным образом: «заголовок», «главная картинка», «боковое меню». Используется для:
Это просто черно-белый набросок, но уже он помогает визуализировать и представить будущий ресурс. Существуют программы, которые помогают сделать такой прототип, а также очень быстро менять блоки, добавлять их, редактировать текст.
High-fidelity прототип (Чистовой прототип)
Цветной прототип, в котором используются смысловые тексты, реальные картинки. Это полностью готовый сайт, только без интерактива и пока еще в специальной программе, а не хостинге. Необходим, чтобы:
На этом этапе сайт почти готов внешне и по наполнению, но все еще можно при желании поменять цвета, внести правки в тексты, поставить другие изображения.
Иногда high-fidelity-прототипы делаются для A/B-тестирования первичного типа: целевой аудитории показывают оба макета, чтобы люди могли оценить, какая версия воспринимается лучше и кажется более привлекательной, «продающей».
Проблемы, которые решает прототип
На самом деле, прототип решает только одну проблему, которая может возникать при запуске сайта: он есть, но он не продает. Малое количество заявок, «плохие» лиды — все это, в конечном итоге, приводит к низким продажам или их отсутствию. Но если рассматривать детально, то прототип предотвращает такие недостатки:
Использование простой методики значительно ускоряет и упрощает задачу. Если сравнивать временные затраты, то без предварительного прототипирования на разработку уходит до нескольких месяцев, а с макетом можно уложиться за месяц, если сайт большой, и всего за неделю-две — если маленький.
Сроки изготовления прототипа:
Иногда хватает всего 3-х дней на все задачи, особенно если делают небольшой лендинг под продвижение конкретного товара или услуги.
Еще одно важное преимущество: после создания чернового варианта уже можно давать задания тем специалистам, для которых может потребоваться больше времени.
Примеры: создание видео, подготовка списка товаров для интернет-магазина через 1С или другую систему, сбор семантического ядра и т.д.
Сервисы для прототипирования
Изначально отрисовку делали в программах, наподобие Photoshop или других графических редакторах, либо вообще от руки. Конечно, это не слишком удобно: сложно перемещать блоки, изменять их, добавлять текст, указывать на размещение видео. Также оставались сложности с соблюдением пропорций и «сетки» будущего веб-ресурса.
Поэтому вскоре появились специализированные приложения и сервисы в помощь прототипированию.
Balsamiq Mockups
Приложение для low-fidelity прототипов, которое хорошо зарекомендовало себя за счет интуитивности и простоты. При открытии программы «мастер» сразу же предлагает выбрать: будет ли создаваться прототип для сайта, приложения или другого сервиса, можно создавать собственные шаблоны.
Среди других возможностей:
Moqups
Приложение на базе возможностей HTML5, которое предлагает создавать low-fidelity и high-fidelity прототипы, а также майндмапы — то есть, описание функций для программиста (например, можно будет указать, что здесь планируется параллакс-эффект, а там — плавная прокрутка с постепенной прогрузкой).
Важное преимущество сервиса — он работает в онлайн-режиме и не требует установки. Среди возможностей:
Есть возможность «цветового» оформления для high-fidelity опций, просмотр готовых шрифтов, цветов и многого другого. Программа предусматривает возможности совместного доступа, работает через Google-доступ, куда можно выгружать готовые прототипы.
Wireframe.CC
Это онлайн-приложение, довольно простое и не позволяющее сделать «сложные» прототипы, но для небольших лендингов или первичных набросков подойдет как нельзя лучше. Важное преимущество — сервис бесплатный, поэтому для ознакомления с возможностями прототипирования подходит как нельзя лучше.
Экспортировать проект нельзя, но сохранять и пересылать для дальнейшего использования можно. Простота, интуитивность, доступность — главные преимущества этого сервиса.
Axure RP
В мире приложений для прототипирования Axure RP то же самое, что Photoshop для графических редакторов: это одна из самых мощных программ, в которой нетрудно будет создать заготовку самых крупных ресурсов, проработать high-fidelity макеты с высочайшей детализацией.
Программистам, дизайнерам, авторам текстов и другим специалистам останется только перенести макет на готовый сайт. Стоит отметить следующие возможности:
Прототип, созданный в этой программе, не только со всеми цветами, шрифтами и текстами: он «живой», с эффектами, стилями прокрутки. Можно добавить практически любые возможности, кроме специфических, вроде пересылки информации по формам обратной связи или настройки чатов, поп-апов и т.д.
Figma
Несомненная «классика», владение этим инструментом сейчас требуют практически у любого дизайнера, программиста, даже специалиста в области SMM и SEO.
Облачный сервис «нового поколения», как заявляют сами разработчики, предоставляется в режиме условной бесплатности — если компания небольшая, до 2 человек, работающих в среде прототипирования, то можно не платить за инструмент.
Объекты можно соединять в единый контейнер. В целом, по функционалу, Figma уступает только такому профессиональному приложению, как Axure, считается одной из лучших удаленных программ для создания прототипов. Именно поэтому знание приложения требуют в резюме, но разобраться будет несложно.
Заключение
Прототипирование — это возможность не допустить ошибок с построением сайта и сделать его максимально быстро, особенно если работа ведется в команде. С помощью предлагаемых сервисов, которые мы описали выше, процесс будет несложным, а результат «окупается» за счет значительной экономии времени и денег заказчика.
Знать сервисы для прототипирования важно любому, кто так или иначе задействован в разработках веб-ресурсов.