Стаття Як стати дизайнером інтерфейсів?

З професією дизайнер асоціюється кропітка робота за монітором, генерація ідей та нескінченне роздуми про те, як краще розмістити чекбокси та кнопочки на лендингу. Ми вирішили розповісти, чим дійсно займається дизайнер інтерфейсів і які є переваги цієї спеціальності.

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

Які обов'язки виконує дизайнер інтерфейсів? Чим займається дизайнер інтерфейсів.

• проектує інтерфейс продукту на основі аналізу користувача;
• розробляє сценарій процесів з урахуванням поведінкової логіки;
• тестує готовий лендинг та при необхідності виправляє помилки;
• створює інфографіку та верстає сайт.

Фахівець поєднує в собі вміння креативно мислити та приймати нестандартні рішення, аналітичні навички та інженерні знання. Професія досить нова, але стрімко набирає популярності на ринку праці. Розберемо з прикладу, як минає робочий день дизайнера інтерфейсів.

Ключові етапи роботи дизайнера інтерфейсів

Вивчення задачі

Замовник чи керівник хоче розробити сайт для продукту «Тури на Місяць». Завдання дизайнера — проаналізувати цільову аудиторію та їхні потреби, зібрати референси, провести дослідження та опитування, щоб з'явилося чітке розуміння, хто купуватиме цей продукт. Тобто зрозуміти проблематику та запропонувати рішення.

Розробка сценарію та прототипу

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

Передача макету у розробку

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

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

Плюси та мінуси професії дизайнера інтерфейсів

Плюси професії

• Конкурентоспроможна заробітна плата.
• Можливість віддаленої роботи.
• Перспективна професія майбутнього.

Мінуси професії

• Професія нова, багато роботодавців не знають про неї.
• У разі роботи на фрілансі необхідно буде власним коштом купувати ПЗ.

Якими знаннями, особистими якостями та навичками володіє дизайнер інтерфейсів

Особисті якості

• Системне мислення
• Інструментальна гнучкість
• Акуратність, ретельність та увага до деталей
• Соціальний інтелект
• Розвинені комунікативні навички
• Аналітичне та розвиток логічне мислення
• Критичне мислення та збір зворотного зв'язку від колег та замовників
• Командна робота над проектом та делегування

Знання

• Продукт наймають щоб зробити роботу: основи JTBD;
• Продукт через інтерфейс входить у діалог з користувачем, щоб допомогти досягти мети;
• Ментальні моделі та бізнес-процеси;
• Інтерфейс працює вже у чорно-білому, а стилі потрібні, щоб викликати емоції;
• Спершу мобільні. Застосуйте силу content-first;
• Візуальний дизайн інтерфейсу – відображення характеру, культури та цінностей бренду;
• Розуміння стратегії розвитку допомагає швидше приймати рішення лише на рівні інтерфейсу;
• Більше знаєш про предметну область – сміливіше працюєш над інтерфейсом і пропонуєш перспективні ідеї;
• Інтерактив та анімація допомагають вимірно покращити UX
• Експеримент – основа прогресу;
• Атомний дизайн. Паттерни проектування та дизайн-системи допомагають потрапляти в очікування на будь-якій платформі та прискорити розробку;
• Продукт відвантажує цінність та її можна виміряти за допомогою метрик;

Навички - що потрібно вміти щоб бути дизайнером інтерфейсів

1. Проектування інтерфейсів та UX-дизайн. Ця робота схожа на архітектурну. Якщо порівнювати з будівництвом будинку, то архітектор зробить усю роботу та зупиниться на дизайні інтер'єру. Дизайнер інтер'єру візьме на себе UI-дизайнер. Ось і в інтерфейсах також. UX – це коли чорно-білими макетами вже можна скористатися і завдання вирішується.
2. Психологія сприйняття. Насамперед йдеться про інструменти організації простору та впливу на сприйняття: модуль, друкарка, колір, композиція, образи, знаки, сторітлінг у діджитал;
3. Аналітика даних. Тут вам потрібно розуміти, що будь-яка система втягує потоки клієнтів і далі магістралями везе їх до мети. Аналітика допомагає розібратися в тому, кого і куди краще везти, чому і як зробити систему ціннішою.
4. Управління проектами. Ця навичка насамперед пов'язана з балансом та оркеструванням. Баланс – про відповідність бізнес-цілей та цілей користувачів у політичному контексті. А оркестрування – це про злагоджену роботу команди, а не лебідь рак та щука.
5. Бренд-дизайн. У своїй роботі дизайнер інтерфейсів часто працює із готовою графікою бренду. Коли краще розумієш підсумкову мету, то сміливіше дієш. Тому рекомендую бренд-дизайн також охопити.

Які інструменти використовує у роботі дизайнер інтерфейсів

• Для занурення у завдання. Результати опитувань, інтерв'ю, Customer Journey map (CJM), BPMN-діаграми, звіти від аналітиків із систем аналітики (Google Firebase, Amplitude, OWOX BI, Google Analitycs 360)
• Для дизайн-мислення. Коркова дошка, листи A4, принтер, блокнот, наклейки різних кольорів, олівці, маркери. Все це стане в нагоді для розуміння завдання, створення перших схем, концептів, підбору компоновок.
• Дизайн інтерфейсу. Якщо ви знаходитесь в сміливій продуктовій компанії, то Figma вам не вистачить, тому що з нею ви завжди думаєте "а чи я зможу це реалізувати, чи підтримує Figma". А ось з InVision Studio ви можете реалізувати будь-який задум і перевірити ідею без обмежень у поведінці. Тому Figma часто доповнюють зв'язкою: Figma + Principle, Figma + ProtoPie.
• Для інтерактивних прототипів. Для створення інтерактивних прототипів підходять InVision Studio, Principle.

З чого розпочати вивчення дизайну інтерфейсів – перші кроки у дизайні інтерфейсів

1. Вивчіть пристрій дизайн-систем міжнародних брендів

Завітайте до інтерфейсів Airbnb, Mailchimp, Google Material Design, Apple Human Design Guidelines. Черпаніть культуру ТОП-екосистем. Помацайте на різних пристроях. Вивчіть досконально передісторію, принципи на яких дотримується дизайн-система. Відчуйте культуру та особливий підхід. Гугліть за запитами 'uber design system', 'airbnb design system' і т.д.

2. Візьміться за перший проект з дизайну інтерфейсів та зробіть його разом із наставником

Підшукайте курс з легким стартом та асортиментом цікавих та життєвих проектів. Наприклад, курси UX/UI на Breezzly. Задайте веб-сервіс, додаток для смарт-годин або мобільний додаток для бронювання кафе, а потім уже занурюйтесь далі через очні курси з командною роботою (допоможе сильніше відчути весь дух професії).

3. Зареєструйте у міжнародних сервісах та знайдіть у них елементи дизайн-системи

Для цього завдання відмінно підходять Airbnb (b2c) та Mailchimp (b2b).

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

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

4. Намалюйте ключовий сценарій у всіх деталях і відчуйте дизайн-систему в роботі

Визначте який пристрій/розмір екрана ви збираєте прототип. Розчехліть Figma або InVision Studio.

Візьміть готову систему дизайну, наприклад material design або ios ui kit і використовуючи готові компоненти зберіть першу версію екранів для всього сценарію.

Допрацюйте компоненти яких не вистачає та наповніть екрани живим контентом. Не використовуйте генератори тексту

Порівнюйте екрани зі скетчами, до/після.

5. Пропрацюйте анімації у всіх нюансах і досягайте тієї ж якості виконання, що й оригінал

Почніть із повтору готових анімацій, знайдіть ту, яка вас запалює. Дійте так: зніміть анімацію на відео та покадрово вивчіть її таймінги. Потім візьміть Figma + Principle або InVision Studio і повторіть її у всіх нюансах. Відчуйте рух і плинність інтерфейсу.

6. Вивчіть ТОП-3 книги з дизайну інтерфейсів (міжнародний ТОП)

• User Friendly, Cliff Kuang;
• Refactoring UI, Adam Wathan & Steve Schoger;
• 100 основних принципів дизайну. Як утримати увагу;
• Веб дизайн. Книжка Дж. Гарретта. Елементи досвіду взаємодії;
• Загмайстер та Уолш: Про Красу.

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

7. Прокачайтеся в інструментах прототипування та анімації, щоб стати сміливішим у реалізації ідей

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

8. Вступіть у найпопулярніші дизайнерські спільноти і задайте питання, що найбільше хвилює.

9. Пройдіть практику з дизайну інтерфейсів на бойовому продукті

Бойовий продукт - місце вашого стажування або продукт, яким ви користуєтеся щодня і тому знаєте, коли він не ідеально відпрацьовує.

1. Перетворіть скетч в інтерактивний прототип корисного сценарію для свого телефону, використовуючи дизайн систему, наприклад Material Design для Android;
2. Закріпіть навички роботи із дизайн-системою. Повторіть на альтернативній дизайн-системі. Ті самі кроки, що й у першому пункті;
3. Вчимося бачити дизайн-системи довкола. Візьміть живий продукт та зніміть з нього дизайн-систему;
4. Свобода володіння дизайн-системою. Зберіть ключовий сценарій одного з продуктів на будь-якій відомій дизайн системі та доопрацюйте компоненти яких не вистачило;
5. Додайте нову функцію та допрацюйте дизайн-систему. Візьміть існуючу програму та готову дизайн систему та додайте додаткову функцію. Додайте функціональність Spotify до facebook;
6. Зберіть концепцію додатку, яким ви самі користуєтеся. Продумайте концепцію та продумайте яку особливу культуру просуватиме новий вид цієї програми. Постарайтеся вивчіть аудиторію програми та у яких ситуаціях вона корисна, подумайте як візуально посилити його сильні сторони;
7. Додайте програму лояльності до адмінки інтернет магазину. Знайдіть інтернет-магазин в якому немає особистого кабінету та програми лояльності і запропонуйте концепцію того, все все могло б працювати в деталях;
8. Запакуйте інтернет-магазин у мобільний додаток. 
9. Візьміть тестове завдання у компанії. І спробуйте свій новий комплект навичок боєм;

Для виконання вправ підійде Figma та InVision Studio.

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