Лучшие статьи и кейсы стартапов
Включить уведомления
Дадим сигнал, когда появится
что-то суперстоящее.
Спасибо, не надо
Главное Свежее   Проекты
Рекомендуем
Продвинуть свой проект
8 636 19 В избр. Сохранено
Авторизуйтесь
Вход с паролем

​Сервисы для создания прототипа сайта

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

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

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

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

4 причины создать прототип сайта:

  1. Четкое представление о том, какая информация необходима на каждой странице веб-сайта. Вы контролируете конечный результат и вам не нужно объяснять «на пальцах», что вы хотите получить.
  2. Прототип легко изменять, ведь он состоит из схематичных черно-белых элементов. Если в процессе разработки сайта вы захотите внести изменения в структуру, то сделать это гораздо проще именно на схеме, а не в готовом дизайне.
  3. Экономия времени. Тщательное планирование этапов разработки помогает концентрироваться на одной задаче и эффективно её решать в установленные сроки. То есть, создавая прототип, вы не распыляетесь на подборку цветовой схемы сайта и оформления.
  4. Точка восстановления и подстраховка. Если вы работаете на заказ, то утвержденный клиентом прототип защитит от бесплатных переделок. Если клиент требует значительных правок в уже принятом им макете, то они вносятся за дополнительную плату.

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

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

Команда SMS Aero выбрала несколько популярных сервисов для прототипирования и решили рассказать об их особенностях.

Balsamiq Mockups

MyPVR-0ImEity9faoOiEvmLB-PJs57L9r7UWe9QP

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

Кроме стандартных десктопных решений сервис предлагает несколько макетов для мобильных устройств, но для прототипирования под iPhone и Android – это не самое лучшее решение.

Проекты сохраняются в собственном формате для последующего редактирования или в PDF и PNG для экспорта. Имеется опция просмотра прототипа в полноэкранном виде. Доступ к сервису стоит 12 долларов в месяц (можно одновременно вести не более 3 активных проектов).

Wireframe.cc

-ozaERZ-IH_yxNy_uVMpy3kW_im3dVuhuGyaI-Ud

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

Зарегистрировавшись на сервисе, вы можете сразу же приступить к работе, просто перетаскивая мышью в рабочее пространство нужные элементы. Для сохранения проекта достаточно нажать кнопку «Save». Сервис создаст уникальный адрес сайта, которым можно поделиться с коллегами по работе или отправить клиенту.

Стандартная версия сервиса бесплатна. Разработчики планируют выпуск платной премиум версии с расширенным функционалом.

Pencil Project

0Y5_LvHvP6i402FdSSmuwfspka_ZHIceDWlghnZN

Этот сервис, по сути, плагин для FireFox с множеством функций по разработке прототипов. Создавать схемы сайтов можно непосредственно в браузере. Точно так же ими можно делиться с другими пользователями. Сервис-плагин, как и Wireframe.cc, минималистичен – простой интерфейс, набор только необходимых графических элементов.

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

HotGloo

6vnNzRLL40gL-BCPe1MdqZlb1iairG1X6RWpSboH

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

Сервис платный: от 7 до 48 долларов в месяц.

iPlotz

z-b5lV8Qv5l9jU_CEvOxmQmSD4jufW5VZLRMQA0v

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

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

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

Напоследок ещё один небольшой обзор бесплатных сервисов для прототипирования:

  • NinjaMock – предоставляются основные векторные элементы для строительства макета: прямоугольники, эллипсы, кривые, формы, меню и т.д. Поддерживает все популярные платформы и ОС.
  • Mockingbot – сервис для создания прототипов мобильных приложений. Бесплатная версия позволяет вести один полноценный проект. Сервис имеет все необходимые графические элементы, чтобы создавать макеты для AppStore.
  • CogTool – сервис создает довольно простые прототипы пользовательского интерфейса. Фишка инструмента в том, что он дает прогноз эффективности макета, а также вычисляет необходимое время на реализацию проекта.
+4
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Подбираем рекоммендации...
Комментарии
Первые Новые Популярные
Екатерина К
Есть еще Mockflow https://www.mockflow.com
Он хорош тем, что у него есть бесплатная версия.
Ответить
SMS Aero
Сервис SMS-маркетинга и SMS-информирования
SMS Aero
Спасибо, нужно будет посмотреть.
Ответить
Alexander Yerinskiy
Екатерина, к сожалению относительно бесплатная версия. Ограничения бесплатной версии, как оказалось больше чем казались http://joxi.ru/V2V45gIxDJ3Orv - только три страницы, создание четвертой ведет уже на страницу выбора платного пакета http://joxi.ru/Vm6LaRFD8de4AZ
Ответить
SMS Aero
Сервис SMS-маркетинга и SMS-информирования
SMS Aero
Конечно! Он должен быть в списке определенно. Как мы про него забыли о_О
Ответить
Павел Николаев
Почему сервис смс-спама пишет не о смс-спаме? Было бы интересно почитать что-то из серии: завали клиента смс-ками всего по рубписят бесплатно без регистрации и смс. Как минимум по профилю будет
Ответить
SMS Aero
Сервис SMS-маркетинга и SMS-информирования
SMS Aero
Потому что спам – это не "наш профиль".
Ответить
Goran Jobovic
это называется "быстрый прототип". заколебали называтьпрототипом каляки маляки
Ответить
SMS Aero
Сервис SMS-маркетинга и SMS-информирования
SMS Aero
Расскажите, в чем разница между прототипом и быстрым прототипом при создании онлайн-сервиса/сайта.
Ответить
Goran Jobovic
разница как между словом шансон и песнями про лагеря. я не буду заниматься вашим образованием. начните со словаря. буква П. Прототип.
Ответить
SMS Aero
Сервис SMS-маркетинга и SMS-информирования
SMS Aero
Посмотрели. Прототип – прообраз, первообраз; опытный образец; пример; модель, оригинал, макет. Вполне подходит для того, что делают перечисленные сервисы.
Ответить
Goran Jobovic
Также можно взять англ. слово power, перевести его на русский как "мощность" и "питание" и удивиться почему павер и в вольтах и ватах. Прототип - это образец серии. Чаще всего полнофункциональный и визуально близкий к финалу. Во времена когда дилетантов гуманитариев было намного меньше, прототипом сайтов называли фактически сверстанные станицы с необходимым функционалом. Затем возникла необходимость делать черновые наброски, чтобы облегчить процесс и в обиход вошел термин "быстрый прототип", то есть не совсем прототип, а набросок, скетч, вайрфрейм. Иногда быстрый прототип делается настолько детальным и требует только цветового оформления, его тогда даже можно считать как просто прототип еще, но "прототип" "бумажный", схематичный, структурный, вайрфреймами - это не прототип. утверждать обратное - это тоже самое, как заявлять что чертеж двигателя - это его прототип. фиг там, прототип должен пахать как серийный образец почти.
Ответить
SMS Aero
Сервис SMS-маркетинга и SMS-информирования
SMS Aero
Спасибо за объяснение, поняли вашу позицию.
Ответить
Александр Лебедев
Где Axure? Материал плохой, автор в теме не разбирается. На хабре куча статей про инструменты прототипирования, только раз в 10 больше вариантов.
Ответить
SMS Aero
Сервис SMS-маркетинга и SMS-информирования
SMS Aero
С удовольствием прочитаем вашу подборку Топ-10 сервисов.
Ответить
Антон Запевалов
Оставлю это здесь. Вдруг кому пригодится.
http://ninjamock.com/
Ответить
ИнформУпак
Портал об упаковочной промышленности России и СНГ
Николай Носатов
А почему нет AXURE ???
Ответить
Евгений Гудков
Этот сайт http://gudmebel.ru делали без прототипа, хотя исполнитель на нем настаивал. В итоге получилось неплохо на мой взгляд.
Ответить
Евгений Гудков
Кстати, вот предыдущий шаблон сайта http://qpdivan.online/
Правда теперь уже на другом домене =)
Ответить
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать