Connect with us:

CNET Mock-ups – many iterations

I was responsible for coming up with attractive design mockups of other pages of the ppd site.

To accomplish this I ended up creating many reversions of mockups.

I first made several variations for the Program Overview page. I treated this page like a landing page, giving it special importance, since this was the page which would sell the whole PPD to prospective customers.

Since I didn’t want to overdesign this page, and the fact that a landing page is effective when it has only brief information and text on it. The enhancements I wanted to create were very subtle and were limited to how the web page thumbnails and the structure of the two paragraphs was represented.

I first made a preliminary batch of mockups for this landing page, playing with different visually appealing ways of representing the page screen shots


It was important to come up with some attractive subtle and effective ways to show that these are thumbnails, without needing the user to explicitly click on them. Also it was important to show that the image blown up is not the whole thumbnail but just a portion of it. During talks with the product manager it was understood that the rollover was the preferred design.

I then came up with some designs for the rollover tool tip that shows up based on the screen shot in focus. I was then wondering if a magnifying glass was helpful or not.


Then I developed the rollover designs further, experimenting with various colours, shapes, shadows. It was understood by then that the magnifying glass was indeed not helpful.


After having reached a clear and effective way to represent the paragraphs, screenshots and rollovers I got to enhance them and make them look better.


After tackling the more complex landing page design of the overview pages I got to work on the rest of pages on PPD area. I designed these mockups such that they would adhere to the rest of design portrayed in the landing pages as well as the pages already designed and developed in manage bids area. This consistency was upheld by using same fonts, styles, colour palette, I stuck with simple elegant design, avoiding to overdesign the pages. I also didn’t include much graphical elements in these pages, since these pages were mainly informational and that the sales pitch was already delivered on the program overview page.

I came up making a couple of revisions for some other pages


During the last days of my contract at cnet I got to work on implementing a couple of these mockup pages in semantic HTML/CSS albeit partially.

HTML/CSS Implementation of some of (PPD) pages

Please click on read more to see the code.