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.
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.
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.
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 + 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.
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.
It doesn't take much effort either. Just as in InDesign selected pages can be deleted using the trash can button also.
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.
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.
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.
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.
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.
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.
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.
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.
The pinned object stays pinned to the top left of the browser window rather than the page.
In the Plan view I have a site structure, and all the pages and Sibling pages are named.
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.
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 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.
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.
This has to be my favorite feature of all, as it allows for the design of buttons using Photoshop layers for button states.
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.
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 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.