Adobe Muse
Since it’s a web design program, you might think that Adobe Muse comes from the same team of Adobe developers who make Dreamweaver. But it’s actually the brainchild of folks from the company’s Seattle-based InDesign team. They set out to create an application that behaves like a page-layout tool, and from a software-engineering standpoint, Muse appears to be a remarkable achievement. Not only does it hide the complexity of coding in HTML, CSS and JavaScript, it also lets you create elements like menus, JavaScript rollovers and slide shows in a fraction of the time it would take in Dreamweaver or other web-design tools.
It has some limitations. Many are befitting a 1.0 release, and will likely be addressed in future updates. Others are inherent in its approach to web design. For example, there’s no practical way to import an existing website, nor can you tinker with CSS or HTML during the web-design process. At least in its present form, this is not a product for sites that use a content-management system such as Drupal or WordPress. But for the most part, it seems like a good fit for its intended market of print designers who’d like to apply their talents to the web.
Web projects in Muse begin in the Plan view, where you determine the structure for the site.
To create a site in Muse, you begin in the Plan view, where you can add (or later remove) pages and define their relationships with one another. It’s roughly analogous to InDesign’s Pages panel, and even includes Master Pages that can contain design elements you want to apply to multiple pages. However, since you’re working in an interactive environment, you can also determine how users will navigate to these pages.
For example, if a page is defined as a “sibling” to the home page, it will appear as a top-level navigation item. But you can also define any number of “child” pages under a top-level page. All of this is handled in an intuitive, visual way — you can easily add, move or remove pages simply by clicking and/or dragging.
The Design view is where you create the design for each page.
Once you’ve set up your initial site structure, you can double-click on any page to enter the Design view, where you create the design. Here again, you’ll see features reminiscent of InDesign, including panels that let you create and apply Character or Paragraph Styles. You can also choose from a library of “Widgets” that let you add various interactive elements. For example, the “Menus” widget automatically generates a horizontal or vertical menu based on the site structure you defined in the Plan view. If you later change the site structure by adding or removing pages, the menu is dynamically readjusted. Using the States panel, you can quickly define rollover, mouse-down or active states for each menu item. You can also import layered Photoshop files and automatically define each layer as a button state. Other widgets in the initial release let you add common design elements such as slide shows, tooltips and tabbed or accordion panels.
The States panel makes it easy to create JavaScript rollover effects.
You can import graphics and animations in all major web formats, including Flash and animated GIF. And an “Insert HTML” option lets you add your own HTML code, such as the embed code for a YouTube video. This code goes into a blank box and is then inserted into the underlying HTML document.
At any point in the design process, you can enter a Preview mode to see how your site will appear in a browser. It’s based on WebKit, the rendering engine that drives Google Chrome and Apple Safari. You can also preview your site (or individual pages) in your system’s default browser.
Once the site is done, you can export it to HTML, or use the Publish option to automatically upload the site to Adobe’s Business Catalyst hosting service. Hosting is free for 30 days. Business Catalyst provides a content-management system for small-business e-commerce sites, but Muse cannot yet work with those features (or any other CMS).
In theory, an experienced web developer could take the HTML, CSS and JavaScript generated by Muse and add their own modifications. However, this is not the intended workflow. The machine-generated code is clean and conforms to accepted web standards, but does not include comments or human-readable IDs. You can’t even view the source code for your site unless you export it to HTML or preview it in a browser. So Adobe expects the typical user will build a site in Muse and then publish it directly to the web without the involvement of developers.
Other limitations will likely be addressed in future updates. For example, Muse lacks a line tool, even one for drawing simple horizontal rules. You can simulate a line by creating a rectangle and then disabling three of its borders, but this is a clunky workaround. You can find other wish list items here and here.
Adobe plans to deliver the program via subscription pricing, with fees ranging from $15 to $20 per month. You’ll pay the lower fee if you agree to get it for a full year, or the higher one for a month-to-month deal you can cancel at any time. You won’t have the option of paying for a non-expiring software license, as you can with the Creative Suite.
One reason for this pricing model is that Adobe expects to offer frequent updates. “We do want to add functionality to it on a quarterly basis,” says senior product marketing manager Jane Brady. “We want the flexibility to do that, and also to make sure that the customers who are buying into Muse are getting that functionality as soon as it’s available.”
Adobe has used the program to build a community site for early users, complete with a showcase of other sites created with Muse. The public beta is free, and the subscription pricing seems reasonable, so any print designer who has previously avoided web development should definitely take a look. Some Dreamweaver users may also be tempted by the ease with which you can create menus, JavaScript rollovers and other elements, but will also be frustrated by the inability to access the underlying code.
Read Adobe Edge Preview
Resources for Web Design
- The Web Designer’s Idea Book, Volume 2
- The Web Designer’s Idea DesignCast OnDemand
- Design + Business + Strategy: Print to Web From Start to Finish DesignCast OnDemand
Loading ...
