Design beautiful websites with Muse

In August 2011, Adobe announced the public beta of Muse (code name), a new visual software tool that enables graphic designers familiar with a print metaphor to plan, design, preview, and publish professional, unique HTML websites without writing any code or working within restrictive templates. In this article, I'll give you a quick tour of the more innovative features in Muse. To learn more you can download the free beta software and give it a test drive.

Overview

If you are a graphic designer, Muse allows you to quickly repurpose existing print assets to deliver online experiences. If you are a web designer, you can use Muse to create and publish site prototypes to share with potential clients.

The code Muse generates is not intended for hand-editing — Muse allows you to publish directly to the web by generating all of the appropriate HTML, CSS and JavaScript code necessary for standards-compliant, cross-browser compatible web browsing.

Muse revolutionizes how you build websites by enabling you to lay out page designs just like you do when you design for print. If you use Adobe InDesign and Adobe Photoshop, you'll find the workspace very familiar. For example, if you want to incorporate an image, just choose File > Place to place it on your page—as you do in InDesign. You can position and transform graphic elements and even crop images without leaving the workspace.

Muse supports roundtrip editing, which means you can quickly jump into Photoshop or Adobe Fireworks to make changes to your original PSD or PNG files. When you publish a site, Muse automatically optimizes the images for web consumption during the export process—you don't have to worry about figuring out the settings.

Workspace

You can build feature-rich interactive websites easily and quickly with Muse. Just drag and drop pre-built widgets into your pages using the Widgets Library (see Figure 1).

Site production

Muse guides you through the steps of creating a site. The workflow is defined along the top of the workspace in a series of buttons: Plan, Design, Preview, and Publish (see Figure 2).

Just follow these steps as you create the site structure, mock up a design on a master page, integrate unique page content, add some interactive features, and publish your site. The software manages everything behind the scenes: the HTML, CSS, and JavaScript code generation to create a folder of site files and assets, CSS positioning, image optimization, and image slicing. Muse eliminates the learning curve and repetitive stress of hand coding, so you can focus your efforts on the design process to build better online user experiences.

The Plan section of the workspace is where you architect your site's organization. It includes a visual interactive sitemap where you can click and drag pages to define the site's structure. You can create new or duplicate pages and set up sublevel sections to define the site's hierarchy and organize information (see Figure 3).

Each page you create is automatically assigned to a master page, which contains the common site elements, such as headers, footers, and site navigation. Master pages make it easy to update and maintain site content; update a single master page to update all of the assigned pages. Drag guides into master pages to set the header and footer regions and control the location of design elements. Adjust the site properties to update the entire site to match your client's requirements. See the "Plan your site" section of the Muse website for more information.

Page design

The Design section contains the tools you'll use to design your pages. Use the Text tool to drag out text frames and type text content, or paste text that you've copied from an external source. Create text elements using web-safe fonts as well as using the fonts installed on your system, which are automatically exported as image files. Apply Paragraph styles to format text content using standard HTML tags, such as h1 and h2. This strategy creates structured text that improves search engine ranking.

Just as you do in your print design software, you can use the Rectangle tool to draw square and rectangular shapes. You can fill text frames and shapes with solid colors or gradients. Or fill them with tiled background images to cover large areas of a page. Repeating background images are useful when fine-tuning site performance because the visitor's browser only has to download one copy of the tiled image.

For more information on the design tools within Muse, see the "Design with freedom" videos on the Muse website.

Even though you're working with tools very similar to those in print design, Muse provides capabilities that you need as you design a website. For example, resizable elements can be created at 100% browser width to fill the entire screen. You can adjust the opacity of objects to create transparency and graphic effects. You can use smart guides to align elements or enter numeric values to transform objects, and then arrange the stacking order to display them above or below other objects on the web page. When a project requires you to work with specific colors, you can add, delete, and edit colors in the swatch library (see Figure 4).

Innovative page elements

The interface includes many features to create compelling sites. For example, using the Pin feature, you can add persistent graphics to pages by pinning elements to a location within the browser window. Pinned elements remain fixed in one position and appear to float on the screen when the page is scrolled.

You can add interactive site features with widgets, including:

• Customizable slide shows that include transitions and navigation
• Lightbox overlays that dim the page to display spotlighted content
• Space-saving tab and accordion panels that expand and collapse content
• Rollover buttons that enable you to style the appearance of button states

See more on the "Add rich interactivity" page on the Muse website.

Site navigation

Muse makes it easy to create your site navigation and links. The Widget Library provides pre-built menus. These Menu Bar widgets are dynamic; menu items are updated automatically when you add or edit pages in the Plan view. You can use the Hyperlink field to add internal and external links.

To embed HTML code of third-party sites, such as Google Maps, YouTube, Twitter, Flickr, form builders, stock charts, and other services, just copy and paste code directly into pages to display the web services and content hosted on other sites. Alternatively, choose Object > Insert HTML to create an HTML object and paste code into the HTML Code window (see Figure 5).

Previewing and publishing

When you are ready to check your work, you can use the Preview feature in Muse to preview the pages of your sites and navigate between pages, or preview a single page. You also have the option to export the complete site (including related assets) to a local folder to preview or upload to a hosting provider other than the integrated Adobe hosting provider, which is Adobe Business Catalyst. You can host any sites you create for free on the Adobe Business Catalyst Platform for 30 days from the date you first publish a site — and you can create as many trial sites as you'd like.

Publish the site by logging into the workspace. You can use a single username and password to manage all your sites. Create free trial sites and publish them online to get feedback from your clients. After approval, use the integrated Adobe hosting provider or export the site as HTML to a local folder and use an FTP client to upload it to your hosting provider of choice. Find more information on the "Publish your site" section of the Muse website.

Try building a free trial site and take advantage of the following benefits:

• Prototype and experiment with building new sites and publish them in minutes
• Generate cross-browser and cross-platform page designs
• Encapsulate the entire site and related assets in a single .muse file

The workspace includes many features to improve search engine optimization, such as the ability to add metadata keywords to pages. You can add alt tags to inserted images to make the site easier for search engines to index and more accessible for everyone.

What's next

As the engineering team looks ahead, stay tuned for new innovations in the areas of web fonts, integration with Business Catalyst CMS features, and support for designing and deploying multiscreen websites for mobile devices, tablets, and desktops.

Visit the Muse site to download the free beta software. Get started with sample project tutorials and training videos. And see what you can build with Muse by visiting the Showcase to view examples and get inspiration.