Mobile music app: Project that helped me grow as a designer
Where
Poland
What
Mobile app
Why
Portfolio project
Role
UI Designer
When
July2023
Category
Music, Paid subscription
Project overview
Musify is an app designed for all users who love music. It's a solo project that I designed from scratch. Designed in dark mode that increase visual appeal and hierarchy while keeping a good contrast between elements.
I've learned to apply 8pt grid which resulted in nice looking design with good amount of space between elements.
Musify has a tailored experience to suit every user by recommending similar songs, sharing news of the artists they follow and, with a search bar, the ability to find what they're looking for by typing the title or the lyrics.
Quick process overview
1
Research
Gathering information and researching similar music player apps. Next I’m looking for inspiration to create a moodboard and inspire myself.
2
Wireframes
Brainstorming ideas, preparing wireframes and first drafts for the initial idea of the design. Testing out possible placement of some elements.
3
Mockups
Turning wireframes into first mockups. Adding color, working out the typography and iterating my design to test out different looks to see what fits right.
4
Final Design
Choosing the best-looking mockups and gathering feedback to further improve my design. Usually including small style guide
Wireframes
Grid & Contrast
Back then, in the first version of this design, I used a 10pt grid, but later on, I discovered that an 8pt grid is better, and I definitely agree that my design got better spacing between elements.
Before 10pt grid
Now 8pt grid
I always pay attention to contrast between elements and double-check them with color contrast checker tools before delivering the final version.
Color scheme
I wanted a strong, lively color to match the dark background, one that brings liveliness, fun, and a dynamic feeling.
There was one challenge that showed up and made me adjust primary color to slightly darker tone of orange to make sure the contrast is fine
Primary
#C77D38
Off-Primary
#F6D2B1
Neutral Grey
#AAAAAA
White
FFFFFF
Background
#1F1D1D
H1
24px
Headline
Headline/Buttons
H2
20px
Bigger text
Text
18px
Normal text
Text
16px
Small text
Text
14px
Menu label
Label
12px
Typography choice
Aa
Plus Jakarta Sans
Primary
SemiBold
Aa
Plus Jakarta Sans
Headings
Bold
Work progress
I want to showcase a comparison between some of the initial wireframes and final version.
Wireframe
Old ver
Now
Search bar where initially I kept it super basic, received a autofill icon. Also it auto-suggests while you’re typing. Empty state picture got more visual value.
Worth mentioning is that whole navbar was revamped to improve contrast and make it fit more.
Wireframe
Old ver
Now
One of the most important screens of the music player app. I rearranged some elements and made it look more clean. Also added extra sections with lyrics.
Wireframe
Old ver
Now
Not gonna lie old version looked horrible. It was just all wrong until I properly learned how to deal with dark mode style app and properly set it like layers.
Also I added extra component where you see exactly what you pay for and how much.
Inside the project: Component examples
Form
Filled
Nickname
Balwejer
Password
***********
Active
Password
*********
Nickname
Balwe
*Minimum 6 characters long
Error
Nickname
Balwejer
*Sorry we couldn’t find an account connected to this username. Please try again.
Password
***********
*Sorry that password is incorrect. Please try again.
CTA
Primary button
Secondary button
Default
Primary button
Secondary button
Pressed
Primary button
Secondary button
Disabled
Final design presentation
Summary
It was the first bigger project that I worked on. It really helped me grow as a designer. I faced myself with new challenges and went through a fruitful learning process after receiving feedback about my work.
Feedback is very crucial to designer’s work
Proper use of 8pt grid
How to design dark mode app
Paying more attention to be consistent throughout whole design
Keeping up proper spacing between elements
Learning a bit more about setting good parapgrah line-height
I would have changed main color because orange is difficult to work with
Thank you for checking out my case study. I encourage you to contact me. Hope you’ll have a good day! ☀ ️
Message me at @
Connect with me at
Mobile music app: Project that helped me grow as a designer
Why
Portofolio project
What
Mobile app
Where
Poland
Category
Music, Paid subscription
Role
UI Designer
When
May 2023
Project overview
Musify is an app designed for all users who love music. It's a solo project that I designed from scratch. Designed in dark mode that increase visual appeal and hierarchy while keeping a good contrast between elements.
I've learned to apply 8pt grid which resulted in nice looking design with good amount of space between elements.
Musify has a tailored experience to suit every user by recommending similar songs, sharing news of the artists they follow and, with a search bar, the ability to find what they're looking for by typing the title or the lyrics.
Quick process overview
1
Research
Gathering information and researching similar music player apps. Next I’m looking for inspiration to create a moodboard and inspire myself.
2
Wireframes
Brainstorming ideas, preparing wireframes and first drafts for the initial idea of the design. Testing out possible placement of some elements.
3
Mockups
Turning wireframes into first mockups. Adding color, working out the typography and iterating my design to test out different looks to see what fits right.
4
Final Design
Choosing the best-looking mockups and gathering feedback to further improve my design. Usually including small style guide
Grid & Contrast
Back then, in the first version of this design, I used a 10pt grid, but later on, I discovered that an 8pt grid is better, and I definitely agree that my design got better spacing between elements.
Before 10pt grid
Now 8pt grid
Wireframe
I always pay attention to contrast between elements and double-check them with color contrast checker tools before delivering the final version.
H1
24px
Headline
Headline/Buttons
H2
20px
Bigger text
Text
18px
Normal text
Text
16px
Small text
Text
14px
Menu label
Label
12px
Typography choice
Aa
Plus Jakarta Sans
Primary
SemiBold
Aa
Plus Jakarta Sans
Headings
Bold
Progress
I want to showcase a comparison between some of the initial wireframes and final version.
Wireframe
Old ver
Now
Search bar where initially I kept it super basic, received a autofill icon. Also it auto-suggests while you’re typing. Empty state picture got more visual value.
Worth mentioning is that whole navbar was revamped to improve contrast and make it fit more.
Wireframe
Old ver
Now
One of the most important screens of the music player app. I rearranged some elements and made it look more clean. Also added extra sections with lyrics.
Wireframe
Old ver
Now
Not gonna lie old version looked horrible. It was just all wrong until i properly learned how to deal with dark mode style app and properly set it like layers.
Also I added extra component where you see exactly what you pay for and how much.
Primary
#C77D38
Background
#FFFFFF
Off-Primary
#F6D2B1
Neutral Grey
#AAAAAA
White
#FFFFFF
Color scheme
I wanted a strong, lively color to match the dark background, one that brings liveliness, fun, and a dynamic feeling.
There was one challenge that showed up and made me adjust primary color to slightly darker tone of orange to make sure the contrast is fine
Inside the project: Component examples
Form
Filled
Nickname
Balwejer
Password
***********
Active
Password
*********
Nickname
Balwe
*Minimum 6 characters long
Error
Nickname
Balwejer
*Sorry we couldn’t find an account connected to this username. Please try again.
Password
***********
*Sorry that password is incorrect. Please try again.
CTA
Primary button
Secondary button
Default
Primary button
Secondary button
Pressed
Primary button
Secondary button
Disabled
Final design presentation
Summary
It was first bigger project that I worked on. It really helped me grow as a designer. I faced myself with new challenges and went through a fruitful learning process after receiving feedback about my work.
Feedback is very crucial to designer’s work
Proper use of 8pt grid
How to design dark mode app
Paying more attention to be consistent throughout whole design
Keeping up proper spacing between elements
Learning a bit more about setting good parapgrah line-height
I would have changed main color cuz orange is difficult to work with
Thank you for checking out my case study. I encourage you to contact me. Hope you’ll have a good day! ☀ ️
Copyright
© 2023 Artur Niedzielski. All rights reserved.
Built with Framer.
Copyright
© 2023 Artur Niedzielski. All rights reserved. Built with Framer.