Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The second step in interface design

489 views

Published on

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

Published in: Design
  • Login to see the comments

  • Be the first to like this

The second step in interface design

  1. 1. second steps in interface design ©Agilie 2016
  2. 2. • коммуникация • специализация • ритм • тонус • разделение работы и жизни командная игра
  3. 3. тестовое задание Тестовое задание – это проверка реального рабочего процесса, в котором всегда важен диалог.
  4. 4. • задавайте вопросы и делайте это вовремя • не давайте невыполнимых обещаний • делайте больше – не делайте лишнее • уточняйте, когда вам дадут ответ • просите комментарии в случае отказа Adobe XD Prototype Mode ©Adobe, Inc. тестовое задание
  5. 5. логика и талант Проектирование интерфейса процесс – который можно подчинить правилам.
  6. 6. методология разработки Marketing User story User flow UX UI Визуальный язык
  7. 7. следуя правилам Основные игроки рынка предлагают четкие и понятные системы правил для интерфейсов своих платформ, но…
  8. 8. следуя правилам Электрички: расписания ©Labster.PRO
  9. 9. следуя правилам Спрашивай.ру ©Sprashivai.ru LLC
  10. 10. следуя правилам Aflatum ©Castadello LLP
  11. 11. нарушая правила Login & Home Screen ©InVision
  12. 12. нарушая правила Login & Home Screen ©InVision
  13. 13. визуальный язык Создать свои правила и описать ими визуализацию и взаимодействия. Airbnb Design Blog ©Airbnb, Inc.
  14. 14. визуальный язык Airbnb Design Blog ©Airbnb, Inc. не набор статических правил и отдельных элементов, а развивающаяся экосистема
  15. 15. визуальный язык Проектность. Каждая часть является частью большого целого Универсальность. Хорошо работать с любым контентом и взаимодействовать с пользователем. Визуальность. Отсутсвие лишних незначимых элементов Динамичность. Готовность к работе во времени и разных состояниях
  16. 16. визуальный язык Airbnb Design Blog ©Airbnb, Inc. • шрифт • иконографика • форма элементов • цвет
  17. 17. визуальный язык Airbnb Design Blog ©Airbnb, Inc.
  18. 18. простота интерфейса определяется не минимализмом внешнего вида, а скоростью обучения пользователя
  19. 19. простота
  20. 20. простота • Декомпозиция • Визуальная иерархия • Постепенное усложнение • По умолчанию • Минимизация функционала Wirex ©Agilie 2015
  21. 21. состояния во времени Ошибка - попытка уложить все элементы интерфейса и контента на экран в одной временной точке. happening.media ©Agilie 2016
  22. 22. организация пространства Учитывайте возможности мобильного интерфейса и скрывайте одни элементы, показывая другие happening.media ©Agilie 2016
  23. 23. колористика coolors.co Anton & Irene ©Anton & Irene
  24. 24. жеванная жвачка ©sketchapp.me
  25. 25. работа с контентом Проверяйте все состояния контентом: - фоновые изображения - длину слов - объем значений - соответствие тематике b.live © Agilie 2016
  26. 26. Наполнение со смыслом Foodlist © Agilie 2016 работа с контентом
  27. 27. Deadpool © 2016 Наполнение со смыслом работа с контентом
  28. 28. анимация Инструмент для передачи взаимодействий, а не просто дизайн ради дизайна. SFTY app prototype © Agilie 2016
  29. 29. анимация SFTY app prototype © Agilie 2016
  30. 30. Yappa ©Agilie 2016 дизайн-подача readymag.com
  31. 31. Marketing User story User flow UX UI Визуальный язык scope
  32. 32. будущее Интерфейсы становятся персонализированными и нуждаются в готовых для этого решениях
  33. 33. paintcode / framer / adobe xd David Lee Just 3 Things to Get You Started
  34. 34. bonus
  35. 35. гордость Работами в портфолио нужно гордиться и любить их Wirex app ©Agilie 2015
  36. 36. 3 секунды Первое впечатление слишком дорогое, чтобы его составили по работе Archive Utility
  37. 37. redesign craygslist.org ©craygslist.org 2016
  38. 38. redesign craygslist.org redesign ©Aurélien SALOMON 2016 Aurélien Salomon 13,375 Followers
  39. 39. dribbblefication Concepts ©Stoilovskikh Ivan 2015
  40. 40. dribbblefication Music player © Agilie 2016
  41. 41. playbook
  42. 42. спасибо. вопросы?
  43. 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

×