Программы для прототипирования сайтов: как создать мокап

Sketch

Первое приложение в нашем списке — Sketch. Лучший аналог, который вы можете найти для операционной системы macOS. Это редактор векторной графики, разработанный голландской компанией Bohemian Coding. Как и в случае с Figma, у этого инструмента есть собственное сообщество и он поддерживает множество различных плагинов, чтобы упростить его использование. Он также обеспечивает командную работу и онлайн-проекты.

Кроме того, Sketch имеет глубокую интеграцию с собственными инструментами macOS: поддержка iCloud, Time Machine, автосохранение, рендеринг собственных шрифтов, макет широковещательной передачи на мобильном устройстве и многое другое.

Особенности:

• позволяет создавать векторные изображения, иконки, ретушировать фотографии и готовить дизайн сайтов;
• вам нужно всего 38 МБ свободного дискового пространства для загрузки Sketch;
• несмотря на англоязычный интерфейс, инструмент прост и удобен в использовании;
• программа принадлежит к серии условно-бесплатных приложений, срок действия которой истекает после 30 дней использования пробного режима.

Стоимость: доступна пробная версия, подписка стоит 9 долларов в месяц

Операционная система: macOS, iOS

Официальная страница: Sketch

Font Reach

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

Mockplus

Сайт: mockplus.com

Английский язык

Цена: 199 долларов в год или 399 долларов единовременно

Бесплатная версия: 8 дней, без ограничений

Mockplus мало чем отличается по функциональности от «Мокапов». Есть много схематичных элементов (около 3000) и интуитивно понятный интерфейс. Есть версия для мобильных устройств — для iOS и Android. Вы можете создавать прототипы на своем ноутбуке, планшете или iPhone.

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

Вы можете выбрать стандартное разрешение (например, 1024×1366 для iPad Pro)
или установите желаемый размер

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

Mockplus делает понятные и красивые прототипы

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

Form

Подключите iPhone и iPad к компьютеру через USB или по беспроводной сети и просматривайте макеты прямо на мобильных устройствах.

Origami Studio

Origami Studio — это приложение для macOS, созданное и используемое Facebook. Также существует аналоговое мобильное приложение, которое позволяет просматривать прототипы на реальном устройстве.

Facebook использует этот инструмент для создания прототипов ежедневно. В 2013 году Origami Studio стала доступна по всему миру. Первоначально он работал с Quartz Composer, но не секрет, что эта часть среды Xcode — не лучший способ прототипирования. Поэтому в прошлом году Facebook представил Origami Studio, более старый прототип инструмента, который работает в собственной среде. Его производительность значительно улучшилась на этом этапе, но, к сожалению, он по-прежнему доступен только для пользователей Mac.

Gravit Designer

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

UX Myths

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

Lost Type

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

Inkscape

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

Zeplin

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

Сервис не предоставляет инструментов для разработки графического дизайна проекта с нуля. Чтобы импортировать макеты дизайна в Zepilin, вам необходимо скачать специальный плагин для графического редактора, используемого дизайнером. После установки плагина и импорта дизайна в программу Zepelin автоматически сгенерирует спецификацию дизайна, детали программного кода в XML и CSS, стили и многое другое. Таким образом, разработчики могут получить необходимый код одним щелчком мыши.

Особенности:

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

Стоимость: бесплатно или от 6 долларов в месяц

Операционная система: Windows, macOS

Официальная страница: Zeplin

Iconfinder

Огромная база иконок для любых целей.

Blocs

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

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

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

Особенности:

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

Стоимость: 99 долларов единовременно

Операционная система: macOS

Официальная страница: Блоки

Webflow

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

Mobile Patterns

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

Marvel

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

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

Adobe XD

Adobe XD — реальный конкурент Figma, который имеет почти те же функции, но за определенную плату. Это векторный инструмент, разработанный и опубликованный Adobe Inc для проектирования и создания прототипов пользовательских интерфейсов для веб-приложений и мобильных приложений. Предназначен для дизайнеров, творческих коллективов и организаций, которым необходимо создавать крупномасштабные проекты.

Особенности:

• интерактивные прототипы с анимацией, голосовым прототипированием, поддержкой игр и превью на мобильных устройствах;
• взаимодействие прототипа с переходами между областями;
• может открывать файлы из других продуктов Adobe и Sketch;
• возможность совместной работы с файлами или обмена в режиме «только просмотр»;
• возможность сохранения в облаке с сопутствующими материалами;
• работает со многими плагинами;
• есть мобильное приложение.

Стоимость: 770 рублей в месяц или 7700 рублей в год

Операционная система: Windows, macOS, Android и iOS

Официальная страница: Adobe XD

JustInMind

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

Fluid UI

Сервис создан для прототипирования мобильных онлайн-приложений и содержит набор элементов, подходящих для iOS, Android и Windows 8. Вы можете бесплатно разработать десять страниц для проекта. Если вы хотите большего, вам придется доплатить.

Типы прототипов

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

• с низкой детализацией;
• с высокой детализацией.

По возможности взаимодействуйте с прототипом:

• графический (статический) — в виде графического изображения;
• интерактивный — с элементами взаимодействия, например, с интерактивными ссылками, рабочим слайдером, всплывающими формами или другими активными элементами.

На месте хранения:

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

Эскиз страницы

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

Прототип сайта с низкой детализацией

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

Интерактивный

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

Какой тип выбрать?

Обобщим и выделим типы прототипов:

• Набросок на бумаге или статический прототип с низкой детализацией;
• Высокодетализированный статический прототип;
• Интерактивный прототип с высокой детализацией.

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

iPhone Mockup

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

Axure

Сайт: axure.com

Английский язык

Цена: от 29 долларов в месяц или 495 долларов единовременно

Бесплатная версия: 30 дней, без ограничений

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

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

Начало работы с Axure

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

Red Pen

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

Antetype

Antetype — это инструмент исключительно для прототипирования. Это профессиональное программное обеспечение для macOS, предназначенное для интерактивного прототипирования.

Особенности:

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

Стоимость: Есть бесплатная, платная пробная версия — от 189 долларов

Операционная система: macOS, iOS

Официальная страница: Antetype

Subtle Patterns

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

Как прототипирование помогает экономить деньги?

Хорошо спроектированный прототип — это конструкция, которая сокращает время на более поздних этапах разработки. Он позволяет представить проект в окончательном виде и внести изменения еще до начала работ. После этого остается только технически реализовать задуманное, ничего не придумывая на ходу. Время, потраченное на прототип, окупится в будущем, так как уменьшит количество улучшений, которые появятся в конце разработки. Они все равно будут, но так будет минимум. Без прототипа может случиться так, что после запуска добрую половину сайта придется переделывать. И еще один программист, один верстальщик, один дизайнер заработает… И всем опять придется платить. Приведу простой пример. Тот факт, что на ремонт разрабатываемого прототипа уйдет 30 минут, превратится в 300 минут рабочего времени на разработку. Создание прототипа веб-сайта — это часть работы, за которую отвечает интернет-маркетолог, и дальнейший успех веб-сайта зависит от того, как он будет выполнен (какова будет конверсия, как будут себя вести пользователи, будет ли им удобно взаимодействовать с ними) сайт и т д.). Надеюсь, теперь понятно, почему нельзя недооценивать важность создания прототипов страниц сайта.

UXPin

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

Пошаговая разработка

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

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

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

Figma

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

Большинство дизайнеров уже знакомы с этим инструментом пользовательского интерфейса. Хотя Figma считается программой UX-дизайна, в ней также есть программное обеспечение для быстрого прототипирования. Другие функции включают в себя плагины, такие как Figmotion и Autoflow, а также Arc Tool и Vector Networks.

Balsamiq

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

Vectr

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

InVision

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

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

Особенности:

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

Стоимость: бесплатно или от $ 7,95

Операционная система: Интернет

Официальная страница: InVision

Другие сервисы

Если вам не нравятся какие-либо услуги, попробуйте следующее:

• Gomockingbird.com — это приятный простой сервис, стоимость которого начинается от 12 долларов в месяц. Пробный период — 6 дней.
• Mockflow.com — еще один простой редактор. Стоит от 14 долларов в месяц, пробный период — 14 дней.
• Mockupbuilder.com — ничего экстраординарного: большой набор элементов, удобное управление, возможность совместной работы. Но это недорого — от 7 долларов в месяц. Бесплатно — 14 дней.
• Marvelapp.com интересен тем, что есть шаблоны макетов для любого устройства, в том числе и для смарт-часов. Есть бесплатная версия, но скетчи можно скачать только в платной — она ​​стоит от 14 долларов в месяц.

I want hue

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

Framer

Framer известен своей универсальностью, универсальным интерфейсом, функциональным дизайном и четкими шаблонами. Этот инструмент расширяет динамику проектирования за счет перетаскивания, поскольку фреймворк основан на коде и использует CoffeeScript для создания прототипов.

Купить рекламу Деактивировать

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

Pidoco

Сайт: pidoco.com

Английский язык

Цена: от 12 долларов в месяц

Бесплатная версия: 31 день

Сервис хорош своей простотой. Шаблонов и элементов не так много (по сравнению с другими сервисами). Интерфейс интуитивно понятен — в Pidoco легче ориентироваться, чем в любом другом сервисе. Открываешь и сразу работаешь. Подходит для новичков: минималистичное меню, удобное управление, один месяц бесплатного использования.

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

интересно отметить, что уже «собрано несколько прототипов:

Прототип страницы результатов поиска Google. Возьми за основу —
и сделай что-нибудь свое

Pttrns

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

Ninjamock

Сайт: ninjamock.com

Английский язык

Цена: от 10 долларов в месяц (или бесплатно, но эскизы будут видны другим пользователям)

Бесплатная версия: да

Сервис интересен тем, что платная и бесплатная версии одинаково функциональны. Но в бесплатной версии ваши проекты общедоступны — их видят все остальные пользователи. Если вас это не беспокоит и вы не хотите платить, Ninjamock определенно ваш выбор.

Рабочее пространство Ninjamock

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

Ninjamock работает только в браузере — настольной версии нет.

Когда нужно делать прототипы страниц сайта?

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

Как сделать прототип?

Подготовительный этап

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

• Для кого конкретно этот сайт или страница?
• Каковы наиболее частые возражения этих людей по поводу того или иного продукта или услуги? Какие минусы?
• Каковы основные факторы при принятии решения о размещении заказа?
• Какие каналы коммуникации будут наиболее удобны для этой аудитории?
• И много других.

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

• вся маркетинговая база будущего сайта;
• создается понятный пользовательский интерфейс.

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

Какие есть методы разработки?

Эскиз на бумаге

Самый простой способ разработки — нарисовать прототип вручную. Берем листы бумаги, карандаши, ручки, краски и нарисуем схему преимуществ будущей страницы:

• очень быстрое развитие
• это бесплатно

Растрескивание:

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

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

Цифровой эскиз

Цифровая версия предыдущего метода работает в некоторых онлайн-сервисах построения диаграмм или в графическом редакторе. Для создания прототипов сайтов мы используем онлайн-сервис Miro.com. Для разработки используются простые геометрические фигуры разного цвета (круг, квадрат, прямоугольник), текст, изображения. Из простых элементов создается прототип почти так же быстро, как на карте преимущества:

• быстрое развитие
• доступно в облаке
• легкость доработок
• это бесплатно

Растрескивание:

• нет ссылки на реальный размер сайта
• нет возможности создавать интерактивные элементы

Разработка с помощью специальных инструментов

Для глубокой разработки прототипа используются специализированные сервисы / программы по прототипированию веб-сайтов. Преимущества:

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

Растрескивание:

• требуется время, чтобы изучить программу / услугу
• средняя скорость разработки
• полная платная версия необходима для постоянной работы

Сегодня существует большое количество инструментов разработки. Они могут быть выполнены в виде:

• онлайн-сервис в браузере;
• программы для ПК.

Pencil Project

Помогает создавать макеты для мобильных приложений и веб-страниц. Pencil Project — это бесплатный сервис с открытым исходным кодом. Внутри объединены коллекции популярных элементов: можно сосредоточиться на классических решениях или понять, чего не хватает в мире дизайна, и создать что-то новое.

Lunacy

Lunacy — это приложение для Windows, которое открывает, редактирует и сохраняет файлы .sketch. Другими словами, это долгожданный Sketch для Windows. Приложение решает ряд проблем разработчика и улучшает переход от дизайна к разработке.

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

Еще одна интересная функция — автоматическая загрузка Google Fonts. Когда пользователь открывает файл с отсутствующими шрифтами, Lunacy проверяет те же шрифты Google и загружает отсутствующий.

Особенности:

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

Без затрат

Операционная система: Windows

Официальная страница: Безумие

Iplotz

Сайт: iplotz.com

Английский язык

Цена: от 15 долларов в месяц

Бесплатная версия: да

У Iplotz есть полная бесплатная версия для мобильных устройств Windows, Mac и Android. Ограничения небольшие: вы можете работать только с одним проектом (максимум 5 страниц-прототипов), и вы не можете привлекать к работе других людей. Если вам просто нужно набросать контур страницы, это не повредит.

Рабочее пространство Iplotz

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

Вы можете загрузить эскиз в формате PNG, PDF или HTML.

Moqups

Простой интерфейс, множество вариантов кнопок, контейнеров, полей, шаблонов для приложений iPhone и iPad: все это собрано в сервисе для прототипирования в HTML5.

Axure RP

Axure RP сочетает в себе мощные инструменты дизайна, импорт SVG, интеграцию со Sketch и Adobe XD с прототипированием мирового класса. Вы можете легко обмениваться прототипами Axure RP и артбордами Adobe XD, быстро рисовать и собирать входные данные над экранами, проверять макет, получать фрагменты CSS и загружать ресурсы, а также преобразовывать статические изображения в динамические прототипы Axure Cloud.

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

Proto

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