На сегодняшний день дизайн мобильных приложений и дизайн веб-страниц, является важным аспектом при разработке программного обеспечения или же веб-ресурсов. В этой статье проводится анализ и сравнение существующих платформ для создания прототипов интерфейсов веб-сайтов и приложений.
Ключевые слова: проектирование интерфейсов, разработка интерфейсов, создание прототипов, прототип.
На сегодняшний день дизайн мобильных приложений и дизайн веб-страниц, является важным аспектом при разработке программного обеспечения или же веб-ресурсов. Так как при разработке хорошего дизайна пользователю удобнее ориентироваться в контенте, что уменьшает время на поиск необходимой ему информации и не дает ему уйти к конкурирующим сервисам. Так же создание понятного дизайна способствует увеличению, количество пользователей приложения или веб-ресурса и времени, которое пользователь проводит за его использованием. Все эти факторы говорят о том, что разработка хорошего интерфейса на начальных этапах проектирования информационных систем очень важно и для того, чтобы не допустить ошибок в будущем многие разработчики прототипируют интерфейсы своих сервисов в специальных программах. В этой статье я проанализирую лучшие программы, которые существуют на рынке для создания интерфейсов будущих веб-ресурсов и мобильных приложений.
AdobePhotoshop
Adobe Photoshop это многофункциональный графический редактор, разработанный и распространяемый фирмой Adobe Systems в феврале 1990 года. Первоначально программа была создана для редактирования графических изображений, однако с распространением сайтов, а позже и мобильных приложений, многие дизайнеры стали использовать эту программу для создания прототипов своих проектов. На сегодняшний день появилось множество программ для создания макетов как для сайтов, так и для мобильных платформ, однако Adobe Photoshop до сих пор используются многими дизайнерами и разработчиками в индустрии. [1]
Sketch
Sketch — это векторный графический редактор для macOS, впервые выпущенный 7 сентября 2010 года голландской компанией Bohemian Coding. Используется для проектирования интерфейсов мобильных приложений и веб-сайтов. Поддерживает возможность создания интерактивных прототипов. Так же в программе тестируются совместная работа с прототипами интерфейсов, но эта функция не поддерживает работу нескольких пользователей в режиме реального времени. Данное программное обеспеченье в свое время стало альтернативой для дизайнеров-макетов, использующих операционную систему MacOS, так как Sketch является узконаправленным продуктом для создания прототипов мобильных и веб-приложений. [2]
Proto.io
Proto.io — это платформа прототипирования приложений, запущенная в 2011 году и разработанная компанией PROTOIO Inc. Изначально предназначенная для прототипирования на мобильных устройствах, Proto.io был расширен, чтобы позволить пользователям прототипировать приложения для всего, что имеет экранный интерфейс, включая Smart TV, интерфейсы цифровых камер, автомобили, самолеты и игровые приставки. Proto.io может имитировать все действия приложения: тачскрин, переходы экрана и анимацию. Так же сервис поддерживает совместную работу пользователей над прототипами в режиме реального времени. [3]
Adobe Experience Design
Adobe Experience Design, так же известная как Adobe XD — программа для разработки интерфейсов от Adobe Systems выпущенная в 2015 году. В данной программе предоставлен минимальный функционал необходимый для создания прототипов сайтов и мобильных приложений. Так же программа поддерживает векторную графику и создание активных прототипов. Программа поддерживает совместную работу нескольких пользователей над одним проектом, но не в режиме реального времени, а с сохранением изменений версий. [4]
Figma
Figma это первый облачный инструмент для разработки пользовательского интерфейса, представленный в 2016 году. В отличии от своих конкурентов Figma предлагает разрабатывать интерфейсы в веб-браузере, а это значит, что разрабатывать прототипы можно с любого устройства, поддерживающего современные веб-браузеры. Так же в Figma есть возможность организации совместной работы в режиме реального времени. Сервис имеет широкие возможности для интеграции с корпоративным мессенджером Slack и инструментом для высокоуровневого прототипирования Framer. Figma позиционируется создателями как основной конкурент программным продуктам компании Adobe. [5]
В ходе анализа сервисов для проектирования интерфейсов была создана сравнительная таблица, представленная ниже. В таблице рассмотрены такие сравнительные критерии как: Поддерживаемые платформы, поддержка интерактивных прототипов, возможность предпросмотра интерфейса на мобильном устройстве, Поддержка совместной работы пользователей.
Таблица 1
Сравнительная таблица сервисов для проектирования интерфейсов
|
Название |
Год выпуска |
Поддерживаемые платформы |
Поддержка интерактивных прототипов |
Пред просмотр прототипа на устройстве |
Поддержка совместной работы |
|
Adobe Photoshop |
1990 |
Windows, macOS(2) |
- |
- |
- |
|
Sketch |
2010 |
macOS(1) |
+ |
- |
0,5(beta-версия) |
|
Proto.io |
2011 |
Веб-браузеры(3) |
+ |
+ |
+ |
|
Adobe Experience Design |
2015 |
Windows, macOS(2) |
+ |
+ |
0,5 |
|
Figma |
2016 |
Веб-браузеры(3) |
+ |
+ |
+ |
В результате моего сравнения программа Adobe Photoshop набрала 2 балла, программа Sketch набрала 2.5 балла, веб-сервис Proto.io набрал 6 баллов, Adobe Experience Design набрал 4.5 балла, а веб сервис Figma 6 баллов. В результате моего анализа можно сказать, что веб-сервисы Figma и Proto.io имеют весь необходимый функционал для разработки интерфейсов, а также в них можно работать с любой платформы поддерживающие современные браузеры. Но также стоит сказать, что и программа Adobe Experience Desing обладает практически всем необходимым функционалом и пытается поддерживать как можно больше платформ.
Литература:
- Молочков, В. П. Adobe Photoshop CS6: учебное пособие / В. П. Молочков. — 2-е изд. — Москва: ИНТУИТ, 2016. — 388 с. — Текст: электронный // Лань: электронно-библиотечная система. — URL: https://e.lanbook.com/book/100563 (дата обращения: 21.02.2020). — Режим доступа: для авториз. Пользователей;
- Официальный сайт Sketch [Электронный ресурс]: — Режим доступа: https://www.sketch.com/docs/, свободный (дата обращения: 21.1.2020). — Загл. с экрана.;
- Официальный сайт Proto.io [Электронный ресурс]: — Режим доступа: https://blog.proto.io/, свободный (дата обращения: 21.1.2020). — Загл. с экрана.;
- Свободная энциклопедия — Википедия [Электронный ресурс]: — Режим доступа: https://ru.wikipedia.org/wiki/Adobe_XD, свободный (дата обращения: 21.1.2020). — Загл. с экрана.;
- Сайт Skillbox [Электронный ресурс]: — Режим доступа: https://skillbox.ru/media/design/chto_takoe_figma/, свободный (дата обращения: 21.1.2020). — Загл. с экрана.;
