Reviews: Adobe Muse and Adobe Edge

Creative professionals have long relied on a core set of software products from Adobe Systems to get their jobs done. And so purchase decisions have largely boiled down to whether the latest versions of Photoshop, Illustrator, InDesign, Dreamweaver, Flash Professional, et al, are worth the upgrade prices. But within the past couple of months, the company has unveiled pre-release versions of two entirely new applications for creative pros.

Adobe Muse and Adobe Edge—both code names—are geared toward online projects, but each is aimed at a different group of users. Adobe Edge is for web designers who wish to create Flash-like animations using HTML5, CSS3 and JavaScript, so the content will play in browsers that don’t have the Flash Player. Adobe Muse is for print designers who are comfortable with Adobe InDesign, but have avoided the complexities of web development. It lets them create sophisticated websites using familiar layout tools, and then automatically generates the HTML, CSS and JavaScript needed to render those sites.

Pre-release versions of both are currently available for free download from Adobe.com. However, the programs are at different stages of development. Adobe Muse is currently in a public beta and is set for release in the first quarter of 2012. Adobe Edge is available in an early preview version, and Adobe is seeking feedback from designers about features they’d like to see added. Edge is set for release next year, but Adobe hasn’t yet indicated a more specific timeframe.

Adobe Muse

Since it’s a web design program, you might think 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 isn’t 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.

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.

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.

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.

Adobe Edge

Whereas Muse is for print designers who want to work on web projects, Adobe Edge is for web designers who’d like to create vector or bit-mapped animations without resorting to Flash. It functions somewhat like a stripped-down version of Flash Professional, but instead of generating the animation as a Flash file, it produces HTML, CSS and JavaScript code needed to render the animation. The content will play back in any browser that supports HTML5 and CSS3—including those that run on Apple’s iPad and iPhone.

Unlike Muse, this is not a beta, but a preview release from Adobe Labs, and the company is actively seeking feedback from users about what kinds of content they’re creating and what features they’d like to see added.

In its current iteration, it’s a fairly bare-bones program, but still gives you sufficient tools for creating banner ads and other animated content. You can import graphics in a variety of web formats, place them on a stage and use a timeline to modify their position, size, skew, rotation and opacity between keyframes. You can also create text and rectangles and animate those as well. At any point in the project, you can preview an animation by hitting a Play control on the timeline or open it in a browser.

So what’s lacking? The toolbox is currently limited to a text tool and two kinds of rectangles (rounded or square corners)—no freehand drawing tool, or tools for creating lines or ellipses. You can’t import video clips, and it has no built-in features for adding interactivity, such as buttons that trigger animated actions. However, a developer can add these elements when incorporating the animation into larger projects.

Adobe plans to release the software sometime next year, with pricing and the final product name still to be determined. In the meantime, web developers can choose from two other programs that produce animations in HTML5 and CSS3: the Windows-only Sencha Animator and the Mac-only Tumult Hype.

This article originally appeared on HOWdesign.com.

One thought on “Reviews: Adobe Muse and Adobe Edge

  1. Shannon Mølhave

    Full disclosure: I haven’t tried Muse myself, but from what I’ve heard it creates class names such as, for navigation divs, .n21, .n22, .n23. These have zero semantic meaning, and if it’s true they also do not include “human-readable IDs” I would argue Muse is NOT conforming to web standards and is not creating clean code. (Please correct me if these code assessments are incorrect.)

COMMENT