Проектирование — это первый этап создания пользовательского интерфейса, который дает возможность визуализировать логику и концепцию взаимодействия человека с программным обеспечением. Для создания прототипов существует множество инструментов, и в этой статье команда SpaceLAB подготовила обзор наиболее функциональных из них.
Moqups — это облачная платформа для создания дизайна прототипов сайтов, мобильных приложений и диаграмм. Она позволяет работать над макетом сразу нескольким специалистам в режиме реального времени и напрямую интегрируется с JIRA, что делает ее практически незаменимой для командной разработки. Кроме того, Moqups обладает внутренней системой комментариев и заметок, что существенно упрощает коммуникацию.
Одно из основных преимуществ Moqups в том, что он позволяет создавать интерактивные макеты. Это дает возможность проектировать не только контент отдельных страниц, но и полноценные сценарии взаимодействия с пользователем. Таким образом становится проще обнаружить скрытые проблемы в интерфейсе и устранить их еще на ранних этапах разработки.
Другие плюсы Moqups:
Из минусов можно выделить только два пункта: отсутствие русского языка и бесплатной версии. Пользователям доступно три уровня подписки, стоимостью от $13, однако возможности платформы полностью оправдывают такой ценник.
Еще один популярный графический редактор для веб-дизайна. Как и Moqups, Figma хранит данные в облаке и позволяет работать над проектом одновременно нескольким специалистам.
Редактор предназначен для создания:
С Figma можно работать не только в браузере, но и в десктопных версиях на Windows и Mac. Причем настольные приложения позволяют создавать макеты офлайн, и после подключения к Сети все изменения автоматически синхронизируются с облаком.
Преимущества Figma при проектировании интерфейса:
Комментирование. Обеспечивает коммуникацию внутри команды разработчиков.
Стоит отдельно добавить, что Figma автоматически транслирует дизайн в готовый CSS-код, чем в значительной мере облегчает работу фронтендерам. Однако, здесь есть и обратная сторона — не все инструменты разработчиков поддерживают макеты Figma, например Avocode с этим справится без проблем, а вот с Zeplin и многими другими могут возникнуть проблемы.
Что касается стоимости, то здесь есть несколько вариантов: можно воспользоваться ограниченной бесплатной версией, или приобрести один из вариантов платных подписок.
Sketch — это профессиональный инструмент для разработки дизайна интерфейсов, который поможет в реализации проекта на всех стадиях — от визуализации первых идей, до передачи разработчикам. Это родной редактор для macOS, обладающий полной поддержкой цветовых профилей P3, встроенным рендерингом шрифтов и прекрасной производительностью. К тому же, Sketch по умолчанию поддерживает совместную работу над проектом.
Платформа заточена исключительно на работу с дизайном. Здесь нет инструментов для создания 3D-графики, обработки фото, пошаговой анимации и прочих возможностей. С одной стороны это может показаться недостатком, но с другой — делает платформу предельно удобной и понятной для дизайнера.
Отдельно стоит упомянуть утилиту Sketch Mirror, которая позволяет в режиме онлайн просматривать созданный дизайн на мобильном устройстве и простым свайпом перелистывать артборды на рабочем столе. Однако, за все плюсы есть своя плата. Рабочие файлы Sketch невозможно открыть в других программах, плюс он не сохраняет документы в формате psd, из-за чего могут возникнуть проблемы при работе в команде. Кроме того, сервис доступен только на macOS.
Мощный инструмент для проектирования интерфейсов, который отлично подойдет тем, кто уже использует продукты Adobe. Работая с XD, вы можете в несколько кликов переносить растровые изображения и векторные слои из Photoshop и обратно, что делает работу с сервисом особенно приятной.
Adobe XD предоставляет возможность совместного редактирования макетов, а также поддерживает контроль версий файлов, благодаря чему любые изменения можно быстро «откатить».
Вероятно самая важная особенность Adobe XD — функция Content-Aware layout. Это метод создания интеллектуальных макетов, который определяет взаимосвязь между объектами на холсте и может автоматически заполнять группы слоев при изменении размера содержимого.
Кроме того, при проектировании интерфейса в Adobe XD у дизайнера есть возможность выбрать тип триггера для взаимодействия с пользователем, например нажатие, перетаскивание, наведение, голосовая команда и прочее. Это позволяет создавать более продуманные и понятные прототипы, а также выявить скрытые проблемы.
Облачный инструмент проектирования, позволяющий создавать интерактивные прототипы сайтов и мобильных приложений. В арсенале Mockplus есть огромная библиотека готовых графических элементов, с возможностью настройки их разных состояний при взаимодействии с пользователем, включая чекбоксы, шкалы рейтинга, слайдеры и прочее. Это значит, что дизайнеру больше не нужно создавать отдельные артборды и отрисовывать стейты, поля и прочее — все это уже создано.
Функционал Mockplus позволяет создавать полноценный дизайн страниц, а для работы с проектированием и прототипированием здесь выделен отдельный удобный интерфейс, с возможностью интеграции с Axure. Кроме того, в сервисе можно эффективно проработать User Flow — пользовательский сценарий взаимодействия с интерфейсом. Mockplus предлагает вечную бесплатную версию, правда она ограничена десятью проектами. Для полноценной работы с сервисом нужно заплатить от $10,95 в месяц плюс $4,95 за работу с облаком.
На рынке существует огромное количество сервисов для проектирования интерфейсов, каждый из которых имеет свои плюсы и минусы. Для работы в AVADA MEDIA мы используем Moqups. Эта платформа идеально подходит для командной работы над проектами и обладает мощными инструментами для реализации проектов любого масштаба.
