Предлагаю читателям «Хабрахабра» перевод статьи «The Ideal Design Workflow» за авторством Keaton Herzer. По сути — это обзор тулзов, полезных и не очень, через призму боли и ненависти автора. Но несмотря на это, мне кажется, он не хотел кого-то обидеть (особенно Джонатана) или наоборот прорекламировать отдельно взятый продукт. Наслаждайтесь.
![](https://habrastorage.org/files/0f6/5c3/96f/0f65c396fa884193b699708b21776cad.png)
Как дизайнеры, мы постоянно экспериментируем с инструментарием и процессами в попытке найти тот, который будет работать лучше всего. После долгих экспериментов, я открыл для себя идеальный процесс проектирования, и готов поделиться им с вами прямо сейчас. Я следовал ему на всех своих проектах, результатом которых становились отличные и любимые многими продукты.
1. Эскиз (бумага и карандаш)? — любой отличный дизайн начинается с бумаги. Возьмите бумагу и карандаш и набросайте несколько форм.
![](https://habrastorage.org/files/4f8/337/811/4f833781144849d2830606a90e8d42d2.jpeg)
Безупречно
2. Следующее что вы должны сделать — это взять смартфон, сделать фотографии эскизов и бросить этих малюток на растерзание в POP. Так вы сможете проверить свой прототип.
![](https://habrastorage.org/files/b15/e37/f7c/b15e37f7ce774b188151490c1bc46d2e.gif)
3. Дальше нам нужны макеты. Эскизов никогда не бывает достаточно. Всегда только макеты и нет способа этого избежать. Так что открываем Omnigraffle и начинаем.
![](https://habrastorage.org/files/b21/ed4/b78/b21ed4b78b7f45668bdbd6eb809756ab.png)
4. Теперь нам нужно контекстное меню, придется все переделать в Balsamiq.
![](https://habrastorage.org/files/576/9ff/501/5769ff5014304dcf8c8a7b433181b8dc.jpeg)
Совсем не плохо, если вы дизайните для дошкольников
5. Понимаем, что ненавидим этот чертов Balsamiq и переделываем макет в Axure.
![](https://habrastorage.org/files/0f8/8c4/8a4/0f88c48a4ef941b3a73dedce6767e62c.gif)
6. Понимаем, что ненавидим этот чертов Axure, поэтому перебираемся в Adobe Illustrator и переделываем все с помощью UI Wireframing Kit, который купили за $89.
![](https://habrastorage.org/files/c08/ef3/44e/c08ef344ee474c03b9d6cc4eac19e55a.png)
7. После экспортируем результаты в PNG, и собираем макет в InVision, так мы хотя бы сможем поделится своей работой с командой.
![](https://habrastorage.org/files/83b/a93/4b3/83ba934b3f294d5582ba4896dca478f0.png)
8. Просыпаемся на следующее утро и плачем над миской кукурузных хлопьев с медом, потому что Джонатан раскритиковал наш дизайн.
![](https://habrastorage.org/files/50a/91c/cbf/50a91ccbfa124285b5976be45a1b3ede.jpeg)
Эти хлопья чертовски вкусные
9. Больше никакого InVision. Пошел ты, Джонатан.
![](https://habrastorage.org/files/05f/8e6/06e/05f8e606eac64234a64ab7876a5dd072.gif)
10. Пересобираем прототип в Marvel и надеемся, что Джонатан не догадается, как оставлять здесь комментарии.
![](https://habrastorage.org/files/68b/eff/3f6/68beff3f622347f2b23361398ef3e2d6.png)
11. Отлично, макеты наконец-то готовы и одобрены. И Джонатан здесь не при чём. Время начинать прорабатывать детали.
![](https://habrastorage.org/files/a0c/b19/0a4/a0cb190a49914ee890eb927ce50488c3.gif)
12. Берем несколько стоковых фотографий, которые используют все подряд и с помощью Photoshop оптимизируем их.
![](https://habrastorage.org/files/0c1/05b/b71/0c105bb7149647f5aace3495a81a9fd0.jpeg)
Выглядит достаточно оптимизированно
13. Открываем Sketch и добавляем UI к нашему приложению. Это становится похожим на настоящий продукт!
![](https://habrastorage.org/files/421/75a/9b4/42175a9b4a5b4c589fe1ae9384437422.jpeg)
14. Теперь экспортируем результат в PNG и собираем их в Flinto Lite.
![](https://habrastorage.org/files/1f9/7a4/15c/1f97a415cb674705836ee95d08da9ed3.jpeg)
15. Мы совсем забыли про поддержку жестов, поэтому придётся купить Flinto for Mac за $99.
![](https://habrastorage.org/files/ba6/25e/966/ba625e9665344fb481c4633b9ad10fb6.jpeg)
Очень важно! Это разные вещи.
16. Но ваш начальник/клиент/акционер говорит, что ему ни к чему еще одно приложение и отказывается установить Flinto на свой телефон.
![](https://habrastorage.org/files/d77/a66/d30/d77a66d303b94c90b2aa467ae6325d5e.gif)
17. Импортируем ваш дизайн в Principle и добавляем взаимодействий.
![](https://habrastorage.org/files/b11/537/30a/b1153730a4ac4c9cb3ee18acd413b658.jpeg)
18. Principle умеет импортировать только в видео? Серьезно?! Все пропало, шеф. Хотя может еще не все потеряно?
![](https://habrastorage.org/files/813/6b2/b3d/8136b2b3d6204e05bc783b40cace9c9d.gif)
19. Выкачиваем Pixate, он бесплатный, поэтому почему бы и нет.
![](https://habrastorage.org/files/d11/cd1/bb9/d11cd1bb976245a1af46e04c82c36359.jpeg)
20. Пытаемся понять как им пользоваться (удачи с этим).
21. Единственное, что хочется сделать это разбить компьютер к чертовой матери. Успокойтесь, все хорошо, не делайте этого, это всего лишь часть творческого процесса. За падением всегда следует взлет. Нельзя же постоянно быть на дне.
![](https://habrastorage.org/files/f4a/78f/61b/f4a78f61b4af47f6ad36312ffe66dd42.gif)
22. Как только Pixate доведет вас до безумия, успокойтесь и скачайте триальную версию Framer.
![](https://habrastorage.org/files/006/c00/587/006c00587a0e4736884772909d9e6670.jpeg)
23. Время перекусить, тем более мы заслужили это.
![](https://habrastorage.org/files/932/62b/476/93262b476c3c449fadad877dabb7976a.jpeg)
Шаурма с лаймом отлично подойдет
24. Возвращаемся с обеда и обнаруживаем что Framer больше не бесплатный (Нет, серьезно, у вас было 32 минуты на пробную версию, сами виноваты).
![](https://habrastorage.org/files/e61/00f/390/e6100f39045d426abdea3aee9fcdd735.gif)
25. На этот раз переделываем прототип в Justinmind.
![](https://habrastorage.org/files/9af/d4b/16d/9afd4b16dcc14f5facfd99a9149497d4.png)
26. Ощутите жар от горящих кресел ваших коллег, после того как отправите им Justinmind файл. Его никто не сможет открыть, потому что никто не знает, что это за «уменьшительно-ласкательное от названия вида многолетних травянистых растений рода Armoracia».
![](https://habrastorage.org/files/c2b/ee6/2f2/c2bee62f26cc4e56b095fa0cc0e3d157.gif)
27. Серьезно рассматривая возможность сброситься с крыши, не спешите, потому что ваш друг обязательно расскажет вам о новой потрясающей тулзе, о которой узнал на meetup/Хабре/TED/Product Hunt/конференции.
![](https://habrastorage.org/files/6f4/7f9/09d/6f47f909d52440a3b33b0e73832267f5.gif)
Это вы
Спасибо большое, что дочитали до конца. Надеюсь этот рабочий процесс будет вам полезен.
![](https://habrastorage.org/files/0f6/5c3/96f/0f65c396fa884193b699708b21776cad.png)
Как дизайнеры, мы постоянно экспериментируем с инструментарием и процессами в попытке найти тот, который будет работать лучше всего. После долгих экспериментов, я открыл для себя идеальный процесс проектирования, и готов поделиться им с вами прямо сейчас. Я следовал ему на всех своих проектах, результатом которых становились отличные и любимые многими продукты.
1. Эскиз (бумага и карандаш)? — любой отличный дизайн начинается с бумаги. Возьмите бумагу и карандаш и набросайте несколько форм.
![](https://habrastorage.org/files/4f8/337/811/4f833781144849d2830606a90e8d42d2.jpeg)
Безупречно
2. Следующее что вы должны сделать — это взять смартфон, сделать фотографии эскизов и бросить этих малюток на растерзание в POP. Так вы сможете проверить свой прототип.
![](https://habrastorage.org/files/b15/e37/f7c/b15e37f7ce774b188151490c1bc46d2e.gif)
3. Дальше нам нужны макеты. Эскизов никогда не бывает достаточно. Всегда только макеты и нет способа этого избежать. Так что открываем Omnigraffle и начинаем.
![](https://habrastorage.org/files/b21/ed4/b78/b21ed4b78b7f45668bdbd6eb809756ab.png)
4. Теперь нам нужно контекстное меню, придется все переделать в Balsamiq.
![](https://habrastorage.org/files/576/9ff/501/5769ff5014304dcf8c8a7b433181b8dc.jpeg)
Совсем не плохо, если вы дизайните для дошкольников
5. Понимаем, что ненавидим этот чертов Balsamiq и переделываем макет в Axure.
![](https://habrastorage.org/files/0f8/8c4/8a4/0f88c48a4ef941b3a73dedce6767e62c.gif)
6. Понимаем, что ненавидим этот чертов Axure, поэтому перебираемся в Adobe Illustrator и переделываем все с помощью UI Wireframing Kit, который купили за $89.
![](https://habrastorage.org/files/c08/ef3/44e/c08ef344ee474c03b9d6cc4eac19e55a.png)
7. После экспортируем результаты в PNG, и собираем макет в InVision, так мы хотя бы сможем поделится своей работой с командой.
![](https://habrastorage.org/files/83b/a93/4b3/83ba934b3f294d5582ba4896dca478f0.png)
8. Просыпаемся на следующее утро и плачем над миской кукурузных хлопьев с медом, потому что Джонатан раскритиковал наш дизайн.
![](https://habrastorage.org/files/50a/91c/cbf/50a91ccbfa124285b5976be45a1b3ede.jpeg)
Эти хлопья чертовски вкусные
9. Больше никакого InVision. Пошел ты, Джонатан.
![](https://habrastorage.org/files/05f/8e6/06e/05f8e606eac64234a64ab7876a5dd072.gif)
10. Пересобираем прототип в Marvel и надеемся, что Джонатан не догадается, как оставлять здесь комментарии.
![](https://habrastorage.org/files/68b/eff/3f6/68beff3f622347f2b23361398ef3e2d6.png)
11. Отлично, макеты наконец-то готовы и одобрены. И Джонатан здесь не при чём. Время начинать прорабатывать детали.
![](https://habrastorage.org/files/a0c/b19/0a4/a0cb190a49914ee890eb927ce50488c3.gif)
12. Берем несколько стоковых фотографий, которые используют все подряд и с помощью Photoshop оптимизируем их.
![](https://habrastorage.org/files/0c1/05b/b71/0c105bb7149647f5aace3495a81a9fd0.jpeg)
Выглядит достаточно оптимизированно
13. Открываем Sketch и добавляем UI к нашему приложению. Это становится похожим на настоящий продукт!
![](https://habrastorage.org/files/421/75a/9b4/42175a9b4a5b4c589fe1ae9384437422.jpeg)
14. Теперь экспортируем результат в PNG и собираем их в Flinto Lite.
![](https://habrastorage.org/files/1f9/7a4/15c/1f97a415cb674705836ee95d08da9ed3.jpeg)
15. Мы совсем забыли про поддержку жестов, поэтому придётся купить Flinto for Mac за $99.
![](https://habrastorage.org/files/ba6/25e/966/ba625e9665344fb481c4633b9ad10fb6.jpeg)
Очень важно! Это разные вещи.
16. Но ваш начальник/клиент/акционер говорит, что ему ни к чему еще одно приложение и отказывается установить Flinto на свой телефон.
![](https://habrastorage.org/files/d77/a66/d30/d77a66d303b94c90b2aa467ae6325d5e.gif)
17. Импортируем ваш дизайн в Principle и добавляем взаимодействий.
![](https://habrastorage.org/files/b11/537/30a/b1153730a4ac4c9cb3ee18acd413b658.jpeg)
18. Principle умеет импортировать только в видео? Серьезно?! Все пропало, шеф. Хотя может еще не все потеряно?
![](https://habrastorage.org/files/813/6b2/b3d/8136b2b3d6204e05bc783b40cace9c9d.gif)
19. Выкачиваем Pixate, он бесплатный, поэтому почему бы и нет.
![](https://habrastorage.org/files/d11/cd1/bb9/d11cd1bb976245a1af46e04c82c36359.jpeg)
20. Пытаемся понять как им пользоваться (удачи с этим).
21. Единственное, что хочется сделать это разбить компьютер к чертовой матери. Успокойтесь, все хорошо, не делайте этого, это всего лишь часть творческого процесса. За падением всегда следует взлет. Нельзя же постоянно быть на дне.
![](https://habrastorage.org/files/f4a/78f/61b/f4a78f61b4af47f6ad36312ffe66dd42.gif)
22. Как только Pixate доведет вас до безумия, успокойтесь и скачайте триальную версию Framer.
![](https://habrastorage.org/files/006/c00/587/006c00587a0e4736884772909d9e6670.jpeg)
23. Время перекусить, тем более мы заслужили это.
![](https://habrastorage.org/files/932/62b/476/93262b476c3c449fadad877dabb7976a.jpeg)
Шаурма с лаймом отлично подойдет
24. Возвращаемся с обеда и обнаруживаем что Framer больше не бесплатный (Нет, серьезно, у вас было 32 минуты на пробную версию, сами виноваты).
![](https://habrastorage.org/files/e61/00f/390/e6100f39045d426abdea3aee9fcdd735.gif)
25. На этот раз переделываем прототип в Justinmind.
![](https://habrastorage.org/files/9af/d4b/16d/9afd4b16dcc14f5facfd99a9149497d4.png)
26. Ощутите жар от горящих кресел ваших коллег, после того как отправите им Justinmind файл. Его никто не сможет открыть, потому что никто не знает, что это за «уменьшительно-ласкательное от названия вида многолетних травянистых растений рода Armoracia».
![](https://habrastorage.org/files/c2b/ee6/2f2/c2bee62f26cc4e56b095fa0cc0e3d157.gif)
27. Серьезно рассматривая возможность сброситься с крыши, не спешите, потому что ваш друг обязательно расскажет вам о новой потрясающей тулзе, о которой узнал на meetup/Хабре/TED/Product Hunt/конференции.
![](https://habrastorage.org/files/6f4/7f9/09d/6f47f909d52440a3b33b0e73832267f5.gif)
Это вы
Спасибо большое, что дочитали до конца. Надеюсь этот рабочий процесс будет вам полезен.
Поделиться с друзьями