Прототип сайта: зачем он нужен и как создать его самостоятельно

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

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

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

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

Вот неполный список проблем и задач, которые помогает решить прототип:

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

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

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

Но есть и другие преимущества для разработки:

«Ты можешь быть сто раз прав, но какой от этого прок, если ТЗ составлено устно?» — грустно шутят разработчики сайтов.

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

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

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

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

Также можно использовать десятки профессиональных программ, которые предназначены для полномасштабной работы над дизайном сайта, — Sketch, Axure Pro, Microsoft Visio, Adobe InDesign, Adobe Photoshop. Прототип, разработанный в таком инструменте, не только серьезнее и эстетичнее выглядит, но также позволяет визуализировать все задумки и элементы интерфейса. В некоторых программах можно добавить кликабельные функции.

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

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

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

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

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

Рассмотрим несколько самых популярных инструментов для создания прототипов.

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

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

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

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

У Marvel 4 тарифных плана — бесплатный и платные стоимостью от $12 до $84 в месяц. Разница между планами — в числе пользователей, которые имеют доступ к аккаунту, приоритетной поддержке и некоторых pro-функциях.

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

Но в этом сервисе предсказуемо нет ни шаблонов, ни значков с иконками, ни интерактивных элементов. Скорее это виртуальная замена все тому же листку А4.

Тарифная сетка Wireframe напоминает Marvel — сильно лимитированная бесплатная версия и три платных тарифных плана. Пакеты стоимостью от $16 до $99 в месяц отличаются только числом пользователей, которые могут работать над прототипом.

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

Прежде всего она рассчитана на разработку прототипов «с нуля», но также есть несколько готовых шаблонов, от которых можно отталкиваться при моделировании. Интерфейс посложнее, чем у Draftium или Wireframe, но благодаря встроенным подсказкам даже неспециалист может создать черновой макет, чтобы визуализировать основную концепцию.

Кроме бесплатной версии, Just in Mind предлагает три платных пакета, но делает упор не на число пользователей, а на интеграцию с другими сервисами — например, с Jira в версии Enterprise. Стоимость двух стандартных пакетов — $19 и $39 в месяц, а для серверной версии цена рассчитывается индивидуально.

Еще один очень простой и наглядный онлайн-сервис для прототипирования. Можно создавать макеты как «с нуля», так и на основании множества готовых шаблонов.

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

Стоимость подписки — от $99 в год для одного пользователя до $495 для десяти, плюс $75 за версию за десктопа. Бесплатная версия тоже есть, но только для одного проекта.

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

Чтобы создать прототип сайта, можно использовать разные инструменты, от листка бумаги до сложных программ уровня Adobe Photoshop или Sketch.

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