I proposed the Current Account page to be turned into this New Account page.

To come up with this design I looked at many different sites such as friendster and netflix and amazon. I saw that the account pages usually either have a box model like netfix or tab model like myspace. My design is a hybrid. When working on this I also felt it would be interesting to have a type of passport look and feel to this. Furthermore I used all the existing designs and palettes which are currently used on piczo for the sake of consistency. I made al the tips highlighted, and made that consistent. I also streamlined the information, and got rid of extraneous pieces. I made the boxes aesthetically pleasing by making it symmetrical and using the same type of divider. Lastly I got rid of the loud boxes on the side and made them look more consistent with the rest of the page.

I proposed the Current Account Settings Page to be turned into this New Account Settings Page.

I had consistency in mind all the way thru with this page. I made sure I also stay consistent with the account page, highlighting tip text again.

I proposed the Current Tools Menu bar to be turned into this New Tools Menu bar

To do this I tried to get rid of redundancy by putting similar elements in one sub category. This meant there is going to be 3 sub categories which I highlighted for clarity. These were Page Design, which I put on top since its the first thing a user would do.Then I put Add Media, and finally the single action of change background. As the graphic shows when the images is clicked a popup opens containing pictures and clipart, and when text is clicked a pop up opens containing text and graphic text.

I proposed the Current Organizer Page to be turned into this New Organizer Page.

I found the current organizer overview page extremely confusing, and tried to make it more clear by proposing to show it as a simple flow chart. After having investigated all the organizer pages of the site I noticed alI they did was four tasks: upload pictures, preview, edit and delete although profile and homepage didn't have the delete functionality. I also thought that a user would like to keep track of their assets be it pictures or video or whatever else which costs them web space. In their assets they would have new or deleted pictures. Also the bottom bar would just show how much space they are using, and how much they have left, at a glance.

Technical HTML/CSS, UI, Navigation, Graphic Mockup Design for CNET Networks

Tips Submission Area of cnet.com
Upload.com Pay-per-Download (PPD) Manage Bids HTML/CSS implementation of a Very Strict Mockup Design
Various Mockups for (PPD) pages over several iterations
HTML/CSS Implementation of some of (PPD) pages

Tips Submission Area of cnet.com
I worked on various areas of the submit a tip area of cnet.com. I had to make cross browser HTML/CSS implementations within both the Reviews and Tips & Tricks areas of Cnet.com which used two different wire frames (wrappers) within the jsp struts framework. I also worked with the login page for the tips submission. I also implemented the tip submission form itself in terms of CSS/HTML.

Upload.com Pay-per-Download (PPD) Manage Bids HTML/CSS implementation of a Very Strict Mockup Design
I worked with very strict mockups given to me by the design team. I implemented these mockups in semantic and CSS/HTML implementations, with no tables except for tabular data.

Various Mockups for (PPD) pages over several iterations
I was responsible for coming up with attractive design mockups of other pages of the upload.com 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.

mockup 1 both page screen shot at same angle
mockup 2 the two paragraphs stacked up
mockup 3 the two paragraphs and screen shots symmetrically laid out

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 upload.com 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.

new treatment with no magnifying glass, mouse out
mouse over how it works, with magnifying glass
mouse over how it works, without magnifying glass
mouse over what is ppd

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.

mouse out red box
mouse over howitworks red dropshadow
mouseover howitworks red no dropshadow(my choice)
mouse over howitworks gray
mouse over whatis ppd red

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.

mouse out red
mouse over howitworks red
mouse over whatppd red

After tackling the more complex landing page design of the overview pages I got to work on the rest of pages on upload.com 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 did however end up making a couple of revisions for some of these pages.

bidding help
program faq
faq new treatment
bidding help modified
contact us

HTML/CSS Implementation of some of (PPD) 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.

Program Overview
Bidding Help