1. Создание скетча (бумага и карандаш). Каждый успешный дизайн начинается на бумаге. Возьмите бумагу, карандаш и начните рисовать.
![sketch.jpeg sketch.jpeg](/upload/medialibrary/374/374d80ba83b9ab8b337b126a97a2ef7d.jpeg)
>Безупречно
2. Ваш следующий шаг - сфотографировать скетчи на ваш смартфон и перевести в POP, так вы сможете протестировать ваш прототип.
![pop.gif pop.gif](/upload/medialibrary/470/4709d33fe0e355c86208915ea1632be8.gif)
3. Следующим шагом станет создание макетов. Как показывает практива, скетей не достаточно для полноценной работы. Нет другого пути. Просто откройте Omnigraffle и сделайте парочку набросков.
![Omnigraffle.png Omnigraffle.png](/upload/medialibrary/913/913bb4e0dbea6c326ddb90fd98b8b458.png)
4. Осознайте, что вам необходимо изобразить выпадающее меню, а значит придется переделать все макеты в Balsamiq.
![Balsamiq.jpeg Balsamiq.jpeg](/upload/medialibrary/534/53404d42b78e4b8e2a12a7786c04f2bd.jpeg)
5. Дальше, осознайте, что вы б***ь ненавидите Balsamiq, переделайте макеты в Axure.
![Axure.gif Azure.gif](/upload/medialibrary/1dd/1dd37f16fb5ca479a2437a411b5eb2ba.gif)
6. Дальше, осознайте что вы б***ь ненавидите Axure, переключитесь на Adobe Illustrator и используйте UI kit за 89$
![Illustrator.png Illustrator.png](/upload/medialibrary/951/951e764426949203b692402f77f66ba9.png)
7. Сейчас нужно экспортировать макеты в PNG и импортировать их в Invision, чтобы показать их вашей команде.
![Invision.png Invision.png](/upload/medialibrary/629/6290e8cb9dad1ddd8e0188e7ecd7633d.png)
8. Проведите ваше следующее утро рыдая над чашкой хлопьев Honey Bunches of Oats из-за комментариев коллеги под вашим прототипом.
![HoneyBunchesOfOats.jpeg HoneyBunchesOfOats.jpeg](/upload/medialibrary/42e/42e6cec627ccf1c0bea39a5f5ea378a4.jpeg)
Вкусняшка
9. Пообещайте, что больше никогда не воспользуетесь Invision. Из-за ё****го коллеги.
![damnright.gif damnright.gif](/upload/medialibrary/af6/af62d8e9ddd1914a513bfee48824a2e5.gif)
10. Переделайте прототип в Marvel и молитесь, чтобы ни кто не понял как делать комментарии в Marvel.
![Marvel.png Marvel.png](/upload/medialibrary/4d6/4d65c3bea030b3fc91dc2d9901fef170.png)
11. Успех. Макеты наконец-то одобрены. Настало время начать работу над высокоточным прототипом.
![success.gif success.gif](/upload/medialibrary/8af/8afa2ecc000193d135ebb3e344ca5187.gif)
12. Возьмите несколько стоковых фотографий, которые используют буквально все. Потом в Photoshop'е оптимизируйте их.
![photoshop.jpeg photoshop.jpeg](/upload/medialibrary/91a/91ac1c675c8f646c947d3e69920f990d.jpeg)
Выглядит довольно оптимизировано
13. Откройте Sketch и начните создавать UI для вашего приложения. Теперь это похоже на настоящий продукт!
![sketch.jpeg sketch.jpeg](/upload/medialibrary/299/2993f33d2292877412d4ad04542192ee.jpeg)
14. Теперь экспортируйте в PNG и импортируйте в Flinto Lite.
![FlintoLite.jpeg FlintoLite.jpeg](/upload/medialibrary/4d1/4d124d6c46b61365e284b76e63231b19.jpeg)
15. Осознайте, что вам нужны жесты. Купите Flinto for Mac за 99$. Теперь вы можете добавить жесты.
![FlintoForMac.jpeg FlintoForMac.jpeg](/upload/medialibrary/2dc/2dc16354b3589a7814a8812283afd71e.jpeg)
Они отличаются! Очень важно!
16. Ваш CEO/Stakeholder/Клиент "не хочет устанавливать еще одно приложение на свой смартфон" и отказывается скачать Flinto для iphone.
![boss.gif boss.gif](/upload/medialibrary/613/61318e3ccad3766624b0832d5bbb96ec.gif)
17. Импортируйте ваш дизайн в Principle и добавьте интерактивности.
![Principle.jpeg Principle.jpeg](/upload/medialibrary/432/432fc858b38192c4ce554e4392bbe7f6.jpeg)
18. Осознали, что Principle экспортирует только ё***ое видео (!!!). Погрустите минутку. Все же будет хорошо, правда?
![walk.gif walk.gif](/upload/medialibrary/123/123f7eef56bdeb5ed117bda7fc3bb4b8.gif)
19. Скачайте Pixate, потому что оно бесплатное и... почему бы и нет?
![Pixate.jpeg Pixate.jpeg](/upload/medialibrary/26a/26afb975b0de2fc4117500f49aa70c01.jpeg)
20. Постарайтесь научиться использовать Pixate (удачи вам в этом).
21. Все что вам нужно - это разбить ваш компьютер. Если можете, сопротивляйтесь этому. Все это части процесса разработки. Ни кто не заставит вас плакать.
![hate.gif hate.gif](/upload/medialibrary/eb2/eb2aca1735ea60b05918cbdd4f26dbb8.gif)
22. Когда-нибудь Pixate доведет вас до грани безумия. Скачайте бесплатную версию Framer.
![Framer.jpeg Framer.jpeg](/upload/medialibrary/a73/a73826a7cd8a1f219077e1710e3bd63f.jpeg)
Очень обнадеживающе!
23. Пойдите поужинайте. Вы это заслужили.
![tacos.jpeg tacos.jpeg](/upload/medialibrary/bcb/bcbdadcafe6b9d2856393620021cdf56.jpeg)
Выглядит неплохо
24. Придите с ужина и осознайте, что пробная версия Framer вышла (серьезно, они дают 32-минутный trial).
![anger.gif anger.gif](/upload/medialibrary/3e7/3e7529fdca459df1fc276d09ccf11d38.gif)
25. Переделайте ваш прототип в Justinmind.
![Justinmind.png Justinmind.png](/upload/medialibrary/f25/f25a684400206b6023cf95230f69173e.png)
26. Стать объектом ненависти для вашей команды из-за отправки файла Jastinmind. Потому что никто не может открыть его. Потому что никто не знает что это за ё***ый Justinmind.
![glee.gif glee.gif](/upload/medialibrary/871/871c98637b19e4232a3f4e52d903e19c.gif)
27. Рассмотрите вариант спрыгнуть с крыши (не делайте этого! прим. пер), но осознайте, что все хорошо. Ваши друзья рассказывали вам о совершенно новом потрясающем приложении для прототипирования, о котором они узнали из meetup/конференции/блога/TED talk.
![itsyou.gif itsyou.gif](/upload/medialibrary/f0b/f0b1606d0aeb3252408094df91428971.gif)
Это вы.
Спасибо за внимание. Я надеюсь это поможет моим коллегам-дизайнерам.
От переводчика: очень уж вольный перевод статьи Keaton Harzer в блоге Prototypr.io: https://blog.prototypr.io/the-ideal-design-workflow-2c200b8e337d. Have fun!