Андрей Дуркин

Разработкa прототипа сайта

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

Запрототипируйте мне!

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

Уровень детализации прототипа сайта

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

Какие существуют программы для пРототипирования сайта

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

Разработкa прототипа сайтаAxure RP — в первую очередь хочется отметить эту программу. Современные дизайнеры мобильных приложений считают её избыточной, но если говорить о возможностях интерактивности, которую вы можете реализовать при относительной простоте использования — ей НЕТ равных. Любые анимации, модальные окна, переключение видимости, калькуляция, даже работа с базами данных! Кроме того она позволяет экспортировать прототип в формате html или моментально выгружать в облако, где любой может испытать его в работе и обсудить в формате микро-чатов, привязанных к отдельным местам в макете. Сюда же можно отнести программу Justinmind, так как она является практически клоном Axure RP, но с незначительными и сомнительными изменениями.
Разработкa прототипа сайтаBalsamiq Mockups — цифровой аналог салфетки с карандашом, подобные прототипы часто называют wireframe. Это ваш выбор, если вам нужно передать саму суть задумки, не отвлекаясь на дизайн, эстетику и текстовое наполнение. Невольно вспоминается принцип Парето, где 20% усилий дают 80% результата — это как раз про Balsamiq Mockups и аналогичные инструменты — Pidoco, Mockingbird, iPlotz…
Разработкa прототипа сайтаFigma, InVision, Adobe XD, Principle, Flinto и прочий дизайнерский софт. На мой взгляд, нельзя относить их к инструментам прототипирования, как бы маркетологи ни пытались убедить вас в обратном. Это инструменты для презентационного оживления дизайн-макета. А если вы приступаете к прототипированию когда у вас уже есть дизайн — вы что-то делаете не так. Правильный порядок этапов создания концепта нового продукта описан в другой нашей статье.