Recommended Posts

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.

4v39jc_medium.gif

via i50.tinypic.com

qqeauu_medium.gif

via i46.tinypic.com

02livetilerunning_medium.gif

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.

01frontend_medium.png

via img203.imageshack.us

02frontendalbumclick_medium.png

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).

01musicalbums_medium.png

via img189.imageshack.us

02musicalbumsclicked_medium.png

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.

03musicsongs_medium.png

via img35.imageshack.us

04musicsongsclick_medium.png

via img832.imageshack.us

05musicsongsclickmultip_medium.png

via img545.imageshack.us

03songclickanimation_medium.gif

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.

06musicartists_medium.png

via img26.imageshack.us

07musicartistsjumpto_medium.png

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.

08musicartistsalbum_medium.png

via img849.imageshack.us

09musicartistsbio_medium.png

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.

10playlist_medium.png

via img255.imageshack.us

11playlistpinned_medium.png

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.

12videosmovies_medium.png

via img694.imageshack.us

13videosmoviesclicked_medium.png

via img255.imageshack.us

14videosmoviesplaying_medium.png

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).

01musicalbums_medium.png

via img59.imageshack.us

02videosmovies_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.

  • Like 1

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 :)

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.

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.

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) :(

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.

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.

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.

You need I candy to make ppl use It.

God no, this is the problem with a lot of software.

You need a good balance between usability and eye candy. Eye candy alone leads to horrible to use software.

Good Job Zain, must say it looks very nice and very usable. Team up with a developer (if you're not already) and get this made, i'd pay!

God no, this is the problem with a lot of software.

You need a good balance between usability and eye candy. Eye candy alone leads to horrible to use software.

Good Job Zain, must say it looks very nice and very usable. Team up with a developer (if you're not already) and get this made, i'd pay!

Thank u. Yup I was trying to find that balance here. And if MS open up their stores here I might pick this up and learn to code. Make apps and such. Bring my design to use.

My only recommendation, and it's a strong one, build in-app search. Do not use the OS Modern Search. That is all. And allow direct selection and same context menu options on search results.

UPDATE: Here I have scaled the UI using same resolution but for a 10 inch display like the Surface RT. This is how the app will look on the Surface RT if the UI and touch sizes are kept exactly as they are in my earlier design for a 100DPI screen.

artistscaled150.png

  • 3 weeks later...
This topic is now closed to further replies.
  • Posts

    • You've tried DuckDuckGo and Brave Search, now get serious with SearXNG by Paul Hill Over the last decade, it has become quite trendy to dump Google Search in favor of privacy-preserving alternatives such as DuckDuckGo, Startpage, and Brave Search. These search engines have done a very good job at highlighting dodgy practices by Google, such as adjusting search results based on what it thinks you’ll like (filter bubble) and stalking you around the web to advertise to you. While these search engines are good starting points when compared to non-private services like Google, there are still quite a few issues with them. For example, both DuckDuckGo and Brave Search require running non-free JavaScript in your web browser, which is comparable to running proprietary software on your computer, meaning you can be sure about what it’s actually doing in the background. Another issue is that these search engines are hosted on the respective companies’ servers, and you are using a service that you don’t control. Finally, DuckDuckGo, while offering privacy features, relies heavily on Microsoft’s infrastructure for its results and, in the past, has permitted Microsoft tracking scripts. If you are looking for a more private search solution than DuckDuckGo, Brave Search, and Startpage, then I recommend taking a look at SearXNG. It is a privacy-respecting metasearch engine that can be used via different public instances, which is useful for mobile users, or you can install it on your computer or server and run it locally with maximum control. Unlike Google, Bing, or Brave Search, which crawl the web and have their own search indexes, SearXNG is a metasearch engine, meaning it taps other search engines, stripping your identifying data, such as IP address, user agent, and cookies, in the process. Your search query is sent to the other search engines you enable before aggregating the results. SearXNG has deployment flexibility. If you are a casual user or a mobile user and don’t want to run SearXNG locally, you can use a public instance that is hosted by someone else. The main problem with this is that you are putting trust in the maintainer of the instance regarding stuff like logs that they may keep; good hosts should have a privacy policy explaining their policies. If you are trying to use SearXNG, you can also install the software on your device and then head to 127.0.0.1:8080 in your browser and search from there. While you don’t have to worry about a third-party admin like the public instances, search engines could ultimately block your IP address if they frown on you pulling in their search results locally. If you want to run it locally, it’s a good idea to use proxies or VPNs to hide your actual IP. You don’t have to worry about this with a public instance, as search engines never see your IP address. The main privacy benefit of using SearXNG is that it isolates your identity from the underlying engines that it’s capable of searching, such as Google and Bing. These search engines will only see requests coming from a generic server, so they can’t profile you and create a bubble filter that influences what results you see. This also ensures that your search engine doesn’t turn into an echo chamber that prevents you from reading alternative points of view. As a free software project, you are allowed to inspect SearXNG to make sure there are no negative features bundled inside. This sets it apart from the privacy search engines mentioned earlier because you can’t check their source code. As a meta search engine, you are not restricted to getting results from one source. Due to the fact that it scrapes content from other websites, your SearXNG instance will periodically get blocked from different providers, so it’s good to select a range of sources as a backup. While enabling all of the services will give you great results, this can make searching slower. I am personally happy with slower searches for the best results, but you can always check which providers are slowing down your search from the search results page and disable them to speed things up. If you want decent results quickly, enable the main search providers such as Google, Brave, DuckDuckGo, Qwant, Bing, and Yahoo. This way, you get wide coverage without the latency. On the Engines tab in Preferences, do note that there are different tabs, such as General, Images, and Videos, with their own providers that can be toggled and are not covered by "Enable all" while on the General tab, so be sure to dig into each. Just a note, if you want to enable everything, press "Enable all" in one tab, then hit save at the bottom of the page, then do the next tab, and so on. If you press "Enable all", then do that in each tab, and then save, nothing will stick. When I had just some of the search engines enabled, I searched “define nefarious” and results came back with the definition of “define” - obviously that was a sucky result. However, when I had everything enabled, it found dictionary pages for the word “nefarious” and even had an inline definition on the sidebar, which is quite nice too - that was delivered by WolframAlpha for anyone wondering! Probably the worst thing about this meta search engine is that the engines you select are saved with a cookie, so you must enable them on every new device you use SearXNG on, including if you decide to go into incognito mode with your web browser. Honestly, I would say this is the most annoying aspect, and perhaps if your browser lets you choose a separate private browsing search engine, then it would be best to use DuckDuckGo for this portion of your browsing. Another weakness of SearXNG is the random blocking of it by search providers. When you are on the results page, expand the “Response time” box, and it will show things like “Suspended: too many requests” or “access denied”. This is why it is good to enable several providers so that there is always a fallback to get results from. I won’t pretend SearXNG will be for everyone, however, if you enable all of the providers and put up with the slower response time, the results can be really amazing. Even if you don’t want to use it as your daily driver, keeping a bookmark handy that links to it is a good idea if you ever feel like doing a deep dive into a niche topic where other search engines are just failing to bring up any good result, due to the amount of sources it looks on. If you’re interested in radical user control over the software you use, installing SearXNG locally can also be a good idea, but be prepared to be temporarily blocked from sites if you trigger bot sensors without a VPN. Personally, I’ve opted to use a public instance, rather than install it myself. If you want to use it via a public instance, head over to searx.space to find a provider. Let us know in the comments if you have used SearXNG or its predecessor, Searx. What do you think about the quality of the results?
    • Dear Neowin, If it is not too much trouble, can you start using the new-ish designations for Insider Preview? "Experimental" is different than "former Dev" as it can apply to different models, eg 26H1 or 26H2 etc, right? No need to seed confusion IMHO. And, please "finally" update your graphics. OK?
    • Did you see their FAQ, its quite good. Have a look in the Advanced section. https://delta.chat/en/help
    • Just install Linux Mint that is a real blessing and many times cheaper because you can continue using your old Windows computer/laptop with the latest Linux updates.
    • Interesting share -- however it does not make sense: Email messages get stored somewhere, so how is Delta Chat "based on email" and decentralized without actually storing anything? By Web3 standard practices, the various Relays would require dedicated storage to make messages available to the recipients (like a large series of message queue channels, akin to racks of traditional post office boxes)... and Contacts must be two-way confirmed in order for encryption keys to be exchanged (ostensibly every key-pair is uniquely bound between sender and recipient) and the Relays would preserve the public keys in order to facilitate message carriage... or every device stores all sorts of keys and contact info. All of this to say, decentralized messaging is like running Bluesky nodes except instead of discovering/browsing public feeds by various posters (at the given node) these Delta Chats would be relaying encrypted messages (via Relays) that only trusted recipients would have the appropriate decryption key (their own private key) to read it. But this doesn't solve the "it's like email" sales pitch. The only way it's like email is that there's encrypted binary stuff being transported from your app into the federated ether of Delta Chat Relays for others to decrypt (hopefully only the intended recipient)... but outside of this federated relays framework, it is absolutely nothing like email.
  • Recent Achievements

    • Week One Done
      Woland13 earned a badge
      Week One Done
    • One Month Later
      Woland13 earned a badge
      One Month Later
    • One Year In
      bernmeister earned a badge
      One Year In
    • Week One Done
      Scoobystu earned a badge
      Week One Done
    • Week One Done
      tuben earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      502
    2. 2
      +Edouard
      226
    3. 3
      PsYcHoKiLLa
      158
    4. 4
      Steven P.
      75
    5. 5
      FloatingFatMan
      71
  • Tell a friend

    Love Neowin? Tell a friend!