OSMF Player Skins
Recently, I had the opportunity to create some skins for Adobe’s Open Source Media Framework (OSMF) Flash Sample Video Player. Even though this was a quick project, I thought I’d put together a post that talked a little bit about the OSMF, the sample video player, and give a summary of how the whole thing went from design to final deliverable.
When I first heard about this opportunity I was a little worried about how difficult it might be to implement any designs I might come up with into the video player. Then I learned that Adobe was working with my friends at RealEyes and that I had a chance to influence the way the skin template for the video player would come together. I was sold.
The nice thing about this project was that a lot of the functionality had already been thought through, so it was purely a design and implementation project for me.
The Design Phase
Every project starts by getting everything that’s in my head on to paper via sketches and notes. I also try to get inspired in some way. Between my sketchbook and some inspiration, I can start to formalize ideas and develop some themes based on goals for the project.
Initially, I struggled with designs, mainly because when I think of a video player, I think of something that should almost be transparent or evident only when I need it to be. At the same time, these skins needed to represent different levels of customization that can be achieved with the OSMF Sample Video Player.
The way I broke through this was to draw inspiration from the visuals that would be displayed through the player e.g. movies, anime, TV shows, etc. I began to explore the idea of having the video player fit the content it would be playing. That idea was carried through the sketches and into some more polished design comps.
I always try to give my designs names to capture a concept and for easy reference, so we’re not referring to things like, “that blue one with the dark glossiness”. The designs that were chosen to move forward with were Formula, Core and Lunar.
In addition to the initial designs, there was also some time spent on developing some color variations. I tried to narrow down the colors to a minimal color scheme of 1-3 colors to make it easy to customize the skins. It was color theory class all over again.
Production and Implementation
After going through a round of color variations and picking the final designs I got to switch into production mode. I do all my designing in Fireworks, so I brought the designed assets into the Flash skin template that RealEyes was working on. States, animations and other visual design elements were also added once I had the necessary assets in Flash.
All along the way I was testing how the designs looked in the player itself. As I started putting the skins together there was a great deal of collaboration between myself and RealEyes. The result was a skin template that had a nice structure, but also allowed a wide spectrum of customization. You can use a skin and make minor changes to colors and fonts, or you can dream up something completely crazy and implement it very easily. It was pretty fun to work with actually.
Wrap Up
RealEyes kicked ass bringing this thing together and I appreciated them using me as a sounding board for ideas around how the final skin template should work. Adobe’s OSMF team let us do our thing while giving great feedback and direction all along the way. We all wanted people without any programming knowledge to be able to jump into a template and bring their designs to life as easily as possible. I think we achieved that.
You can learn more about Adobe’s Open Source Media Framework on the website. Check there to find out where to access the skins and sample video player.