This is the second part of the calendar tutorial. In the first part it guides you through setting up your workspace and adding parallax images. This second part, i’ll cover the horizontal calendar menu, adding a navigation drawer and the FAB (Floating Action Button).
This tutorial should take about 20–30 mins and feel free to post any questions in the comments. To get started I will assume you have Downloaded the basic ProtoPie without the interactions.
1. Adding a horizontal calendar menu
Our desired effect is for the user to tab on the header bar and vertically expand the area, allowing the user to horizontally scroll…
A quick tutorial on how to recreate a calendar app with parallax images in ProtoPie.
Over the course of the past few months, I’ve been keen to try out ProtoPie and teach myself some useful techniques I can apply to my work in the future.
There have been many different prototype tools over the years and I’ve used a lot of them. All have many pros and cons, but I’ve been eager to find one with a relatively small learning curve (looking at you Framer) that could be super powerful in taking UX and UI designs to the next level.
In this tutorial, we’ll go through creating a simple Calendar UI prototype using PrototPie. I…
Learn how to detect user inputs and display as a user initial avatar
Over the course of the past few months I’ve been keen to try out ProtoPie and teach myself some useful prototyping techniques that are lacking in the click through tools like Marvel and InVision. I plan to launch these findings as a series of tutorials I hope you can find helpful too.
One of the most powerful features in ProtoPie and certainly the strongest for me to pick it over the rest is the ability to work with user inputs and pull them through other screens using…
Rob Cleaton
Freelance UI/UX Product Designer. Working with many big and small brands including previously leading mobile apps at @trainline, @JustEat, @LloydsBank
