Zillow as Netflix Voice interactions with ProtoPie
#PieDay #PlayOff #ProtoPie
Hi, thank you for checking What If... Zillow as Netflix. Bear with me, this post will worth your time.
Since I started UI Design the main go-to App was Flash, it allowed any Designer to quickly create fluid animations and, complex interactions without the need for coding knowledge.
Since then we relied on Software like after effects to create immersive interactions but it is not the right tool for interactive design. During this project I learned that ProtoPie maybe the tool I was always looking for, the more I worked with it, the more wonderful surprises I got. Here are some techniques I used in this prototype:
⚡ Nested Animations with Start and Stop actions
⚡ Multi property animations
⚡ Multi actionable components: Voice-Activated (Beta), Mouse Hover, and Keyboard
⚡ Global and Local Variables (thank you for this)
⚡ Custom Sounds
⚡ Backdrop filters like IOS and Fluent Design
⚡ Multi nested components with chained animations using variables
⚡ Layers / Z-index change on animations
⚡ Masks with animations
⚡ Scene based rules versus components based rules
⚡ Layer animations on overridden components
⚡ Transitions between Scenes
⚡ Change Text based on interactions
⚡ Random Text
⚡ Rotation animations
⚡ and last but not least, like Flash, change orientation position on nested components
NOTE:
🔥 The best part is that ProtoPie creates MP4 videos. Each video shows a different type of interaction, voice, mouse, and keyboard. (Keyboard is my favorite, it simulates the TV remote control)
I mean, I keep going. All I can say is that I was not ready for ProtoPie to be as powerful as it is. You gain my heart, I just want to congratulate the entire ProtoPie team, you guys really created a beast, I can feel that it is a very complex piece of machinery.
Here is the Protopie File, follow the instructions:
https://cloud.protopie.io/p/0b943b0f92/2?ui=false&mockup=false&touchHint=true&scaleToFit=true&cursorType=touch
FOLLOW
~ Twitter ~ http://twitter.com/igcorreia
~ Behance ~ https://www.behance.net/igcorreia
~ Codepen ~ https://codepen.io/igcorreia
CONNECT
@igcorreia
(Telegram, Instagram, or Snapchat)
