Как найти сервис для прототипирования. Часть 1

#Что такое прототип?

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

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

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

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

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

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

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

Сайты могут прототипироваться различными методами.

Бумажное.
При помощи специальных программ.
При помощи графических программ.

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

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

Существует два типа прототипов: динамические и статические. Статический тип – обыкновенная картинка с возможностью добавления пояснений (как представлено ввержу на рисунке).

Динамический тип позволит представить, как будет работать ваш ресурс. Есть возможность нажимать кнопки, переходить по определенным ссылкам и так далее.

Нарисовать статические прототипы вы сможете в графических программах. Для динамических же используется html или конструктор сайтов. Также для создания обоих моделей можно воспользоваться онлайн-программами и сервисами.

Сегодня крупные веб-студии разрабатывают прототипы перед созданием сайтов. Иногда они берут за это отдельную плату или же включают в общий пакет. Фрилансеры и мелкие компании этим практически не занимаются. Оптимальное решение – нарисовать прототип самостоятельно. Это под силу любому.

#Сервисы для прототипирования

Несколько лет назад наметился отход от схемы «дизайнер рисует макет – программист прикручивает к нему код». Теперь не только дизайнеры рисуют макеты. Этим могут заниматься и копирайтеры, и маркетологи, и сами верстальщики, и еще кто угодно из смежных профессий, связанных с интернетом.

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

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

Для удобства я свела всю информацию в отдельную таблицу, в которой сравнила сервисы по следующим параметрам:

Язык – язык интерфейса;
Бесплатный тариф – наличие бесплатного тарифа или пробной версии;
Самый дешевый тариф – стоимость самого дешевого тарифа или лицензии;
Особенности – отличительные «фишки» инструмента;
Интеграции – возможные интеграции с другими сервисами;
Скачиваемое приложение / веб-версия – некоторые из сервисов представляют из себя скачиваемые программы, некоторые работают прямо в браузере, а некоторые доступны в двух вариантах. В таблице указано наличие онлайн-версии / скачиваемого приложения и поддерживаемые ОС для каждого инструмента;
Мобильное приложение – наличие мобильного приложения для предпросмотра прототипов;
Техподдержка – возможные способы связи с технической поддержкой сервиса;
Клиенты – список самых известных клиентов.

Чтобы скачать таблицу в формате Excell, кликните здесь.

#Тем, кто не хочет заморачиваться

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

#Кратенький обзор первых трех программ

1. Axure

Axure – крупнейшее и наиболее известное приложение для прототипирования, позволяет создавать высококачественные прототипы сайтов и мобильных приложений. Обладает широким функционалом с большим набором инструментов. Требует установки софта на ПК, онлайн-версия недоступна. Работает с Windows и macOS.

Интерфейс Axure

2. Origami Studio

Origami Studio – полностью бесплатное удобное приложение от Facebook. Работает с macOS. Синхронизуется с Sketch. У приложения есть сообщество на Facebook, где пользователи могут делиться своими прототипами, обсуждать их создание и помогать друг другу.

Так выглядел бы прототип, созданный в Origami Studio, на iPhone 7

3. Proto.io

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

Интерфейс Proto.io

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

А я не прощаюсь, во вторник продолжу рассказ про остальные сервисы для создания прототипов.