v6.0 Subsonic Design - Concept

[davidburleson]

Howdy Subsonic Community!

I'm one of those users that never really venture much into the forums. Pretty quiet and really thing subsonic is a great piece of code. The one thing, in my opinion, that let's subsonic down is it's dated layout and design. I feels like the developers may have concentrated on features rather and left UI and design out of the equation.

I thought I would put together a proposed design and share it with everyone to see what everyone else thought. This is my concept of 'v6' and welcome any feedback. I'm quite a fan of minimal design, so i've tried to tuck away and group elements of subsonic to de-clutter the interface which allows the user to concentrate on browsing media and playing media. I always felt that restricted by the number of scrollbars and scrollable areas in the exisiting design, so, i've done away with that to contain only 1 main scrolling area. This means more space from browsing and viewing.

Screenshot: http://imgur.com/FMKXZSj

There are a few design nods to spotify and itunes in this design, i'm fans of both.

I think the latest version 5.1 is really fantastic and i'm looking forward to further developments of subsonic!

[davidburleson]

I noticed that this forum likes to crop the image on the right if they are too big which was removing a bit of the layout screenshot. I've removed the image and have provided a link to the screenshot instead.

[inf3c73d]

I was thinking the same thing for years now ... only thing is I have no 0 design skills.
+1 Mr. davidburleson .. very well said

[rubbersoul]

I really like this mock-up. I'm curious how you envision the artist browsing to look. I like how you've replaced a long list of artists with the different ways of browsing your library but it's not clear how browsing by artist would be displayed.

[davidburleson]

I really like this mock-up. I'm curious how you envision the artist browsing to look. I like how you've replaced a long list of artists with the different ways of browsing your library but it's not clear how browsing by artist would be displayed.

I do love a bit of feedback!

'By Folder' is the same as 'By Artist' I guess as subsonic essentially just lists the folders in the media directories. Here is something i've knocked up, again inspired by some of my favourite media software:

http://imgur.com/Qgxsbmg

When you click on 'By Aritsts/Folder', you will be presented with 2 new panels: You have a scrollable left column which displays your artists with album and song counters. I would suggest the cover art is the latest album added to subsonic or latest album.

The right area displays the artists meta data at the top. This would now include related artists and start radio options, along with any other meta data for the future. I've continued with the album grid approach as I didn't want to rip iTunes 'Artists' view off too much.

To me, it feels more application like. It gets our of the way, as good design should. You could add gradients, drop shadows, etc if you wanted, but i'm a fan of flat design.

[Jägs]

Visually, I really like it; however, I would like to do away with the side menu, if at all possible, or at least be able to hide it. Note: this is more of critique of Subsonic's layout than your design. I also have a large number of playlists, so I'd like to seem them in a drop-down list.

I think a large number of us have widescreen devices, so using vertical real estate for menus and hierarchy does not seem to make a lot of sense, so taking a cue from iTunes, I'd like to see more emphasis on a top menu, something like:

SUBSONIC (logo and home link) || home || <sources drop down> || <playlist drop down> || settings || (now playing & play controls; like your mockup) || (search box)

That area would be locked on the screen, and the main area would have something like Plex's web interface, your's, and Microsoft's tiles:

What's New (like your mockup)
[album] [album] [album]...

Recently Played:
[album] [album] [album]...

Recommended For You:
[album] [album] [album]...

Just my 2¢.

[titooo]

It looks really nice. It would be great to see that design in the future subsonic version

[amasondk]

This 100% exactly what I have always wanted out of Subsonic. This sort of design flows very well and is extremely streamlined (everything folds in and out) making it simple and accessible from even a small phone screen. I would love to see this design or something very similar implemented.

[acroyear]

perhaps a little too close to Plex's media manager interface?

[titooo]

What would be interested to know is if the developers of Subsonic are willing to change the UI or if it's something that they don't consider yet.

I also would like to know if it's possible to apply a change the UI of the local subsonic website just replacing some html and image files (like if it was just a theme that we replace)

[davidburleson]

It's a little bit like all media software, which is a good thing really. It's familiar UI. I had to admit, most of my inspiration is from iTunes and spotify, but I imagine elements will look like other apps too.

I imagine it's hamlet at the moment with a series of views. It's just finding the location of the template files and editing them.

[davidburleson]

Subsonic's interface is primarily HTML and CSS. On Windows, each view is held in C:\subsonic\jetty\4340\webapp\WEB-INF\jsp\

index.jsp is the main frameset for the whole thing.

With a bit of knowledge of HTML and CSS, anyone could probably edit this. I might just give it a go myself.

[Jägs]

The problem with modifying the CSS/HTML is that each update wipes your changes. I keep a backup, but it's a pain.