Інструменти дизайну інтерфейсу користувача: те, що вам насправді потрібно (видання за грудень 2018 року)

Ця стаття спочатку з’явилася на Truth About Design, платформі для відвертих істин та вказівок для дизайнерської галузі.

Відео-версія цієї статті:
https://www.youtube.com/watch?v=vqGxYZKTTw0

Одне з найпопулярніших запитань, яке виникає під час наставництва студентів, - “Які інструменти я повинен використовувати для дизайну інтерфейсу? Ескіз? Photoshop? Що з Adobe XD? "(Вони завжди запитують про Adobe XD.)

TL; DR: Використовуйте ескіз для роботи з низькою та середньою відданістю, а Principle - для роботи з високою точністю. InVision незабаром застаріє. Зверніть пильну увагу на Figma та Framer X. Станом на грудень 2018 року жоден інший інструмент дизайну інтерфейсу не варто використовувати у реальному робочому середовищі.

У цій статті ми зосереджуємось на інструментах для каркасної, прототипізації та анімації. Звичайно, є й інші чудові інструменти для дослідження UX, співпраці тощо

Правда про інструменти дизайну інтерфейсу користувача: більшість з них однакові

До 2011 року Photoshop був єдиним інструментом, яким користувалися UX-дизайнери. Photoshop, однак, не є інструментом дизайну інтерфейсу. Це редактор зображень, який має кілька функцій, корисних для дизайну інтерфейсу, і безліч функцій, яких немає. Але оскільки Photoshop був настільки великий і настільки популярний, і працював досить добре, ніхто (включаючи мене) не думав, що будь-коли потрібно буде використовувати щось інше.

У 2011 році запустили додаток Sketch. Це був перший спеціалізований інструмент дизайну інтерфейсу. Оскільки в той час більше ніхто не робив спеціалізованих інструментів дизайну інтерфейсу, і люди (включаючи мене) дуже скептично ставилися до цього нового, не доведеного інструменту, Sketch протягом багатьох років мав змогу накопичити тонни ринкової частки, перш ніж хто-небудь інший зміг відповісти. Вони також грали дуже розумно, перетворивши Sketch на платформу, для якої інші могли розробити додаткові додатки, тим самим швидко розширивши сферу охоплення та екосистеми.

Ескіз на той час був у дуже особливій позиції, оскільки вони запропонували інструмент, який був справді в 10 разів кращим за конкуренцію, і зробили це корисним для компаній та команд витрачати гроші та час на перехід на новий робочий процес для своїх організацій.

Мужність розробників Sketch поставити себе там та створити новий інструмент, а їх наступний успіх призвів до затоплення послідовників трендів, що будують нові інструменти дизайну інтерфейсу. Однак більшість із них пропонують мало чим відрізнятись від ескізу.

Задавати питання "який інструмент проектування інтерфейсу краще, X чи Y" - це як запитати "яка свердла краще, Bosch чи Dewalt". Усі вони роблять те саме, що дуже схожі способи. Справжнім вирішальним фактором, для якого інструменту ви будете користуватися, є не те, що він може робити, оскільки всі інструменти можуть створити інтерфейс користувача з основними взаємодіями.

Справжні питання, які вам потрібно задати:

  • Для чого використовується моя команда?
  • Для чого використовується моя компанія?
  • Які галузеві стандарти?

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

Задавати питання "який інструмент проектування інтерфейсу краще, X чи Y" - це як запитати "яка свердла краще, Bosch чи Dewalt".

Ескіз стоїть у положенні, в якому раніше знаходився Photoshop, але вони не опираються на лаврах, як це робив Photoshop. Ескіз повільно робить InVision застарілим, включаючи інструменти для прототипування на основі хмар. Існує ряд сторонніх додатків для анімації для Sketch, які дозволяють зберегти весь робочий процес від низької до високої точності всередині Sketch. Однак я ще не пробував їх, і вони не бачать великої тяги в галузі.

Для мікро-взаємодій, анімації та прототипів високої точності використовуйте Принцип

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

Інструменти для перегляду: Framer X і Figma

Більшість інструментів користувальницького інтерфейсу недостатньо відрізняються від програми "Ескіз", щоб дати справжню причину переключення. Але два інструменти мають зовсім інший підхід до Sketch щодо дизайну інтерфейсу, і оскільки вони побудовані з нуля навколо цього нового підходу, є ймовірність, що це окупиться таким чином, до якого Sketch не зможе налаштувати.

Figma: Документи Google, але для дизайну інтерфейсу

Ви знаєте, як у Документах Google ви та ваші друзі зможете одночасно працювати над цим есе чи тією презентацією, і він завжди автоматично зберігається у хмарі, і ви можете отримати доступ до нього з будь-якого комп’ютера? Це те, що Figma зробила для розробки інтерфейсу. Вони по суті взяли Sketch і помістили його в браузер.

Фігма - найкращий суперник зараз, оскільки:

  • Він має велику фінансову підтримку з Кремнієвої долини
  • Вони випускають оновлення щотижня
  • Це безкоштовно для сольних дизайнерів
  • Вони платформно-агностичні (працюють на будь-якому комп’ютері), тому можуть захопити частку ринку від користувачів, які не є Mac, та людей, які не можуть дозволити собі ескіз
  • Він має законну точку відмежування від Sketch, завдяки її функціям співпраці в реальному часі, що Sketch не може легко копіювати

Framer X: Подолання розриву між дизайном та кодом

Framer X - ще один цікавий інструмент для перегляду. Це відрізняє його глибока інтеграція з інструментами розвитку. Теоретично ви можете розробити в Framer і експортувати готовий до виробництва код. Це може значно прискорити робочий процес та співпрацю між дизайнерами та інженерами. Але чи поліпшення робочого процесу настільки краще, що варто знову перейти на інший інструмент? Чи будуть дизайнери готові поспілкуватися з кодом? На даний момент важко сказати.

Framer також не безкоштовний. Це $ 15 на місяць ($ 12, якщо ви платите щорічно), що дорожче, ніж щорічна ліцензія Sketch. Завдяки своїй ціновій моделі та особливостям я не впевнений, на яку аудиторію вони націлені.

Моя гіпотеза полягає в тому, що інженерна сторона речей є надто складною і поглибленою, щоб сприйняти її інструментом проектування. Мені це дуже нагадує те, що люди намагалися зробити 15 років тому з такими редакторами, як Dreamweaver. Ті, хто ніколи не працював у справжньому жорсткому виробничому середовищі. Але це продуманий інструмент з великими ресурсами, і ми побачимо.

Що з іншими інструментами?

Що стосується налаштувань роботи в реальному житті, я рекомендую вам навіть не займатися будь-якими іншими інструментами, окрім ескізу та принципу. Початківці в кожній галузі люблять замислюватися, який інструмент використовувати, тому що це зробити набагато простіше, ніж насправді робити якісну роботу. Однак, якщо вам просто цікаво експериментувати трохи самостійно, найкращий ресурс для пошуку відповідних нових інструментів для спробу - http://uxtools.co/design - це рейтинг усіх найпопулярніших інструментів дизайну інтерфейсу користувача там негайно.

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

Джамал Ніколс управляє Truth About Design, платформою для відвертих істин та рекомендацій для дизайнерської індустрії.