Лучшие статьи и кейсы стартапов
Включить уведомления
Дадим сигнал, когда появится
что-то суперстоящее.
Спасибо, не надо
Вопросы Проекты Вакансии
Сообщетсво UI\UX дизайнеров
Рекомендуем
Продвинуть свой проект
Лучшие проекты за неделю
31
Эбиа

Эбиа

www.ebia.ru

23
Enlite

Enlite

enlited.ru

22
YAGLA

YAGLA

yagla.ru

15
likearea

likearea

smm.li

15
SE Ranking

SE Ranking

seranking.ru

14
Cookiezz

Cookiezz

cookiezz.com.ua

13
Venyoo

Venyoo

venyoo.ru

12
Perezvoni.com

Perezvoni.com

perezvoni.com

12
Reader

Reader

Интернет-журнал о современных технологиях.

Показать следующие
Рейтинг проектов
Подписывайтесь на Спарк во ВКонтакте

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

367 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

Это вы.

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

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