Jump to content



Photo

Xbox Music+Videos App (concept design for windows 8)

windows 8 app metro music concept design

  • Please log in to reply
21 replies to this topic

#1 Zain Adeel

Zain Adeel

    Zain

  • 3,541 posts
  • Joined: 15-March 09
  • Location: Lahore, Pakistan

Posted 24 December 2012 - 00:36

I present to you a media player concept design for Windows 8 (metro environment). This concept is based on the design guidelines provided by Microsoft for a touch friendly and mouse+keyboard friendly application.

The basic design inspiration came from the Zune Desktop App and from Windows Phone 7. I tried my best to find the balance between aesthetic detailing and the actual functions of the app.

My idea started with the realization that Microsoft should combine their music and video app and brand it with Xbox as they do right now (but separately). I took a week to brainstorm how to best combine both these features in a manner that seems natural to navigate through and use.

This concept detailed below is what I came up with after spending a full week thinking, sketching, designing, testing, re-designing, detailing, and finishing.


Music+Videos:
This app should be named Music+Videos as these are the main two types of media Microsoft wishes to market through this app.

Before further explanation I need to make clear that the Green I used is not the Xbox green. It is a mixture of the Xbox green and a different green I used to achieve balance when it is pinned to the start-screen as the Xbox green is too bright and stands out too much, whereas the green of games tile in Windows 8 is too sharp.

I borrowed the amazing Animation Microsoft used in their Windows Phone 8 Games app and tried to replicate it in Photoshop and ended up with a sweet GIF showing how the live tile will look when the app is not in use and also while a song is playing.

Note* if a movie is playing and paused, it will show in the live tile instead of the song and the bottom left icon of a headphone will be replaced with the video icon. Same applies if a podcast is playing. These images below are GIFs please open them to view the animation.

Posted Image
via i50.tinypic.com
Posted Image
via i46.tinypic.com
Posted Image
via img836.imageshack.us


Frontend:
This is the main screen of the app. This screen is kept as simple and functional as possible. It looks pretty much like the Video app in Windows 8 right now because the way they advertise the marketplace items was almost perfect.

The main different here is the "History" area. These tiles are the last items played from the "Collection". The very last item gets a special tile, in this case a tile with the artist and the album both in view. Clicking it or any other tile opens the view window of an Album or a Movie.

The Main design problem I wanted to solve was to find a way to show the MAIN PLAYBACK CONTROLS in the app in every screen and section of the app so one can easily change songs irrespective of where they are in the app or what they are doing in the app.

Note* the extra space in some tiles is because I wanted these tiles to accommodate more information found in video clips or movies. I want to use the same tile for music and video.

Posted Image
via img203.imageshack.us
Posted Image
via img834.imageshack.us

Collection:
When you click the "collection text from the frontend you are transferred to this screen. Now you are in the COLLECTION area.

The main headings allow us to move between music, video, or podcasts. And the further Headings on the far right allow us to tweak the content and filter it according to our needs.

The collection opens in the albums view by default but each of these would be configurable in the settings charm so you can set the default to what you use the most.

In the album view the albums are sorted so they can be scrolled horizontally. (All such listings are scrolled horizontally and can be scrolled by using the mouse to click and drag).

Posted Image
via img189.imageshack.us
Posted Image
via img22.imageshack.us

In songs view clicking a song, tapping it will bring up the menubar from below allowing us to do any function shown in the image below. Multiple songs can be selected with the same method.

But what's different here is that a tap+hold will play the song immediately and the same if double-clicked with a mouse or double tapped with the spacebar.

Posted Image
via img35.imageshack.us
Posted Image
via img832.imageshack.us
Posted Image
via img545.imageshack.us
Posted Image
via img42.imageshack.us

In artists view here i show how the alphabets can be used to jump forward or back to a particular alphabet just like in WP7.

Posted Image
via img26.imageshack.us
Posted Image
via img248.imageshack.us

This is where the fun begins. I really wanted to differentiate how artists view works. How it works right now in windows 8 is really messy. I wanted it to be very easy to navigate. So i created this concept where clicking an artist will take us to a new screen. A screen of the artist where we can clearly and cleanly view all of their songs or albums. Or go back by the back button. The images below are self explanatory.

Posted Image
via img849.imageshack.us
Posted Image
via img716.imageshack.us

Now onto something very important. The playlist function right now doesn't really make much sense as it needs us to be in a specific place for it to work properly. To fix this my controls bar allows us to show the playlist ANYTIME from anywhere within the app.

We can also pin the playlist and it will stay there as long as we want it to be. The rest of the app will size accordingly. The playlists can be easily saved with that save button next to it and clicking on a song plays it. swipe to the right to delete it from the playlist.

Posted Image
via img255.imageshack.us
Posted Image
via img600.imageshack.us

Moving over to the videos side will also reveal a new method of presentation. This method in design is exactly the same as the ARTISTS ALBUM view but it is sized according to the standard poster dimension and shows all the important information right there. It is easy and fast. Same will be true for the TV heading. The other heading on the other hand will be different. As it will be housing normal videos it will work exactly like the songs view.

Note* if while watching a movie we click the back button the movie will pause. And where ever you are in the app you can resume the movie buy just clicking that small screencap at the bottom left of the MAIN CONTROLS area. It will take you straight to the movie. This control, when playing a song, will work differently. It will instead open the current album playing so u can choose any other song from it or add more to the playlist.

Posted Image
via img694.imageshack.us
Posted Image
via img255.imageshack.us
Posted Image
via img22.imageshack.us

Marketplace:
I choose to color the marketplace white so it contrasts the collection. This will make it easy to identify if we are in the marketplace or in our own collection because as you can see the Design inside will be pretty much the same for finding media.

Note* the search charm will work just like it does but it will search inside the current Heading. (searching from the frontend will search everywhere).

http://cdn3.sbnation...bums_medium.png
via img59.imageshack.us
http://cdn2.sbnation...vies_medium.png
via img404.imageshack.us


Conclusion:
I went on to design this because I don't like the current app at all!. The other reason was so I can show Microsoft how inconsistent they are across different apps and how their finer graphics are not as polished as they could be.

Note* the graphical elements and size of text all around the app will depend of the DPI of the display. This concept is designed to be best usable with a 100DPI.

for comparison. On a Surface RT the app will be scaled to 150%. So instead of 7 songs we will see 5.
P.S. Please view all the images in full size. Try to set them up as a fullscreen slideshow on a 14-inch ultrabook to feel how it might be to touch.


#2 Don't Feed the Wolfie

Don't Feed the Wolfie

    Don't sugarcoat it because you'll probably eat that too&

  • 5,217 posts
  • Joined: 25-June 07
  • Location: CPT
  • OS: Windows 7
  • Phone: Galaxy S2 CM

Posted 24 December 2012 - 00:48

Wow, nice design (Y) Isn't it a bit ironic how you are able to design such gems yet MS spouts such garbage apps? They can't adhere to their own design principles....

#3 Riva

Riva

    Neowinian

  • 1,476 posts
  • Joined: 11-February 07

Posted 24 December 2012 - 00:49

Much better than the official ones. I find the official ones "messy". Maybe they hired an android developer to deliver those :D

#4 Sikh

Sikh

    Neowin Addict!

  • 3,780 posts
  • Joined: 11-March 07
  • Location: localhost
  • OS: Windows 7 / 10.8 / Ubuntu Server
  • Phone: Nexus 5 PA 4.4.2 / iPhone 5

Posted 24 December 2012 - 00:51

Much better than the official ones. I find the official ones "messy". Maybe they hired an android developer to deliver those :D


Lmao, nice

#5 phunkymunky

phunkymunky

    Neowinian

  • 287 posts
  • Joined: 18-November 02
  • Location: Sydney, Oz

Posted 24 December 2012 - 01:25

there already was a good template to use for xbox music, it's name was Zune!

#6 Osiris

Osiris

    Neowinian God!

  • 11,413 posts
  • Joined: 31-October 01
  • Location: Australia
  • OS: WIndows 8.2
  • Phone: Nokia 930

Posted 24 December 2012 - 01:35

Nice design and very detailed, a tip of the hat to you good sir and a wag of the finger to MS...its amazing with all the templates they had to work off MS missed the mark so much,

Since its unlikely MS will pick up your design and actually make this how about you work with the VLC or XBMC boys to bring this to us on some platform :)

#7 zhangm

zhangm

    Just bitter.

  • 9,962 posts
  • Joined: 21-August 02

Posted 24 December 2012 - 01:49

The MS devs really ****ed up the default apps.

Anyone else really love that 500 ms lag between right-clicking on something and having the playback control buttons slide up?

#8 OP Zain Adeel

Zain Adeel

    Zain

  • 3,541 posts
  • Joined: 15-March 09
  • Location: Lahore, Pakistan

Posted 24 December 2012 - 09:54

you wont have to worry about any lag here :) the reason the main controls are always present. So one can swiftly change songs or pause them.

Thank you everyone for appreciating my effort. If i knew how to code. I would have taken it on myself to make this in some kind of app with no backend. just graphics and animations and such so one can see how it might really work.

#9 ACTIONpack

ACTIONpack

    Graphic Designer

  • 2,672 posts
  • Joined: 10-August 03
  • Location: Lawrenceville, GA
  • OS: Windows 8.1 Pro
  • Phone: Nokia Lumia 925 (T-Mobile)

Posted 25 December 2012 - 22:17

Looks really good. I'm designing a concept myself that I will post in later tonight. :-)

#10 j2006

j2006

    Neowinian Senior

  • 2,555 posts
  • Joined: 01-March 06

Posted 25 December 2012 - 22:31

Thanks for this concept... it looks wonderful! The Xbox team really need to get their act together. It almost feels like they were rushed to put something together quickly. Zune was designed perfectly and just worked the way it should work, so they should have simply followed the design for that as you did. I hope they take note and update that app and FAST.

#11 OP Zain Adeel

Zain Adeel

    Zain

  • 3,541 posts
  • Joined: 15-March 09
  • Location: Lahore, Pakistan

Posted 26 December 2012 - 07:56

Looks really good. I'm designing a concept myself that I will post in later tonight. :-)


would love to see it.

Thanks for this concept... it looks wonderful! The Xbox team really need to get their act together. It almost feels like they were rushed to put something together quickly. Zune was designed perfectly and just worked the way it should work, so they should have simply followed the design for that as you did. I hope they take note and update that app and FAST.


yea I hope so too. Its the only app I have to use because zune has started messing up with my songs (its not recognizing artists of most songs for some reason) :(

#12 ACTIONpack

ACTIONpack

    Graphic Designer

  • 2,672 posts
  • Joined: 10-August 03
  • Location: Lawrenceville, GA
  • OS: Windows 8.1 Pro
  • Phone: Nokia Lumia 925 (T-Mobile)

Posted 26 December 2012 - 19:19

would love to see it.


I'm halfway done. I'm at work now, so I can't work on it at the moment. I have a similar look like yours with the Zune layout but will iTunes layout as well because there are some stuff that iTunes does a really good job at like the podcast. But it will have the Windows 8 theme.

#13 OP Zain Adeel

Zain Adeel

    Zain

  • 3,541 posts
  • Joined: 15-March 09
  • Location: Lahore, Pakistan

Posted 27 December 2012 - 06:19

I'm halfway done. I'm at work now, so I can't work on it at the moment. I have a similar look like yours with the Zune layout but will iTunes layout as well because there are some stuff that iTunes does a really good job at like the podcast. But it will have the Windows 8 theme.


I checked the new iTunes but I didn't see the podcast part.. I just checked the new album view thingy but it wasn't really working. IT was just eye candy.

#14 ACTIONpack

ACTIONpack

    Graphic Designer

  • 2,672 posts
  • Joined: 10-August 03
  • Location: Lawrenceville, GA
  • OS: Windows 8.1 Pro
  • Phone: Nokia Lumia 925 (T-Mobile)

Posted 27 December 2012 - 06:22

You need I candy to make ppl use It.

#15 OP Zain Adeel

Zain Adeel

    Zain

  • 3,541 posts
  • Joined: 15-March 09
  • Location: Lahore, Pakistan

Posted 27 December 2012 - 12:11

You need I candy to make ppl use It.


the eye candy lasts just a few days. Or a week max. After that you start to see its disadvantages. Like how the album view opens at different places for each album and it at times make the user scroll to see all the songs.