Слайды с моего доклада на Moscow Dribbble Meetup 2014

1. Интерактивная революция
или что нужно знать об анимации в
интерфейсах, чтобы делать круто

2. Плоский дизайн
Что дальше?
Делаем больше акцента на контент
Скевоморфизм

3. Пацаны из эппла подсказывают
…делая большой упор на
анимацию в интерфейсе iOS 7

4. На какой стадии
анимация сейчас?

5. Всем понравилось и многие
начали делать

6. Появилось много
интерфейсной анимации

7. И ДАЖЕ ОЧЕНЬ МНОГО

8. Это определенно новый тренд.
который раз делил дизайнеров
на категории:

9. Дизайнер, который делает
анимацию или хочет ее делать
успешный, красавец,
девочки любят

10. Дизайнер, который не делает
анимацию и не понимает, зачем
это нужно

11. Это не моушн-дизайн, а скорее
интерактивный дизайн
Важный момент
Мы продаем не wow эффект,
а интерфейс который помогает
пользователю работать с продуктом

12. Как выглядит большинство
интерфейсной анимации сегодня?
с категориями разобрались

13. Вот так
http://youtu.be/ZNFBBWcd9ns

14. Как понять хорошая
анимация или плохая?

15. ХОРОШАЯClever use of animations
http://youtu.be/wadNK-IA6Qc

16. Анимация, как
дополнительный
индикатор
правильности
работы
интерфейса
Llumino Calculator for iPhonehttp://youtu.be/IC8mgnYji-k

17. http://youtu.be/G6YjlBYA-Y8

18. http://youtu.be/TVFt9nHVtno

19. Анимация, как способ экономить место
http://youtu.be/hLZD8jBVa_A

20. http://youtu.be/ibArzNkVKYk

21. http://youtu.be/qzh46aViaRc

22. Анимация, как способ добавить реалистичности к
интерфейсу и создать вау-эффект!
http://youtu.be/0kihyo0Tplg

23. http://youtu.be/KqD1Xsw2kmk

24. Анимация, как способ фокусировать внимание
пользователя в нужном месте
http://youtu.be/i_sqwlsdYeI

25. Анимация, как способ скрыть косяки или
отвлечь внимание пользователя

27. http://youtu.be/J-Oh7raZaic

28. Анимация, как способ обмануть
пользователя
Сейчас будет длинная
история

29. Плохаяи очень плохая
http://youtu.be/5u_K8J0L41o

30. http://youtu.be/8r1_jBmB4n0

31. http://youtu.be/yCYlwMnraW8

32. http://youtu.be/q_UK9H9HM0c

33. Плохая анимация –
это когда:
1. Сложно объяснить ее
необходимость
2. Она мешает пользоваться
интерфейсом и заставляет
пользователя ждать там, где
этого не нужно
3. Стоимость ее разработки
высока, а причин для ее
использования нет

34. Резюмируем

35. Плоский дизайн
Анимация
Делаем больше акцента на контент
В симбиозе с плоским дизайном
Скевоморфизм

36. Плохая анимация
Смещает фокус пользователя с нужных
вещей и оставляет ощущение, что что-то
происходит не так

37. Хорошая анимация
Способна вывести пользовательский
опыт на совершенно новый уровень
работы с интерфейсом

38. Презентация ≠ Реальность
Анимация для Dribbble/Behance и реальная
работа интерфейса – это часто две большие
разницы, помните об этом

39. Где проектировать
анимацию?
– After Effects
– Flash
– EDGE Animate
– Quartz composer (живые прототипы)
– etc…

40. Как реализовать анимацию?
Любой язык программирования и
немного математики

41. Как готовить анимацию для
разработчиков?
Простую
Видео презентация + текстовая
спецификация вида:
Wait: 100ms
Scale: 1.02x
Opacity: 60%

42. Как готовить анимацию для
разработчиков?
Статичную сложную
Отдаем в png по ка драм с
прозрачностью
http://youtu.be/Zm2vqDNqkuc

43. Интерактивную сложную
Например: A*sin (wt+ф) *exp(-t/T), w - угловая частота,
ф - начальная фаза, Т - постоянная времени затухания
Отдаем простыми формулами
смягчения.
Как готовить анимацию для
разработчиков?
http://youtu.be/ghhDSCYL_rw

44. Где делать простые интерактивные
анимированные прототипы?
www.invisionapp.com *
www.flinto.com

45. Отдельно про WebFlow
interactions.webflow.com

46. Чем же мы
занимаемся в Chapps?
http://youtu.be/HbAi7KaC2Rs

47. http://youtu.be/X9BtefEuzm4

48. http://youtu.be/SzxQoXMyVu8

49. http://youtu.be/US17kYBjlLw

50. http://youtu.be/9CKnpRfEwpU

51. Предоставьте возможность
отключить анимацию
тошнота, головная боль, сильное
головокружение, боль в глазах,
сонливость
http://youtu.be/5st0ihI3JTI

52. Чем мы занимаемся:
– Разработка мобильных приложений iOS/Android
– Анимация для интерфейсов и приложений
– Проектирование приложений и лендингов
– Создание промо-роликов, моушн-дизайн
– Дизайн интерфейсов для Mac
– Каллиграфические логотипы и иконки

53. Спасибо за внимание!
Дмитрий Чута
@its_chapps
ITSCHAPPS.COM
dribbble.com/chapps
Дизайн мобильных приложений и
лендингов для стартапов
facebook.com/dmitry.chuta
behance.net/chapps