User Interface (UI) x User Experience (UX) - English
-
Upload
gustavo-gobbi -
Category
Design
-
view
154 -
download
2
Transcript of User Interface (UI) x User Experience (UX) - English
![Page 1: User Interface (UI) x User Experience (UX) - English](https://reader034.fdocuments.in/reader034/viewer/2022052413/55cdf065bb61eb0e538b4769/html5/thumbnails/1.jpg)
USER INTERFACE (UI)X
USER EXPERIENCE (UX)What’s the difference?
Why both concepts are so important?
English Tech Talks IIIJuly 2015
![Page 2: User Interface (UI) x User Experience (UX) - English](https://reader034.fdocuments.in/reader034/viewer/2022052413/55cdf065bb61eb0e538b4769/html5/thumbnails/2.jpg)
• Computer Science student at UFAL
• Front-end developer
• Columnist at DobreaDireita.com
• Author at Scub.info & FailWars.blog.br
• Podcaster at Radioatividade.org
• Marília Gabriela imitator (when people insist)
Gustavo Gobbi
Who am I?
![Page 3: User Interface (UI) x User Experience (UX) - English](https://reader034.fdocuments.in/reader034/viewer/2022052413/55cdf065bb61eb0e538b4769/html5/thumbnails/3.jpg)
UI Designer UX Designer
Creative and visual
Consistent elements
“The designer”
Emotion
Easy of use
Clarity and fluidity
![Page 4: User Interface (UI) x User Experience (UX) - English](https://reader034.fdocuments.in/reader034/viewer/2022052413/55cdf065bb61eb0e538b4769/html5/thumbnails/4.jpg)
Dan Saffer model
![Page 5: User Interface (UI) x User Experience (UX) - English](https://reader034.fdocuments.in/reader034/viewer/2022052413/55cdf065bb61eb0e538b4769/html5/thumbnails/5.jpg)
“Your application is a motorcycle"
![Page 6: User Interface (UI) x User Experience (UX) - English](https://reader034.fdocuments.in/reader034/viewer/2022052413/55cdf065bb61eb0e538b4769/html5/thumbnails/6.jpg)
In the beginning…
![Page 7: User Interface (UI) x User Experience (UX) - English](https://reader034.fdocuments.in/reader034/viewer/2022052413/55cdf065bb61eb0e538b4769/html5/thumbnails/7.jpg)
Modules, a lot of modules…
![Page 8: User Interface (UI) x User Experience (UX) - English](https://reader034.fdocuments.in/reader034/viewer/2022052413/55cdf065bb61eb0e538b4769/html5/thumbnails/8.jpg)
And finally…
![Page 9: User Interface (UI) x User Experience (UX) - English](https://reader034.fdocuments.in/reader034/viewer/2022052413/55cdf065bb61eb0e538b4769/html5/thumbnails/9.jpg)
No more motorcycles.
Let’s talk about something we know.
![Page 10: User Interface (UI) x User Experience (UX) - English](https://reader034.fdocuments.in/reader034/viewer/2022052413/55cdf065bb61eb0e538b4769/html5/thumbnails/10.jpg)
Material Design
![Page 11: User Interface (UI) x User Experience (UX) - English](https://reader034.fdocuments.in/reader034/viewer/2022052413/55cdf065bb61eb0e538b4769/html5/thumbnails/11.jpg)
Material Design• Announced at Google I/O 2014 and
introduced on Android 5.0 Lollipop
• "Create a visual language that synthesizes classic principles of good design with the innovation and possibility of technology and science”
• It’s also used on web development (Polymer, Materialize, Leaf and more)
• Trivia: MD development leader is latin american. Don’t give up.
![Page 12: User Interface (UI) x User Experience (UX) - English](https://reader034.fdocuments.in/reader034/viewer/2022052413/55cdf065bb61eb0e538b4769/html5/thumbnails/12.jpg)
• Instant visual confirmation at contact point
• Touch Ripple mechanism
• Attack articulation and duration of touch event
Calculadora
Surface reaction
![Page 13: User Interface (UI) x User Experience (UX) - English](https://reader034.fdocuments.in/reader034/viewer/2022052413/55cdf065bb61eb0e538b4769/html5/thumbnails/13.jpg)
Navigation drawer
• Think outside the box: there are a lot of things beyond this rectangle
• Elevation: the content below is still visible, but it’s darkened like a shadow
• Location: it always must show where you are
Netflix
![Page 14: User Interface (UI) x User Experience (UX) - English](https://reader034.fdocuments.in/reader034/viewer/2022052413/55cdf065bb61eb0e538b4769/html5/thumbnails/14.jpg)
Floating action button
• Promoted actions: #1 priority activities in the app
• No more toolbar dictatorship!
• Reading experience is still awesome
Evernote
![Page 16: User Interface (UI) x User Experience (UX) - English](https://reader034.fdocuments.in/reader034/viewer/2022052413/55cdf065bb61eb0e538b4769/html5/thumbnails/16.jpg)
“Together we stand, divided we fall”Pink Floyd
![Page 18: User Interface (UI) x User Experience (UX) - English](https://reader034.fdocuments.in/reader034/viewer/2022052413/55cdf065bb61eb0e538b4769/html5/thumbnails/18.jpg)
Thank you!