Recently, I played with Adobe Muse CC, part of the Adobe Creative Cloud. This application is for designers who need (or want) to create websites without writing a single line of code. If you’re a designer who knows how to create amazing pages in InDesign, why not use your skills to target the web? Adobe Muse represents a great opportunity for classic designers who don’t have the energy to learn HTML and CSS.
Web design patterns
The real question is: Can a good print designer become a good web designer? This transition is not automatic, because design isn’t just a question of taste or “trained eyes”. It’s also a matter of culture, knowledge and context. Web designers have a specific knowledge of the web, just as Print designers know how to design efficient layouts. It’s not a question of technology, it’s a question of user context, how to please the user, how to make your work shine, how to guide the eye of your readers…
The web is full of “design patterns”: I’ll explain how to achieve classic web design patterns with Adobe Muse. In this article, I’ll show how to create a scrolling navigation bar in the header. You’ll find three techniques on the web: the fixed menu, the scrolling menu that is part of the design, the hidden scrolling menu that appears when the user scrolls down on single-page websites.
#1. Fixed menu
A fixed navigation bar sticks to the top of the page.
The website The great bearded reef is a perfect example. The navigation bar is part of the design and sticks to the top.
Here is a sample page produced with Adobe Muse:
Click on the image and scroll down. To create this navigation bar:
- Make sure that your design is in a layer on top of your content. In my sample, I also use a PNG behind the content of the page to add more depth.
- Use the “Horizontal menu” widget. By default, the menu will list your website pages. In the settings of the widget, you can manually create a menu and point to anchors in the page.
- Group everything (selection > right-click > Group) and make sure that you position your navigation bar at the top of the page.
- Select your new group of elements and “pin it” to the top of the page.
#2. Scrolling menu
A scrolling menu is part of the initial web design, below the logo of your company for instance. A good example is the Backbone Conf website.
The Parallax Scrolling effect introduced in Adobe Muse CC can be used to catch the eyes of your visitors, to tell a story and also to create a scrolling menu. This effect can be used for amazing effects. There are many good tutorials on the web that explain how to use this effect, but I particularly like this one by Rufus. I leverage this effect to create a classic scrolling menu in my second sample:
The basic principle is that the menu bar scrolls down with the page until its top matches with the top of the browser window. Then it stops scrolling. Here are the steps to enable a scrolling menu:
- As in the previous sample, make sure that your menu bar in a layer above your page content.
- Position your navigation bar in your page. Add a horizontal guide. Click on the guide and get the Y coordinate. In my case, it’s 320 pixels.
- Select all the elements of your navigation bar and click on Effects.
- Open the fourth tab and select “Scroll motion”.
- The “Key position” is the Y coordinate of your guide (the top of your navigation bar). It means that when the user scrolls the page and the browser window reaches 320px, it will trigger an event and switch the behavior from “Motion Before Key” to “Motion After Key”.
- Before this Key position, we want the navigation bar to follow the flow of the page. So it will move up at the same speed as the user scrolls down. Enter “1”.
- After this Key position, we want the navigation bar to “freeze”. Enter “0”.
#3. Hidden scrolling menu
A hidden scrolling menu only appears once the user scrolls down the page significantly. It’s a discreet way to propose a fixed navigation on a single-page website. To see what I mean, check out the beautiful one-single page website of Arlen.
The page starts with the logo and a tagline. Once you reach the “About” section of the page, the navigation appears. I’ve implemented this behavior with Adobe Muse in my third sample:
To create a hidden scrolling menu, follow these steps:
- Make sure that your menu bar is in a layer above your page content.
- Position your navigation bar in your page where it should “appear” first. In my sample, I want the bar to appear when the user is in the “Services” section. So I placed it just on top of the Services hero banner.
- Add a horizontal guide. Click on the guide and get the Y coordinate. In my case, it’s 370 pixels.
- Select your elements, click the “Effects” link and open the fourth tab (for Scroll Motion).
- Select “Scroll Motion”and type the Key Position value. Again, it’s the Y coordinate of the top of your navigation bar.
- The Motion Before key will constantly move down the menu until it reaches its final position at 370px. But the progression of your navigation won’t be visible as the user scrolls down the page.
- Set the Motion After Key value to 0 to freeze the navigation bar once the 370px Y-coordinate is reached.
Get the samples
Here is the link to my Adobe Muse projects:
It contains the three samples showcased in this article.
The navigation bars are defined in the Master pages.
- Home + A-Master = #3 Hidden scrolling menu
- MovingMenu + B-Master = #2 Scrolling menu
- FixedMenu + C-Master = #1 Fixed menu
I’ll cover more classic web design patterns in my next posts. Suggestions are welcome.