Logiss.ru

Ваша компьютерная помощь
2 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Прототипирование сайта: список сервисов

Обзор 21 инструмента для создания прототипов

Обзор 21 инструмента для создания прототипов

Мария Журавлева Редакция «Текстерры»

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

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

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

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

Чтобы скачать таблицу, кликните на скриншот ниже.

Нажмите на скриншот, чтобы скачать таблицу в формате Excel

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

4. Vectr

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

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

5. InVision

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

Интерфейс командной работы в InVision

6. Adobe Experience Design

Adobe Experience Design входит в пакет Creative Suite от Adobe и синхронизируется со многими сервисами из этого пакета. Главные особенности: быстрый переход из прототипа в приложение, возможность моментально посмотреть изменения в прототипе на мобильных устройствах. Главный минус – десктопное приложение доступно только для Windows 10.

7. Principle

Principle отлично подходит для создания анимированных прототипов. Приложение доступно только для Mac.

Образец прототипа для Apple Watch, созданного в Principle

8. Just in mind

Главное преимущество Just in mind состоит в том, что в сервисе доступно множество элементов и жестов, а также готовые шаблоны прототипов.

Just in mind

9. Moqups

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

Прототип мобильного приложения, созданный в Moqups

10. Marvel

Marvel – инструмент прототипирования, в котором возможно создавать прототипы для всех устройств, включая умные часы.

Интерфейс Marvel

11. Mockplus

Основная «фишка» Mockplus – возможность просматривать прототипы на мобильных устройствах, сканируя QR-код, 3000 иконок в платных тарифах.

Домашняя страница Mockplus

12. UXPin

Как и в Marvel, в UXPin можно создавать прототипы приложений для умных часов. Правда, только для часов, работающих на Android.

Интерфейс создания прототипа мобильного приложения

13. Flinto

Flinto – сервис прототипированния, в котором есть готовые шаблоны для самых распространенных разрешений мобильных устройств, а также встроенные анимации переходов в приложениях на Android и iOS.

Flinto для Mac

14. Sketch

Sketch – знаменитый инструмент создан эксклюзивно для Mac, так что он лучше всего подойдет для создания прототипов для приложений на iOS.

Интерфейс Sketch

15. OmniGraffle

OmniGraffle доступен только для Mac и iOS, причем лицензии приобретаются отдельно. Сам сервис является мультиинструментом, и создание прототипов – не самая главная его функция.

Структура сайта в OmniGraffle

16. Pidoco

Главная особенность Pidoco – интуитивный drag’n’drop интерфейс, совместная работа над проектом.

Интерфейс Pidoco

17. Mockingbird

Mockingbird – простой сервис для создания несложных прототипов. Если вам нужно быстро создать базовый прототип, то, вполне возможно, Mockingbird вам подойдет.

Интерфейс Mockingbird

18. iPlotz

iPlotz – очень простой сервис для создания несложных прототипов. Возможно, кому-то именно это и нужно.

Веб-версия iPlotz

19. Proto Share

В платных тарифах Proto Share можно создавать бесконечное количество проектов. Кроме того, у сервиса очень долгий триал-период – целых 30 дней.

Читайте так же:
Скачать Free Music Downloader Studio бесплатно

Десктопного приложения у Proto Share нет, сервис доступен только в веб-версии

20. MockFlow

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

Интерфейс MockFlow

21. Mockup Builder

Mockup Builder – простой инструмент со стандартным набором функций. Ничего необычного. Однако среди клиентов можно встретить известные компании, так что не стоит обходить Mockup Builder стороной.

Mockup Builder

Прототип – незаменимый инструмент при разработке сайта

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

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

Как объяснить четко, каким вы видите будущий сайт или мобильное приложение? Решение – создание прототипа.

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

Что такое прототип сайта

Прототип – макет, или физическая реализация концепта интерфейса. Ещё 15 лет назад, когда о принципе «Mobile first» ещё никто не думал, страница-прототип содержала образцы дизайна всех элементов сайта – заголовков, списков, цитат, абзацев.

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

Допустим, вы не владеете навыками верстки, программирования и графическими редакторами. Как показать, что вы хотите получить? Совсем недавно для наглядности использовали лист бумаги и шариковую ручку. Так выглядел образец прототипа в исполнении эмоционального заказчика:

Создание прототипа сайта – рукописный образец

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

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

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

InVision

Это идеальное решение, если вам нужно «оживить» готовые макеты Photoshop или Sketch.

Примечание: плагин для Adobe Photoshop и для Sketch поможет отправить проект из редактора прямо в InVision. Работает синхронизация файлов внутри проекта, с рабочим столом либо Dropbox (для этого нужны дополнительные приложения).

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

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

Все действия по проекту фиксируются на вкладке «Activity». Это удобно при групповой работе над макетом: вы точно знаете, кто загрузил файлы или редактировал ваш макет своими кривыми руками (либо довел его до совершенства).

Создание прототипа сайта – Invision

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

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

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

Создание прототипа сайта – библиотеки Invision

Большой плюс – инструмент бесплатный.

Balsamiq

Нет Photoshop или Sketch? Возможно, Balsamiq – лучший инструмент для вас. Он работает, как приложение для рабочего стола. Есть и веб-версия.

Создание прототипа сайта – Balsamiq

Инструмент содержит внушительную библиотеку встроенных элементов UI для использования в проектах. Это экономит время: вы используете готовые пресеты (например, выпадающие меню или «аккордеоны»).

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

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

Нужно оценить несколько вариантов дизайна? Не вопрос, инструмент предлагает средства контроля версий и историю версий. Можете вернуться назад по времени и оценить, насколько продвинулся ваш дизайн.

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

Главный минус – приложение платное. Хотя цены вполне подъемны: версия для десктопа стоит $89 за одну лицензию, веб-версия на 3 проекта – $12 в месяц. Есть бесплатный пробный период на 1 месяц для некоммерческих проектов.

Читайте так же:
Как изменить визуальные закладки в Мозиле

Moqups

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

Cоздание прототипа сайта – moqups

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

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

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

Moqups – веб-приложение, вся работа проходит исключительно онлайн. Ваши проекты хранятся на серверах разработчика.

Сервис платный, стоимость тарифа зависит от количества проектов и места на сервере.

Базовый тариф на 10 проектов и 1 GB на сервере обойдется в $13. Есть стартовый бесплатный тариф на 1 проект, ограниченный 300 объектами и 5 MB. Для простейшего макета (одностраничного лендинга) и полноценного общения с дизайнером этого вполне достаточно.

Вот что из этого может получиться:

Прототип в Moqups

Marvel

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

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

Главная фишка Marvel – ориентация на разработку мобильных интерфейсов. При создании нового проекта вы выбираете тип прототипа: сайт, приложение для iPhone, iPad,Android и даже AppleWatch.

Создание прототипа сайта – Marvel

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

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

Печальный момент: Marvel разрабатывался для пользователей MacOS – для них разработчики припасли дополнительные плагины и приложения. Есть, например, плагин для Sketch. Для пользователей Windows и Linux подарочков нет.

Marvel предлагает три тарифа:

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

Justmind

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

Cоздание прототипа сайта – Justmind

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

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

Создание прототипа сайта – тарифы Justmind

Профессиональный тариф обойдётся в $19 за 1 пользователя в месяц.

Origami

Origami — более узкоспециализированный инструмент прототипирования, так как доступен только для MacOS. Его функции – создавать эскизы и макеты для iPad и iPhone.

Origami содержит 4 главные панели:

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

Создание прототипа сайта – Origami

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

Origami бесплатен, веб-версии нет.

Proto.io

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

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

Гордость разработчиков – продвинутый редактор Proto.io:

Создание прототипа сайта – Proto.io

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

Разработчики предлагают привязку к учетной записи Dropbox для хранения и загрузки файлов, клиент для iOS и Android и плагины для Sketch и Photoshop.

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

Тариф «Фрилансер» стоит $24 в месяц и позволяет вести 5 проектов. Если вы не работаете в веб-студии, этого хватит с избытком.

Заключение

Этих сервисов достаточно для решения любой задачи, остается только выбрать подходящий.

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

Читайте так же:
Как исправить ошибку регистрации comcntr.dll?

16 инструментов для создания прототипов

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

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

Спонсор перевода: Айкен

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

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

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

1. Omnigraffle

Тип: Приложение OSX
OmniGraffle поможет вам быстро создать потрясающие графические документы путем соединения линий с фигурами, даже если они перемещаются, и предусматривает инструменты моделирования, файлы импорта и экспорта Microsoft Visio, а также простейшее построение диаграмм всего одним щелчком мыши.

2. ConceptDrawPro

Тип: Приложение Windows
ConceptDraw PRO — это полнофункциональная платформа диаграммного изображения, которая позволяет отображать, передавать и динамично представлять информацию.

3. Pidoco

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

4. BalsamiqMockups

Тип: Приложение AIR
Balsamiq Mockups — это инструмент построения каркаса, разработанный специально для воспроизведения проектов, нарисованных от руки, позволяя быстро и легко обновить свойства программ, таких как Microsoft Word.

5. Mockingbird

Тип: Онлайн
Mockingbird — это инструмент в режиме онлайн, позволяющий легко создавать, связывать, предварительно просматривать и передавать модели вашего или приложения.

6. Pencil

Тип: Дополнение Firefox
Проект Pencil предназначен только для построения свободного и открытого инструмента создания диаграмм и прототипов графического интерфейса пользователя, который может использовать каждый.

7. iPlotz

Тип: Онлайн / Flash-Flex
С помощью iPlotz можно создавать управляемые, активируемые кнопкой каркасы для создания образа или программного приложения. Вы также сможете получать комментарии от других лиц по поводу проектов, и как только все будет готово, управлять заданиями по построению проекта для разработчиков и проектировщиков.

8. ProtoShare

Тип: Онлайн
ProtoShare — это объединенный инструмент в режиме онлайн для построения каркасов и динамичных, управляемых прототипов , которые затем члены команды могут просматривать, а также комментировать в режиме реального времени.

9. HotGloo

Тип: Онлайн
Hot Gloo — это приложение для создания каркаса в режиме онлайн, которое в настоящее время также является бесплатной бета-версией. Вы можете перетаскивать и вставлять элементы, масштабировать, объединять, называть и переименовывать их. Также Вы сможете редактировать, комментировать и передавать любой элемент процесса разработки коллегам и клиентам.

10. MockFlow

Тип: Онлайн
MockFlow — это проектные, объединенные (в реальном времени) модели интерфейсов пользователя для вашего программного обеспечения и .

11. Gliffy

Тип: Онлайн
Бесплатное программное обеспечение для построения каркаса Gliffy дает возможность простого создания каркасов и передачи . Вы можете также экспортировать свой каркас для будущего использования в других приложениях.

Читайте так же:
Как сделать бесконечную ленту в Инстаграм
12. Cacoo

Тип: Онлайн
Cacoo — это удобный для пользования онлайн-инструмент для рисования, который позволяет создавать множество диаграмм, таких как карты сайта, каркасы и сетевые диаграммы.

13. Creately

Тип: Онлайн / Flash-Flex
Мощный и простой для использования диаграммный онлайн-инструмент, который работает прямо в вашем . Благодаря интуитивному интерфейсу пользователя и встроенным свойствам совместной работы, Creately облегчает работу с командами.

14. LovelyCharts

Тип: Онлайн
Lovely Charts — это приложение для создания диаграмм, позволяющее создавать профессиональные диаграммы всех видов, такие как блок-схемы, карты сайтов, бизнес-процессы, организационные структуры, каркасы и многое другое…

15. Mockup Builder

Тип: Онлайн / Silverlight
Mockup Builder — это новый взгляд на решение старой проблемы создания прототипов и предоставления набросков клиентам.

16. LucidChart

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

Список сервисов для прототипирования сайта

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

Прототипирование сайтов

Где делать прототип сайта

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

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

Вариант 1: Wireframe CC

Это самый популярный сервис у веб-дизайнеров. Здесь можно буквально за пару минут сделать дизайн-макет сайта на несколько устройств. При этом вам не потребуется чтения инструкций и мануалов, так как всё интуитивно понятно. Основной функционал сайта предоставляется на бесплатной основе и без регистрации. Единственным серьёзным недостатком является тот факт, что интерфейс на английском языке.

После регистрации вы сможете сохранять часть своих макетов и делиться ими с коллегами и/или заказчиками. Также созданные прототипы можно скачивать в виде обычного изображения.

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

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

Wireframe-CC-interface-i-gotovii-prototip-saita

Разница между платной и бесплатной подпиской в том, что вы можете работать сразу над несколькими макетами в одном аккаунте (при платной подписке). Также некоторым элементам в премиум-аккаунте можно задавать анимацию и т.д. Всё это можно без проблем экспортировать в PDF и PNG, в то время, как во free-версии экспорт сильно ограничен. Платная подписка, на момент написания этой статьи, стоила 15$ в месяц.

Вариант 2: Wires

Данный вариант не существует, как отдельное решения, а является одним из разделов сайта Quirktools.com. Тем не менее по функционалу он не уступает предыдущему сервису. Интерфейс тоже на английском языке, также есть платные и бесплатные аккаунты. Вы можете работать с прототипами, не проходя регистрации, но в таком случае вы сможете работать только с одним прототипом. Если вам нужно выполнить что-то серьёзнее одного-двух набросков, то рекомендуется пройти регистрацию. Оплачивать подписку необязательно.

Glavnaya-stranitza-na-saite-Wires

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

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

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

Sozdanie-novogo-proekta-na-Wires

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

Читайте так же:
Как зайти в БИОС на ноутбуке ASUS

Instrumenti-dlya-sozdaniya-prototipa-saita-v-Wires

К объектам на прототипе можно добавлять комментарии. Дополнительно вы можете просмотреть, как это всё выглядит, если убрать верхнее меню с управляющими элементами. Если всё хорошо, то работу можно сохранить как изображение или в виде PDF-файла. Также проект будет сохранён в библиотеке вашего аккаунта.

Nastroika-parametrov-elementov-v-redaktore-Wires

Сервис очень прост и имеет базовые возможности для редактирования первичного дизайн-макета. Некоторые дополнительные возможности, а также снятие ограничений по количеству работ в аккаунте можно убрать. Цена за месяц премиум-подписки – 10$.

Вариант 3: InVision App

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

Glavnaya-stranitza-InVision-App

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

Rabota-s-prototipom-v-InVision-App

Возможно, некоторые пользователи могли бы предположить, что стоить такое «удовольствие» будет немало. На самом деле здесь есть только один вариант подписки, которую нужно оплачивать каждый месяц. Цена – 15$.

Вариант 4: NinjaMock

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

NinjaMock-stranitza-s-prototipom

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

  • Создание первого пробного макета – бесплатно;
  • Создание одного проекта – 4$;
  • Создание трёх и более проектов 10-12$.

Primer-maketa-saita-v-NinjaMock

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

Вариант 5: Moqups.com

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

Moqups.com-glavnaya-stranitza

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

Primer-rabochey-oblasti-v-Moqups.com

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

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

Вариант 6: Photoshop

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

Primer-razrabotki-saita-v-Photoshop

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

Как видите, кроме набросков «на бумаге» их можно делать в специализированных сервисах и программах. Функционал их примерно схож, но где-то он платный, а где-то бесплатный. Некоторые дизайнеры используют несколько из описанных сервисов, разделяя их под конкретный тип задач.

Ссылка на основную публикацию
Adblock
detector