So here’s the scenario. You have a desktop notes application. It’s got it’s own set of unique features and quirks. How do you turn that into a mobile app.
Well there’s a few parts to that question. But the part that this is going to focus on is around form. The interactions a user has on a desktop vs the interactions on a phone.
I tend to go into a lot of detail. This version is the reduced version, focusing on illustrations and less on the why. If you want to read the full version. You can do that here:
Mobile UI - It’s different. This is a the breakdown of what you have to work with:
I started by making a plan of features that exist on Desktop that need to be covered:
First Design - A basic Wireframe, getting an idea of space
While this is very basic, it allocated space for a very large chunk of the required features. The detail of how these are addressed is the next step of the design. This design will cover these features: