Our goal was simple:

We wanted to greatly simplify the exploration and consumption process. This applied to both what is new and published by our editorial team, as well as access to topics and sections sought after by our users. To do this, we insisted on making it feel very iOS specific to take advantage of how users have already learned to interacted with Apple’s tablet device.

What we came up with is a multi panel display that separates browsing from consumptions into 2 simple but distinct views – a list or browse view and a consumption panel.

The experience begins with a list view or river of stories that leads with larger and more prominent features up top. While the grid itself can be controlled by editorial teams based on the importance of a single or multiple stories – the recent or most important content sits in various larger tiles that form a brick pattern up top.

From the lower left of any view, a user can open a section drawer that exposes the numerous ways they can aggregate the list view of content based on a given category, topic or type of CNET special programming such as our Holiday Gift guide or our future CES programming.

As you scroll down through the experience the masonry pattern from above gives way to a simplified list view. The story headline, image, content label and date stamp remain, but are sized down into a streamlined stack for more uniform browsing.

Once a user clicks on a headline, a consumption panel enters from the bottom with the given story. This is the same for all content, however each has elements that allow a user to simply consume, paginate or do a deeper dive. This is the case in the review above where users can tab this view to deep dive into the content subset of the full review, user review, product specs or where to buy.

In the case of an image gallery, we reverse out the experience to provide a theater view. This helps to highlight the featured image as well as the related thumbs to stand out by utilizing higher contrast for this view.

Similar to reviews, news articles open into a single story panel that users can scroll vertically for the full read or to view any related in line content information or author bios that cap each piece of content. From any piece of content, users can either close each individual panel or simply swipe left and right to access the next & previous story.

On the right side of the display (directly where the thumb sits) lives a consumption utility that is accessesd by tapping the right side of any article. From here users can size up the content for increased font readability.

Or a user can tap the share function to access means to pass enjoyed content along to folks in their social graph or by email. As we add more consumption utilities, this feature will likely change or be built upon.

From the lower right of the tool bar, a user can both alter their settings or search the app with the simple magnify icon. Similar to the topical drawer, the keyboard panel also emerges from the bottom of the display / product experience.

Search results display just as they do when making a query on the native device. Once in a story from a result, users can swipe left and right to paginate to next and previous items with in the list.

So there you have it – The richness of CNET’s content in a simpliefied native tablet app to enjoy. This is obviously our v1 release and we will only build on this from here – but given that we consume as well as produce CNET, we are really excited about this new method of getting all of what CNET has to offer in this streamlined form factor. Give it a try and let us know what you think! We really are listening and want your input to make it the best experience possible~

About the Position

This is a “Product Design” role. Thus the ability to work outside of Photoshop is both critical and mandatory. (HTML / CSS based design prototypes) Our properties must look stellar – this is a given. However, the true measure of success will be in building functional design systems that allow for simple and clean access to our content, features and functionality for both the desktop and mobile interactive. You must be a problem solver who is able to use visual communication to solve complex functional issues as well as to support the editorial mission. You will partner with various product, editorial and engineering leads to execute both large-scale projects as well as day-to-day production.

You are an avid user of web tools, applications and shared content online. You have an understanding and interest in emerging web technologies, concepts, and designs and can both mentor and foster this environment in a team. You pay attention to what others are doing with current design, and THRIVE on adding “best of” skills and techniques to your bag of tricks. The perfect candidate will have a solid understanding of user experience, be preoccupied with usability and have a great eye for the small details that make design stand out from the crowd.

The Requirements

• A passion for innovation and an attitude that good enough is not good enough.
• Strong desire to lead, learn, mentor and be a part of a passionate group – whose desire is to do the best work of their career.
• Portfolio of work that indicates a strong understanding of current interactive design trends – AND knocks our socks off!
• Responsible for managing a group of 4 – 6 Senior Designers, Designers, and/or Junior Designers on multiple projects
• Excellent communication and organizational skills. Ability to present and support creative concepts in a professional and engaging manner
• A self-starter who can both produce and lead teams to perform top-quality work on tight deadlines for multiple internal customers and product teams
• Approach design with user-centered design methodologies and practices
• Understand the role of design in creating usable and effective web / digital interfaces
• Able to conceptualize and design innovative user interfaces for consumer- facing websites and web-based applications.
• Advanced knowledge of the full Adobe web Creative Web Suite.
• Experience with valid HTML & CSS – We run a code based design shop.
• Current and review-ready portfolio

Most important – you have to have an online portfolio. I’m not interested in a resume of what you’ve done, and where you have been. Let your work knock my socks off. If you have the chops… you are that person, or know of that person… I want to hear from you!

Given this, I typically use a standard base level tab style. However, a recent project prompted me to challenge my own best practice. The product called for a 2 tab experience, however the standard style looks underwhelming and awkward when limited to only 2 choices. The goal was to play up the product’s simplicity – but the spacial relationships delivered the opposite effect.

The Solution

I created a customized tab style that is visually tied to the standard SDK – yet one that utilizes the full width of the bar.  This is where the standard SDK implementation fell short. However, when occupying the entire space, it plays up the simplicity of the navigation with a strong presence rather then to feel overly simplified due to an awkward spacial relationship.

About the gig~

This is a full time position – The successful candidate (s) will assist in the creation of design solutions for assigned web projects including: product redesigns, new page layouts, visual interface design systems and functional | interactive elements, e-newsletters, promotions, and other graphical needs. Looking to the not so distant future, it will move beyond the desktop web and explore possibilities with emerging platforms such as mobile & tablets.

We are a tight knit design group that works closely with the Tech Production team to insure quick delivery of cutting edge design solutions to our audience. You are an avid user of web tools, applications and shared content online. You have understanding and interest in emerging web technologies, concepts, and designs. You pay attention to what others are doing with current design, and THRIVE on adding “best of” skills and techniques to your bag of tricks. The perfect candidate will have a solid understanding of user experience, be preoccupied with usability and have a great eye for the small details that make design stand out from the crowd. You will help define new site sections, concepts, and user flow.

The Requirements

• Portfolio of work that indicates an understanding of current web design trends
• Must be a self-starter who can produce top-quality work on tight deadlines for multiple internal customers and product teams
• Approach design with user-centered design methodologies and practices
• Understand the role of design in creating usable and effective web / digital interfaces
• Able to conceptualize and design innovative user interfaces for consumer- facing websites and web-based applications.
• Excellent communication and organizational skills. Ability to present and support creative concepts in a professional and engaging manner
• Strong desire to learn, grow and be a part of a passionate group – whose desire is to do the best work of their career.
• Advanced knowledge of the full Adobe web Creative Web Suite.
• Experience with valid HTML & CSS
• Current and review-ready portfolio

All seems reasonable right? Most important – you have to have an online portfolio. I’m not interested in a resume of what you’ve done, and where you have been. Let your work knock my socks off. If you have the chops… you are that person, or know of that person… I want to hear from you!

Why make something custom?

I have never been good about updating a photo stream on Flickr and Facebook’s shifting position on my privacy really creeps me out. In the meantime, my friends always joked about how many photo’s I take using my iPhone.  There are over 1600 photo’s on it right now – So it seemed only fitting to make use of the life stream that was taking shape with a device that I already take with me everywhere.

I love the power and simplicity of WordPress and have used it as a platform to create numerous custom site designs & blogs themes over the years. However, this project was the first time that I took advantage of the mobile publishing aspect of the iPhone App. This is what makes this such a powerful way for a proud dad to share. I already use my phone as a means to capture events, it is only a few quick steps to write down a few words that provide some context to the photo.

The one thing you must do from the desktop admin is to turn on the remote publishing blogging client found in the “Writing” section in your settings widget. Next, simply download & install the free WordPress App on to your iPhone or Android device. Once you have installed the app – you simply enter the same log-in you already use to access the desktop wp-Admin into the log-in prompt from your smart phone.

Once it is loaded up, you can see and manage all of your existing posts / comment, or write a new ones. From the Post view, it is quite easy to take a photo or choose from an existing one in your photo library making it simple and quick to document and publish in real time.

A fun component to Brandon’s site is the ability to use the GPS function that is integrated into the iPhone. My dear friend and colleague Brice Lechatellier created a nifty little wp plug-in that allows you to ad and style a Geo location map to each post. He created this to document his whereabouts on a 6 months around the world trip that he recently embarked upon. I find that it adds an interesting bit of context and flavor to the ongoing story of my adventures / life stream.

So there you have it! The design itself is really quite simple – nothing complex or worthy of explanation. However, the straightforward process to both create and consume make it a very pleasurable utility!

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!