CSS-Tricks

New Screencast: eCommerce Product Page Makeover

*   August 28th, 2008   *

by: Chris Coyier

I subscribe to the theory that web page redesigns should be evolutionary not revolutionary. Making small changes, tweaks, and upgrades over time leads to a higher quality design than up and redesigning the entire thing on a whim or as a reaction. In this screencast, we take open up a screenshot of an eCommerce sites product page in Photoshop and start moving things around and making changes. Then we’ll take a look at the updated page on the live site. It’s like CSS-Tricks Screencast: Makeover Edition!


Bookmark at Delicious Digg this! Stumble this! Submit to DesignFloat Submit to DZone

Responses


  1. Gravatar

    Donna
    August 28, 2008
    [ permalink ]

    Great screencast! I love seeing website makeovers. I am more of a developer and striving to get better at design skills so these types of screencasts are very helpful to me. Thanks for taking the time to do this.

  2. Gravatar

    kyle
    August 28, 2008
    [ permalink ]

    Chris,

    The makeover looks great. It reminds me a great deal of my first e-commerce project I did for a client. They were similar in business, but focused more on the spirit items for sports, such as foam fingers and t-shirts and hats.

    In any case, one suggestion I have is why not make custom buttons for the site? I think that would tie the site together even more and keep a consistent look and feel.

  3. Gravatar

    Ross
    August 28, 2008
    [ permalink ]

    Chris, I’m a big fan of yours, but this was not one of your best.

    I’d love top see more about Wordpress theme creation, etc.

    Thanks for all of your great work.

  4. Gravatar

    V1
    August 29, 2008
    [ permalink ]

    to much advertising o.o

  5. Gravatar

    Ross
    August 29, 2008
    [ permalink ]

    Chris has every right to support his sponsors. It’s elementary that this site exists because of it’s sponsors.

    Chris, your vids are great, better than most. Keep it up.

  6. Gravatar

    chrisL
    August 29, 2008
    [ permalink ]

    Nice vid, Chris. I have one customer using Pinnacle Cart, so it was nice to see others wading through their table-based layouts.

  7. Gravatar

    Chris Coyier
    August 30, 2008
    [ permalink ]

    @chrisL: My latest venture with Pinnacle Cart is to try and rip out every single table and go full CSS. It’s been quite the pain, but I think it’ll be worth it! I’m finding it easiest to start at the smallest level (like the “boxes”) and move outword (to like the product page template) and then all the way out to the index page.

    I’ve also used full CSS eCommerce software that comes with CSS layouts like Cube Cart, but honestly Pinnacle Cart has the nicest features of all I’ve worked with so far.


Leave a Comment

Gravatar

Your Name
December 3, 2008