We Design Extraordinary Things
resized_TSF copy.png

UI/UX Design Blog

A behind the scenes look at the work of an
American UI/UX Design Agency

A Look Back on 20 Years of The Skins Factory: Part 2

Origin: Part 2 - Ascension (2004-2006)


The years 2004 thru 2006 were to put it mildly… hectic. We were now 4 years old, and our design output was through the roof. The projects were coming in so swiftly, that I would occasionally have to bring in outside designers, who were not part of our regular team. I was still involved in the skinning communities, so I always had an eye out for new talent.

Note: I was trying to include more years in this installment, but the sheer amount of projects we produced in just in 3 short years, would make this far too long to read in one sitting. I’m not even covering all the work we did. Future installments will cover greater periods of time.

In 2004, our star was on the rise. Our reputation for quality and reliability was spreading quickly, and we became the “go-to” resource for skins and user interface design.

Traffic to the site was so heavy, we were constantly breaking our server’s bandwidth cap. There was no Google Drive or Dropbox back then, where we could upload the skin files and host them for download at no cost. While most of our skins were sitting on Microsoft’s website, we wanted to push traffic to our own site, so we would just get hammered. I’m not complaining, it was a good problem to have - the more people coming to our website, the more projects we would get. Microsoft was feeding us project after project, hiring us to create promotional WMP (Windows Media Player) skins for their own internal products for services like Windows XP Media Center Edition OS and Windows XP Tablet Edition OS. It didn’t stop there. They would also bring us in to design skins for their external partners as they pushed the Window Media format wherever and whenever possible.

Movies and video games properties would begin to supplant recording artists as the top reason entertainment & media companies would come to us for customized, branded skins. XBOX brought us back to create the Official Halo 2 Windows Media Player skin and for about a dozen other properties. It was definitely a good time to be a gamer at The Skins Factory. Which we all were, and still are.

2004 - The Official Halo 2 WMP skin designed by The Skins Factory. Early linear comp. Clicking the shutter button would close the blast shield over the player’s display area. It’s the little details that matter when you design.   And they don’t go u…

2004 - The Official Halo 2 WMP skin designed by The Skins Factory. Early linear comp. Clicking the shutter button would close the blast shield over the player’s display area. It’s the little details that matter when you design.

And they don’t go unnoticed.

2004 - Blast Shield deployed. Branding intact.

2004 - The Official Halo 2 WMP skin designed by The Skins Factory for XBOX.

As you can see, we kept our design methodology intact. We decided to make the skin look like a player that Master Chief John-117, the hero of the Halo franchise, would carry on his armor. The base of the player looked mimicked his armor, while all displays for the transport area, equalizer and video player used the amber glass of his visor.

Is this a good time to talk about the tons of free XBOX games the XBOX team would send us? They were very generous and it was always appreciated. It wasn’t just the XBOX team, we did a lot of work for Microsoft Game Studios and they would send us tons of PC games. We would get boxes of free games, which I would send out to my guys. It was a good time to be a gamer at TSF.

 

 

2004 also had us branching out to brand identity and logo design work. Xdrive, not to be confused with BMW’s xDrive, was the first service that allowed users to backup files on the internet. They approached us to design a user interface (UI) for a media playback application and do a proof-of-concept for their logo. They were purchased later by AOL in 2008. Here’s a look at a few of the comps we designed for the logo:

2004 - XDrive Logo Proof-of-Concept designed by The Skins Factory.

 

 

Warner Bros. Entertainment was feeding us amazing WMP skin design projects including the DC/Vertigo, Keanu Reeves film - Constantine, which would launch in theaters the following year. That was a hard skin to figure out. With properties like Terminator 3: Rise of the Machines, we had the T-X’s endoskeleton to rely on as the visual design base of the skin. What do you do for the supernatural? So we fell back to our design methodology of creating a skin that lived in the environment of the intellectual property. Now remember, we hadn’t seen the film yet, but Warner Bros. gave us film assets to view. So if John Constantine had a real-world media player, what would it look like?

We designed it with an organic shape and put a “Hell-proof” cover over the display screen. Added to the cover was the tattooed symbol on Constantine’s forearms, which was the alchemical symbol for sulfur, or brimstone. The cover would then split open during the opening animation sequence, separating the symbol in half as it was on his forearms. We then “baked” the skin in virtual hellfire. The idea was to make media player skin look like it went to Hell & back.

2004 - Early Linears for the Official Constantine Windows Media Player skin designed by The Skins Factory.

2004 - Early Linears for the Official Constantine Windows Media Player skin designed by The Skins Factory.

2004 - The Final Version of Official Constantine Windows Media Player skin designed by The Skins Factory - for Warner Bros. Entertainment.

 

 

In mid-2004, MSN approached us to create themes for their MSN Spaces. MSN Spaces was Microsoft’s blogging platform and social network service that launched in early 2004. We were tasked to create 12 themes for it. The service would later be renamed Windows Live Spaces.

Next Up… NVIDIA

In June, 2004 I was contacted by graphic card giant. NVIDIA. They wanted us to design a custom user interface for a gaming chat application called XFire. XFire told NVIDIA about us, as The Skins Factory had just redesigned the user interface (UI) for the default XFire application. During the discussion regarding the branded NVIDIA XFire UI, I pitched her about doing a WMP 10 skin as a way to create a branded, unified suite of skins to really promote the NVIDIA brand. In addition to the monetary payment, I asked NVIDIA for 4 GeForce 6800 GT cards, which they sent. They were an amazing company to work for.

Side Note: You should always try and take away something valuable from every job you do in life, no matter how mundane it may seem. Long before SkinWerkz and The Skins Factory, I used to wait tables and bartend. One thing you learn quickly when waiting tables, is the art of upselling. A food server as you know, makes their money off tips. The higher the bill, generally, the higher the tip. So you learn how to upsell bottles of wine, appetizers, coffee & dessert, to increase the check total.

A food server is in essence a salesperson. So is the owner of a design studio…

2004 - NVIDIA XFire UI designed by The Skins Factory.

2004 - NVIDIA Windows Media Player 10 Skin designed by The Skins Factory.

I ended up naming the skin NVIDIA Reactor, which will make perfect sense when you view the animations below. We really pushed the limits on this one. We created an advanced Playlist module that would let you search your library, rate your songs, access playlists and even RIP your cds right from the skin. The first Windows Media Player skin to have this functionality. We are always trying to think outside of the box. It’s in our DNA to push the boundaries of design.

Special Note: The animations below were high-fidelity .MOV files converted to low-fidelity .GIF files for presentation purposes. Now you know why I named it Reactor.

2004 - Intro Animation - NVIDIA Reactor WMP 10 Skin.

2004 - Intro Animation - NVIDIA Reactor WMP 10 Skin.

2004 - Runtime Play Animation - NVIDIA Reactor WMP 10 Skin.

2004 - Runtime Play Animation - NVIDIA Reactor WMP 10 Skin.

2004 - Runtime Pause Animation - NVIDIA Reactor WMP 10 Skin.

2004 - Runtime Pause Animation - NVIDIA Reactor WMP 10 Skin.

 

 

and IN WALKS NERO… WITH 10 PROJECTs

2004 definitely had more in store for us. I should have included the German software company Nero AG in the previous post, as we first started working for them in 2003, but there’s only so much I can get you to read in one sitting, and we did a lot of work for them across 5 years, with most occurring in this installment’s timeframe. In the PC CD burning software world, Nero Burning ROM is king. There’s no other way to put it. They owned the PC burning software market. We would end up doing 10 projects for Nero from 2003-2007, four of those would be for their Nero ShowTime video playback application. Other projects included: Nero StartSmart, Nero ShowTime Mobile, Nero SIPPS, Nero Scratchbox, and Nero Rich Preview to name a few.

Nero UI UX.png

2003 - Nero ShowTime 1 2004 - Nero ShowTime 2 2006 - Nero ShowTime 3.

Nero ShowTime 4 UI UX Design.png

2007 - Nero ShowTime 4

 

If you read the Part 1 installment of this series of posts, you’ll know we designed a Windows Vista Sidebar Gadget that shipped on Windows Vista OS. In 2005, Nero would come to us to design a Sidebar Vista Gadget called Nero Disc Copy that ripped and burned CDs, DVDs and the HD formats like Blu-Ray and the ill-fated HD-DVD format. It could also burn ISOs, NRG, and IMG files via drag-and-drop. Stylized with a mock compact disc (CD) polycarbonate plastic body, the animation sequences brough the gadget to life.

2006 - The Animated Nero Disc Copy Vista Sidebar Gadget.

Special Note: The animations below were high-fidelity .MOV files converted to low-fidelity .GIF files for presentation purposes.

Ripping

Importing

Burning

Verifying

 

 

The House of Mouse

I grew up in South Miami, so Disney & Disney World were a ubiquitous part of Florida living. I can’t tell you how excruciating it was when my Dad would tell us we were going to Disney World… but not for 2 whole months. Those would end up being the longest 2 months ever. So when I got an email from Disney looking for us to do some work for them, it was really exciting. The undisputed, greatest art studio in the world wanted us to design for them. Does it get any better than that?

We would end up doing 10 projects over the years for The Walt Disney Company across two divisions - Disney Consumer Products and the Walt Disney Internet Group (WDIG). This became a pattern for us across the years… multiple projects across different divisions within a company, based solely on word-of-mouth, our ability to set trends, and the strength of our deliverables. That’s how we ended up doing over 60 projects for Microsoft - strong word-of-mouth.

The first project was for Disney Consumer Products. They wanted us to design some Windows desktop icons for their custom Disney Dream PC which was built by German electronics giant, Medion. Now remember what I said previously about how food servers upsell and that’s what I did with NVIDIA. Well, I did it again. I told Disney instead of doing just icons, why not theme the whole Windows environment with the Disney brand? We were partnering with a company who had their own software solution that could skin Windows. What’s not to love - Disney on the outside and Disney on the inside. Disney was all for it. I ended up calling the theme “It’s a Magical World.” Later, I would create our own Windows Theming Desktop software called Hyperdesk, which we would end up porting the theme over to. We then licensed the Disney brand and sold the theme ourselves giving Disney a portion of the revenue.

After designing the Windows theme we tackled the icons. We dove straight into a vat of Disney Kool-Aid and happily guzzled it down. We took some of the design cues from the PC and peripherals, creating symmetry between hardware and software. For the browser icon (which was typically a globe back then), we stylized it with a ring of Disney magic and put Mickey Mouse ears on it - because of course, that’s what it needed.

2004 - Disney Windows Desktop Icon Set (Partial Set) designed by The Skins Factory

We didn’t stop there. We designed multiple color themes, created a set of custom desktop wallpapers, and proceeded to design a custom Disney audio player Yahoo! widget in 6 super-vibrant colors. We also did a WMP skin for video playback.

2004 - Disney Audio Player Yahoo! Widget - Showing 3 of 6 super-vibrant colors.

The final Disney Desktop Theme called It’s a Magical World. What you see here, is the second iteration of the theme using our own Windows Desktop theming solution called Hypedesk. We even designed the logo for the theme. More on Hyperdesk in the next installment.

Disney’s Internet Group would hit us with 2 massive projects - one was a a full icon redesign for the top navigation for Disney.com and then dozens of icons throughout the site. The second project, was to create and design the Disney online music store called Disney Mix Central.

To give you an idea of how dedicated we were to our work, I got a call from the General Manager of Disney Consumer Products to design icons for one of their hardware devices onscreen display. It was a rush job and happen to fall on my birthday. My wife and I at the time, booked a hotel room at the Four Seasons in West Palm Beach to celebrate getting older - can you tell I stopped liking birthdays ages ago? I spent part of the time in my room art directing my artist. I got some fun time, but it’s always business before pleasure here, even on a birthday.

2006 - The first set of Disney.com Icons The Skins Factory created for the top navigation. Notice the mouse ears on the game controller? It’s the little touches that make a difference. We would later come back and do a different set of navigation icons that was completed animated.

 

The other task was to design 12-15 screens for The Walt Disney Company’s online music store called Disney Mix Central. We went with a glossy, tactile header to give it a more real world feel to it.

2006 - Disney’s Mix Central Website Main Page designed by The Skins Factory.

2006 - Disney’s Mix Central Website Search Results Page designed by The Skins Factory.


It seemed to me that if you were going to have an online music store, you should have a branded Windows Media Player skin to match. When the kids are listening to their favorite High School Musical tracks, they should play them on a branded Disney player which would constantly reinforce the brand. Disney agreed.

We went all out on the player skin. We modeled & rendered it so that we could show flip it around and show the back, front and even take it down to a slim-mode player, by allowing the kids to turn it on its side by hitting a button. Look at the animation below and you’ll understand.

2006 - Illustrated Comp for Disney Mix Central Windows Media Player.

2006 - Illustrated Comp for Disney Mix Central Windows Media Player.

2006 - 3D Render for Disney Mix Central Windows Media Player skin.

2006 - 3D Render for Disney Mix Central Windows Media Player skin.

2006 - Animation Sequence Low Fidelity. Notice how the side of the player is usable as a slim mode?

2006 - The Final Disney Mix Central Windows Media Player skin designed by The Skins Factory.

 

 

Microsoft, Metallica and Little green men… from Miami?

Back in 2003, (yes I’m time traveling again, but there’s a reason) I get a call from Microsoft. “Jeff, we want to do a Metallica Windows Media Player skin with one of our partners… Alienware.”

“You want to do what?” I asked incredulously. That was a very good call to get. Seems the three of them were talking about promoting one other and we got caught happily in the middle. Not content with just doing a Windows Media Player skin, I sold them on a whole Metallica-branded Windows Desktop theme.

Metallica’s logo, a stylized shuriken, is basically what we Americans call a “throwing star.” You’re talking about a world-famous, heavy metal band that uses an ancient Japanese concealed weapon as their logo, and mixing it with Alienware’s brand... how do you possibly merge the two? That was a rhetorical question. It’s us we’re talking about. So we brainstormed internally - what would an Alien Assassin’s weapon fused with dark alien technology look like? And we came up with this…

2003 - The Metallica Alienware Windows Media Player 9 Series skin designed by The Skins Factory.

But would you ever get to see and use this?

No, you would not. It was Linkin Park all over again. Metallica was too busy with other things and the project died before it was ever released.

Were we satisfied with that outcome? Not even a little bit. So we got together with Alienware and it was decided they would hire us to redesign the concept and create an Alienware-branded WMP skin and Windows Desktop theme…. Hello, DarkStar. We set out removing any trace of the Metallica brand, inverted the star itself, removed the small sub-blades and created a whole new animated skin.

2004 - The Official Alienware DarkStar Windows Media Player 9 Series skin designed by The Skins Factory.

 

All told, over the years we would end up doing 7 projects for Alienware. I ended up becoming close with some of the project managers, often hanging out with them outside of work. The follow-up to DarkStar was a set of 2 themes called Alienware AlienMorph and Alienware ALXMorph, part of the AlienGUIse Windows Desktop theme pack. The theme pack would garner over 2.5 million downloads in the first year alone. The Windows Media Player skins deployed gyroscopic animations and were a hit among Alienware fans.

2004 - Early Linears of the Alienware Windows Media Player skin. You can see how much thought went into the design.

2004 - Alienware AlienMorph Windows Desktop Theme Designed by The Skins Factory.

2004 - Alienware ALXMorph Windows Desktop Theme Designed by The Skins Factory.

 

Other notable Alienware Windows desktop theming projects: Alienware: Redskins Ultimate Fan Xperience (2005), Alienware Aurora: Star Wars Edition (2006) and the limited edition Alienware: Superman (2006) desktop theme.

2006 - Partial Icon Set Shown: Alienware Aurora: Star Wars Edition designed by The Skins Factory.

 

2006 - Below: A look at some of the Windows theme details for the Limited Edition Alienware Superman desktop theme designed by The Skins Factory.

2006 - Early WMP Skin Comp for Alienware: Superman. Love the Kryptonian feel it has.
Note: Once in awhile, you look back on decisions you make as a Creative Director and realize you made the wrong decision. In retrospect, I think this design would have been the better way to go for the media player skin. Live and learn.

2006 - Alienware: Superman Windows Desktop Icons (partial Set - first iteration) - You can’t have Superman icons & not use X-Ray Vision.

2006 - Alienware: Superman Windows Desktop Theme Final Version designed by The Skins Factory.

 

While I’m not going to show you every project we did for Alienware, I have to show you Alienware Invader. While the theme itself looks amazing, it’s the animated Windows Media Player skin that steals the show… and your popcorn… and your drink. With full sound effects and a 30-second intro animation, it was definitely in a class by itself. I have the animation sequence below converted to a low fidelity .gif but it doesn’t diminish the coolness factor.

2006 - Intro Animation Sequence - Alienware Invader WMP skin.

2006 - Alienware Invader Windows Desktop theme designed by The Skins Factory.

2006 - Alienware Invader WMP skin designed by The Skins Factory.

 

 

We started getting big brands taking notice of us and not for Windows Media Player skins, but legitimate user interface design projects. There were always Windows Media Player skins to be worked on though.

  • ATI Technologies (NVIDIA’s main rival) contracted The Skins Factory to design their ATI CATALYST Control Center application… twice.

  • Sirius Satellite Radio had us design the Sirius Streamsurfer application UI.

  • AT&T hired us for 2 projects, which included designing a Windows desktop networking client user interface. It was a corporate Remote Access / VPN application.

  • ZT Group/Cisnet/NASCAR commissioned us to create the Official NASCAR Windows Desktop Theme.

  • Microsoft Games contracted us for multiple WMP skins for PC Games including The Movies and Roller Coaster Tycoon 3.

 

 

Go-Video, the well-known hardware maker, brought us in to design 2 promotional Windows Media Player skins for their products RAVE MP & ilo. This was a lot of fun, as the skins would mimic real world products, while utilizing their own unique design languages.

2004 - Go-Video Windows Media Player skin for RAVE MP designed by The Skins Factory.

 

Hello Moto

Motorola also came to us in 2004 to design their radio application aptly titled: Motorola iRadio. This was especially important to us because we beat out the world-famous design studio, Frog Design for the project. This was the 2nd project we took away from them, the first being one of the Disney projects. Truth is, It made us feel validated, that we could take on the bigger studios and win projects. That alone was cause for celebration. For the visual design language we went 100% skeuomorphic. We wanted to make it look like a real world player that you could pick pluck off the screen and hold. First we did what our designer called Motomocks (mock-ups)…

2004 - “MotoMocks”

2004 - “MotoMocks”

Then we modeled and rendered it. While in modern times this visual design language might look antiquated, I assure you back in 2004, this was cutting edge visual design for an application UI.

2004 - Motorola iRadio Final Version designed by The Skins Factory.

 

 

In 2005, Target brought us in to design StudioRed, Target’s desktop Music Initiative. Our team worked closely with the creative team from Target, along with a third-party design studio who handled creating the actual music store layout.

 

 

one skin to rule them all

Electronic Arts rounded back on us to design and develop the Official The Lord of the Rings: The Battle for Middle-Earth Windows Media Player 10 skin. As huge fans of the series, this was a total blast to design.

Screen Shot 2021-03-14 at 11.19.29 AM.png
mockup_1 copy.png
mockup_1.jpg

Above: A look at the genesis of a Windows Media Player skin.
From Linear Comp to Adobe Illustrator Vector to post-production details in Adobe Photoshop.

2005 - Electronic Arts’ Official The Lord of the Rings: The Battle for Middle-Earth Windows Media Player skin designed by The Skins Factory. The concept: A battle shield with a gold ring of Sauron around the display screen.

 

 

It got a little chilly at The Skins Factory in 2005 when a Blizzard blew in with Microsoft and contracted us to create the Official World of Warcraft Windows Media Player skin.

 

WhenU.com, a Manhattan advertising software company approached us about designing a brand identity and desktop software application for their new brand, MeMedia. We always tackle the brand identity first, as it tends to set the tone for the design language to follow. You can view the Brand Identity design here. For the application we went with a 3D, animated cube design. Attention was paid to make it as realistic as possible, which included using motion blur when the cube rocked or spun around. The cube itself had multi-functions including viewing photos, audio & video playback. We designed multiple colors for it, so users could select a color that best suited their personality. Here’s a look at the 3D animation and a few of the color themes:

2006 - Animation showing motion + shrink to icon.  Low Fidelity .gif

2006 - Animation showing motion + shrink to icon. Low Fidelity .gif

2006 - Color Variant

2006 - Color Variant

2006 - Color Variant

2006 - Color Variant

2006 - Color Variant

2006 - Color Variant

2006 - MeMe UI/UX Design by The Skins Factory.

 

 

Next up came Virtual Heroes. Their CEO would end up contracting us to redesign their logos for 3 different companies across 14 years. We just finished a logo design for him about a month ago. Check out our work on the BioMojo logo.

Virtual Heroes was a serious game developer who worked on new technology and content for the U.S. Army game America’s Army. They had gone to 6 other design studios, before finding us. When you’re designing a brand identity or a logo, it’s important to understand the audience. Because they were dealing with the United States military, which is steeped in toughness, it was important that their logo came across strong. So we took the initials of their name and created a shield out of it. We designed both camera ready and web based versions, along with stacked and horizontal orientations in both color and grayscale.

2006 - Virtual Heroes Logo Design - Stacked - Color

2006 - Virtual Heroes Logo Design - Stacked - Grayscale

 
 

The next 3 projects I’m going to share with you before winding down this installment, are all Windows Media Player skins. The last one is a doozy. Trust me. First up… Capcom.

Capcom hired us to design a WMP skin for the video game, Lost Planet. We stuck to our standard M.O. and made it look cold and icey since the game takes place on a frozen planet.

2006 - Capcom’s Lost Planet Windows Media Player skin designed by The Skins Factory.

2006 - Capcom’s Lost Planet Windows Media Player skin designed by The Skins Factory.

 

So I received an email from someone from Sony Ericsson who had seen our work and wanted us to design a branded Windows Media Player skin. Well, you know how that goes… LOL. Yep, we ended up doing an entire Windows Desktop Theme using our Hypedesk theming solution. I’m not going to show you the theme now, because that happened in 2007 and there’s a lot to show. We went off the hook when it came to color themes for both the player skin and the theme.

I named the skin (and theme) Sony Ericsson Onyx Series. I should mention we also ported the WMP skin to a Winamp skin.

 

The Dark Knight

I’m going to end this installment with one, last major release…

Warner Bros. Entertainment’s Batman Begins.

We got tasked with creating a custom Windows Media Player skin for the Dark Knight. I mean, come on, that’s a total dream project. Prior to starting, Warner Bros. had sent me 2 hardbound style guides and other collateral including CDs for the movie and character to review during the discovery period. We did what we always did… created a skin that lived in the world of the character.

During the ideation process, we decided to replicate the materials on Batman’s utility belt and posed the following question: What would Batman use as an audio player when he was kicking the crap out of villains?” Glad you asked… We designed a center piece for his utility belt constructed of the same materials as the belt. We then modeled and rendered it. Post processing was done in Photoshop. Sound effects were later added.

2006 - Conceptual Linears 1.

2006 - Conceptual Linears 2. I selected this one because it was more symmetrical in design and seemed like a better design as a utility belt centerpiece.


Once DC Comics and Warner Bros. Entertainment accepted our Concept 2, we created the maquette.

We coded the Batman Begins WMP skin 7 times for international users, in 6 languages and a special version for release on the Batman Begins DVD Home Video. The animation sequence you see below, was dual-branded with both DC and Warner Bros. Entertainment logos. We were always trying to make the branding part of the experience without being intrusive.

2006 - The Official Batman Begins WMP Skin - Warner Bros. Branding.

2006 - The Official Batman Begins WMP Skin - Warner Bros. Branding.

2006 - The Official Batman Begins WMP Skin - DC Branding.

2006 - The Official Batman Begins WMP Skin - DC Branding.

2006 - Low Fidelity Startup Animation Sequence.

2006 - Low Fidelity Startup Animation Sequence.

2006 - The Official Batman Begins WMP Skin designed by The Skins Factory.

 

Well there you have it. Three years of massive output by our little design studio. That’s actually not everything we worked on. Just some of the highlights. In the next installment we’ll be covering the creation of our Hypedesk Windows Theming Application, Star Trek, and a look deeper into the 2-year project Intel project we worked on and so much more.

To Be Continued.

Thanks for reading. If you need world-class UI/UX design, you know who to turn to. We have been doing this for awhile. Feel free to share this on social media or leave a comment below and tell us what you think. Stay Safe & be well,

Jeff
CEO + Founder of The Skins Factory