Planning Your Site in Adobe Muse

Exclusive offer: get 50% off this eBook here
Learning Adobe Muse

Learning Adobe Muse — Save 50%

Create beautiful websites without writing any code with this book and ebook.

$26.99    $13.50
by Jennifer Farley | September 2012 | Web Development

A site is a collection of web pages containing assets such as images or Flash.

In this article by Jennifer Farley, author of Learning Adobe Muse, we'll look at how to plan a new site and use Muse's excellent wireframing tools to put together a mock up of our website.

Fail To Plan, Plan To Fail

Yes, that may be an old cliché, but like many clichés, this one is certainly true when it comes to our websites. If you spend some time planning your website upfront, you'll prevent a lot of headaches later in the process.

In this article, we'll also take a look at some of the basics of web page layout that are useful to know while planning our sites.

 

Page layouts

The layout of your website can be a deciding factor on whether your visitors will stay on your website or leave with an impatient click. You could think of the layout as a map. If it's easy for the visitors to "read" the map, they are more likely to stick around and find the content you're providing. Let's take a look at some of the typical layouts we see on the Web today.

Bread and butter layouts

When we're designing a layout for a web page, there are a number of sections that we need to include. These sections can be broken into the following:

  • Consistent content: This does not change throughout the site. Examples of this type of content are logos, navigation bars, and footers.
  • Changing content: This is the part of the page that changes throughout the site, usually the main content. In some situations, the content of the sidebar may also change.

A web designer's job is to create a layout that keeps the visitor focused on the content while keeping it nice and easy to navigate around the site. Some examples of conventional or bread and butter site layouts are shown in the following figure:

You have a very short amount of time to capture a visitor's attention. So by choosing one of these basic layouts, you're using a tried and tested setup, which many web users will feel at home with. Don't worry that these layouts look "boxy". You can use images, colors, and typefaces, which complement the purpose of your site to completely disguise the fact that every web page is essentially made up of boxes.

The bread and butter layouts featured previously are well-tested guides; however, there is absolutely no obligation for you to use one of these.

What appears on a typical web page?

So we've seen some basic layouts. Now we'll look at some of the elements that appear on (nearly) every web page.

Logo

The logo is the part of a company's overall branding and identity, and appears at the top of each page on the site along with the company name and tagline, just as it would on printed forms of marketing, such as business cards, brochures, and letterheads. This identity block increases brand recognition and ensures users know that the pages they're viewing are part of a single site. Frequently, the logo is also a link back to the home page of the site.

Navigation bar

The navigation for your site should be easy to use and easy to find. Just like the logo, it should appear near the top of the page. You may decide to use a horizontal menu across the top of the page, a vertical menu in a sidebar, or a combination of the two. Either way, your main navigation should be visible "above the fold", that is, any area of a web page that can be viewed without visitors having to scroll.

Content

Content is the King. This is what your visitors have come for. If the visitors can't find what they're looking for, they will move on very quickly. The main content is an important focal point in your design; don't waste time fling it with unnecessary "stuff".

Footer

Sitting at the bottom of the page, the footer usually holds copyright information, contact links information, and legalities of the site. Some designers have become very imaginative with footers and use this area to hold additional links, tweets, and "about me" information.

The footer clearly separates the main content from the end of the page and indicates to users that they're at the bottom of the page.

In the following screenshot, you can see a page from the Apple website, which is highly regarded for its aesthetic design. Each section is clearly delineated.

If you keep in mind the idea of your site's layout as a map, then you can determine where you want to lead your visitors on the site.

Wireframes

Wireframing is an important part of the design process for both simple and complex projects. If you're creating a website for a client, a wireframe is a great tool for communicating your ideas visually at an early stage rather than just having a verbal description.

If you're creating a website for yourself, the wireframe helps to clarify what is required on each page of your website. It can be considered an overlap between the planning process and the design process.

Creating a simple wireframe ensures that your page designs take into account all of the elements you'll add to your pages and where they will be positioned. Wireframes are cost-effective because the time spent in the initial stages potentially saves you from losing much more time revising the design at a later stage.

Wireframes can be created in several ways, including pen and paper and computer-based tools.

When it comes to computer-based applications for wireframing, there are many options available. Some designers use Photoshop, Illustrator, or even InDesign to put together their wireframes. Specific wireframing software packages that are popular with web designers include Balsamiq and OmniGraffe.

Wireframes and Mockups and Prototypes. Oh my! You may hear web designers refer to wireframes, mockups, and prototypes. Although these terms are sometimes used interchangeably, it's important to understand that they are three different things. A wireframe is a basic illustration showing the structure and components of a web page. A mockup is an image file focusing on the design elements in the site. It contains the graphics and other page elements that make up the web page but may contain dummy text and images. A prototype is an almost-complete or semi-functional web page, constructed with HTML and CSS. Prototypes give the client (or yourself) the ability to click around and check out how the final site will work.

What to include in a wireframe?

Think about which design elements will appear on each page of your website. As mentioned already, most websites will have elements such as logos, navigation, search bars, and footers in consistent positions throughout the site.

Next, think about any extra elements that may be specific to individual pages. These include graphics and dynamic widgets. Once you know what's required, you can start to create your wireframe based on these elements.

Some designers like to create their wireframes with the "big picture" in mind. Once the basic layout is in place, they get feedback from the client and revise the wireframe if necessary.

Others like to create a very detailed wireframe for each page on the site, including every single design element on the list before showing it to the client.

Wireframes let us try out several different ideas before settling on our favorite design, which can then be brought forward to the mockup stage.

Obviously our focus in this book is on using Muse, but I would urge you not to rule out using paper sketches. It's a great way to quickly get ideas out of your head and into a tangible, visible layout.

Web.without.words (www.webwithoutwords.com) is an interesting website dedicated to showing popular and well-known sites as wireframes. The text and images on each site are blocked out and it's a nice way to look at web pages and see how they can be broken down into simple boxes without getting caught up in the content.

Wireframes with Muse

So what are the advantages of using Muse to create our wireframes? Well, Muse not only lets you create wireframes, but it also allows you to quickly create prototypes using those wireframes. This means you can show clients the functionality of the website with the basic layout. The prototype produced by Muse can be reviewed on any web browser giving the client a good idea of how the site will appear. This kind of early testing can help alleviate time-consuming problems further down the line of the design process.

We're going to prepare a site and wireframe now for a fictitious website about windsurfing. First, we'll create a new site, and then add pages in the Plan view.

Site structure with Plan view.

Let's start by creating a new site.

  1. Open Muse. Choose File | New Site. In the New Site dialog box, set Page Width to 960 and Min Height to 800 pixels. Set Margins to 0 all around and Padding Top and Bottom to 10 pixels each. Set the number of Columns to 16. The columns appear as guidelines on the page and we use them to help us align the design elements on our layout. Note that Gutter is set to 20 by default, leave this as it is. The Column Width is calculated by Muse and you should see a value of 41 appear automatically in that field. Remember that all of these values can be changed later if necessary.

  2. Click on OK. The Plan view opens and you'll see a thumbnail representing the Home page at the top left, and a thumbnail representing the A-Master page on the bottom pane.
  3. Save your site right away by selecting File | Save Site. Give it a descriptive name you'll recognize, such as Windsurf.muse.
  4. To create new pages, click on the plus (+) sign to the right of or below the existing pages, and then click on the page's name field to type its name.
  5. Click on the plus sign to the right of the Home page and name the new page Gear. Click on the plus sign below the Gear page to add a subpage and name that page Sails. Click on the plus sign to the right of the Sails page and name the new page Boards.
  6. Sails and Boards are now on the same level and are subpages of the Gear page.
  7. Click on the plus sign to the right of the Gear page and name the new page Learning.
  8. Click on the plus sign to the right of Learning and add one more page called Contact. Your Plan view should now look like the following screenshot:

Working with thumbnails in the Plan view

It's easy to add, delete, reposition, or duplicate pages when working in the Plan view. Right-click (Win) or Ctrl + click (Mac) on a thumbnail to see a contextual menu. This menu provides every option for managing your pages.

In the previous screenshot, you can see the menu that appears when you right-click/Ctrl + click.

 

  • New Child Page: This option creates a new blank page at a lower level as the current thumbnail.
  • New Sibling Page: This option creates a new blank page at the same level as the current thumbnail.
  • Duplicate Page: This option makes an exact copy of the current page. This is most useful when you have added content and applied some formatting.
  • Delete Page: This option gets rid of the page.
  • Rename Page: This option allows us to change the name of the page.
  • Go to Page: This option opens up the current page in the Design view.
  • Page Properties: This option opens the Page Properties dialog box allowing you to set properties for the current page only.
  • Reset Page Properties: This option reverts to the original settings for the page.
  • Export Page: This option allows you to export your page as HTML and CSS.
  • Menu Options: This option allows you to choose how the page will be included (or not included) in the automatically-created menu.
  • Masters: This option lets you choose which Master design will be applied to the page.

The context menu is not the only way to get to these options, for example the most common tasks in the Plan view can be completed as follows:

  • You can rename a page by double-clicking on the page name
  • You can delete a page by hovering your mouse over the thumbnail and then clicking on the x icon that appears in the top-right corner

To reposition a page in your site map hierarchy, you can drag-and-drop a thumbnail on the same level or on a sublevel.

Spend a couple of minutes adding, deleting, and repositioning pages so that you get a feel of creating the site structure. You'll find the Plan view to be intuitive to use and extremely fast for creating site maps. You can choose Edit | Undo to undo any of the steps you've taken.

Muse tracks all the page names, and later in the design process it allows us to create menus quickly using menu widgets. All links created in the Plan view are maintained and are updated automatically if we make a change to the site structure. You can come back to the Plan view at any point during your web design process.

Learning Adobe Muse Create beautiful websites without writing any code with this book and ebook.
Published: September 2012
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

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:

  1. 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.
  2. 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.
  3. 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:

    If you find the pink overlay too distracting you can turn if off again by right-clicking/Ctrl + clicking and choosing Hide Grid Overlay.

  4. 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:
  5. 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.
  6. 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.

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

  3. 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.
  4. 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:
  5. 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.
  6. 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.
  7. 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.
  8. 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.
  9. 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.
  10. Once again, with the menu rectangle selected, click on the Graphic Style panel and choose the Rounded Rectangle graphic style we created earlier.
  11. 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.

  12. 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.
  13. 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:
Learning Adobe Muse Create beautiful websites without writing any code with this book and ebook.
Published: September 2012
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

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:

  1. 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.
  2. In Muse, select the image placeholder on the page.
  3. Open the Assets panel to locate the selected page element; in this case it's the image called WindsurfingChamp.jpg.
  4. 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.

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:

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. 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.
  7. 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):
  8. 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.
  9. 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:
  10. 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.
  11. 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.
  12. 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.

Where are the files generated by Muse?

When you are finished with creating your wireframes and you're ready to share them with a client, you can publish them directly using Adobe Business Catalyst by clicking on the Publish link. To do this, you will need an Adobe ID, which you should have created when you first installed Muse. This is an easy way to get your web pages online.

The alternative to Business Catalyst is to publish your Muse site to your own host server, which you may have already set up. To get the files for your website, you need to export the entire site. Muse will generate the HTML, CSS, and folder of images required for the site to function.

  1. Choose File | Export As HTML. The Export to HTML dialog box appears.
  2. Select the location on your computer to which you want to export the site files, and then click on OK as shown in the following screenshot:

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.

Exercise

Now that we've created a new site and a wireframe to go with it, it's a good idea for you to practice mocking up a site in Muse.

Create a wireframe and site map for a fictitious website about your favorite movie. The site should include a home page, a cast page, a gallery page, a links page, and a contact page. A navigation bar should allow you to go to any part of the site with just one click.

Create a simple wireframe of your design on paper and then recreate the wireframe in Muse. Preview your wireframe.

Summary

In this article we discussed some of the basic layouts used in web design. We looked at the idea of wireframing using pen and paper and also how to set up a site structure and wireframe in Muse.


Further resources on this subject:


About the Author :


Jennifer Farley

Jennifer Farley has over 12 years experience working in the graphic and web design industry. In 2002, she became a full time educator, teaching Adobe Photoshop, Illustrator, Dreamweaver, and Design Theory. She runs her own design business, called Laughing Lion Design but now divides her time equally between teaching design and freelance illustration work.

Books From Packt


WordPress for Education
WordPress for Education

Drupal for Education and E-Learning
Drupal for Education and E-Learning

Moodle 2.0 for Business Beginner's Guide
Moodle 2.0 for Business Beginner's Guide

Mahara ePortfolios: Beginner’s Guide
Mahara ePortfolios: Beginner’s Guide

Moodle 1.9 Theme Design: Beginner's Guide
Moodle 1.9 Theme Design: Beginner's Guide

Moodle 1.9 Testing and Assessment
Moodle 1.9 Testing and Assessment

User Training for Busy Programmers
User Training for Busy Programmers

Mastering Adobe Captivate 6
Mastering Adobe Captivate 6


No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
6
z
Y
H
p
s
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software