First Look: Adobe's Muse code-free website designer

Many applications let you create websites with little or no coding, but Adobe is betting print professionals are ready for one more. Adobe’s new Web design program, code-named Muse, lets users take advantage of their familiarity with InDesign to build entire sites as easily as they might create brochures. But while Muse transports the page-layout paradigm to the Web intact, it offers features that establish it as an exciting new tool for making sophisticated, interactive sites.

Plan and design your site

Plan View: Muse’s Plan view is a sitemap that lets you easily add or delete pages, drag and drop to rearrange and nest them, and create master pages that can be applied by dropping them onto other pages in your site. Here you can also customize properties like page size, the number of columns in each page, and page metadata. Double-clicking pages opens them for editing.

Design View: Pages are crafted in Design view, where you can switch among open pages––even multiple sites––in Photoshop-like tabs. Six tools are available: Selection, Crop, Text, Zoom, Hand, and Rectangle. A control panel below the toolbar updates depending on your selection, giving you quick access to Web-safe fill and stroke colors, fonts and text-styling options, a hyperlink style editor, and more.

Arbitrary HTML: Even though Muse is strictly WYSIWYG, you can easily add custom HTML from sites like Google Maps, YouTube, and Facebook. On the original site, just customize the code you want to export, then copy and paste it anywhere on your page. The HTML object will appear ready to be repositioned to your liking, and you can even edit its code.

Web-safe text: Muse’s Font menu is divided between Web-safe fonts––like Helvetica, Georgia, and everyone’s favorite, Comic Sans––and those that aren’t. Safe fonts appear in your final site as selectable text, but you can still use the others. They’ll be automatically exported as image files, so your site looks correct to all visitors. Muse even includes an HTML version of converted text in the Alt tag so search engines can find it.

Organizing your site in Plan view is as easy as drag-and-drop.

Widgets

While Muse lacks templates, its Widgets behave like mini-templates you can drop onto pages. They add dynamic features like navigation bars, slide presentations, photo galleries, and more. Best of all, the appearance and behavior of each widget––including size, fonts, and colors, or rollover states––can be extensively customized, just like objects you create yourself.

Compositions: These widgets add special information (like slide presentations, news updates, or tooltips) to your site. A blank option lets you build your composition from scratch.

Menus: Muse’s three navigation menus (two horizontal and one vertical) can help users get around your site. Each automatically recognizes the names and structure of your site’s pages, and you can include subpages in your menu with a click.

Panels: Muse’s tabbed and collapsable accordion-style widgets present a page’s main message in a compact, interactive space. Like many of Muse’s widgets, panels offer an Edit Together option that automatically applies changes made to one object in the widget (like a subhead, for instance) to the rest.

Slideshows: You can add images to pages simply by dragging them into Design view from the Finder, but Muse’s Slideshow widgets offer more interesting possibilities. Instant thumbnails, customizable autoplay options, and your choice of navigation controls are just a few.

The collapsible Panels palette is home to Muse’s most powerful settings, like these adding a rollover state to a tab.

Preview and present your work

Preview: Muse offers several ways to see how your site is shaping up. A built-in Preview mode lets you test your site without leaving the application, and you can view the current page (or an entire site) in your Mac’s default browser with a command in the File menu.

Publish and export: When your site is complete, you can export it as HTML to a folder on your Mac for upload to a server. You can also publish directly to the Web by creating a free account with Business Catalyst, Adobe’s hosting platform. In both cases you have the option of exporting either revised content or an entire site. Here's a site I created with Muse, hosted on Business Catalyst.

Along with cosmetic changes, you can customize Widgets to display content the way you want.

More in store

Muse offers many more features to explore, including easy conversion of Photoshop file layers to button states, simple header and footer element selection, and too many widget customization options to mention here. Muse is a free beta until the first quarter of 2012, giving you plenty of time to download a copy and see what inspires you.

[Adam Berenstain is a freelance writer in upstate New York and a frequent contributor to Macworld.]

Product mentioned in this article

(1 items)

Subscribe to the Apple @ Work Newsletter

Comments