Deviation Actions

wwsalmon's avatar

A Modern Media Center / Windows 10 Google: Desktop

By
5 Comments
1K Views
A while ago I took the media center out of the main Windows 10 Google project to try out some new ideas. I renamed it "A Modern Media Center," a little mini-project that would eventually go back into Windows 10 Google. The idea was this:

Media Centers are going out of fashion. In Microsoft's Windows 10, the Windows Media Center was entirely gotten rid of. Why?

The Windows Media Center had the ability to organize all the media on your PC - videos, music, pictures - and things like recorded TV and whatnot - are all put into one set-top-box-ish interface. It tries to trap you into the app to make the experience more immersive and allow you to enjoy your media uninterrupted and in a consistent and cohesive environment.

But people are largely moving out of local media to use streaming services like Netflix, iTunes, Spotify, and other things. All of your songs are already all in Spotify, so why would you want another interface to layer it on top of? You often do want to jump between YouTube and, oh, I don't know, typing that essay due tomorrow. So a media center like the old Windows Media Center is useless or not preferable to just using the native interfaces.

A Modern Media Center aims to revive the idea of a media center, incorporating streaming services like said Netflix, Spotify, and iTunes into a single cohesive environment; this already makes it more relevant to the majority of people. Being able to seamlessly switch between and browse through all of your services through a single, minimizable, playing-in-the-background Window already presents a useful alternative to native interfaces.

But the interface also binds everything together. If you just feel like browsing through YouTube, you can do so in a beautiful, playback-focused interface. A lot of video platforms, like the subscription-based Vessel, have been adopting this kind of interface; the result is they are a lot more closed-off, differentiating creators and viewers (whereas YouTube tries to encourage being both), but also that the experience is quite a bit smoother. With my Modern Media Center, if you just want to browse through YouTube on a Friday night, you can do so in a beautiful interface without being distracted by all the creator tools that'll just get in your way.

Spotify has a nice desktop player that plays music in the background for you. But say you're an iPhone user and don't want to download the quite heavy and extensive iTunes program from Apple and just want to listen to your library on your PC in the background. With A Modern Media Center, you can do so; and if you want to watch a YouTube video, you don't need to open up a separate program, stop the music, then go back to YouTube and watch that; you can directly override it.

So that's the idea behind A Modern Media Center.

The interface uses nested sidebars with a combination of Material Design and Windows 10 and Metro UI, as per our Windows 10 Google project. Trying to get nested sidebars to work was actually one of the biggest factors in taking the media center out of Windows 10 Google for a while to experiment, and what you see in this deviation is what I've come up with after a substantial amount of time fiddling and idly trying things out on the side of working on the main project.

I'll leave the rest of the explaining to the mockup itself :)

Keep tuned for more!

-wwsalmon

Windows 10 Google Team:

DaKoder DriftShift dAKirby309 JSFeliciano

DISCLAIMER: This is just a mockup and a concept. It's not functional. I have no plans to make it functional, although you are welcome to take my work and build on to it so long as you credit me. This mockup was made in Paint.Net and/or Photoshop and/or Illustrator and/or other graphic design tools.

NOTE: I don't know why, but if you want to order a giant canvas print of my mockup, you can do so through DeviantArt ;)
Image details
Image size
5915x8295px 17.63 MB
Published:
© 2015 - 2021 wwsalmon
Comments5
Join the community to add your comment. Already a deviant? Log In
GrunkleBran's avatar
With a few tweaks, I can see this being something being used with Microsoft's Fluent Design philosophy. You said this was made in paint.net/photoshop/illustrator so I'm wondering how much work was made with paint.net itself. I'm just curious as I love the program and have been using it for almost a decade. I know this was two years ago but do you still have the pdn file for this project? I've always wanted to show friends and stuff how versatile the program is and I wonder if I could showcase this and stuff. :)
wwsalmon's avatar
This concept was basically completely done in Paint.NET. I included the other programs because I used assets some of my collaborators created in Photoshop/Illustrator, i.e. program icons. I now use pretty much Photoshop exclusively for graphic design, mockups, etc.

Paint.NET is really powerful only as far as direct pixel manipulation goes; for example, once you draw a rectangle, it instantly rasterizes and the only way to change it is by directly editing the pixels (i.e. drawing a new rectangle over it). The same goes for all shapes, texts, shadows, etc. A lot of care and manual work has to be put in to keep things looking aligned and precise; however, when used right, pretty polished work can be done in Paint.NET.

Photoshop is much less tedious; it allows you to place a rectangle or shape, then come back and change its dimensions later; edit text afterwards; and has much more powerful features like grids and guidelines to help position elements. I find that Photoshop allows me to focus less on quality control and making sure no shadows or anti-aliasing is messed up or shapes are off by a pixel and instead allows me to experiment with more creative aspects like masks and more interesting layouts, patterns, and shapes.

That said, Paint.NET is a great learning tool, and for most simpler tasks it's much faster and more intuitive to use than Photoshop. I also love its compression engine - it's super fast and works really well. I still use it for really simple graphics and when I need to be really precise and have control over each pixel, such as with web graphics. You can go really far with it.

I seem to have lost the pdn for the master presentation mockup, but I can give you the mockup of one of the windows: drive.google.com/file/d/0B7WCi…. You'll see that it's just a bunch of simple filled shapes as well as resized images and icons with some drop-shadows placed on a bunch of layers to all come together and make a mockup.

I'm not very active on DeviantArt anymore, but the work I do now in Photoshop is more complex and flexible: lh6.googleusercontent.com/Bp6w….

I'm sorry I couldn't get back to you sooner, and hope this helps. You can shoot me an email at samsonzhang@wwsalmon.com if you have questions or want more PDNs. Good luck with your work!
theofryeyanos's avatar
how do you make these graphics so high-res and neat? what program do you use for the editing?
wwsalmon's avatar
skills. Years and years of doing stuff like this.

Paint.NET, it's in the description :P
theofryeyanos's avatar
derp derp derp derp derp
the giant description scared me
anyway it looks amazing