Mobile Design Day (Agilie & Cadabra) Александр Демидов

1. second
steps
in interface
design
©Agilie 2016

2. • коммуникация
• специализация
• ритм
• тонус
• разделение работы и жизни
командная игра

3. тестовое задание
Тестовое задание –
это проверка реального
рабочего процесса,
в котором всегда важен диалог.

4. • задавайте вопросы и делайте это вовремя
• не давайте невыполнимых обещаний
• делайте больше – не делайте лишнее
• уточняйте, когда вам дадут ответ
• просите комментарии в случае отказа
Adobe XD Prototype Mode ©Adobe, Inc.
тестовое задание

5. логика и талант
Проектирование интерфейса
процесс – который можно
подчинить правилам.

6. методология разработки
Marketing
User story
User flow
UX UI
Визуальный язык

7. следуя правилам
Основные игроки рынка
предлагают четкие и понятные
системы правил для интерфейсов
своих платформ, но…

8. следуя правилам
Электрички: расписания ©Labster.PRO

9. следуя правилам
Спрашивай.ру ©Sprashivai.ru LLC

10. следуя правилам
Aflatum ©Castadello LLP

11. нарушая правила
Login & Home Screen ©InVision

12. нарушая правила
Login & Home Screen ©InVision

13. визуальный язык
Создать свои правила
и описать ими визуализацию
и взаимодействия. Airbnb Design Blog ©Airbnb, Inc.

14. визуальный язык
Airbnb Design Blog ©Airbnb, Inc.
не набор статических правил
и отдельных элементов,
а развивающаяся экосистема

15. визуальный язык
Проектность. Каждая часть является частью большого целого
Универсальность. Хорошо работать с любым контентом и
взаимодействовать с пользователем.
Визуальность. Отсутсвие лишних незначимых элементов
Динамичность. Готовность к работе во времени
и разных состояниях

16. визуальный язык
Airbnb Design Blog ©Airbnb, Inc.
• шрифт
• иконографика
• форма элементов
• цвет

17. визуальный язык
Airbnb Design Blog ©Airbnb, Inc.

18. простота
интерфейса определяется
не минимализмом внешнего вида,
а скоростью обучения пользователя

19. простота

20. простота
• Декомпозиция
• Визуальная иерархия
• Постепенное усложнение
• По умолчанию
• Минимизация функционала
Wirex ©Agilie 2015

21. состояния во времени
Ошибка - попытка уложить все
элементы интерфейса и
контента на экран в одной
временной точке.
happening.media ©Agilie 2016

22. организация пространства
Учитывайте возможности
мобильного интерфейса
и скрывайте одни элементы,
показывая другие
happening.media ©Agilie 2016

23. колористика
coolors.co
Anton & Irene ©Anton & Irene

24. жеванная жвачка
©sketchapp.me

25. работа с контентом
Проверяйте все состояния
контентом:
- фоновые изображения
- длину слов
- объем значений
- соответствие тематике
b.live © Agilie 2016

26. Наполнение со смыслом
Foodlist © Agilie 2016
работа с контентом

27. Deadpool © 2016
Наполнение со смыслом
работа с контентом

28. анимация
Инструмент для передачи
взаимодействий,
а не просто дизайн
ради дизайна.
SFTY app prototype © Agilie 2016

29. анимация
SFTY app prototype © Agilie 2016

30. Yappa ©Agilie 2016
дизайн-подача
readymag.com

31. Marketing
User story
User flow
UX UI
Визуальный язык
scope

32. будущее
Интерфейсы становятся
персонализированными и
нуждаются в готовых для этого
решениях

33. paintcode / framer / adobe xd
David Lee
Just 3 Things to Get You Started

34. bonus

35. гордость
Работами в портфолио нужно
гордиться и любить их
Wirex app ©Agilie 2015

36. 3 секунды
Первое впечатление слишком
дорогое, чтобы его составили по работе
Archive Utility

37. redesign
craygslist.org ©craygslist.org 2016

38. redesign
craygslist.org redesign ©Aurélien SALOMON 2016
Aurélien Salomon
13,375 Followers

39. dribbblefication
Concepts ©Stoilovskikh Ivan 2015

40. dribbblefication
Music player © Agilie 2016

41. playbook

42. спасибо.
вопросы?

43. links
• design.google.com
• material.google.com
• habrahabr.ru/company/google/blog/272621/
• airbnb.design/building-a-visual-language/
• www.wired.com/2015/12/simplicity-is-overrated-in-ux-design/
• medium.com/framer-prototyping/new-to-framer-just-3-things-to-get-you-started
• www.behance.net/aureliensalomon
• www.jnd.org/dn.mss/the_future_of_design.html