Предлагаю читателям «Хабрахабра» перевод статьи «The Ideal Design Workflow» за авторством Keaton Herzer. По сути — это обзор тулзов, полезных и не очень, через призму боли и ненависти автора. Но несмотря на это, мне кажется, он не хотел кого-то обидеть (особенно Джонатана) или наоборот прорекламировать отдельно взятый продукт. Наслаждайтесь.
Как дизайнеры, мы постоянно экспериментируем с инструментарием и процессами в попытке найти тот, который будет работать лучше всего. После долгих экспериментов, я открыл для себя идеальный процесс проектирования, и готов поделиться им с вами прямо сейчас. Я следовал ему на всех своих проектах, результатом которых становились отличные и любимые многими продукты.
1. Эскиз (бумага и карандаш)? — любой отличный дизайн начинается с бумаги. Возьмите бумагу и карандаш и набросайте несколько форм.
Безупречно
2. Следующее что вы должны сделать — это взять смартфон, сделать фотографии эскизов и бросить этих малюток на растерзание в POP. Так вы сможете проверить свой прототип.
3. Дальше нам нужны макеты. Эскизов никогда не бывает достаточно. Всегда только макеты и нет способа этого избежать. Так что открываем Omnigraffle и начинаем.
4. Теперь нам нужно контекстное меню, придется все переделать в Balsamiq.
Совсем не плохо, если вы дизайните для дошкольников
5. Понимаем, что ненавидим этот чертов Balsamiq и переделываем макет в Axure.
6. Понимаем, что ненавидим этот чертов Axure, поэтому перебираемся в Adobe Illustrator и переделываем все с помощью UI Wireframing Kit, который купили за $89.
7. После экспортируем результаты в PNG, и собираем макет в InVision, так мы хотя бы сможем поделится своей работой с командой.
8. Просыпаемся на следующее утро и плачем над миской кукурузных хлопьев с медом, потому что Джонатан раскритиковал наш дизайн.
Эти хлопья чертовски вкусные
9. Больше никакого InVision. Пошел ты, Джонатан.
10. Пересобираем прототип в Marvel и надеемся, что Джонатан не догадается, как оставлять здесь комментарии.
11. Отлично, макеты наконец-то готовы и одобрены. И Джонатан здесь не при чём. Время начинать прорабатывать детали.
12. Берем несколько стоковых фотографий, которые используют все подряд и с помощью Photoshop оптимизируем их.
Выглядит достаточно оптимизированно
13. Открываем Sketch и добавляем UI к нашему приложению. Это становится похожим на настоящий продукт!
14. Теперь экспортируем результат в PNG и собираем их в Flinto Lite.
15. Мы совсем забыли про поддержку жестов, поэтому придётся купить Flinto for Mac за $99.
Очень важно! Это разные вещи.
16. Но ваш начальник/клиент/акционер говорит, что ему ни к чему еще одно приложение и отказывается установить Flinto на свой телефон.
17. Импортируем ваш дизайн в Principle и добавляем взаимодействий.
18. Principle умеет импортировать только в видео? Серьезно?! Все пропало, шеф. Хотя может еще не все потеряно?
19. Выкачиваем Pixate, он бесплатный, поэтому почему бы и нет.
20. Пытаемся понять как им пользоваться (удачи с этим).
21. Единственное, что хочется сделать это разбить компьютер к чертовой матери. Успокойтесь, все хорошо, не делайте этого, это всего лишь часть творческого процесса. За падением всегда следует взлет. Нельзя же постоянно быть на дне.
22. Как только Pixate доведет вас до безумия, успокойтесь и скачайте триальную версию Framer.
23. Время перекусить, тем более мы заслужили это.
Шаурма с лаймом отлично подойдет
24. Возвращаемся с обеда и обнаруживаем что Framer больше не бесплатный (Нет, серьезно, у вас было 32 минуты на пробную версию, сами виноваты).
25. На этот раз переделываем прототип в Justinmind.
26. Ощутите жар от горящих кресел ваших коллег, после того как отправите им Justinmind файл. Его никто не сможет открыть, потому что никто не знает, что это за «уменьшительно-ласкательное от названия вида многолетних травянистых растений рода Armoracia».
27. Серьезно рассматривая возможность сброситься с крыши, не спешите, потому что ваш друг обязательно расскажет вам о новой потрясающей тулзе, о которой узнал на meetup/Хабре/TED/Product Hunt/конференции.
Это вы
Спасибо большое, что дочитали до конца. Надеюсь этот рабочий процесс будет вам полезен.
Как дизайнеры, мы постоянно экспериментируем с инструментарием и процессами в попытке найти тот, который будет работать лучше всего. После долгих экспериментов, я открыл для себя идеальный процесс проектирования, и готов поделиться им с вами прямо сейчас. Я следовал ему на всех своих проектах, результатом которых становились отличные и любимые многими продукты.
1. Эскиз (бумага и карандаш)? — любой отличный дизайн начинается с бумаги. Возьмите бумагу и карандаш и набросайте несколько форм.
Безупречно
2. Следующее что вы должны сделать — это взять смартфон, сделать фотографии эскизов и бросить этих малюток на растерзание в POP. Так вы сможете проверить свой прототип.
3. Дальше нам нужны макеты. Эскизов никогда не бывает достаточно. Всегда только макеты и нет способа этого избежать. Так что открываем Omnigraffle и начинаем.
4. Теперь нам нужно контекстное меню, придется все переделать в Balsamiq.
Совсем не плохо, если вы дизайните для дошкольников
5. Понимаем, что ненавидим этот чертов Balsamiq и переделываем макет в Axure.
6. Понимаем, что ненавидим этот чертов Axure, поэтому перебираемся в Adobe Illustrator и переделываем все с помощью UI Wireframing Kit, который купили за $89.
7. После экспортируем результаты в PNG, и собираем макет в InVision, так мы хотя бы сможем поделится своей работой с командой.
8. Просыпаемся на следующее утро и плачем над миской кукурузных хлопьев с медом, потому что Джонатан раскритиковал наш дизайн.
Эти хлопья чертовски вкусные
9. Больше никакого InVision. Пошел ты, Джонатан.
10. Пересобираем прототип в Marvel и надеемся, что Джонатан не догадается, как оставлять здесь комментарии.
11. Отлично, макеты наконец-то готовы и одобрены. И Джонатан здесь не при чём. Время начинать прорабатывать детали.
12. Берем несколько стоковых фотографий, которые используют все подряд и с помощью Photoshop оптимизируем их.
Выглядит достаточно оптимизированно
13. Открываем Sketch и добавляем UI к нашему приложению. Это становится похожим на настоящий продукт!
14. Теперь экспортируем результат в PNG и собираем их в Flinto Lite.
15. Мы совсем забыли про поддержку жестов, поэтому придётся купить Flinto for Mac за $99.
Очень важно! Это разные вещи.
16. Но ваш начальник/клиент/акционер говорит, что ему ни к чему еще одно приложение и отказывается установить Flinto на свой телефон.
17. Импортируем ваш дизайн в Principle и добавляем взаимодействий.
18. Principle умеет импортировать только в видео? Серьезно?! Все пропало, шеф. Хотя может еще не все потеряно?
19. Выкачиваем Pixate, он бесплатный, поэтому почему бы и нет.
20. Пытаемся понять как им пользоваться (удачи с этим).
21. Единственное, что хочется сделать это разбить компьютер к чертовой матери. Успокойтесь, все хорошо, не делайте этого, это всего лишь часть творческого процесса. За падением всегда следует взлет. Нельзя же постоянно быть на дне.
22. Как только Pixate доведет вас до безумия, успокойтесь и скачайте триальную версию Framer.
23. Время перекусить, тем более мы заслужили это.
Шаурма с лаймом отлично подойдет
24. Возвращаемся с обеда и обнаруживаем что Framer больше не бесплатный (Нет, серьезно, у вас было 32 минуты на пробную версию, сами виноваты).
25. На этот раз переделываем прототип в Justinmind.
26. Ощутите жар от горящих кресел ваших коллег, после того как отправите им Justinmind файл. Его никто не сможет открыть, потому что никто не знает, что это за «уменьшительно-ласкательное от названия вида многолетних травянистых растений рода Armoracia».
27. Серьезно рассматривая возможность сброситься с крыши, не спешите, потому что ваш друг обязательно расскажет вам о новой потрясающей тулзе, о которой узнал на meetup/Хабре/TED/Product Hunt/конференции.
Это вы
Спасибо большое, что дочитали до конца. Надеюсь этот рабочий процесс будет вам полезен.
Поделиться с друзьями