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.