Adobe Muse tips – Catalog design pattern

Adobe Muse tips – Catalog design pattern

I introduced in my previous post a classic web design pattern: the scrolling menu. Today, I’ll explain how to combine Adobe Muse widgets to create a catalog navigation. To build a sample website, I’ve used the hype products of The Urban Beard designed in Poland. Of course, you can download the Adobe Muse project at the end of this page. Adobe Muse is among the most advanced applications available for creating websites without coding. It targets traditional designers who want to embrace the web. Thanks to the library of widgets, you can create professional web experiences without writing any HTML, JavaScript or CSS.

Video tutorial

I showcase my sample and I spend some time in Adobe Muse to explain the architecture of the pages.

Combine “Composition” widgets

shopping-structure

A lot of  websites use this design pattern:

  • Horizontal navigation for the main sections: In my sample, I use the Horizontal Menu widget.
  • Vertical navigation for the subcategories: I’m using a Composition widget.
  • Thumbnails and information for each product: I’m embedding Composition 2 inside Composition 1.

You can control the experience thanks to the transitions. When you navigate from T-shirts to Sweats, I use a “Vertical Slide” in Composition 1. In Composition 2, I’ve set the classic “Fade” transition.

It’s very easy to adjust the experience and to update your content. Let’s see it in action: http://museshopping.businesscatalyst.com/

beanies2

You don’t have to add a “Composition 2” for every section of your vertical navigation. In the “Beanies” section, I’ve just added a message and an auto-play slideshow. Again, a lot of freedom in the user experience thanks to Adobe Muse.

Thumbnails and Lightbox

thumbnails

The Lightbox Display component is also a classic pattern where you display thumbnails of products, and you invite the user to view a bigger picture. This pattern is used on the magnificent website of http://www.manufacturedessai.it/it/

To display a “Click to enlarge” message when the mouse is over an image, I’ve created a transparent PNG on top of the thumbnails. Adobe Muse lets you define the visual states of your page elements: Normal, Roll Over, Active, Mouse Down. I just set the opacity to 0 in Normal mode.

Then I used the Lightbox Display Composition widget. Let’s see it in action in the “Sale” section: http://museshopping.businesscatalyst.com/sale.html

Get the Muse project

Feel free to get Adobe Muse for free. To do so, join the Adobe Creative Cloud for free and access all Adobe applications, including Muse. Then download this file, unzip it and open it in Adobe Muse to understand the architecture of this website:

http://creativedroplets.com/samples/adobemuse/ShoppingSample-export.muse.zip

Suggestions are welcome.

Digg This
Reddit This
Stumble Now!
Buzz This
Vote on DZone
Share on Facebook
Bookmark this on Delicious
Kick It on DotNetKicks.com
Shout it
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter
Google Buzz (aka. Google Reader)

4 Comments

  1. nice adapting 😉

  2. Many thanks for the help, and your work is great.

  3. Thank you! That was very helpful. I didn’t realize you could place a composition within a composition.

  4. Hi. I find your video very useful. I have to ask something else.
    After I create one catalog with products I want the client to chose my product by click and add to a basket. Like e-commerce but not with paypal.
    When the client chose one product I want to received one e-mail with the product no. or name.
    I like to know how can i do to make this.

    Thanks

Submit a Comment

Your email address will not be published. Required fields are marked *