Creative Creations

This is being cross posted at Javalobby and they made the first two parts into one, so this is either part 2 or 3 depending on where you read the first one (or two). The next one will be part 3 for sure though…

OK, redesign, redesign and another redesign, that is what designers do until all pixels makes sense. Anyway, no biggies but the devil is in the details and a there were a lot of details that I didn’t like. Go and look at part 1 and part 2 to see the old screenshots for comparison.

As you can see the top button labels look better now. Cleaner and more readable. I have also opted for monochrome icons with a tint for the selected button/tab. Again, it looks more clean, at least compared to having the full colored icons. I may need to recreate the icons from scratch later, to get that pure custom feel, but for now I use the excellent icon set from Icon Experience.

If you look at the second button from the left you can see that it has a slight white-blue glow. That is how the mouse-over effect will look. Of course it will fade it but it will do that very quickly, we don’t what it to feel sluggish. I have also unified the color scheme a bit. Gray-blue is the favorite color fo the day, let’s see if it sticks around to the final version.

I have removed the “track” for the scroll bar so now it looks very iPhoney (pun intended). I don’t want to be a copycat, but it looks clean. Not sure if the track should be re-enabled for mouse over or not, or maybe it will be there all the time? Not sure and it is a decision for later when we have the animations in place.

You might have noticed that the shadows have changed slightly. They are now more consistent and correct with the intended z-ordering of the main window and the side bars. Out of a performance perspective they are now also easier to make really fast.

One comment on the earlier designs was about the bottom button bar. The buttons didn’t really look like buttons. They still don’t look like normal GUI buttons but I think they look more like buttons. The easy to recognize play button will help the user in his quest to understand the GUI and what he can do with it. Usability tests will later will show if I’m wrong.

The biggest new part is the bottom bar. As I said before I didn’t want to make it white, that would make the whole GUI too blended and boring. It is still a bit experimental but generally I like the look. It should be noted that it is 60% translucent, which is impossible to see since the background is solid gray…

The main windows is now showing the newly designed tracks tab. It was harder than I first expected. Not because tracks are particularly hard to show but because they are so boring that there is little room for innovation and spicing it up. The albums on the left are all the albums to the selected tracks. Here it is very important the that loading and preparation of the album art is done in a background thread or the GUI will be sluggish at best.

Next time I will show the mini and micro version of the GUI, I promise…

Mikael Grev

The perfect media player main window v2

OK, I have redone some of the graphics. Not too much but still things that will matter. The top gray background is now striped. I think it looks more fresh. I am still not 100% confident on the new look of the track’s play progress bar. Blue made it more prevalent which is good though.

Unfortunately Adobe Fireworks does not do subpixel anti-aliasing on the text. This makes it look more blurred that it will in the finished application. Nothing to do, but it hurts my eyes..

As you can see I have added side bars. This is how extra information that you might or might not want to have visible at all times will look. The example bar is the playlist editor/player. I have opted for a Outlook stackbar look. I think it will work better than the tree structure in iTunes. iTunes mixes playlists, sources and the library in the same sidebar. I think that is a suboptimal setup as it will make it quite cluttered and too multipurpose to be really user friendly. For instance I never know where to drag stuff in iTunes…

The lower tabs (in blue) will pull out another type of sidebar, or rather bottom bar.. It will look like frosted glass and be more informational in nature. One could argue that I should go with white here as well, but that makes the whole GUI a bit too blended IMO.

The reason that the playlist tracks list looks the way it does is that I wanted to move away from very long names. The user must be shown both the track and the artist’s name, but quite commonly you will play several tracks from one artist which makes the artist name redundant for each track. Having the artist above in bold makes the tracklist look more clean and artisty and less computer-use-every-pixely, if you know what I mean.

I don’t really know how the “get it” buttons should look like and I have tested several looks, none of which makes me warm and fuzzy. You will see them change again I for sure.

I have also added arrows to the very custom scrollbar. Note that they should fade in when the mouse is over the scrollbar and then fade out again some five seconds after the pointer leaves it. Arrows will never be really “clean”, but they do serve a usability purpose in large lists.

The player should minimize nicely of course. You do not want that big window open all the time. Currently I am using a model where it will minimize in three steps. Mini, micro and nano. More on that later.

Not a title that is easy to live up to… Well, at least I am going to try. If you are interested I invite you to tag along for the ride. It is going to be some technical stuff, in Java mostly, and some design related stuff. Lets get right to it why don’t we?

What I’m creating is a Medial Player that will actually help you when listening to music, looking at pictures or watching movies. The goal is that anyone should be able to use it, even your mother, and her mother. And it should look darn good too. In all it should look better than iTunes, be more versatile than WinAmp and at least play all files that your OS plays (but probably more). As I said, not an easy task..

Design. Very Light. I like light designs. Vista black is nice too, but it’s to high in contrast for my taste. Light it is. I do have something of a blueprint in my head and I have just finished some preliminary GUI design using Adobe Fireworks.

Here is a screenshot of a first take and the main view shown when the player is in “full mode”.

Main Window (Click to Enlarge)

I am not a big fan of menus. They are a scrap heap where you put stuff you didn’t think of putting in the GUI. Therefore one of the main goals, of which there will be many, trust me, is to create a UI where you can reach all functionality directly. WYSIWYG UI…

Tomorrow I will add something sliding in from the side… Stay Tuned.