All Articles Review
Review: 5 Things to Love About Adobe Muse (Codename)
David Smith on Fri, December 9th 0 comments
When developers put the word "Codename" in the title of new BETA application you might expect something exciting... You could well be correct! David Smith examines Adobe's latest piece of tech.

With the release of InDesign CS5 Adobe made a sizable shift towards allowing designers to make interactive documents without, and this is the really important bit, without having to first learn any code what so ever. Take the Object States panel as an example. Suddenly a world of interactive SWF design opened its doors to even the most hardcore print designers. And so the revolution, if that's what it is continues with the Beta software codenamed Muse. 

Muse is an HTML5 editing package that utilizes the web design benefits of CSS3 but that requires none of the coding. In fact the software is so non-code thats its basic workflow, layout and terminology is more associated with InDesign than Dreamweaver. And it's that InDesign emulation that really opens Muse (working title) up to Designers. 

There are lots of really nice features in Muse that make it a really quite simple application for anyone with a basic InDesign knowledge to get to grips with. I've picked out 5 of my favourite features for you.

Feature 1 - Plan View

The plan view is in a lot of ways an equivalent to the Pages Panel in inDesign, only with the added feature of it being a web-site that's being put together as a site map rather than a document.

Plan View

Plan View.

Let's start by looking at the Structure and Layout first. Beside the first page (this will be your index page) you will see small "+" buttons. Clicking on the button to the right of the first page adds a second page to the site. 

An Added page.

An Added page.

The pages are joined by a little connecting line. This line will be used to generate navigation, as you will see later. Keep clicking on the + button to add new pages either before or after the old pages. So simple.

The bottom + button

The bottom + button

The + button at the base of each page has a different role. Clicking on this button adds Sibling Pages. Sibling pages are pages that can only be linked to from within the page your adding them to.

The Sibling page

A Sibling page.

Using the + Buttons to form a site structure means it doesn't take very long until you have created this kind of thing.

Site Map

Site Map.

It doesn't take much effort either. Just as in InDesign selected pages can be deleted using the trash can button also. 

Feature 2 - Master Pages

As a designer you know just how important consistency in your design is for the user experience to be a good one, regardless of medium. Using Master Pages in Muse is a great way to facilitate just that. If you are familiar with Master Pages in InDesign then you will already understand this concept. If you're new to Master Pages the best likeness I can think of for you is Templates.   

A Master Page.

A Master page.

Double Click on the Master Page to open it. Notice there are two pairs of guides? These are preset as Header for the top pair and Footer for the bottom pair. 

Header guide

Header guide.

Adjust them as you would any guide to get them into position.

Place content that needs to be consistent on more than one page by pressing Command-D to open the place options or by selecting one of the tools to generate for instance a text box or a shape.

Content placed on master page plus tools

Content placed on master page plus tools.

Try making a few variations by either adding more master pages or duplicating (right-click and choose 'Duplicate') the current one and making modifications.

The A Master page is automatically applied to all pages. To apply a different master page to your pages, drag a master page from the master page group over to a page in the Plan view and release it when the page highlights.

Page with master applied and extra content

Page with master applied and extra content.

The page can still be edited where there is no master page content, so in reality a page might be made up of 80% content added on that page and 20% content from the Master Page for instance. 

TIP: Master Pages can still be edited in the Master Pages group, just remember that any changes made to the Master Pages are Global and so will be reflected in the pages that have that particular Master Page applied.  

Feature 3 - Object Pinning

Using the Position formatting options in CSS to pin an object to a position in the browser window can be quite complicated if you are unsure of what you are doing. Muse however has found a simple yet highly effective way of doing just that.

The Pin option

The Pin option.

Select an object or group on the page that should not move from its current position, perhaps a navigation bar for example. 

Navigation selected and pinned

Navigation selected and pinned.

In the control panel click on one of the Pin options, I've chosen Top Left.

Click on the Preview button to see your HTML page, now try scrolling the page (you might need to add more content to enable scrolling). 

Pinned object stays put

Pinned object stays put.

The pinned object stays pinned to the top left of the browser window rather than the page. 

Feature 4 - Customize Navigation

In the Plan view I have a site structure, and all the pages and Sibling pages are named.

Plan view busy

A busy Plan view.

Now I use this site structure to automatically create site navigation. Open the Widgets panel and choose Menus > Bar/Horizontal/Vertical.


The Widgets panel.

Drag the Menu onto the first page on the site and place it in position. 

Tip: The Master Pages are an ideal location for this type of thing.

Menu on the page

Menu on the page.

This widget is a smart widget that automatically names each link and creates a Hyperlink to the page. Click on the options button next to the menu to open its options.

The Options area

The Options HUD.

Here you can chose what type of menu you desire such as what level of navigation you want, Pages only or include Sibling pages for instance. 

The Control Panel

The Control Panel.

To style the menu to match your site use the color options and font options available in the Control Panel like many other Adobe applications.

Feature 5 - Importing Buttons from Photoshop CS5

This has to be my favorite feature of all, as it allows for the design of buttons using Photoshop layers for button states.

Photoshop layers

Photoshop layers.

Here I have a Photoshop image that I've made, a button with a different layer design for each state. 

Back in Muse, place the photoshop file as a Photoshop button by choosing File > Place Photoshop Button. 

Button Options

Button Options.

In the options box that pops up match each layer to each Button state, Up, Over etc. Then place the button on the page. 

Switch to the Preview mode and test the button. Each photoshop layer is revealed when its corresponding state is activated by the cursor. 

The States panel

The States panel.

The States Panel allows each Photoshop button state to be monitored and modified after placement. 


So has Adobe struck the right course with Muse, or indeed whatever it might be called at the time of launch? Well I'd have to say... Yes! Muse is a great tool for designers to transfer their knowledge from Print to Web without involving code. Not that I'm saying anything is wrong with coding, but for many designers HTML and CSS are not part of their toolset. 

If you want to try out the Beta version of Muse then visit the Adobe website and download it for free here.

Comments (0)

You must be logged in to comment.

Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: