Марат-блог
Услуги по продвижению и разработке сайта
Отправить заявку
Заказать обратный звонок

Спасибо, Ваша заявка принята.

В ближайшее время менеджер свяжется с Вами.

Главная Полезные статьи 7 инструментов для создания прототипа сайта для маркетолога
7 инструментов для создания прототипа сайта для маркетолога
127
26 мая 2017

7 инструментов для создания прототипа сайта для маркетолога

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

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

Прототип сайта – что это

Прототип является макетом или физической реализацией концепта интерфейса сайта. Он позволяет создавать прототипы различных страниц сайта – от главной до каталога товаров.

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

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

Давайте рассмотрим 7 вариантов разных программ для создания прототипа сайта. Они отличаются сложностью работы, стоимостью и широтой возможностей.

InVision

Останавливайтесь на выборе этой программы, если вам необходимо вдохнуть жизнь в готовые макеты из Фотошопа или Sketch.

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

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

 

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

 

Огромным плюсом является то, что инструмент совершенно бесплатный.

InVision

Balsamiq

Если у вас нет Photoshop либо Sketch, то не стоит расстраиваться. Balsamiq может стать хорошим инструментом для вас. Работает он в качестве приложения для рабочего стола, а так же в виде веб-версии.

 

В этом инструменте вы найдете большую библиотеку встроенных элементов UI для работы с ними в проектах.

Работать просто: нужно перетаскивать выбранный элемент с верхней панели и располагать его в желаемом месте.

Также у вас будет возможность настройки нескольких вариантов дизайна.

Главным недостатком приложения является необходимость платить за него. Десктопная версия стоит 89 долларов (одна лицензия). Бесплатное пользование происходит в течение месяца для некоммерческих проектов.

Balsamiq

Moqups

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

 

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

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

Сервис является платным. Цена зависит от числа проектов и места, занимаемого на сервере.

Базовый тариф (10 проектов) располагает 1 GB места на сервере и стоит 13 долларов. Можно поработать со стартовым бесплатным тарифом (1 проект). На него можно добавить 300 объектов общим весом в 5 МВ. Для создания простого макета лендинга этого может хватить.

Вот что должно получиться:

 

Moqups

Marvel

Marvel это легкий и интуитивно понятный инструмент для создания прототипа сайта. С его инструментом Canvas можно делать эскизы и каркасный интерфейс.

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

Главной особенностью этого приложения можно назвать ориентир на создание мобильных интерфейсов. Можно выбрать тип прототипа: будь-то сайт, приложения для Айфона, Андроида или AppleWatch.

 

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

Что касается цены вопроса, то можно выбрать один из трех возможных тарифов:

  • Бесплатный (1 пользователь, 2 проекта).
  • Профессиональный (1 пользователь, неограниченное количество проектов) – 12 долларов/месяц.
  • Корпоративный – стоимостью в 48 долларов за месяц с расчетом до 4 пользователей.

Marvel

Justmind

При помощи библиотеки встроенных элементов можно создавать простые эскизы и практически готовые интерфейсы. Можно работать как с десктопными, так и мобильными приложениями. Работает для iOS, Android и Surface, что является заметным преимуществом перед другими программами.

 

Итак, вы создали макет. Теперь возможно добавление интерактивных триггеров. При помощи нескольких кликов можно пригласить коллег к обсуждению и доработке вашего проекта.

 

Для работы с профессиональным тарифом необходимо будет заплатить 19 долларов в месяц (на одного пользователя).

Justmind

Origami

Origami известен как узконаправленный инструмент для специалистов на MacOS. С его помощью можно создавать эскизы и макеты для iPad и iPhone.

Здесь есть 4 главные панели – патчи, слои, окно просмотра и библиотека патчей.

 

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

Программа – бесплатна, но веб-версия не предусмотрена.

Origami

Proto.io

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

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

Настоящей гордостью разработчики называют качественный и многоплановый редактор Proto.io:

 

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

Тариф «Фрилансер» стоимостью в 24 доллара/месяц позволяет работать с 5 проектами, что вполне достаточно.

Proto.io

Итоги

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