UX Design
Music Learning App Prototype on Photoshop
Date
Team
2024
Individual work
My Role
UX designer
Target Users / Audience
Users interested in learning music theory
Tools Used
Photoshop
Overview
I designed a prototype of a music theory learning app using Photoshop that focuses on a clean and intuitive user experience.
First, I drew a low-fi wireframe showing the basic layout of my app. Red arrows showed the interactive elements in the design.
A more hi-fi wireframe was then created with a more detailed layout and sample texts.
The following fonts and color palette were chosen:
Process
Final Deliverable(s)
A final prototype with colors and text was created. Here are my design rationales:
1. Layout and Composition
First, I applied the harmony principle by creating rounded shapes and ovals that complement each other. The lines of various objects are also curvy, contributing to a consistent and harmonious design.
Second, I used the repetition principle to incorporate multiple similar rounded shapes on the content screen, maintaining the same layout for functions that are similar in the app.
Third, I employed a significant amount of negative space on the opening screen. I intentionally left a large empty area between the logo and the name of the app to create a sense of space.
2. Proportions and Grids
I adopted the rule of thirds proportion throughout the whole design by dividing every page equally into three parts, both horizontally and vertically. I left a 50px margin for left and right respectively, and a 20px margin for top and bottom respectively. The gutter space is 20px. The reason of choosing this proportion is because it helps maintain a minimalist design of my app and create a sense of order.
For example, every box on the content screen aligns with the grids precisely, and every answer choice on the quiz screen maintain the same distance horizontally and vertically.
I also used the golden ration on the opening screen to design the blue background shape. It maintains a golden ratio with the name of the app and the slogan.
3. Typography and Color
I chose Nunito as my typeface, because as a sans-serifs typeface, it has rounded ends on its characters, providing a friendly and modern feeling for my app.
For colors, I chose a complementary palette with pale peach and blue as two base colors contrasting each other. The combination of both cool and warm tones create a balanced, calm, and warm ambident.
