One of the greatest wonders of the Internet, is the ability to “View Source” thus giving anyone the ability to determine how “something they like” really works. I do it religiously, and am confident that anyone who designs beyond Photoshop does as well. However, when does learning or being inspired by others cross the line to become plagiarism or more simply put – stealing an other’s work and claiming it as your own?

This morning while on the train, I received an email indicating that I had some new followers on Twitter. Whenever someone new follows me, I always visit their twitter page to determine if I know them, or if they have a site I can check out to get a feel for what they are about and if there is merit to follow in return. Looking at my new follower’s site “Digital Wombat Studios” – I could not help but notice that it looked oddly familiar. I could not place it immediately (mind you I was looking from my iPhone) – but it bugged me enough to take a closer look once I got to my office. Upon closer review – I recognized it immediately as copy of Derek Herman’s Valen Designs. I knew this, because I read his blog and we follow one an other’s tweets.

The copy literally draws little to no distinction from the original other then some minor details such as its altered logo, slightly modified primary navigation and a masthead that extends about 40 pixels taller from the top. Beyond that, colors, background images, site structure and page grids are literally identical. In fact they even went so far as to mirror not simply the display, but the function Valen’s featured image carousel.

Compare for yourself

Seeing both - It sure looks like a copy, what do you think? Now the truth of the matter, I really did not think much of this… It is bad tact… and I would not like it done to me, but what can you really do, perhaps it should be seen as flattery. I sent Derek a Direct Message that read “I suppose imitation is a form of flattery? you be the judge”. In response, Derek indicated that not only had DWS taken his design, (or hybrid of his new and old one) but that they had also taken parts of his content, writings and even his twitter posts! Now that is just creepy.

It is creepy because they are claiming lot of someone else’s original “work” and “thoughts” as their own. Emulating work is not by itself a bad thing. I actually encourage it, as I think it is a fantastic learning exercise and way to develop your own style through following the steps of things that excite or inspire you. This is not new to the digital world – this practice dates back to old master painters who would often do copies of works by their predecessors in honor of… or to learn from them. But when publishing works that lay claim to them as original – you had better modify well enough to genuinely make your own. Otherwise, not only do you look like a copy cat – but you take the age old process of learning from others and put a bad taste on it.

Just my .02$

I must say – while I am proud of this effort on behalf of my team, it is also one of the very reasons that I have so much pride in the business unit that I am a part of. By comparison, we are not as large as some of our counterparts within CBSi – yet our size does not limit our ideas, energy or ability to deliver on even the most aggressive of plans. This was a true collaborative effort by amazing product, tech, engineering, editorial, broadband and design folks who once again delivered a super cool product and dare I say, “had fun doing it”

“At smartplanet.com, you will find thought-provoking progressive ideas on diverse topics that intersect with technology, business, and life, and matter to the world at large.” Have a look for yourself, and learn ways to  contribute to a smarter planet!

Second, because it takes advantage of the vast amounts of R&D that took place throughout 2008. Much of this effort made its way into the recent launch of MoneyWatch.com – still in it’s beta phase. However, it’s presentation has many new UI elements that I am very proud of. They feel intuitive and I hope that in the long run will serve to add value to our users and make our content easier to consume.

In some respects, many could say I am crazy to be excited about adding another brand to our portfolio of sites. ( My team already handles all creative for 4 major brands – this makes 5 ) However, I see it as an opportunity to fine tune a number of these new ideas that we are trying in the functionality of our products. Ideas that are easier to implement when building from scratch then when adding to far bigger sites with legacy functions on older platforms.

Thus far, our work has progressed quickly (Many trips to the no longer new coffee machines) – All of our previous efforts have made the creation and build out of SmartPlanet a smoother process that will be easier to deploy as a result. – I am eager to push this out and let folks take for a test drive!

I am amazed at how little thought even larger media outlets give their twitter pages. Lets face it – no one, visits your specific page on a regular basis – folks either view their own page, or use handy desktop / mobile apps like Icon Factory’s “Twitterrific” to keep track of the feeds they follow. That said, your twitter page is really like a sign up process for others to get a feel for who you are, and weather they want to follow what you have to say. Thus, this article is intended on providing a quick tutorial on how you can insure that your twitter page presents itself with the same appeal and brand consistency of your parent site.

Step 1 – Once you log in – click on your settings tab. This will take you to your general account management page.

Step 2 – Select the Design tab on the far right. From here you can choose one of a number of predefined themes that the good folks at Twitter have provided to users. This is fine for many, but if you promote a site, or have taken the time to create a brand for yourself, then creating your own is just a couple of easy steps. At a glance, it would seem that you have very limited control with the basic modifications you can make~ However, you can still make do to create the appearance of a more custom site.

Step 3 – Select “Change design Colors” tab. From here, simply use PhotoShop’s eyedropper tool to sample colors that already exist with in your site’s design palette. You or someone else has already taken the time to make sure these colors work together, and the result will create an automatic synergy between your site, and this landing page.

Step 4- Select the “Change Background image” tab. Here you can place an image to use as a background.  You are only able to control weather your image “does” or “does not” tile – meaning the image will repeat both horizontally and vertically. This is where most folks make errors that display the inherent limitations of what you effectively change.

Should you simply have a pattern that you want to repeat – set to “tile” and you will end up with a decent result. However, if your design requires a vertical fade -still choose to tile, but you can create an image that is taller then what most monitors have for a set resolution – typically you are safe with a  1200 x 2px image. This is because the background is automatically fixed – the vertical size will occupy all of the viewable space while seeming to only tiling horizontally. However what I prefer, is to create an image in photoshop that transitions to my background color, thus not needing to use the tile background function.

Step 5 – In this example, I have created a 800 x 600 px background that includes the site brand. I used a simple about quote, and some background visuals taken from the site for both interest and depth. But really, it is an image – so you can add any elements that you wish, so long as you do not imply interactivity. In this example, I have included the contact information of Escriba’s Principle – Zac Shess.

The most important element is to insure that the bottom and right side of your image transition to the same hexadecimal color set in the body background from step 3 in combination with “no tile” to your image.

The result – Since all twitter background elements are fixed positioned (meaning they don’t move with the content above) – your feed will scroll up leaving a handsome and consistent brand presence as the backdrop to whatever you have to say.

Have a look at Escriba’s twitter page. In all honesty, this is not rocket science, and most interactive designers may in fact read this with with some wonder as to why I would take the time to write up this simple process. However, I am continually surprised at how few folks do this, or how many do so in a way that display its shortcomings as a result of the limited elements that can be modified. Good luck, and have fun… well, using 140 characters or less!