Vanilla Music User Interface Redesign

in utopian-io •  7 years ago  (edited)

Details

Actually this post was request from the friend of mine @ybreza , he ask me to post article about graphic at utopian.io . i tell you this guy is lose his head to see my article.so i thought why not i give the try and when i'm looking at his post i found one of his article about smartphone app.Vanilla Music it is,and since i'm big fans of music and digital media and again why not. i choose to design user interface because the friend of mine has already got his awesome logo.

What is it Vanilla Music

From play store:

Vanilla Music is a clean, simple and free (opensource) music player.
Features:

  • Opensource and adfree (GPLv3)
  • Support for all common audio formats (MP3, OGG, FLAC, PCM)
  • Tag based and folder based navigation
  • Support for android playlists
  • Gapless playback for OGG and FLAC (requires Android >= 4.1) and Replay Gain support

You can also check at Github for more detail behind the awesome guy's who built this app :)

d.jpg

And for more detail about the design i explain in this infographic below.
a.jpg

B.jpg

Benefits / Improvements

Honestly i'm not that interested in this app UI . that's why i choose to redesign the UI instead of logo.
i make improvement/benefits to the app UI by add more feature such as soundcloud (direct link to the particular song) so user can also sync with their account or at least find simillar genre to the music they loved on soundcloud(internet) and also user can change the background and thumbnail picture in now playing ui.

Proof Of Work

I Do not really understand how to proof it. but you can check all detail and find out for yourself.also you can ask anything about the design in the comment section,perhaps it will help proof ;)

Here it is some WIP screenshot
document size.JPG
1.JPG
2.JPG
3.JPG
4.JPG
5.JPG

Tools

i use only one of Adobe Family Software . Which is Adobe Photoshop

Original files

PNG

EPS

PSD

PDF

How It Is Look In Real World Device

C.jpg

Mockup Source

NOTES

*Read carefully the detail on infographic i provided,including images source and some icon i used in my design.the design is my own but images used in design are not.i provided the link in infographic.
*I redesign only NOW PLAYING just for the start.if someone insterested , i'll try to redesign all pages.
*please read carefully all infographic



Posted on Utopian.io - Rewarding Open Source Contributors

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

Welcome bro, good luck!
Approved, huhu yayyyy hahaha :D @bujairimi

insya Allah hopefully :D

Welcom brader @bujairimi, kedapan pasti ditrima, semangat 😁

insya Allah , amin :D

Your contribution cannot be approved because it does not follow the Utopian Rules.

  • clickable surfaces are too small for comfortable usage. Make sure all clickable / active areas are bigg enough (48x48) for easy tap by finger
  • source files you provided are not entirely in vectors
    Snímka.PNG

You can contact us on Discord.
[utopian-moderator]