Як не вистрибнути з вікна, ідеальний робочий процес дизайнера

Як дизайнери, ми постійно експериментуємо з різними інструментами і процесами, щоб знайти найбільш ефективні рішення. Після маси таких експериментів я виробив свій ідеальний робочий процес, якими і поділюся в цьому пості. Дизайн - це процес, і варіант цього процесу, який я опишу нижче, використовувався мною на всіх проектах зі створення так званих «habit-1916 ing» продуктів (тобто продуктів, що формують звички), які так люблять користувачі.

1) Начерки (папір і ручка) - кожен великий дизайн народжується на папері. Дістаньте аркуш і ручку, і почніть малювати якісь фігури.

2) Далі потрібно сфотографувати свої ескізи на смартфон і завантажити в POP. Так ви зможете протестувати свій прототип.

3) Далі потрібно зробити вайрфрейми. Ескізів завжди недостатньо. Вайрфрейми обов'язкові практично в 100% випадків. Тут без варіантів. Відкрийте Omnigraffle і створіть свої вайрфрейми в цій програмі.

4) Раптом ви зрозуміли, що потрібно додати спадне меню, і тому доведеться переробити деякі вайрфрейми в Balsamiq.

Непогано, якщо малювати для 3-класників.

5) Тепер уявіть, що ви до смерті ненавидите Balsamiq і переробте те те ж саме в Axure.

6) Тепер уявіть, що ви до смерті ненавидите Axure і вирішили виконати те ж саме в Adobe Illustrator з використанням UI Wireframing kit за $89.

7) Тепер експортуйте ці вайрфрейми в PNG-файли і імпортуйте їх в Invision, щоб можна було поділитися ними з командою.

8) Ви прокинулися наступного ранку і плачете в свою миску пластівців, тому що колега залишив дуже несхвальні коментарі з приводу вашого прототипу в Invision.

До речі, яка ж це смачна штука.

9) Ви вирішили більше ніколи не користуватися Invision. А все через незадоволеного колеги.

10) Переробте свій прототип у Marvel в надії, що колега не знайде, як залишати коментарі в Marvel.

11) Ви домоглися свого. Вайрфрейми затвердили. Настав час попрацювати над більш деталізованим прототипом.

12) Візьміть знімки з фотобанку, які всі використовують для таких потреб, і за допомогою Photoshop оптимізуйте їх.

Виглядає досить оптимізовано.

13) Відкрийте Sketch і почніть створювати UI для своєї програми. Починає виглядати, як реальний продукт!

14) Тепер експортуйте їх як файли PNG та імпортуйте екрани у Flinto Lite.

15) Уявіть, що вам потрібні жести, тож заплатіть $99 за Flinto під Mac, щоб ви могли додати жести.

Це різні люди! Дуже важливо!

16) Ваш начальник/засновник/клієнт «не хоче встановлювати ще один додаток на свій телефон» і відмовляється завантажувати Flinto на свій iphone.

17) Імпортуйте дизайни в Principle і додайте взаємодії.

18) Уявляєте, Principle експортує прототип, як відео! Змиріться. Все буде добре, правда ж?

19) Завантажте Pixate, тому що він безкоштовний і чому б ні?

20) Постарайтеся розібратися, як користуватися Pixate (удачі з цим).

21) Вам захочеться просто розбити свій комп'ютер. Я б порадив чинити опір цьому бажанню, якщо можете. Все це частина творчого процесу. Спочатку потрібно впасти, щоб піднятися на новий рівень.

22) Коли Pixate довів вас до ручки, змініть обстановку і скачайте безкоштовну тріал-версію Framer.

Виглядає багатообіцяюче!

23) Відволікіться на обід. Ви заслужили.

Ніс - чудовий вибір.

24) Поверніться з обіду і усвідомте, що термін тріал-версії Framer закінчився. (Серйозно, дається всього 32 хвилини тріалки).

25) Ще раз створіть прототип, але вже в Justinmind.

26) Ловіть промені добра від своїх колег, яким було вислано файл Justinmind. Ніхто в команді ніколи нічого не чув про Justinmind.

27) Розгляньте варіант вистрибнути з вікна, але вихід є - друг розповів вам про новий інструмент для прототипування.

Це ви.

Дякую за читання. Сподіваюся, мій досвід допоможе вам у роботі, а якщо ні то в спільноті дизайнерів Musli вам точно допоможуть.