Create wireframes of websites in Adobe Muse

Last updated on

Learn how to create prototypes or wireframe your websites in Adobe Muse.

Note:

Adobe Muse is no longer adding new features and will discontinue support on March 26, 2020. For detailed information and assistance, see Adobe Muse end-of-service FAQ.

In addition to being very intuitive to use, Adobe 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.

fig01 — Wireframes include placeholders to specify the location of page elements.

Read on to know how to design wireframes, build a structured plan view, and create placeholder elements for your site. You can replace the placeholder elements with actual page elements after your content is finalized.

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 Adobe 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 explode how they are designed.

Adobe 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.
Adobe 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 Adobe Muse file.

fig02 — 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, Adobe 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 Adobe Muse.

Wireframing in Adobe 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:

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

Examining site structure with Plan view in Adobe 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 Adobe Muse to analyze it. When you open the project, you see Plan view, which shows all the site's pages.

fig03 — 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 Adobe 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, Adobe 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:

Use the Rectangle tool to draw three rectangles on a page in Design view.
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.
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.
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.
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.
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.
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:

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.
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.
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.
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.

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.
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.
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.

Note:

When designing pages with solid background colors, set the background fill color of text frames to match. This helps Adobe Muse publish the text content more efficiently. If the background fill is unknown, the published text aliasing looks less smooth because Adobe 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.

Select an image placeholder on the page.
Open the Assets panel to locate the selected page element.
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 to edit the original file in the product used to create it. When you save the master file and return to Adobe Muse, the placed instances of the file are automatically updated in the site.

Alternatively, if you created placeholders for image files in Adobe 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.

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.
Repeat these steps to replace all the placeholder images on the page with actual image files.

Note:

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

Accessing the optimized image files generated by Adobe Muse

In addition to publishing the Adobe 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:

Choose File > Export As HTML.

The Export To HTML dialog box appears.
Select the location on your computer to export the site files and then click OK.

After completing this operation, Adobe 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.