UX дизайнерам до уваги: топ кращих інструментів для прототипування

Після того, як UX дизайнер зібрав інформацію про проблеми користувача та провів дослідження щодо свого проекту, він починає роботу над дизайном з напрацювання декількох ідей та варіантів рішень. Отут і відбувається справжня магія. Дизайнери роблять скетчі, щоб виявити, яке з цих рішень буде співпадати з баченням продукту замовником та відповідати користувацьким потребам. Далі вони зводять вибір до одного найпотужнішого концепту. На його основі створюється робочий прототип.

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

UX дизайнери створюють прототипи  —  перші моделі продукту, які здатні дати розуміння, над чим ще треба працювати, як тестити дизайн для користувацького інтерфейсу на сайтах та додатках. Прототипи дають набагато більше за статику. Вони також дають змогу продемонструвати  функціональність інтерфейсу, інтерактивність, анімацію та загальне юзабіліті.

Існує декілька діджітал-інструментів, які доступні дизайнерам наших днів, кожен – з власними можливостями та результатом. Але жодна не стоїть на місці, розвивається з кожним днем, тож наразі пошук платформи для себе  стає дуже захоплюючим.

Є багато факторів, які потрібно врахувати, коли обираєш інструмент для прототипування. Серед найважливіших:

  • Простота вивченняНе всі платформи – інтуітивно зрозумілі для використання. Наскільки легко буде нею користуватися навіть початківцю?
  • ВартістьСкільки ви готові інвестувати у новий, невідомий інструмент? Вартість коливається від безкоштовної до декількасот доларів на рік.
  • Типи файлів та вихідний файлЯк ви бажаєте експортувати свій прототип або робити демо-версію?
  • Мета проектуЯка ваша кінцева мета щодо проекту? Чи хочете ви презентувати клієнту продукт, близький до повноцінного? Готуєте робочу версію для колег з аннотаціями? Демонструєте анімаційний інтерактивний дизайн-концепт для всієї команди? Тестуєте дизайн для користувача? Різні платформи розроблені відповідно до різних цілей.

Sketch + InVision

Інструмент, відомий як Sketch, швидко став одним з найпопулярніших платформ для роботи у UI, витіснивши з ланки таких гігантів як Adobe Photoshop та Illustrator, а разом з ними і десяток інших організацій. Дизайнери користуються Sketch для створення якісних інтерфейсів на основі вайрфреймів у низькому розширенні. Основним недоліком Sketch є відсутність можливості імітувати взаємодію користувача зі сторінкою: кліки, зависання, таппінг тощо без сторонніх інтегрованих патчів. Отже, дизайнери навчилися створювати таку імітацію за допомогою інтерактивних інструментів, таких як InVision. Натомість у InVision немає можливості малювати чи створювати дизайни  —  тут все зводиться виключно до інтеракцій, під’єднання сторінок, анімації для дизайну. InVision та Sketch разом дозволяють дизайнерам будувати прототипи для повноцінного тестування та фідбеку.

Нещодавно, InVision’s презентували нову InVision Studio. Ця нова платформа може покласти край тандему вищезгаданих програм, оскільки тепер дизайнери можуть робити усе разом в одній платформі, що, напевне, виключить Sketch з рівняння. Побачимо.

Axure

Axure, випущений у 2003, різко підскочив у популярності тому, що дизайнерам був потрібний інструмент для просунутої імітації взаємодії з користувачем. Тож програма включає індивідуально розроблені анімації та взаємодію з JavaScript. Але у неї є дуже обговорюваний недолік: вихідний файл не може бути збережено у векторному форматі, Axure переводить зображення у bitmap. Тобто, прототип може втрачати у якості при зміні. І загалом, програма є складнішою, необхідно більше часу на її вивчення.

Figma

Інструмент Figma створений для розробки «drag-and-drop» інтерфейсів та інтерактивних прототипів, і це – нове слово для UX дизайнерів, особливо для тих, кто не знайомий з HTML та CSS. Платформа включає можливість малювання у високій якості, тому ви можете створювати продукт, близький до фінального, просто у одній програмі. З корисних фіч: автоматичне налаштування дизайну до будь-якого екрану, адаптивні дизайни, система «layout grids» для впорядкованих елементів, відступи яких зберігаються автоматично, без додаткових маніпуляцій з композицією та інше.

Adobe XD

Офіційно програма з’явилася у жовтні 2017, і вона не має стільки дизайнерських можливостей як, наприклад, «скетч». Але це тому, що у Adobe XD є своя ціль. Продукт створено спеціально для дизайнерів, які хочуть створювати свої прототипи в одному місці. Софт має кнопку «play», щоб показати демо-версію прототипу у будь-який час. Adobe має недоліки: доволі часто може «вилітати», тож доведеться зберігатися частіше. Але тут є круті фішки – наприклад,  робота з текстом, з окремими елементами, можливість показувати прототип у повному масштабі – тож, як мінімум, на AdobeXD варто поглянути.

Webflow

Webflow було винайдено у 2013; це – результат роботи програми акселератора Combinator’s. Першопочатково, його створили як інструмент для розробки повноформатних кастомних сайтів. Хороший інструмент для створення інтерактивних дизайнів, має інтуїтивно зрозумілий інтерфейс для тих дизайнерів, що хоча б дещо розуміють у HTML та CSS. Інтерфейс Webflow дає можливість  створити стильний продукт, детальніший, ніж на інших  CMS-платформах як Squarespace чи Wix, які не створені для прототипування.

Мати такий широкий вибір програм – рай для дизайнера нашого часу. Адже всі вони, врешті-решт, лише інструменти для того, щоб ми розвивали себе як спеціалістів. І, першим чином, спеціалісту потрібно визначитися з метою його роботи, щоб не заблукати у нетрах варіативності інтерактивних платформ. Отже, якщо губитеся, що обрати, подумайте насамперед, для чого вам необхідна та чи інша програма.

 

Всі статті
Контакти