• stickybits – tag your world™ – A fun and social way to attach digital content to real objects.
• Alfred App – Alfred is a quicklaunch application for Mac OS X, which aims to save you time in searching your local computer and the web. Whether it's maps, Amazon, eBay, Wikipedia, you can feed your web addiction quicker than ever before.
• Little Scraps of Paper – Home – Little Scraps of Paper is a series of films about how creative people develop ideas and thoughts and what they keep them in.
• Welcome : Flavors.me – Welcome : Flavors.me
• Scout Books » 33 Bottles of Beer –
• Trendrr –

via Adobe Photoshop Cook on Vimeo.

via Papierkrieg on Vimeo.

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.