This project was a major effort given our desire to overhaul many infrastructure components that are seldom seen behind the scenes. To begin with, we completely overhauled what was actually many older legacy technology platforms into a faster and more streamline back-end. This also included major updates to our primary CMS that allows the various content types & large network of Business Technology bloggers to be published and programed by page editors who bring an enormous suite of content to life daily.

Lastly (and my teams role), the entire front end is built into a new design framework that is intended on not only being far more modular and flexible – but also applies a more current standard that could be applied to our broader suite of Business and Technology brands to allow for faster future deployments as well as a better ability to serve advertisements / sponsorships across an entire network of sites rather then to simply to a single web property.

Structure

The design framework is built on a the very standard 960 grid which breaks up all content into 12 columns of 60px with 10px of margin to the right and left of each – thus creating 20px gutters between all columns. The one modification we chose, was to make the main wrapper 980px to allow for an even 20px on the outer margins. This gives a more even appearance and extends the horizontal to the final 980px width. This is also important as it is more flexible for the still varied  ad widths that must be supported until the IAB define a standard for 1024px width sites. Further, this makes the main site grid divisible by 3 larger columns of 300px – key given that ZDNet is a large media buy that must support the ever standard 300 x 250 MPU ad creative.

Navigation

At first glance, the largest change is to our primary navigation that is now based on topics rather then content types. Lets face it, most users do not come to a site with the intent to look for blog, video, white papers, case studies or podcast “types” of content. There are exceptions such as folks seeking reviews etc – but most are interested in learning more about topics such as VOIP, Cloud Computing or to research a company or software. Thus our primary navigation is based on the core topics being covered by ZDNet – with each primary silo showing a drill down of deeper topical options with in each bucket. We believe that this will make it easier to find more of the depth of coverage that is actually published both daily as well as the good evergreen assets created over time.

Once you are in our topic pages, users can find daily must reads, the various blogger’s who are covering those topical beats as well as a river of all ZDNet has to offer on each subject. This river can also be further distilled by sorting on relevance, date and popularity – or to be filtered by any and all of our many content types which show how many assets exist (typical to a standard search listing).

Moving to a topical based navigation was “not” done at the cost of eliminating our access to our assets by content type. All these older pages remain. They are placed above the topics, but display smaller as a secondary method of finding your way. That said, we needed to condense our masthead to allow for substantially more navigation options including search – I wont go into how the function of our search is improved (I am not an engineer) – however, we did simplify our display by creating a hover when users mouse over the search text input.

Once the hover appears, a user can simply leave it in its default “All of ZDNet” search, or target the query to a particular area of depth with in the site. This minimizes our search function to a far smaller 300px wide unit found as a constant in the upper right corner of all ZDNet pages allowing for the topical / content type navigation as well as the convenience nav items – Log in, Account management, Assistance and the ability to sign up to follow via newsletter, twitter or facebook.

Content

Once a user clicks into our any of assets, the content pages remain largely the same. Though there are some noteworthy clean ups that were made. The upper portion of the page, was lightened and reduced in size (vertically) to allow us to better “cut to the chase” and get to the meat of the article. We simplified our toolbar in an effort to make it easier to see how many comments there are, vote or share, as well as to access the blog’s RSS feeds and Email alerts. Each article leads with large headlines followed by a summary on the side bar, along with all the tags to refine more content on topic.

At the base of each article, we also made the next and previous posts a large call to action so that a end user can quickly find more latest posts published by Larry Dignan or whomever they are reading. Also included is a simplified bio box with methods to either learn more about the author or to follow / contact them.

Another big overhaul was made to our commenting system. For years, we have had a very traditional title only tree structure view. In the nearly 5 years that I have been at CBS, every redesign has included massive complaints from our users that we did not move to a more contemporary flat nested view which was requested to be more typical and allow users to view the complete comments inline within the article.

Thus, this redesign did just that – We have moved to a flat / nested view presentation. One that supports gravatars and the ability to reply directly, edit or report a comment as spam. Prior to launch we were told that there is a Google News penalty for having too many comments showing in the article – The spec was to show all, but we had some compromises that had to be made at the last minute. However, an end user can view more posts by either clicking a large “View More” that loads more post directly in the article, or can click the view all collapsed / expanded to go directly to a secondary flat / nested view experience stripped of all ads to allow for maximum readability. There remain some issues with this system, but overall – it feels like a progressive step to a new more modern platform that can and will be built upon.

We do have a number of other content types ranging from articles, white papers, downloads, videos etc. – all of which were updated as well. We progressed to a more unified video player that displays 30% larger on video pages, while maintaining the same previous size when embedded into articles. Additionally, we have plans to make future upgrades to our library section.

Ad Innovation

Lets face it… Most end users are not fans of this portion of our efforts. However, sites like ZDNet are free to end users, and are largely supported by a display advertisement / sponsorship business model. That said, we make a commitment to make it the best experience for both our user’s consumption and our marketers ability to reach that targeted audience. ZDNet has assembled one hell of a network of some of the smartest voices in Business Technology. But while free for the end user to consume, it is not free to build and maintain this body of content. The web has evolved beyond being digital brochure ware. As a result gone are the days of media buyers being satisfied with tiny text links on any outlet’s pages.

The web is becoming more like other mediums where more intrusive commercial breaks are the acceptable norm to be able to freely browse a desired body of content and programming. To that end – from time to time you will see larger and more prominent premium ad creative served on ZDNet.

However, we hope to serve our premium content & informed users well, by delivering targeted ads to folks who ideally have interest in the wares and services that our advertisers promote  – further that are also clearly distinguished from our own editorial voice and modes of navigating through the site experience. I think it is safe to assume that this will not be unique to ZDNet but more and more and acceptable norm online.

Wrap it up!

So there you have it… Months worth of R&D and work by all sorts of folks from product, editorial, engineering and of course design. We think we have pushed the site forward with some great new features and functions. There remain a few bugs that will continue to be tweaked, but more importantly – Like all else on the web… this is not an end result, but a new platform to build on. So you can count on seeing more changes and updates based on user and industry feedback. As for me, I continue to wake up and chuckle that I get paid to do something this fun with a group as talented as the folks with in the CBS Interactive Business and Technology family!

This latest series of icons really displays this approach. These are created in Adobe Illustrator as individual objects – then assembled as group to create a composition in Photoshop. A closer look at the individual elements shows that each is composed of very basic shapes. The colors and gradients used create the illusion of form and cast shadow, as well as direct and reflected light.

Example 1: The base of the iMac computer is a simple shape with a single linear gradient. Using multiple shades of silver to gray allow me to create the illusion of a cast shadow from the screen on to the base – Then moving downward, it transitions to a form shadow where the base moves from vertical to flat thus not being hit by the same light. It then gets lighter once again, as it leaves the shadow from the screen, and extends forward.

Example 2: In the case of the MacBook, a similar technique is used, but to create a different effect. In this case, the shape itself is again quite simple, and includes a linear gradient – However, my hope is to show the subtle curve where the front of the keyboard base wraps around to the side of the unit. In doing so, light creates a form shadow around edge as it moves from the front to the side. The shadow helps to show the transition – However, it is the reflected light on the outside of both sides that create this dimension on what is otherwise a flat shape. Further, these details ad to suggest the metallic surface.

A colleague recently suggested that I write a tutorial to showcase how I create these. I may try to in another post, but am not convinced that I could accurately describe a best practice to do so. Mostly because, I tend to “eyeball” a lot of things. However, I do think that applying some drawing principles of light can have a positive effect on the end result!

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!

The site is intended on being Roland’s online home to exclusively cover the game, players and personality of the LA Lakers. As you can see, this greatly influenced the visual design. For the logo, I was inspired by the name – which made me think of a hand held sign that a fan would have and wave to inspire other cheering fans on the floor of the Staple Center.

The blog is not a live game, but the web based coverage of a team, the idea was to create a mood that strings together the topical content in a way that is both connected as well as “in the lime light”. This is achieved with the literal metaphor of “stringing the posts” together. Further emphasis is achieved by placing a fixed positioned and ambient lit background behind a transparent content block. This way, as a user scrolls down the page, the story floats above a back lit background – A look similar to the promotional signs you would see walking through an NBA coliseum.

For the door, all of the individual post are tied together – where as should a user click into an individual post, all user comments are then tied together to continue the theme regardless of weather it is generated by the author or expanded on in a more viral manner.

The site is still being developed and will soon have additional sections, bugs resolved along with more prominent navigation to toggle between Roland’s blog coverage and information about him and the projects that he is involved with.

Have a look at the site, and let me know your thoughts!

When I asked him what he had in mind – He replied that he liked a blueprint sort of theme – He pointed to a recent Revision3 beta site, and suggested that he liked that it has a feeling of “being built”, but clearly is not complete. I liked this idea of generating a template that would house his content – but do so in a way that implies the notion of a constant work in progress.

This idea made me think of being back in art school – I used to use supermarket brown bags as drawing paper. Not only was it free and readily available – but is a great toned drawing surface with a lot of texture and paper tooth to build up layers of pencil lead. This really lent itself to being a quick and easy medium to develop ideas without being overly concerned by a feeling that I was creating a masterpiece. Thus, I stayed loose and really worked on trying new things without feeling locked into any one direction. This seemed like a place to start.

I pulled out all the color and depth to his logo to make it feel like a spot color print on an organic surface IE – brown bag. Splatters and stains are added to emphasize a “Re-used” surface. One intended specifically for the purpose of “quick studies” – taking your thinking through a process. The overall feel is intended on being a bit flat – and creating a monochromatic surface so that it is “his ideas and images” that standout rather then the shell itself. The edges of this design are kept at the top and bottom – thus any super wide images are not confined on the sides should it need to expand horizontally to 100%.

At any rate – this was a pretty simple design and I was able to build out pretty fast. I sent it to him this morning, and he had it up before 2pm. I am pleased with how it turned out, but more importantly am hopeful that it provides an easy base that allows his thoughts and ideas to grow through his constant motion.

With the above goal in mind, I was happy to skin a new blog to foster communication among our 2008 summer interns. This will be a public blog to share experiences both light hearted as well as serious. However, equally important – will be a showcase of our culture and a community display of our talented teams. The desired result being to inspire future passionate media professionals to want to grow their skills with us, learn and continue to make impact on the many sites that make up CBS Interactive.

I did not have much to go on as I am not as familiar with the CBS Interactive brand standards as I am with that of CNET Networks. However the name “New Media Minded” is actually quite telling. One of the most exciting aspects of a contemporary online media company, is that much of what we do can be on the bleeding edge of what is possible.

That said – I wanted to create a shell that portrays itself to our young audience with a welcoming, optimistic and forward thinking attitude. The wrapper picks up on some of the CBS Interactive blues – but also rely on lighting and perspective to display the aspirational mood of the “New Media Minded” theme. The title centers from a burst of energy who’s source stems from CBS Interactive as a base. The content is a fairly standard narrow 2 column blog grid on a light background to allow for maximum legibility of ideas and images. However, simple blues greens and purple tones are intended to compliment the wrapper yet appear lighter and more playful in nature.

The ever prolific Andrew Mager (seen in the mock-up with CBS CEO Les Moonves) intends to build out this theme in the coming days. So stay tuned for more to come – I for one am excited for a “New Media Minded” experience at the new CBS Interactive!

A number of folks at BNET, Revision3 and Apple have expressed interest in sharing their thoughts and insights. While I have little to contribute on the technical side, I felt compelled to offer up a design for the site, as it is one way that I may contribute to an idea that would seem to be a resource for many. (myself included).

The site is currently a simple blog, though will potentially include a gallery of sharp work and displays of the clever code in action. That said, it is primarily a utility, so needs to be contextual and to the point. Therefore I did not want to create a presentation layer that is overly elaborate, or stylized – but to devise a clean look that allows users to get immediate access to the posts. I use a strong contrasting color palette that while grounding the top and bottom of the page, are intended to draw the eye to the nuts and bolts of the content itself.

I had not used the specific color scheme of rich purples, lavender and bright green for many years. I think I (and many others) may have overused these in the early years of the dot com era and I have since avoided certain combinations as a result. That said, it was nice to put a simple and contemporary spin on an old favorite from my web archive color wheel.

]]> http://marcsdesign.com/blog/css-for-lunch/feed/ 2 http://marcsdesign.com/blog/minty-fresh-mobkool-logo-site-skin/ http://marcsdesign.com/blog/minty-fresh-mobkool-logo-site-skin/#comments Sat, 07 Jun 2008 07:23:33 +0000 marc http://marcsdesign.com/blog/?p=12 So lately it seems that I have been coming up with designs on Friday nights for friends I work with at CNET. This proves to be a good opportunity to be really loose with my design ideas, try new color pallets as well as to give me more sandbox projects to code with CSS and semantic markup. I enjoy being prolific as it helps make me faster both with my visual designs as well as with my recent renaissance with code. Tonight, my project was to come up with a brand for MobKool – a blog from friend John Potter.

I’m not exactly sure where the name MobKool comes from – other then the fact that John used to smoke KOOL cigarettes. A nasty habit he gave up years ago, but apparently still maintains a fondness for the name! At any rate, I did not have much to go on other then some ideas tossed around of a crumpled box of KOOL smokes. At first, it seemed like a good idea – but with logos, it is important to rely on minimalistic shapes to convey an idea. So to keep it simple – I played off the KOOL brand with the tight kerning of the double OO’s under a spotlight – highlighting a broken habit with a smashed butt. Also, since KOOL’s are menthol, I shot for a complimentary color scheme with a sort of minty backdrop but a warmer golden foreground.

As I said – MobKool is Johns blog – so the contextual elements rely on simplicity to allow his rants to display with large left aligned headlines as the most prominent part of the page below the brand and navigation. Since John is an engineer – SEO is important (Its actually important for everyone… but he always gives me a hard time about design not thinking about SEO – A designer stole his milk money when he was a kid) thus while the site is quite visual – all navigation and content is linkable text rather then to use images for anything other then background shell components and the logos found in the header and footer. Lastly – Mr Potter is pretty “web active” – so links to the various social places he can found online sits as a signature element in the footer.

This was a pretty quick design, and I am hoping to code it over the weekend by treating it as a sort of CSS Zen garden project by using the mark up of this site, skinned with with his presentation layer. Who knows… maybe he’ll even give me a link back to my site!