Digital Product Designer Workshops

This is the presentation of third workshops for digital product designer. You can also check the first and the second or read the full story.

Download presentation

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.

There are many prototyping tools out there. I've selected the ones that I've worked with, however, it's a really subjective selection. During our workshops we'll prepare main prototype in Invision, and then proceed with some microinteractions in Framer.

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.

There are many, many reasons to use animation in web design, but use it carefully.

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.