Wireframing website layouts in Adobe Muse

by Dani Beaumont

Adobe Muse (code name) is a visual design tool that helps graphic designers use their existing design skills to create websites and related assets. When you create sites with Muse, you can host free trial sites so that they are immediately available to view online. The Publish wizard is preconfigured to connect and upload your site files quickly and easily.

If you'd like to try Muse for yourself, download the free beta software.

In addition to being very intuitive to use, Muse helps you rapidly create prototypes of web projects that you can view online. The ability to create trial sites means that you can share the links with potential clients, so they can review the prototypes online using the same browsers that will display the final version of the site. This helps clients understand how the completed site will appear (see Figure 1).

Figure 1. Wireframes include placeholders to specify the location of page elements.

In this article, I compare the wireframes and live versions of a site for a fictitious business named Kevin's Koffee Kart. To understand how wireframes facilitate the production of the final deliverable, review the wireframes and the final live site.

Working with wireframes

The wireframes show the page layouts for the site and allow you to click through the links to see how the site flows. After interacting with the wireframes, visit the final live site to compare the wireframes to the completed version. Notice how the placeholder elements in the wireframes were replaced with the graphics for the final version of the site.

If you'd like to see how the wireframes were constructed, download the sample files (ZIP, 4.5 MB). Uncompress the ZIP file, open the folder, and locate the KevinsKoffeeKartWire.muse file. Double-click it to open the wireframes in Muse. Use Plan view to learn how the pages are organized into different tiers to build out the site map. Double-click the individual pages to open them in Design view and explore how they are designed.

Muse provides many features to help you create wireframes:

• Design view includes an optional column grid to help align layout elements.
• Flexible drawing tools make it easy to create placeholder shapes for graphics.
• The Assets panel includes features to help you update placeholder images.
• Muse optimizes, slices, and exports all the image files when you publish or export a site.
• Text headers and paragraph styles help you create structured pages and change text formatting easily.
• The Place command lets you save your client's logo straight from your browser and then place it in your Muse file (see Figure 2).

Figure 2. Choose File > Place to quickly add branding elements to wireframes.

Designing wireframes for client approval

After an initial meeting with your client, you can create a wireframe mockup of the site that outlines the positioning and functionality of page elements devoid of the final site's graphics and text formatting. The goal of a wireframe is to replicate the bare bones of each page, creating a simulation of the web presentation without the distraction of colors or visual content. Rectangles are used as placeholders to mark the location of images and handwritten or generic fonts are used to display the areas of the page that contain text content.

Wireframes offer the following benefits:

• They enable clients to focus on the structure of a site and understand page layouts.
• They provide an interactive live experience, helping clients review and approve sites.
• They serve as a communication tool to clarify the site's design and functionality.

In addition to being a web design tool, Muse is great for prototyping projects. You can immediately create a live trial URL and send it to your clients in an email message, simplifying the approval process. But that's not the only advantage of creating wireframe mockups with Muse.

Wireframing in Muse takes productivity a step further than other design tools because the roundtrip image-editing capabilities and editable paragraph styles make it easy for web designers to quickly update the .muse file and convert the approved wireframes to the final live version. Rather than gaining the client's sign-off, throwing the wireframes away, and starting over from scratch to build the project, you can immediately begin updating the approved wireframes to add the actual web content and build out the final version. Along the way, you can publish any number of trial sites to document the iterations and share the links with your clients as the site's design evolves.

You can build sites with wireframes using this basic workflow:

1. You construct the wireframes and publish a free trial.
2. You send the link to the live trial site to your client.
3. The client reviews the live site by clicking through the pages.
4. The client requests changes or asks for clarification about the design.
5. After any necessary revisions, the client signs off on the wireframes.
6. You update the wireframes site to add graphical elements and colors.
7. You update paragraph styles to format the existing text content.
8. The client reviews the updated version of the site and requests additional changes.
9. You make the requested changes.
10. The client approves the completed version.
11. You upgrade the site, set up the domain, and launch the final site.

Examining site structure with Plan view in Muse

To see how the pages of the site are placed in a hierarchy that defines the upper and sub-level tiers of the navigation links, open the .muse file of the wireframes in Muse to analyze it. When you open the project, you see Plan view, which shows all the site's pages (see Figure 3).

Figure 3. The pages of the wireframes are displayed in Plan view.

Notice that there are two tiers—a top level and a sublevel—representing the hierarchy of the site map. At any time during a site's development or maintenance, you can click and drag these pages to reposition them within the site structure.

To create new pages, click the plus (+) sign to the right of or below existing pages and then click the page's name field to type its name. Be as descriptive as you can with each page name. Right-click a page thumbnail and use the menu options that appear to duplicate, delete, or rename it. Alternatively, hover over a page and click the X icon that appears in the top right corner to delete it.

If you are following along, try adding, repositioning, and deleting pages to modify the site map. Choose Edit > Undo if you want to revert the wireframe site back to the way it was. The Plan view interface is intuitive to use, and Muse tracks all the page names and maintains the links that appear in menu widgets. Any changes you make are updated automatically to ensure the links do not break.

Using graphic styles to create placeholder elements that share attributes

Like Adobe Illustrator and Adobe Photoshop software, Muse helps you create graphic styles whenever you want to create a consistent look and feel and apply it to a set of elements. This is useful for wireframing (as well as designing pages) because you can change an existing graphic style to quickly update all the other page elements that have that style applied. You can also copy existing styles to create variations of them.

To use graphic styles to apply attributes to shapes and create placeholders for image files in a wireframe site:

1. Use the Rectangle tool to draw three rectangles on a page in Design view.
2. Select one rectangle and edit it to set its stroke color, fill color, and opacity setting and to add graphic effects, such as drop shadows.
3. While the rectangle is selected, click Create New Graphic Style at the bottom of the Graphic Styles panel. The style is based on the formatting of the selected rectangle. Double-click the new graphic style to name it descriptively.
4. Select one of the other rectangular shapes and apply the same graphic style to it by clicking the style's name. Repeat this step to apply the style to the third rectangle, so that all three rectangles use the same style.
5. Select one rectangle and edit it to change the style slightly. Notice that a plus (+) sign appears in the Graphic Styles panel next to the edited style's name.
6. Right-click the style's name in the Graphic Styles panel and choose Redefine Style. The other two rectangles now update to match the new style, and the plus (+) sign disappears.
7. Use graphic styles to quickly format shapes to create consistent wireframes and update a set of site assets fast when a client requests changes.

Building structured web pages and formatting text with paragraph styles

As you build out a wireframe site, you can use the Text tool to create text frames and add placeholder (or lorem ipsum) text that you'll replace later. Or if your client has an existing website, you can copy the text directly from a browser and paste it into the text frames. After creating text elements, you can use the Text panel to apply formatting to the text.

Using paragraph styles, you can define header text and paragraph tags to structure the text content of the page:

1. In Design view, use the Text tool to drag a text frame onto the page. Either type or paste text into the text frame to populate it.
2. Use the Text panel or the options in the Control panel at the top of the Design view workspace to set formatting options, such as choosing the font, font size, font color, and other properties.
3. Click Create New Paragraph Style at the bottom of the Paragraph Styles panel to create a new paragraph style. Double-click the name of the new style to rename it descriptively.
4. Right-click the style and choose Style Options. Use the Paragraph Tag menu to set the paragraph style to target a specific HTML tag, such as P, H1, H2, or H3 (see Figure 4).




Figure 4. Right-click a style name in the Paragraph Styles panel and then use the Style Options dialog box to define the style to a specific header or paragraph tag.

5. Create a few more text frames with text. Notice that if you click the paragraph style's name while a text frame is selected, you apply the formatting of the paragraph style to the selected text frame. If you later select one of the text frames with an applied paragraph style and change it, the plus (+) sign appears in the Paragraph Styles panel next to the style's name. This indicates that the style has changed, using the same behavior as graphic styles.
6. To automatically update all the text frames using the same style, right-click the style's name in the Paragraph Styles panel and choose Redefine Style.

As you can see from this quick example, you can create different text containers and set them to use specific styles to create a consistent design. Then when you update the wireframes to design the final version of the site, it's easy to update the styles based on the client's requests. Creating structured web pages with text containers is a best practice because it helps improve search engine optimization ranking.

Tip: When designing pages with solid background colors, set the background fill color of text frames to match. This helps Muse publish the text content more efficiently. If the background fill is unknown, the published text aliasing looks less smooth because Muse sets the background color of the text frame to transparent. However, if the page background displays gradients or images, leave the fill color of text frames set to None.

Updating the placeholder images with the final site graphics

After the client has approved the wireframes, you can quickly update the site to use the actual image files:

1. Select an image placeholder on the page. 
2. Open the Assets panel to locate the selected page element.
3. Right-click the page element. In the menu that appears, you have two choices that help you update the image file, depending on how you assembled the wireframe site. If you created a file in Adobe Photoshop or Adobe Fireworks software and placed it on the page, you can choose Edit Original (see Figure 5) to edit the original file in the product used to create it. When you save the master file and return to Muse, the placed instances of the file are automatically updated in the site. Alternatively, if you created placeholders for image files in Muse with the Rectangle tool, choose Relink All Instances and browse to select a file that exists on your computer to swap a placeholder file with the final graphic image.




Figure 5. Right-click the asset name and choose Edit Original to open the master of a placeholder file in the image-editing program you used to generate it.

4. Repeat these steps to replace all the placeholder images on the page with actual image files.

Tip: When you right-click an asset's name in the Assets panel, you can also choose Go To Asset. This option instructs Muse to open the page that contains the selected asset so you can update it quickly.

Accessing the optimized image files generated by Muse

In addition to publishing the Muse sites you create to the host server, you can also export the entire site to obtain the folder of sliced and exported image files:

1. Choose File > Export As HTML. The Export To HTML dialog box appears.
2. Select the location on your computer to export the site files and then click OK (see Figure 6).




Figure 6. Export the entire set of site assets to a folder on your desktop.

After completing this operation, Muse exports the files and saves them in the local folder you specified. Navigate to the folder and open the image folder to access the optimized image files. You can repurpose these image files to create newsletters, mobile apps, social networking pages, and other related projects.

Where to go from here

The ease of design and free hosted trial sites make Muse an excellent tool for designing wireframes. Sign in and click Publish to upload the pages and the optimized image files in minutes, and then share the link with your clients. Use the trial sites to obtain client sign-off as you proceed past each milestone with live site reviews.

Additionally, even if you are developing sites and web presentations outside of Muse, you may find that quickly mocking up designs and generating the optimized, sliced images by choosing File > Export As HTML is an extremely efficient way to create the site assets for any project.

Download the free beta of Muse and experiment with making your own wireframe sites.

‹ Back

---