Top Banner
Maciej Szwed HEAD OF DESIGN Dlaczego motion design ratuje UX?
30

#MTC2017: Aplikacje "kupujemy" wzrokiem. Dlaczego motion design ratuje UX? - Maciej Szwed

Mar 21, 2017

Download

Mobile

Mobile Trends
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: #MTC2017: Aplikacje "kupujemy" wzrokiem. Dlaczego motion design ratuje UX? - Maciej Szwed

Maciej SzwedHEAD OF DESIGN

Dlaczego motion design ratuje UX?

Page 2: #MTC2017: Aplikacje "kupujemy" wzrokiem. Dlaczego motion design ratuje UX? - Maciej Szwed

Czym jest motion design?

Page 3: #MTC2017: Aplikacje "kupujemy" wzrokiem. Dlaczego motion design ratuje UX? - Maciej Szwed
Page 4: #MTC2017: Aplikacje "kupujemy" wzrokiem. Dlaczego motion design ratuje UX? - Maciej Szwed

parallax

video credit: https://blog.prototypr.io/motion-design-is-the-future-of-ui-fc83ce55c02f#.zwpxdogrl

Page 5: #MTC2017: Aplikacje "kupujemy" wzrokiem. Dlaczego motion design ratuje UX? - Maciej Szwed

problemy UX

• co jest najważniejsze i na co zwrócić uwagę? • co mam robić dalej? • skąd mam wiedzieć że ukończyłem zadanie? • nie rozumiem co te informacje przedstawiają

Page 6: #MTC2017: Aplikacje "kupujemy" wzrokiem. Dlaczego motion design ratuje UX? - Maciej Szwed

Patterny / przykłady użycia

Page 7: #MTC2017: Aplikacje "kupujemy" wzrokiem. Dlaczego motion design ratuje UX? - Maciej Szwed

video credit: https://material.google.com/motion

potwierdzenie akcji

Page 8: #MTC2017: Aplikacje "kupujemy" wzrokiem. Dlaczego motion design ratuje UX? - Maciej Szwed

video credit: https://blog.prototypr.io/motion-design-is-the-future-of-ui-fc83ce55c02f#.zwpxdogrl

potwierdzenie akcji

Page 9: #MTC2017: Aplikacje "kupujemy" wzrokiem. Dlaczego motion design ratuje UX? - Maciej Szwed

video credit: https://blog.prototypr.io/motion-design-is-the-future-of-ui-fc83ce55c02f#.zwpxdogrl

potwierdzenie akcji

Page 10: #MTC2017: Aplikacje "kupujemy" wzrokiem. Dlaczego motion design ratuje UX? - Maciej Szwed

hierarchia informacji

video credit: https://material.google.com/motion

Page 11: #MTC2017: Aplikacje "kupujemy" wzrokiem. Dlaczego motion design ratuje UX? - Maciej Szwed

video credit: https://dribbble.com/ColinGarven, https://dribbble.com/chanpory

pokazanie statusu kontrola

Page 12: #MTC2017: Aplikacje "kupujemy" wzrokiem. Dlaczego motion design ratuje UX? - Maciej Szwed

dummy content

Page 13: #MTC2017: Aplikacje "kupujemy" wzrokiem. Dlaczego motion design ratuje UX? - Maciej Szwed

video credit: Dribbble, Andrew McKay for Atlassian

pull to refresh

Page 14: #MTC2017: Aplikacje "kupujemy" wzrokiem. Dlaczego motion design ratuje UX? - Maciej Szwed

video credit: FB Paper App

wyznaczenie kierunku orientacja

Page 15: #MTC2017: Aplikacje "kupujemy" wzrokiem. Dlaczego motion design ratuje UX? - Maciej Szwed

video credit: http://theultralinx.com/2016/01/inspirational-ui-design-20/

ograniczona powierzchnia

Page 16: #MTC2017: Aplikacje "kupujemy" wzrokiem. Dlaczego motion design ratuje UX? - Maciej Szwed

video credit: https://dribbble.com/shots/1640866-Alarm-Material-UI

zoom

Page 17: #MTC2017: Aplikacje "kupujemy" wzrokiem. Dlaczego motion design ratuje UX? - Maciej Szwed

video credit: https://material.google.com/motion

przejście między ekranami

Page 18: #MTC2017: Aplikacje "kupujemy" wzrokiem. Dlaczego motion design ratuje UX? - Maciej Szwed

video credit: https://material.google.com/motion

Page 19: #MTC2017: Aplikacje "kupujemy" wzrokiem. Dlaczego motion design ratuje UX? - Maciej Szwed

source: https://material.google.com/motion

Page 20: #MTC2017: Aplikacje "kupujemy" wzrokiem. Dlaczego motion design ratuje UX? - Maciej Szwed

`

`

visual continuity

video credit: http://theultralinx.com/2016/01/inspirational-ui-design-20/

Page 21: #MTC2017: Aplikacje "kupujemy" wzrokiem. Dlaczego motion design ratuje UX? - Maciej Szwed

video credit: FB Paper App

wskazówka

Page 22: #MTC2017: Aplikacje "kupujemy" wzrokiem. Dlaczego motion design ratuje UX? - Maciej Szwed

video credit: https://dribbble.com/shots/1861517-Messages-Animation

wskazówka

Page 23: #MTC2017: Aplikacje "kupujemy" wzrokiem. Dlaczego motion design ratuje UX? - Maciej Szwed

video credit: https://material.google.com/motion

zwrócenie uwagi

Page 24: #MTC2017: Aplikacje "kupujemy" wzrokiem. Dlaczego motion design ratuje UX? - Maciej Szwed

video credit: https://material.google.com/motion

zwrócenie uwagi

Page 25: #MTC2017: Aplikacje "kupujemy" wzrokiem. Dlaczego motion design ratuje UX? - Maciej Szwed

video credit: http://theultralinx.com/2016/01/inspirational-ui-design-20/

symulacja opowiadanie historii

Page 26: #MTC2017: Aplikacje "kupujemy" wzrokiem. Dlaczego motion design ratuje UX? - Maciej Szwed

video credit: http://theultralinx.com/2016/01/inspirational-ui-design-20/

ukrywanie opóźnień

Page 27: #MTC2017: Aplikacje "kupujemy" wzrokiem. Dlaczego motion design ratuje UX? - Maciej Szwed

video credit: https://dribbble.com/shots/1832066-GIF-for-Restaurant-Menu, https://uimovement.com/

wzmocnienie brandu

Page 28: #MTC2017: Aplikacje "kupujemy" wzrokiem. Dlaczego motion design ratuje UX? - Maciej Szwed

video credit: https://dribbble.com/shots/1832066-GIF-for-Restaurant-Menu, https://uimovement.com/

zadbanie o szczegóły

Page 29: #MTC2017: Aplikacje "kupujemy" wzrokiem. Dlaczego motion design ratuje UX? - Maciej Szwed

video credit: http://theultralinx.com/2016/01/inspirational-ui-design-20/

podsumowanie

Page 30: #MTC2017: Aplikacje "kupujemy" wzrokiem. Dlaczego motion design ratuje UX? - Maciej Szwed

Maciej SzwedHEAD OF DESIGN