I showcase my sample and I spend some time in Adobe Muse to explain the architecture of the pages.
Combine “Composition” widgets
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/
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
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:
Suggestions are welcome.