WEB202 » 09) Product Listing & Details Wireframes

Product Listing & Details Wireframes

Product Listing & Details Wireframes

Now that we have concerned ourselves with what an Aesthetic Visual Design to the surface of our design can do for us, we are ready to design and produce the rest of the nooks and crannies to our Products Interface.

We need to evaluate and create our Products Interface in terms of:

  1. Product Images: here is where we find ourselves incorporating our brand through our product photography
  2. Product Descriptions: so this is why we worked so hard on our content inventory – I knew I would need it eventually.
  3. Interface Elements: these are the elements that will direct our user through the series of screens the need to get through.
  4. Links: our links will provide the user  directions to the key user paths – like accessing the product information we are looking for
  5. Buttons: our buttons will signify what the user can do along our user paths – like adding the product to our shopping cart.


  • You must create a complete schematic of each page in your products interface.
  • Post a link to this assignment in the comments section AND print it out to turn in as your Product Listing & Details Wireframe assignment according to the class Schedule (Spring) or Schedule (Summer).

This portion of the Premium Design Works website is written by Mike Sinkula for the Web Design & Development students at Seattle Central College and the Human Centered Design & Engineering students at the University of Washington.


  1. http://www.reactacitly.com/bumblejax/

    Click on the Product Listing & Details Wireframes button


Leave a Comment:

Don't forget to get your Globally Recognized Avatar.