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

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 дней