1.5: MP Skin Design - The Evolution

The Inside Scoop Banner
Volume 1, Issue 5

For many years, Harley has designed and maintained our default skin, Blue3, almost single-handed.  Blue3 has served as the basis or template for many of our community skns. But Harley did not stop there! He has developed some of the most popular skins ever, like Project Mayhem, XFace, and his latest creation Fidelity

harlWhat is it like 'skinning' for MP?  Where have we come from, and where are we going?  Get the Inside Scoop with Harley, our MP  Design Group Manger, about MP Skin Design - The Evolution.

About Harley

If you really want to see evolution, check out the teaser videos on the new Fidelity Skin and its animated Basic Home screen, produced by our very own infinite.loop!

MP Skin Design - The Evolution

1. When did you first join the MP Team and why did you join?

I joined the MediaPortal project in the year 2004. It was the beginning of the project, which Frodo and Mr. Mario started. I was searching for good software to build a HTPC for my living room. I found MP and I really liked it, even though it was in the early stage.  At that time, only music, pictures and video were operational; the TV part was still a work in progress.

Then, project development came to a halt when MP lost its skin because of some license trouble. So Frodo and Mr. Mario asked for a designer who could assist them to develop a new skin, and I started to help out with that. It was really hard for me at the beginning because I had absolutely no clue about xml coding. The only thing I had done before was drawing graphics. My first skin “Naley” became one of the default skins for MP and I was invited as a team member.

naley_home.jpg naley2.jpgnaley_xmas.jpg

2. How long have you been designing skins for MP and what was it like in the early days?

I have been doing skin work for MP for nearly 6 years now! I have just completed my latest skin Fidelity - my 10th skin for MP.

For some years now, I have been the MP Design Team Leader [now called Design Group Manager]. The Design Group not only designs the default skins, but the most important part is working with the developers.

Skin work for MP in the early days was really hard, because the project was young and a complete work in progress. Often, as soon as we completed something, the next day our work was unusable.  The MP code, especially the skin engine, was changing every day, sometimes completely.

I remember one day Frodo announced a change to start up MP faster. His idea was to have all graphics in squared format, like 32x32, 64x64, 128x128 and so on. So we designers had to create, and rework, all our graphics in the skin to squared formats. It was a huge amount of work, and I spent nearly three weeks working on only that. Then, Frodo had a new idea to cache packedgfx, which is what we still have now. It was a great idea, because it was much faster and we did not have to do all graphics in squared format. However, as a result, all the work I did to redesign the graphics was for nothing! Wink

Such things happened almost every day, but as we can see today it was good, because all those changes have made MP what it is now, the best HTPC software on earth. But trust me; it was sometimes really hard in those days. Wink

xmas_2005.jpgxmas_2005_2.jpg

3. What is the relationship between the Design group and the Development group? How, do the Designers provide input into MP Development?

One of the main jobs of the Design group is to introduce new ideas for the GUI, such as what should work in which way, and what can be done in a nicer or easier way. The designer and the developer work hand in hand.

Mostly it is done in that way. For example, we had an idea to create a second home screen because the normal home screen (MyHome) is very limited. It is almost completely hard coded, so the skin designer cannot really redesign it. I spoke with the developers and presented my idea for a new home screen, how it could work, what could be possible and so on.

The next step was to find a developer who would do the code work for it, and work close together with him. The developer does the coding, while the designer creates the graphics and does testing. The designer outlines what xml code is required and the developer works out the possibility of how to do it.  That is how the Basic Home Screen we have today was created.  That is also mainly how, with some luck, we get new features inside MP. Smile

The process is pretty much the same when a Developer integrates something new in the code and asks the Design group to help out with GUI work or graphics.

4. What have been the most important changes in skinning since the early days?

the_evolution.jpgOh there is so much, but the most important changes were the animations and visibility codes. The biggest parts of coding were done by Frodo, Smirnoff and Bavarian.  Thanks to them, we now have the possibility to do some really new things in the GUI and skins.

 

The other major improvement was to get rid of the hard coded stuff, in most cases, because that is not usable for a designer.

5. What do you most enjoy about skin design?

I really love to discover new and fresh ideas, and then to draw nice graphics for them. I also love to find out how things can be done in new, better ways and bring it to life through team work with the developers - things like the Basic Home screen, action menus, visibility conditions for different views and so on and so on. In the end a fresh and even better, more usable GUI is the result.

A big point here is always to have close contact with the MP community. We get really great feedback from the community both for new ideas and to let us know if we are on the right track or not. My freshest, new ideas you can see inside my new skin Fidelity Smile

fidelity.png

6. What are the greatest strengths of MP skin design?

The biggest point of MP is the skin engine we have.  Sure it has its issues and limitations because of the long and difficult way it evolved.  However, it is great because it is xml based coding and works with png graphics format.  Thus many people can easily jump in and start creating great skins for MP.

That is definitively one of our greatest strengths. People can create graphics using familiar software such as Photoshop or others, and can do coding with a normal text editor.

An open source project like MP depends on a large, actively involved community.  You can only develop such a community if people can easily jump in and create skins and plugins for it.

You can create a fantastic, completely bug free and clean coded software, but if people cannot easily jump into the skin engine coding, and create many beautiful and different community skins, no one wants to have such software.

project_mayhem.jpgprojectx_home.jpgprojectx_osd.jpg

7. What are the biggest problems you have skinning in MP?

The biggest problems are still the hard coded areas we have in MP code. There you can change nothing with skin coding. It would be great if our MP skin engine could include some of the functions that the XBMC skin engine has now, since both skin engines were originally based on the same code.

8. What do you think could be done in MP to help make skinning easier or even better?

Again, I would say get rid of the hard coded stuff.  Also, enable more flexible xml coding for things like the different views: List view, Thumb (icons) view and Filmstrip view.


9. What is your opinion of our default skin Blue3? What is its main purpose or role?

Oh, since I have done the Blue3 skins by myself, I love them! Wink

blue3wide.jpg

Seriously though, the default skin of MP has two tasks. The first one is to create the GUI to steer the software.  The second one is to show what is possible, and how it is works, so community skinners can use it as a base for their own skins. The default skins should always be an example to see how the code is working.

Also, the default skin must be simple so that our developers can easily test new code and work they have done. It must be designed in a way that new graphics can be added by the Design group itself when needed, without requiring the initial designer. If it is not, it can be a big problem for a project like MP, if the initial designer of the default skin left the project.


10. Why do you think so many community skins are 'ported' from XBMC software?

I think it is the easiest way for people who do not want, or are not able, to draw graphics from scratch. When ‘porting’ skins, they can simply copy graphics from an existing XBMC skin and then only need to do the xml coding. Since XBMC and MP use the same graphics format (png), it is the simplest way. Another point is that XBMC has really nice skins.

xface.jpg

11. Do you think the Design Group could be improved? If so how? What would you recommend?

Yes indeed. Over the years we have lost most members of the Design Group. I have invited some new people in the last years, but there is not much activity from them. I think the problem is that they all work on their own skin projects and have no free time for MP team work. At the moment only Catavolt and I are working in the Design Group.

12. How will skin design differ in MP 2?

Skinning in MP2 will be done a completely different way than in MP1. Since it is xaml based it will be much harder to create skins. In MP1 we have one single skin folder skin which contains all the necessary skin files. In MP2 the skin is spread into many areas inside MP2.

My point of view is that skinning for MP2 is something more for a developer or programmer than for a designer or graphic artist. The way I see it, for skin work in MP2 we must have skin teams. Each skin project will require a coder or programmer who creates the code, and a designer who creates the graphics. They will have to work closely together to create a very good skin.

However,  I´m pretty sure the new skin engine albert has done, will be much better than our old one because it will offer skinners a lot more opportunities.

13. What are you most excited about for the future of MP?

As we have a completely new start with MP2, I think we can do many things much better and nicer then we can do with MP1.

So I hope in the end we will not only have the best HTPC software, but also the best GUI and skin design for it Smile


Consider how much our skins have evloved in just under six years.  Now, try and imagine what will they be like in another six years?  Did you think of anything?  If you did, feel free to add your ideas to the Blog Comments!

I would like to personally offer my sincere gratitude to Harley for his incredible contribution to MediaPortal for so many years.  Without him, many of our great skins would simply not exist and MP would not be what it is today.  If you wish to join me, just press the Comment on this Blog button and offer him your thanks too! Cool

About The Project

The vision of the MediaPortal project is to create a free open source media centre application, which supports all advanced media centre functions, and is accessible to all Windows users.

In reaching this goal we are working every day to make sure our software is one of the best.

         

Quick Navigation

  • Home
  • About MediaPortal
  • Bugtracker
  • Download
  • Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!
  • Our Partners

Support MediaPortal!

The team works very hard to make sure the community is running the best HTPC-software. We give away MediaPortal for free but hosting and software is not for us.

Care to support our work with a few bucks? We'd really appreciate it!