Для того, чтобы четко объяснить, каким вы видите будущий сайт – больше не нужно показывать все на пальцах и рисовать странные картинки на бумаге. Всё гораздо проще – вам нужен прототип.
В нашей статье мы рассмотрим характеристики прототипа сайта и объясним, как его можно создать при помощи 7 онлайн-сервисов.
Прототип является макетом или физической реализацией концепта интерфейса сайта. Он позволяет создавать прототипы различных страниц сайта – от главной до каталога товаров.
Больше нет необходимости в использовании сотен бумажных листов или освоении графических редакторов. Любой уровень вашей подготовки поможет вам сделать желаемую раскладку из готовых элементов интерфейса с минимумом интерактивности.
Вы сможете приглашать для обсуждения своих коллег и создавать в программах как простые эскизы, так и полнофункциональные макеты с рабочими ссылками и привлекательным интерфейсом.
Давайте рассмотрим 7 вариантов разных программ для создания прототипа сайта. Они отличаются сложностью работы, стоимостью и широтой возможностей.
Останавливайтесь на выборе этой программы, если вам необходимо вдохнуть жизнь в готовые макеты из Фотошопа или Sketch.
Основным преимуществом приложения можно назвать систему управления проектами. Можно сохранить эскизы в разных проектах и отделить их друг от друга, поместив в несколько групп. Также есть возможность добавления нескольких вариантов макета с фиксацией всех правок.
Помимо этого, программа прибавляет макетам своего рода интерактивность. Для этого нужно назначить ссылки на элементы, что связывают страницы и элементы вашего проекта.
.png)
Минусом является невозможность работать со встроенными библиотеками готовых элементов для их использования в проекте.
.png)
Огромным плюсом является то, что инструмент совершенно бесплатный.
Если у вас нет Photoshop либо Sketch, то не стоит расстраиваться. Balsamiq может стать хорошим инструментом для вас. Работает он в качестве приложения для рабочего стола, а так же в виде веб-версии.
.png)
В этом инструменте вы найдете большую библиотеку встроенных элементов UI для работы с ними в проектах.
Работать просто: нужно перетаскивать выбранный элемент с верхней панели и располагать его в желаемом месте.
Также у вас будет возможность настройки нескольких вариантов дизайна.
Главным недостатком приложения является необходимость платить за него. Десктопная версия стоит 89 долларов (одна лицензия). Бесплатное пользование происходит в течение месяца для некоммерческих проектов.
При помощи этого полноценного веб-приложения вы сможете создать как простой эскиз, так и готовый макет сайта.
.png)
По аналогии с Balsamiq, можно работать со встроенной библиотекой готовых элементов. Вы можете оставлять комментарии, отмечать цели и задачи по каждому проекту и этапу во время работы.
Все ваши проекты будут хранится на серверах разработчика и работать можно только в режиме онлайн.
Сервис является платным. Цена зависит от числа проектов и места, занимаемого на сервере.
Базовый тариф (10 проектов) располагает 1 GB места на сервере и стоит 13 долларов. Можно поработать со стартовым бесплатным тарифом (1 проект). На него можно добавить 300 объектов общим весом в 5 МВ. Для создания простого макета лендинга этого может хватить.
Вот что должно получиться:
.jpg)
Marvel это легкий и интуитивно понятный инструмент для создания прототипа сайта. С его инструментом Canvas можно делать эскизы и каркасный интерфейс.
Можно работать с систематизацией набросков, загрузкой макетов в группы прототипов и многим другим.
Главной особенностью этого приложения можно назвать ориентир на создание мобильных интерфейсов. Можно выбрать тип прототипа: будь-то сайт, приложения для Айфона, Андроида или AppleWatch.
.png)
Минус в том, что разработчики продумывали приложения больше для MacOS – для них здесь много «вкусных» возможностей.
Что касается цены вопроса, то можно выбрать один из трех возможных тарифов:
При помощи библиотеки встроенных элементов можно создавать простые эскизы и практически готовые интерфейсы. Можно работать как с десктопными, так и мобильными приложениями. Работает для iOS, Android и Surface, что является заметным преимуществом перед другими программами.
.png)
Итак, вы создали макет. Теперь возможно добавление интерактивных триггеров. При помощи нескольких кликов можно пригласить коллег к обсуждению и доработке вашего проекта.
.png)
Для работы с профессиональным тарифом необходимо будет заплатить 19 долларов в месяц (на одного пользователя).
Origami известен как узконаправленный инструмент для специалистов на MacOS. С его помощью можно создавать эскизы и макеты для iPad и iPhone.
Здесь есть 4 главные панели – патчи, слои, окно просмотра и библиотека патчей.
.png)
Главным преимуществом называют возможность придавать интерфейсу сложную интерактивность, не имея представления о программировании. Если вы хотите разработать дизайн – тогда этот инструмент вам не подойдет.
Программа – бесплатна, но веб-версия не предусмотрена.
При помощи этой удобной программы можно загружать свои эскизы и библиотеки элементов интерфейса. Приложение, в свою очередь, поможет в создании макетов на их базе. Как результат – получится полноценный прототип. Можно работать и со встроенной библиотекой элементов.
Интерфейс достаточно прост: нужно перетаскивать на рабочее поле компоненты, группировать и организовывать их. Необходимо выделять объект на рабочем столе в нужном слое и редактировать его в панели опций.
Настоящей гордостью разработчики называют качественный и многоплановый редактор Proto.io:
.png)
Можно попробовать пользоваться программой бесплатно в течение 14 дней. Вы оцените весь функционал и возможности программы и поймете, стоит ли работать с ней в будущем.
Тариф «Фрилансер» стоимостью в 24 доллара/месяц позволяет работать с 5 проектами, что вполне достаточно.
Представленные сервисы отлично подходят для решения любых «прототипных» задач. Останавливайте свой выбор на том, который наиболее подходящий для вас по функциям и цене.
