Как сделать прототип сайта: пошаговая инструкция, инструменты и лайфхаки

Прототипирование — один из ранних этапов создания сайта. Прототип облегчает общение между разработчиками, конкретизирует техзадание и помогает в планировании дальнейшей работы. Даже если вы делаете сайт самостоятельно, стоит разработать прототип, чтобы понимать финальную точку работы. Ringostat подготовил гайд по макетированию сайтов для новичков.

Время чтения 10 минут

Вы можете перейти сразу к интересующему разделу:

1. Что такое прототип сайта
2. Плюсы и минусы прототипирования сайтов
3. Как создать прототип
   • Шаг 1. Продумайте путь клиента
   • Шаг 2. Сделайте набросок
   • Шаг 3. Оживите прототип
4. Программы для создания прототипов офлайн
   • Esk.one
   • NinjaMock
   • Moqups
   • Origami
   • Figma
5. Выводы

Что такое прототип сайта

Что такое прототип? Это первоначальный образец чего-либо.

Прототип сайта — это интерактивный набросок, черновик будущего сайта. На нем схематически изображаются основные элементы сайта и их отклик на действия пользователя. Прототип используют на ранних стадиях разработки структуры сайта — для презентации идеи заинтересованным сторонам. 

Важно отличать программы для прототипирования и конструкторы сайтов. Конструкторы — это программы для создания сайтов. Собранный на конструкторе сайт может приносить лидов или рассказывать о компании. В то время как программа для прототипов позволяет создать черновой набросок для презентации и обсуждения идеи.

Плюсы и минусы прототипирования сайтов

Преимущества. Главная цель создания макета в экономии времени. Прототипы обозначают конечную цель, чтобы не пришлось переделывать проект посреди работы. Проще поменять блоки местами, добавить форму или кнопку еще до создания инфраструктуры сайта.

Недостатки. Минусом разработки прототипов, как ни странно, также называют временные затраты. Пока утверждается макет, команда может делать разве что универсальные заготовки и не начинает полноценно работать над проектом.

Чтобы макетирование облегчало, но не затягивало работу, определитесь со степенью детализации, которая требуется от прототипа. Тут формула проста — чем больше людей вовлечены в разработку, тем точнее должен быть макет. Если вы делаете сайт в одиночку или с одним фрилансером, достаточно схематически набросать блоки, хоть от руки в блокноте. Если же прототип будет утверждать менеджмент нескольких уровней и работать над ним будет команда из 5-10 человек, придется сделать прототип максимально похожий на готовый сайт.

Как сделать прототип сайта

Шаг 1. Продумайте путь клиента до того, как создать прототип сайта

Решите, что должен понять пользователь, прежде чем нажать большую продающую кнопку. Какие аргументы и в каком порядке подтолкнут к целевому действию: отзывы, условия доставки, цена или что-то другое? Какие меню и разделы посетитель захочет посмотреть, попав на сайт? Опишите варианты взаимодействия с сайтом, которые хотите реализовать — это и будет путь клиента по сайту.

Узнайте больше о пути клиента в нашей статье «Короче: что такое customer journey за 4 минуты».

Шаг 2. Сделайте набросок

Схематически, от руки, набросайте, как могут выглядеть описанные в прошлом пункте части сайта. Решите, какие разделы будут постоянно на виду, а какие нужно спрятать в меню. Какие поп-апы и в каком количестве вы хотите использовать? Особое внимание нужно уделить целевым действиям:

• форме обратной связи;
• форме подписки;
• кнопкам «купить» и т. д. 

Шаг 3. Оживите прототип

Когда поняли, чего ожидаете от сайта, пора создавать наглядный прототип, задать масштаб, форму и интерактивность каждому отдельному элементу. На этом этапе стоит обратиться к программам для создания прототипов. В них можно смотреть его онлайн, совместно редактировать и выгружать в подходящих для дальнейшей обработки форматах. 

Ringostat для агентства

• Докажите заказчику, что настроенная вами реклама работает — покажите отчеты коллтрекинга и сквозной аналитики.
• Получите дополнительный доход — у Ringostat есть выгодная партнерская программа.
• Добивайтесь максимум отдачи от рекламы — Ringostat покажет, какая реклама действительно работает и в нее стоит вложить бюджет.
• Получите точные данные для оптимизации кампаний — узнайте, как работает каждое ключевое слово и насколько окупается.

Узнать подробнее

Программы для создания прототипов офлайн

Можно разработать прототип сайта онлайн или использовать программу для создания макета сайта, которая устанавливается на компьютер.

Esk.one

Платформа: Онлайн-сервис

Цена: бесплатно, пользователь может сделать пожертвование на свое усмотрение

Esk.one отлично подойдет новичку, который впервые взялся за макетирование сайта. Для регистрации достаточно ввести и подтвердить email или кликнуть по иконке социальной сети. После этого нужно нажать «Создать проект» в левом верхнем углу и выбрать «Прототип сайта». После этого можно добавлять на сайт элементы, редактировать их и выгрузить готовые страницы в HTML-формате.  

Интерфейс esk.one

Кроме готовых блоков для прототипа, у сервиса есть интересный раздел «Получить идею». Он подсказывает CTA и задает вопросы о компании и продукте, которые можно было бы осветить на сайте — отличное средство от творческого блока.

Раздел «Получить идею» подсказывает, что еще можно разместить на сайте

NinjaMock

Платформа: Онлайн-сервис

Цена: от 7,7$/месяц 

Бесплатный тариф: бессрочный, с ограничениями

Прототипы, сделанные в этом NinjaMock, отличаются от прочих характерной «небрежностью». Все элементы выглядят так, словно их рисовали от руки. Это в какой-то мере помогает преодолеть страх чистого листа — можно просто визуализировать идею, не двигая элементы по пикселю. 

Интерфейс реализован на английском, но в самом прототипе кириллический текст выглядит органично, не превращается в «крокозябры» или пустые квадраты.

У сервиса есть бесплатный тариф, в котором можно создать только один проект с не более чем 200 элементами. Созданные на бесплатном тарифе проекты доступны для просмотра всем посетителям сервиса, так что этот вариант вряд ли подойдет для коммерческого использования. Экспортировать прототип тоже получится лишь после оплаты. На PRO-планах доступны форматы PDF, PNG и HTML.

Здесь можно создавать проекты под разные платформы:

• смартфоны;
• планшеты;
• умные часы;
• браузер.

Также есть вариант freehand для кастомных проектов — в этом режиме пользователь может задать свои параметры холста, а не ограничиваться экраном конкретного устройства. 

Moqups

Платформа: Онлайн-сервис

Цена: от 13$/месяц для фрилансеров, от 20$/месяц для команд

Бесплатный тариф: бессрочный, с ограничениями

Moqups похож по функционалу на предыдущий сервис, он тоже позволяет создать макет сайта онлайн, но отличается уровнем детализации. Тут элементы не притворяются зарисовками: края ровные, кнопки симметричные, можно менять шрифты. У него большая библиотека элементов, что открывает поле для творчества. К тому же сервис подсказывает пропорции, показывает направляющие — в общем, помогает далекому от дизайна человеку сделать красоту.

При редактуре Moqups подсказывает похожие элементы, подсвечивает поля

Зарегистрироваться можно с помощью email или через аккаунт Google. Никаких дополнительных данных, в том числе платежных, Moqups не спрашивает. Кроме полноценных сайтов, в сервисе можно сделать прототип лендинга, дашборда, карты сайта и другие макеты.

Подробнее о способах создания лендингов читайте в статье «Как создать лендинг с высокой конверсией и потратить минимум денег».

Бесплатная версия сервиса ограничена одним проектом с не более чем 200 элементами. Этого лимита хватит на 2-3 страницы или небольшой лендинг. Совместная работа над прототипом доступна только по подписке, но можно открывать право просмотра другим пользователям сервиса, так что коллеги смогут смотреть онлайн-прототип.

У Moqups также есть расширение для браузера Chrome. Пока оно умеет делать скриншоты страниц и отправлять их в сервис. 

Origami

Платформа: macOS

Цена: бесплатно

Если ваша основная аудитория — пользователи мобайла, попробуйте приложение Origami от корпорации Facebook. Программа заточена под создание прототипов для смартфонов. Здесь можно задать отклик будущего сайта или приложения на скроллинг, жесты, поворот экрана и прочие специфические способы взаимодействия. Здесь даже можно добавить изображение руки, которая держит смартфон, чтобы уточнить восприятие пользователем.

У сервиса есть приложения для iPhone и Android, но они предназначены для тестирования, а не разработки прототипов. Если синхронизировать их с программой на Mac, можно посмотреть работу созданных прототипов на телефоне.

Figma

Платформа: кроссплатформенный сервис, Windows, macOS, браузерная версия

Цена: от 12$/месяц

Бесплатный тариф: бессрочный, с ограничениями.

Figma — это скорее для профессионалов, чем для новичков. Если сравнивать со строительными инструментами, то это фрезеровочный станок среди ножовок и лобзиков. Но освоить его вполне реально, тем более что команда подготовила подробные видеоинструкции для многих этапов разработки.

В сервисе есть шаблоны для сайтов, диаграмм, путей клиента и пользователя, постов для соцсетей и даже коллекция шрифтов. Доступна разработка под разные модели смартфонов и smart-часов. Есть векторный редактор и масса smart-функций. Figma пригодится на крупных проектах, когда прототип должен быть идеальным, прежде чем пойдет в работу. К слову, экспортировать файлы можно в форматах PNG, JPG, PDF и SVG.

Пользуясь бесплатной версией, можно создать до трех проектов, история изменений которых хранится 30 дней. Также можно добавлять в проект одного соавтора. Студентам сервис предлагает бесплатный доступ к PRO-версии. Но попытка перейти на страницу подтверждение статуса студента привела нас на страницу 404. Возможно этот функционал доработают.

Выводы

1. Создание прототипа — важный этап в разработке сайта. Он дает видение конечной точки, к которой уже прокладывается roadmap.
2. Чтобы прототипирование было целесообразным и облегчило работу, а не съело время впустую, нужно сразу определиться с необходимым уровнем детализации. Чем больше людей вовлечено в разработку и чем больше времени на нее отведено, тем больше прототип должен быть похож на готовый сайт. При этом небольшой команде для создания одной страницы может хватить и схематического наброска.
3. Создание прототипа следует начать с расчета пути пользователя к целевому действию. Уже после разработки сценариев взаимодействия с сайтом можно начинать рисовать блоки и выбирать формы кнопок. Первый набросок можно сделать хоть от руки в блокноте — лишь бы получить общее видение.
4. Сервисы для создания прототипов имеют схожие функционал и интерфейсы. Поэтому при выборе стоит обратить внимание на возможность совместной работы и доступные для экспорта форматы.

Подписывайтесь на наш Telegram-канал

Подпишитесь на обновления

Раз в неделю мы отправляем дайджест самых интересных новостей о digital 

Email*

Даю согласие на обработку персональных данных и хочу получать информационно-рекламные письма *

Как создаются прототипы сайтов — Дизайн на vc.ru

Когда к нам в компанию обращаются клиенты с целью разработки нового сайта, мы объясняем, какие этапы нас ждут впереди. Чтобы разработать сайт, нужно пройти как минимум 6 шагов:

12 384
просмотров

• обсуждение целей и задач проекта;
• разработка интерактивного прототипа;
• разработка технического задания;
• разработка дизайна;
• верстка и программирование;
• внедрение и тестирование.

В этой статье мы – команда DIGIMATIX поговорим об одном из самых важных этапов – прототипировании: о том что это и зачем нужно.

Что такое прототип и зачем он нужен?

О значении

Прототипирование — это один из ранних этапов разработки. На наш взгляд, основная его задача — проверка гипотез, о том как пользователи максимально быстро и просто могут достичь своих целей на сайте. Благодаря прототипированию продукта, можно существенно снизить затраты на разработку, так как у разработчиков на руках будут задокументированы структура продукта, карта взаимодействия пользователя с продуктом и конечный дизайн. Также считаем важным отметить, что в процессе проектирования дизайн-команда формирует полный набор способов и инструментов для взаимодействия пользователей с продуктом. Это очень важный момент, так как необходимо сохранить баланс между новизной и изобретательностью, чтобы у пользователей не возникло затруднений и их опыт был положительным.

Резюмируя, прототип нужен для:

• проверки гипотез, которые были выдвинуты в момент формирования целей и задач проекта;
• возможности быстрого внесения изменений в функциональность продукта без кода;
• объяснения логики взаимодействия пользователя с продуктом;
• презентации идей партнерам и клиентам;
• избегания дополнительных затрат ресурсов на следующих этапах.

Типы прототипов

Прототип — достаточно широкое понятие, так как это может быть просто эскиз от руки на бумаге, схема в формате картинки, либо детальный интерактивный прототип.

По глубине проработки деталей выделяют прототипы:

• с низкой детализацией;
• с высокой детализацией.

По возможности взаимодействия с прототипом выделяют:

• статичный — в виде графического изображения;
• интерактивный — с элементами взаимодействия, например, с кликабельными ссылками, рабочим слайдером, всплывающими формами, фильтрами и многим другим.

В процессе работы могут быть использованы все типы прототипов, в частных случаях некоторыми из них можно пренебречь.

Выбор типа и детализации прототипа зависит от того, какое исследование проводится и какие гипотезы мы хотим проверить. Стоит учитывать, что не стоит детализировать прототип больше, чем нужно для проверки гипотез.

Шаги, которые необходимо предпринять для разработки прототипа

Первый шаг — постановка целей

Прототип — результат целого комплекса работ специалистов смежных областей и других участников проекта. Самым первым шагом для нас в DIGIMATIX является встреча с клиентом и коллегами, на которой мы ставим цели для будущего продукта. Чем они четче и яснее сформулированы, тем точнее в последующем будут и гипотезы о том как их достичь.

Второй шаг — формирование гипотез

Если в предыдущем шаге можно допустить размытые формулировки, то на этапе формирования гипотез требования выше. Сложно оценить ценность прототипирования, если вы не знаете, что хотите проверить. «Набросать эскиз страницы, чтобы просмотреть примерное расположение блоков» — сомнительное мероприятие, а «Автоматически подобрать ПК указывая задачи для которых он требуется» — на наш взгляд отличная гипотеза для проверки.

Третий шаг — исследование

Очень важный этап. Ни одно техническое задание, ни один заполненный бриф на 100500 вопросов не сможет дать такого полного погружения в бизнес клиента как исследование. Понимание бизнес-процессов помогает создавать наиболее эффективные решения. К сожалению, наличие исследования часто обусловлено бюджетом проекта.

Четвертый шаг — формирование прототипа

Этот шаг характерен «перегонкой» результатов исследований или гипотез в требования к продукту. Может содержать всё от требований к навигации до описания функционала способов закрытия потребностей. И только сейчас этот чистый дистиллят трансформируется в наброски и прототипы низкой детализации.

Пятый шаг — проработка глубины прототипа

И только на данном этапе прототип начинает обрастать подробностями и контентом. Прототипы высокой детализации легко тестировать, они дают полное представление о работе будущего проекта и помогают выявлять проблемные места в логике работы продукта и пути пользователей.После этой итерации прототип готов стать дизайном. Но это уже совсем другая история…

5 лучших инструментов для разработки прототипа

При выборе инструмента для прототипирования мы руководствуемся как это ни странно — ленью. Для нас важно удобство переноса прототипа и контента в редактор, где будет происходить игра со шрифтами.

1. Figma

Абсолютный лидер в нашем топе. Прекрасный инструмент как для прототипирования, так и для UI-дизайна. Бесконечно радует возможности совместной работы и быстрого шеринга для презентаций. В последних проектах практически всю анимацию готовили здесь.

2. Axure

Самая известная и популярная программа по созданию прототипов веб-сайтов и приложений. В достаточной степени глубокая, чтобы делать сложные элементы, при этом достаточно легкая, чтобы уже через десять минут ковыряния в интерфейсе подготовить макет даже для неподготовленных пользователей.

3. Sketch

Отличный редактор. Большие возможности. Ограничение платформой.

4. Adobe XD

Еще один продукт американской компании Adobe Inc. Направлен на разработку интерфейсов.

5. Adobe Photoshop + marvel или Invision

Если вы старовер, то при помощи этих связок ПО, вы вполне можете создать кликабельный, но простенький прототип и презентовать его команде или клиенту.

А как же на практике выглядит разработка прототипа?

Перед тем как приступить непосредственно к созданию прототипа, мы проделываем предварительные шаги, о которых мы уже говорили: ставим цели, формируем гипотезы, проводим исследования. На основе полученных данных мы формируем список необходимого функционала и выстраиваем сценарии поведения.

В качестве примера возьмем — создание прототипа для интернет-магазина. Список функционала может выглядеть следующим образом:

• многоуровневый каталог и удобная карточка товара;
• фильтрация и сортировка товаров по характеристикам;
• система поиска товаров на сайте;
• оформление заказа;
• модули доставки и оплаты;
• быстрая покупка в несколько кликов;
• управление заказами в личном кабинете.

Это лишь малая часть функционала, который может использоваться на будущем сайте, поэтому очень важно определить его до начала создания прототипа. Совместно с определением функциональных возможностей мы составляем список уникальных страниц, которые нам предстоит разработать.

Как только проделаны все подготовительные работы, мы совместно с клиентом определяемся с типом прототипа, который создаем. Для интернет-магазина мы обычно делаем интерактивный прототип с высокой детализацией.

В самом начале работ мы выстраиваем сетку будущего сайта, создаем необходимые текстовые стили и собираем минимальный набор UI-компонентов, чтобы уже на этапе дизайна нам проще и быстрее было приводить все элементы в единую стилистику. Все элементы мы делаем в черно-белой палитре, чтобы на данном этапе не отвлекаться на цветовое решение, а сосредоточиться на тестировании.

На первом шаге разработки прототипа мы создаем главную страницу сайта, на основе которой будут построены все остальные. Также на данном этапе мы работаем над хедером, футером, навигационными элементами и выстраиваем все блоки в рамках страницы. Мы не забываем прорабатывать все используемые интерактивные элементы, с которыми будет взаимодействовать пользователь. К таким элементам могут относиться кликабельные ссылки, ховеры, всплывающие формы, слайдеры. В программе Figma такие элементы достаточно просто создавать с помощью функции Variants. Она находится в стадии бета-тестирования, но пользователи уже могут оценить все ее возможности. Основное преимущество интерактивных элементов заключается в их кликабельности и возможности проверить и улучшить понимание того, как будет выглядеть будущий сайт без привлечения программиста и верстальщика.

После того как прототип главной страницы утвержден, мы приступаем к разработке внутренних страниц. На данном этапе мы также собираем блоки контента, прорабатываем структуру и не забываем про элементы взаимодействия: переходы между страницами, клики, выпадающие списки.

Таким образом

В результате всех проведенных работ у нас получается детализированный интерактивный прототип, имитирующий функционал готового проекта. С помощью него мы можем:

• протестировать цели проекта;
• проверить гипотезы, которые выдвигали на нулевом этапе;
• выявить проблемные места и ошибки в логике работы, чтобы они не ушли на последующие этапы.

Мы советуем делать максимально детальный интерактивный прототип сайта, так как это поможет свести риски по части юзабилити и бизнес-логики в проекте к минимуму.

Демонстрации прототипов — Proto.io

Все демонстрации, которые вы видите на этой странице, были созданы с помощью Proto.io такими же людьми, как и вы.

Аудио приложение

5
5

Панель управления дизайном материалов

5
5

Интернет-магазин цветочных магазинов

5
5

ТВ-приложение с клавиатурой

5
5

Демонстрация Apple Watch

5
5

Подтверждение входа

5
5

Истории в Instagram

5
5

Карты Google — Нью-Йорк

5
5

Обзор диванов

5
5

Слайд в меню

5
5

Шоколадное или ванильное мороженое

5
5

Вводная карусель

5
5

Потяните, чтобы обновить

5
5

Библиотека пользовательского интерфейса Material Design

5
5

Круговое плавающее меню

5
5

Компоненты интерактивного пользовательского интерфейса

5
5

Интерфейс движения

5
5

Сбор данных

5
5

Веб-параллакс

5
5

Прожектор для iOS

5
5

Тиндер

5
5

Вак-монстр

5
5

Анимированное меню

5
5

Расширенные библиотеки пользовательского интерфейса Shapes

5
5

Найдите больше прототипов на

PROTO. IO SPACES

Посетите Proto.io Spaces

Цены и планы подписки — Proto.io

Все функции доступны для всех планов.

Ежемесячная оплата
Годовая оплата счетов Экономия до 20%

Фрилансер

$2924
в месяц, оплата ежемесячно ежегодно

• 1 пользователь
• 5 активных проектов
• Неограниченное количество рецензентов

Самый популярный

Запуск

$4940
в месяц, оплата ежемесячно ежегодно

• 2 пользователя
• 10 активных проектов
• Неограниченное количество рецензентов

Агентство

$9980
в месяц, оплата ежемесячно ежегодно

• 5 пользователей
• 15 активных проектов
• Неограниченное количество рецензентов

Корпоративный

$199160
в месяц, оплата ежемесячно ежегодно

• 10 пользователей
• 30 активных проектов
• Неограниченное количество рецензентов

Ищете корпоративные планы Proto.

io?

Адаптируйте свой план с дополнительными пользователями, неограниченным количеством проектов, единым входом и безопасностью корпоративного уровня.

Узнать больше

Начать 15-дневную бесплатную пробную версию

Кредитная карта не требуется.

Proto.io для образования

Нам небезразлично, как преподают прототипирование в учебных заведениях. Мы создали индивидуальные планы, чтобы предложить преподавателям и учащимся все преимущества по специальной цене. Свяжитесь с нами сейчас.

Студенты и

Некоммерческие организации

Студенты и некоммерческие организации могут воспользоваться скидкой 50% . Просто свяжитесь с нами по электронной почте вашего учреждения.

Бесплатная учетная запись

Не можете позволить себе ни один из вышеперечисленных планов? Вы сможете преобразовать свою учетную запись в Бесплатный ограниченный план, как только истечет срок действия пробной версии.

Часто задаваемые вопросы

Предварительный просмотр в Player, Предварительный просмотр в приложении Proto.io, Общий доступ, Комментарии, Неограниченное количество рецензентов, Экспорт в HTML/PNG/PDF, Брендинг, Импорт из Sketch, Figma, Adobe XD, Photoshop, 256-битное шифрование SSL , поддержка чата в режиме реального времени.

Ваш платежный цикл начинается в день, когда вы впервые приобретаете платный план. С вашей кредитной карты будет списываться каждый месяц. Простой.

После регистрации у вас есть 15 дней, чтобы активировать подписку. Мы отправим вам электронное письмо с напоминанием до истечения пробного периода. По окончании пробного периода у вас по-прежнему будет возможность перейти на платный план подписки или перейти на бесплатный план с ограниченными возможностями.

Ваш платежный цикл начинается в день, когда вы впервые приобретаете платный план. С вашей кредитной карты будет списываться каждый месяц. Простой.

Да.

This entry was posted in Продвижение