Главное Авторские колонки Вакансии Образование
849 1 В избр. Сохранено
Авторизуйтесь
Вход с паролем

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

Как дизайнеры, мы постоянно экспериментируем с разными инструментами и процессами, чтобы найти наиболее эффективные решение. После массы таких экспериментов я выработал свой идеальный рабочий процесс, которыми и поделюсь в этом посте.
Мнение автора может не совпадать с мнением редакции

Дизайн - это процесс, и вариант этого процесса, который я опишу ниже, использовался мной на всех проектах по созданию так называемых “habit-forming” продуктов (т.е. продуктов, формирующих привычки), которые так любят пользователи.

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

4f833781144849d2830606a90e8d42d2.jpeg

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

b15e37f7ce774b188151490c1bc46d2e.gif

3) Далее нужно сделать вайрфреймы. Эскизов всегда недостаточно. Вайрфреймы обязательны практически в 100% случаев. Тут без вариантов. Откройте Omnigraffle и создайте свои вайрфреймы в этом приложении.

8de84834415f48d7966c9028a1e38f1e.png

4) Вдруг вы поняли, что нужно добавить выпадающее меню, и поэтому придется переделать некоторые вайрфреймы в Balsamiq.

5769ff5014304dcf8c8a7b433181b8dc.jpeg

Неплохо, если рисовать для 3-классников.

5) Теперь представьте, что вы до смерти ненавидите Balsamiq и переделайте то же самое в Axure.

f7e851d5b63f42478fa1191845032502.gif

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

7e54a7ecd6ba4e6f8a38dd99e4e43c87.png

7) Теперь экспортируйте эти вайрфреймы в PNG-файлы и импортируйте их в Invision, чтобы можно было поделиться ими с командой.

b457840b63344dd897a379fe68be65ce.png

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

50a91ccbfa124285b5976be45a1b3ede.jpeg

Кстати, какая же это вкусная штука.

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

05f8e606eac64234a64ab7876a5dd072.gif

10) Переделайте свой прототип в Marvel в надежде, что коллега не найдет, как оставлять комментарии в Marvel.

9769a49521514538bc1ead6e9bfc7746.png

11) Вы добились своего. Вайрфреймы утвердили. Настало время поработать над более детализированным прототипом.

a0cb190a49914ee890eb927ce50488c3.gif

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

0c105bb7149647f5aace3495a81a9fd0.jpeg

Смотрится довольно оптимизировано.

1f97a415cb674705836ee95d08da9ed3.jpegba625e9665344fb481c4633b9ad10fb6.jpeg

13) Откройте Sketch и начните создавать UI для своего приложения. Начинает выглядеть, как реальный продукт!

fedfa73a16cd48b4ae612ef2ca523642.jpeg

14) Теперь экспортируйте их как PNG-файлы и импортируйте экраны во Flinto Lite.

1-uZAWXo_fb4KaVq1YLym74g.jpeg

15) Представьте, что вам нужны жесты, так что заплатите $99 за Flinto под Mac, чтобы вы могли добавить жесты. 1-vH8AbklR0eHJlsNkZ8vS6A.jpegЭто разные люди! Очень важно!

16) Ваш начальник/учредитель/клиент “не хочет устанавливать еще одно приложение на свой телефон” и отказывается скачивать Flinto на свой iphone.

d77a66d303b94c90b2aa467ae6325d5e.gif

17) Импортируйте дизайны в Principle и добавьте взаимодействия.

b1153730a4ac4c9cb3ee18acd413b658.jpeg

18) Представляете, Principle экспортирует прототип, как видео! Смиритесь. Все будет хорошо, правда же?

8136b2b3d6204e05bc783b40cace9c9d.gif

19) Скачайте Pixate, потому что он бесплатный и почему бы нет?

d11cd1bb976245a1af46e04c82c36359.jpeg

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

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

f4a78f61b4af47f6ad36312ffe66dd42.gif

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

006c00587a0e4736884772909d9e6670.jpegВыглядит многообещающе!

23) Отвлекитесь на обед. Вы заслужили.

93262b476c3c449fadad877dabb7976a.jpeg

Такос - отличный выбор.

24) Вернитесь с обеда и осознайте, что срок триал-версии Framer истек. (Серьезно, дается всего 32 минуты триалки).

317e2d2dbff24a7f9c86e2c97ea03c7f.gif

25) Еще разок создайте прототип, но уже в Justinmind.

6a4f27bf9e314862947a5ed0ebe420e1.png

26) Ловите лучи добра от своих коллег, которым был выслан файл Justinmind. Никто в команде никогда ничего не слышал о Justinmind.

797412e7add64105a66332eb945bc75e.gif

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

6f47f909d52440a3b33b0e73832267f5.gifЭто вы.

Спасибо за чтение. Надеюсь, мой опыт поможет вам в работе

+1
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.