getmusicbee.com
MusicBee & Add-Ons => Customizations => Skins => Topic started by: cooljazz on May 17, 2011, 02:47:00 PM
-
I just made up a basic idea of a new modern skin. However, to make it happen, I would need some help and on top of that I'm not sure if something like this is even possible because a lot of things like the menus would go to different areas on the screen
Here is just a basic idea of what i mean and far from complete:
http://musicbee.amasongs.de
-
No luck with the skin guides?
-
Well, is it possible to rearrange things and modify dynamic behaviour of MusicBee with skinning? I do understand that you can change a lot concerning colors and images. But as far as I see all skins so far have the same layout, the same buttons for stop/play and the same font?
-
Right. for now you can't make it look like the mockup you posted.
You could PM Steven if you need new stuff added.
-
The most easiest way to program skins the way you want would be with the support of CSS and JavaScript as they introduced it to GNOME 3.
The only thing I'm afraid of is that this could have a negative impact on performance.
-
i've been thinking of adding support for rounded buttons so it is something i am willing to do.
i wont be adding css or javascript support - for layout and positioning i have built musicbee so that is customisable to a degree by the user and independent of skins
-
I mean CSS would make it easy for webdevelopers to contribute to MusicBee?
I think songbird has support for CSS and despite the fact that it can't do half of the things MusicBee can do and that it is rather slow, it has some brilliant feathers.
Here is one of my favourites.
http://addons.songbirdnest.com/addon/1624
-
so if i added support for the rounded buttons, and allowed a bitmap for the volume bar so you can get the shape you want would that suffice?
there is already a request to dock the player panel to the top, so when i do that i would probably dock the menu as you want
but for what i have in mind the volume bar would stay where it is now the the right player controls would stay the same shape (but its that way with the songbird example anyway)
-
Yeah, of cause that would be great: Here is just a little more detailed version of what I'm planning to do for MusicBee:
http://musicbee.amasongs.de
Thank you Steven.
-
If you don't mind me interjecting, I would prefer the menu to be on top or hidden if possible. Just my opinion.
-
I agree with Cartman, the UI would look sleeker (just my opinion) if the menus were on top, or optional a la firefox 4 (pressing ALT reveals them at the top). The only problem with this though is that the menus in MusicBee are in use quite a lot, but that could be because I am still sorting and refining my music collection.
-
I just did it in my example: http://donkey-arts.de/test3/idea.png
And what can I say: I think both of you are right about this.
-
I made a few updates to my mockup.
I have thought about how to make the grid view eye-appealing. I think that a really slight shadow would do a good job.
In my example i used two grey lines 1px each.
background color: #EEEEEB
inner grey line: #C4C4C2
outer grey line: # E1E1DE
In the navigation box I used a double inner shadow on the buttons and the windows for the now playing information.
Last but not least: MusicBee right now puts the name of the artist on top of the name of the album. But in many cases there are more Albums of one Artist than there are different artists having albums with the same name. So I would suggest making it iTunes alike: Put the Album on top in bold letters.
See for yourself: http://musicbee.amasongs.de
-
i did a quick change to see what the player panel docked to the top would look like and it looks very cluttered as-is, so like in your mock-up it would need to "lose" quite a few of the controls to work
In your mockup, there is no back/forward navigation, new tab or refresh button, and no button to switch views.
all of this is probably acceptable to someone who wants a simple player and only uses the main library panel and plays music from there ie. no right sidebar
i do think it would need to have the bottom right player controls though eg. shuffle, equaliser, repeat etc displayed in the player controls panel at the top
i imagine many people would want to have ratings/last.fm love button displayed in the player controls panel
-
Last but not least: MusicBee right now puts the name of the artist on top of the name of the album. But in many cases there are more Albums of one Artist than there are different artists having albums with the same name. So I would suggest making it iTunes alike: Put the Album on top in bold letters.
You can Configure how the lines read..in configure layout of the Artwork
-
Right now I'm working on a mockup version that brings all functions musicbee has into this skin.
I'm trying hard that the final version will have large enough buttons to work with touchscreens and to look good on small screens and big screens.
How about this shadow around the album covers?
The files I posted are fireworks png so anyone who got fireworks can use it to improve the idea.
-
In your current mockup, all of the buttons are the same size and shape. They don't have to be this way if it makes them fit better. Maybe the switch views buttons could be smaller as they aren't used that much.
-
mockup: http://musicbee.amasongs.de
cartman, you are right about the switch view buttons, I corrected this.
I included an idea for tabs. A last fm logo at the bottom indicates that you can scrobble songs to last.fm
I also included some bottons at the bottom which you could use to bring up different panes with Lyrics, Now Playing etc.
-
They are only suggestions. Your mockup is really looking nice though, and original.
-
Wow. I like this. Keep up the good work!
-
I just put a little html with css together and created a little Desktopfeel for the mockup.
You can view the skin from different perspectives with the buttons on the bottom.
You can view the idea here:
http://musicbee.amasongs.de
I would be happy about any advice about what to modify/improve
-
Just uploaded an example of how the concept could be skinned by changing colors.
-
Small update to the panes right and left and an idea for a scrollbar.
Pictures should dissolve at the top and the bottom when scrolling in order to not distract the design. It is the same way in the most recent app menu of android.
-
I love the design and I hope you won't get me wrong, but I think you're getting carried away.
The changes you want are more than just a few new skin elements, it's a complete redo of the interface. I'm just not sure it's something that Steven would want to do.
He might, I have no idea, but for now it's seems to me a waste working how it would look in Photoshop when it can't be done in the actual software.
Peaching the idea was good, it's a great design. just hate to see you wasting time keeping the PSD updated when it will probably won't be possible to execute.
-
i would certainly be taking an incremental approach to it and then see how it goes. I already had in mind to do customised buttons, volume bar and player display panel so a more 3-d effect can be done
-
Finally !
something worse than one of my skins..... ;D
ok now don't get upset i'm just joking....I can appreciate the work you put into your design..excuse my poor humor
-
How many prototypes are never released to public? ;)
My intention was just to share some ideas of how the GUI of MusicBee could look like in the future.
However I love MusicBee for what it is, offering truly audiophile quality and management. So its kind of a fun part to work a little with fireworks, sharing some ideas.
And its not time being wasted. Just a little time to relax from working :)
-
I agree with you, it's never a waste of time if you enjoy iy or learn from it.
The only time wasted..is getting wasted ;D...
well except on the weekends
-
I was also wondering how likely this is of happening. But even if only a few changes come of it, it would be worth it. I would love to see some more configuration options for skins.
-
@cooljaz
I see that the website is password protected. So unfortunately i can not see your mokups ;)
-
Should be online again :)
-
I would be very excited to see custom controls as Steven talked about, it would definitely give Musicbee a more polished look, as well as giving us skin creators something else to play around with :)
-
Just added some more ideas...
-
Wow cooljazz, those mock-ups look awesome, tight as a bees butt :)
It would be wonderful if Steven could implement these.
kr
Robert
-
:-) Here is a mockup with some different modern ideas: http://musicbee.amasongs.de/index2.html
Make the browser window fullscreen to see how it would integrate within the screen at the left top corner.
-
The mockup is very promising. I wonder if in the next revision you could check into consideration an option to locate the Player Controls Panel at the top as it's impossible with the current skins.
Have look at the topic (http://getmusicbee.com/forum/index.php?topic=2963.0) - the feature request is quite popular.
As a solution, I'd suggest to move all player control buttons form the bottom bar (which IMHO seems a little bit too wide in your last mockup) and locate them at the top main menu bar ( between the search field and Minimize/Maximize/Close button).
Saving the space makes GUI less cluttered and allows to work comfortably with the application on low resolution or small displays.
This approach is becoming more and more popular with Internet browsers design.
-
I made the changes as suggested by VX :)
http://musicbee.amasongs.de/index2.html
-
<?xml-stylesheet href="common.css" type="text/css"?>
is this an option?? it will be easy to include css.
-
I made the changes as suggested by VX :)
http://musicbee.amasongs.de/index2.html
Thanks :) The mockup looks really great 8)
I hope those who would like to locate Player Control Panel at the top have finally found the solution with the future MB updates...
I like the current MB layout, but I guess some new ideas, such as those presented by cooljazz, could attract newcomers :)
-
Hi cooljazz
I have to say I prefer this one http://musicbee.amasongs.de/index.html over the new one.
Don't get me wrong, number 2 still looks good and your work is greatly appreciated.
kr
Robert
-
New idea inspired by Google. I will try my luck, when the new bitmap based skins are available with musicbee.
(http://musicbee.amasongs.de/idea3.png) (http://musicbee.amasongs.de/idea3)
-
keep the great work cooljazz, nice mockup!
-
Dark Version with idea of how to present aditional information from wiki, last fm together with library information. Inspired by Google.
The covers dissovle at the top and the bottom like in the Android App Menu. Currently I'm working on some ideas of how to present the settings page, equalizer and visualizer in tabs as seen in Google Chrome.
(http://musicbee.amasongs.de/idea4.png) (http://musicbee.amasongs.de/idea4.png)
-
I really like the dark version, well done :) Maybe instead of the red, a yellow/orange colour from the musicbee logo could be used to make it in keeping with the brand and website?
-
Excellent idea ;)
I used the exact color of the MusicBee Logo.
By the way: The yellow bar on top is the track progress bar.
(http://musicbee.amasongs.de/idea5.png) (http://musicbee.amasongs.de/idea5.png)
-
Absolutely love it ;) even if we manage to create something approximately close to that in the future with bitmap skinning etc, it would make entice more users, as well as making the other big music managers look awful :P
Nice work!