Digital Defiant Studios

Published: 2012-07-25 00:00:00 -0700

Popcap.com redesign

While working at PopCap, I had the pleasure of working with some awesomely skilled folks as we achieved the daunting task of a full redesign of the entire PopCap website and the many pages contained within.

Needing a major overhaul, the site had been using the same layout for quite a few years. Customer experience, revenue goals, overall look and even speed were lacking. The new site was meant to bring the PUNCH PopCap deserved with it’s quirky personality as it’s games were outperforming the look of the site.

Our team was tasked with the main design. I was tasked with concept designs, content inventorying, workflow prototypes (in html and flash) as well as coding the majority of the drupal templates. I setup the new site with the HTML5 Boilerplate template and a hefty dose of customized styles. I broke out all the various styles into individual css classes for easy customization. We converted all the button graphics to full CSS3 (backwards-compatible). I added new html5 semantic elements where appropriate.

Some of the jQuery animations I did for the homepage:

Animations for the dropdown menu, all done in jQuery as well.

  • Major tasks: writing jQuery based animations for all interactive elements on the page.
  • Coding the CSS/HTML for major page templates across each page
  • Creating interactive flash prototypes for early UI/UX
  • Creating UI/UX comps for various sections
  • Creating content inventory and categorizing games
  • Categorizing link structure for entire site