We talked about the product design, user interface and the importance of context in our workflow. We also defined design process and completed definition of our product along with a roadmap and userflow. We know how to create wireframes and mockups and why to do so.
Let's proceed to prototypes. We'll shortly discuss the best practices and create the prototype out of our static images. Afterwards, we'll try to add additional context by creating several simple microinteractions.
What's the main purpose of creating a prototype? It's best to verify things empirically.
As we already agreed, our work is mostly about communicating the idea.
I have prepared assets for our workshops, as you've worked on different resources.. However, if you stick with Photoshop, there is an import possibility built in Invision.
Please download the assets from Google Drive.
Let's jump to Invision and prepare the very first prototype.
We made a working prototype, however, it's still a bit static. We may add some nice microinteractions to spice it up a bit and get better context of users' actions.
At this point, we are discussing the post which is available here.
Let's jump to Framer and work on dog's tile hover state.
Thank youuu, product is ready! Of course, it's never ready, but we've made a good start.