Working with wireframes_Learning Adobe Muse-QQ阅读女生青春网

书名：Learning Adobe Muse
作者名：Jennifer Farley
本章字数：2562字
更新时间：2025-02-24 15:59:19

Working with wireframes

Now that we've set up the site structure and can see how the site flows, our next step is to use Muse's tools to draw a simple wireframe.

Muse provides several features to allow us to create wireframes. These include:

A rectangle tool to create graphics and text placeholders
Column grid for alignment of layout elements in the Design view
The Assets panel, which includes features to update placeholder images

For the windsurfing site, we're going to use a one-column layout with a header at the top, a main content area in the middle, and a footer at the bottom of the page. The header will include the site name with a tagline, links to Facebook, Twitter, and YouTube, and a navigation bar containing links to the pages on the top-level of our hierarchy.

The main content area is the part of the page that will change throughout the site.

The footer at the bottom of the page will hold copyright information.

Let's start by adding one more page to our site. This will be our wireframe prototype page. Follow the given steps:

Add a new thumbnail to the right of the Contact page by clicking on the plus (+) icon. Name the page Prototype. This won't be part of our final site, but it allows us to set aside a page where we can try out different layouts and produces a working wireframe.
Double-click the Prototype page thumbnail in the Plan view. The Prototype page opens in the Design view. You'll see a blank white page with a number of vertical guidelines. The vertical guidelines represent the number of columns we set earlier in the Site Properties dialog box. They are used only to help us with alignment and do not appear on the final web page.
We're going to make those columns even more obvious now by right-clicking/Ctrl + clicking anywhere on the page. From the pop-up menu, choose Show Grid Overlay. The pink areas are the columns and the white bars in between are the gutters. Your page should now look like the following screenshot:

Note

If you find the pink overlay too distracting you can turn if off again by right-clicking/Ctrl + clicking and choosing Hide Grid Overlay.
Select the Rectangle tool and draw out a large rectangle from the left-hand side of the first white bar to the right-hand side of the last white bar. Make the height approximately 150 pixels. As you drag out the rectangle, a tool tip will tell you the width and height of the shape. The dimensions and X and Y location of the rectangle will also appear on the bar at the top of the page, as shown in the following screenshot:
Once you've drawn a rectangle, you can precisely position it or change its size by typing values in the Control Panel at the top of the page.
With the rectangle still selected, you can set a stroke color, a fill color, change the opacity, and add effects such as glows, bevels, and drop shadows. For this exercise, set the rectangle to have a white fill, a black stroke of 2 pixels, and no effects applied, as shown in the following screenshot:

This is the simple style, which is handy for use in wireframing. In Muse, we can save the settings for our rectangle as a graphic style, which we can then reuse for drawing our wireframes.

Saving the graphic style

If you've used InDesign before, you will be familiar with the concept of reusable styles for characters and paragraphs. We use graphic styles to quickly format objects and maintain a consistent look in our wireframes and designs. It's then really easy to update a set of site assets quickly if a client requests changes.

While the rectangle is selected, click on the Create new style from the attributes applied icon at the bottom of the Graphic Styles panel. If you can't see the Graphic Styles panel, choose Window | Graphic Styles to open it. The style is saved in the panel and is based on the formatting of the selected rectangle.
Double-click the new graphic style to name it with a good descriptive name, such as Wireframe Rectangle in the Style Options dialog box. Click on OK.

To apply this style to any other shapes you draw later, select the shape and then click on the style's name.
Now, to continue with the header section of our wireframe, select the Type tool and drag out a rectangle approximately 245 x 45 pixels on the left-hand side inside the first rectangle.
When you let go of the mouse, the cursor will be flashing inside the rectangle. Type the word Logo. To increase the size of the type, using the Type tool, click and drag over the word Logo so it is highlighted in blue (indicating it is currently selected). On the Control Panel at the top of the page or in the Text panel, choose a font size of 36 from the drop-down menu and set the text style to Bold by clicking on the heavy T icon beside the Size drop-down box, as shown in the following screenshot:
Again using the Type tool, draw out a second rectangle of the same size and place it underneath the Logo rectangle. Add the words Tagline goes here in this rectangle.
Pick the selection tool (black arrow) from the toolbar, then Shift + click the two text rectangles you've drawn to select them. In the Graphic Styles panel, click on the Round Rectangle style we created earlier. This makes all our rectangles look consistent.
We're going to add a link to the Logo rectangle. Make sure nothing is selected on the page by choosing Edit | Deselect All or if the selection tool is active, click outside the page area. Using the selection tool, click on the Logo rectangle, and then click on the drop-down menu beside the hyperlink on the Control Panel. Choose Home from the drop-down menu on the Control Panel. This applies a link to the home page from the Logo rectangle.
The next step is to add our navigation bar. This is where Muse does much of the heavy lifting for us. Click on the Widgets Library tab to activate that panel. If you can't see the panel on your screen, choose Window | Widgets Library. Under Menus, choose Horizontal. Click-and-drag from the panel out onto the page. A widget appears with the names of the top-level pages we created in our site structure.
To extend the menu across the page under our header, click on the white arrow in the blue circle, which appears to the right of the menu. On the Item Size drop-down menu, choose Uniform Width. Then hover the cursor over the bottom-right handle on the menu widget's bounding box so that it changes to a double arrow, then drag out to increase the width of the box.
Once again, with the menu rectangle selected, click on the Graphic Style panel and choose the Rounded Rectangle graphic style we created earlier.
Your wireframe should now look similar to the following screenshot:

Using the grid overlay makes it really easy to align the various elements in our layout.
Go ahead and create a full-width rectangle to represent the main content and a full-width text rectangle under that to represent the footer area. Add the words Copyright followed by your name to the footer section.
Select both rectangles by Shift + clicking with the selection tool. Apply the Rounded Rectangle graphic style. When you've done that, your Prototype page should look similar to the following screenshot:

Using placeholder images

While you're planning your site and creating your wireframe, you probably won't have the final images for use on your website, but you can place a placeholder image on your wireframe.

Let's say that on your home page you knew you were going to have a photograph of a famous windsurfing champion, but at this early stage you're not quite sure which one. You could make a blank image in Photoshop or Fireworks and save it with an appropriate name: WindsurfingChamp.jpg for example.

For this example and layout, the image file is 300 x 170 pixels and saved in the Windsurfing website folder. It's important to keep all your assets for your site together.

To add the temporary placeholder image to the page, choose File | Place and browse to find the image. When the image is selected, it is loaded into the "gun". This simply means that you move your cursor to the position on the page where you want to place the image and then click to drop it on the page. Drop it on the right side of the main content area of the page.

This is a good point to preview our wireframe. Click on the Preview link on the Control Panel. Our page opens up and we see our beautiful wireframe without the grid overlay.

The really nice thing about this wireframe, as opposed to one created on paper or in Photoshop or Illustrator, is that it is interactive. Roll your mouse over the navigation bar and notice the rollover states. The link on the Logo text is also active. When you click on the Logo link, it will take you to the Home page which is currently blank. This is something we could share with a client to get their feedback on how things are going so far. It's much easier to fix the functionality at this stage than when we've built the entire website.

When you have finished previewing your page, click on the Design view to go back to editing the page.

Updating placeholder images with final site graphics

Let's pretend that our client has approved the wireframe for this page and is so impressed that he has rushed over the correct photograph of our windsurfing champ. Because we used an image placeholder, it's now easy for us to quickly update the site to use the actual image files:

Open the original image in Photoshop or Fireworks and paste the photograph on top and, if necessary, resize so it fits into our original image. Save the file, replacing the original.
In Muse, select the image placeholder on the page.
Open the Assets panel to locate the selected page element; in this case it's the image called WindsurfingChamp.jpg.
Right-click on the page element. In the menu that appears, choose Relink Asset. Instantly your image will be updated on your web page.

Adding dummy text and paragraph styles

As you build out a wireframe site, you can use the Text tool to create text frames and add placeholders or dummy text, which can easily be replaced later. After creating text elements, you can use the Text panel or the Control Panel to apply formatting to the text. Text headers and paragraph styles help you create structured pages and change text formatting easily.

Note

What Is Lorem Ipsum?

Lorem Ipsum is simply dummy text used by the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using "Content here, content here", making it look like readable English. Today Lorem Ipsum is used by web designers for the same reason.

Some paragraphs of Lorem Ipsum text have been supplied in a .txt file.

Using paragraph styles, you can define header text and paragraph tags to structure the text content of the page and maintain consistency. Let's add some text to our Prototype page:

Open the Loremipsum.txt file in the text editor on your computer. Select all of the text in the file and copy it by choosing Edit | Copy.
In the Design view in Muse, select the Text tool and drag out a rectangular text frame onto the left side of the main content area of the page. Make sure the left side of the rectangle lines up with the left side of the Logo and Tagline textboxes in the header.
You can either type or paste text into a text frame to populate it, but in our case, we're going to paste in the Lorem Ipsum text by choosing Edit | Paste.
With the text added, click after the words Lorem ipsum dolor. You'll see the cursor flashing. Press Enter/Return on the keyboard to push the rest of the text onto a new line and create a new paragraph. We're going to use Lorem ipsum dolor as our main heading.
Select all the text except Lorem ipsum dolor by clicking and dragging, then use the Text panel or the options in the Control Panel at the top of the Design view workspace to set the formatting options. You can choose the typeface, size, color, and other type-related properties.
Set the Font to Arial, size 12, dark gray color, left-aligned with a line height of 100%. Line height is the space between the lines. Increasing line height can make blocks of text easier to read depending on the font face and size.
Click on Create a new style from the attributes applied at the bottom of the Paragraph Styles panel to create a new paragraph style. If you can't see the Paragraph Styles panel, choose Windows | Paragraph Styles to open it. Double-click on the name of the new style to give it a descriptive name. For this example let's call it Body Paragraph.
We use the Paragraph Tag menu to set the paragraph style to target a specific HTML tag, such as P, H1, H2, or H3. In this case we want Default (p):
Now select the words Lorem ipsum dolor, which we'll set up as a heading. On the Text Panel, choose properties for this font. Set the font to Georgia, size 24 and Bold, and Space After to 10. Space After is the icon on the bottom right of the panel and it sets the amount of space, which will be applied underneath the text you are formatting.
Click on Create a new style from the attributes applied at the bottom of the Paragraph Styles panel again to create a new paragraph style for our heading. Double-click on the name of the new style to give it a descriptive name. Call it Heading H1 and set the Paragraph Tag menu to target Heading (h1) as shown in the following screenshot:
By setting up paragraph styles in this way, you ensure consistency in styles across your pages. This is very similar to how graphic designers set up their print stylesheets.
You may wish to set up styles for the Tagline section of the header and for the Copyright section of the footer. Repeat steps 8 - 10, choosing your own font sizes, styles and colors for the Tagline, and the Footer text.
When you've finished setting up your styles, test the wireframe by clicking on the Preview tab.

The great thing about this process is that we've not only created an interactive wireframe, we've also got a working prototype; basic but working. We've also created a number of styles, which can be reused across our entire website.