Проєктування - це перший етап створення інтерфейсу користувача, який дає можливість візуалізувати логіку і концепцію взаємодії людини з програмним забезпеченням. Для створення прототипів існує безліч інструментів, і в цій статті команда SpaceLAB підготувала огляд на найфункціональніші з них.
Moqups – це хмарна платформа для створення дизайну прототипів сайтів, мобільних програм та діаграм. Вона дозволяє працювати над макетом відразу кільком фахівцям у режимі реального часу і безпосередньо інтегрується з JIRA, що робить її практично незамінною для командної розробки. Крім того, Moqups має внутрішню систему коментарів та нотаток, що суттєво спрощує комунікацію. Однією з основних переваг Moqups є те, що він дозволяє створювати інтерактивні макети. Це дає можливість проєктувати як контент окремих сторінок, а й повноцінні сценарії взаємодії з користувачем. Таким чином стає простіше виявити приховані проблеми в інтерфейсі та усунути їх ще на ранніх етапах розробки.
Інші плюси Moqups:
З мінусів можна виділити лише два пункти: відсутність російської мови та безкоштовної версії. Користувачам доступно три рівні підписки вартістю від $13, проте можливості платформи повністю виправдовують такий цінник.
Ще один популярний графічний редактор для веб-дизайну. Як і Moqups, Figma зберігає дані у хмарі та дозволяє працювати над проєктом одночасно декільком фахівцям. Редактор призначений для створення:
З Figma можна працювати не тільки у браузері, а й у десктопних версіях на Windows та Mac. Причому настільні програми дозволяють створювати макети офлайн, і після підключення до мережі всі зміни автоматично синхронізуються з хмарою.
Варто окремо додати, що 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. Ця платформа ідеально підходить для командної роботи над проєктами та має потужні інструменти для реалізації проєктів будь-якого масштабу.
