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.

Want more detail? Read the full version.

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:

Narafy Mobile (Full Version)

Mobile UI - It’s different. This is a the breakdown of what you have to work with:

Screenshot 2024-02-05 at 16.31.25.png

I started by making a plan of features that exist on Desktop that need to be covered:

Screenshot 2024-02-05 at 21.28.05.png

First Design - A basic Wireframe, getting an idea of space

Screenshot 2024-02-05 at 16.46.42.png

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:

Screenshot 2024-02-05 at 16.50.25.png