If you’re a Mac user, you probably already own a copy of iLife. If you’re like me, you probably gave iWeb a spin when it first came out, played with it for a few minutes, and forgot about it. I’m not sure what prompted me to fire it up again, but I’ve discovered that, while I’d never actually use it to create a site, it’s an excellent tool for sketching out web design ideas and creating quick mockups.

What makes iWeb so great? Compared to Photoshop, iWeb is quick and easy. You can create the components you need for mockups, experiment with different fonts and colors, shuffle things around to explore layouts using dynamic alignment guides, and drag and drop images and videos from the Media Browser. Page size expands automatically to accommodate new content, and iWeb looks like a web browser, so it’s easier to visualize how your page will look.

First, Grab Some Grids

Creating layouts will be a lot easier if you have some grids to work with, so before you create your iWeb design sketchpad, grab some grid images. Here are some excellent options:

Airbag - Ruler.

Gridding the 960 ~ Authentic Boredom

Using a Background Image Grid to Lay Out Your Web Site

ESWAT web project framework at ESWAT (You’ll find a ruler in the skeleton > design folder).

Create an iWeb Design Sketchpad

Now that you’ve got your grids, here’s how to use iWeb as a sketchpad for your web design ideas:

Create a new site. First, create a new site.

Add a new page. We don’t want to use one of iWeb’s template designs, but we have no choice. Select New Page from the File menu, then select the Blank Page from the White theme (you’ll find it under 1.0 Themes).

Clean the slate. The blank page isn’t really blank, so lets clean it up. Hit Command-A to select all the elements on the page, then hit delete.

You’ll still see the page navigation at the top of the page. Open the Inspector (Option-Command-I, or select Show Inspector from the View menu). Select the Page Inspector tab (second from the left) and uncheck Include page in navigation menu and Display navigation menu.

Load the grids. Your page should now be completely blank, but a background grid will make arranging components in your layout much easier. You don’t want to just drag an image to your page because there’s no way to lock it. But you can add an image to the background.

In the Page Inspector, under Browser Background, select Image fill. Select Tile, then click on Choose…, then select your preferred grid.

Create a new page, but this time add the grid to the Page Background. You’ll notice that here you also have the option of selecting Tinted Image Fill. Click on the color well and adjust the opacity in the Colors palette.

Create your own templates. You can create your own iWeb templates, but it’s probably more trouble than it’s worth if you’re just using iWeb for mockups. Instead of creating a template, I suggest adding a couple of blank pages, with various grids and components (see below), to your site. You can then copy these pages whenever you want to create a new mockup. Just highlight a page and select Duplicate from the Edit menu (or hit Command-D).

Now What?

When you’re mockup is complete, you have a few options.

If you’re comfortable with your CSS and XHTML skills, you can just get busy coding.

You could try editing iWeb’s code, but that’s like walking knee deep in molasses (if you still want to try it, select Publish to a Folder… from the File menu).

Or, capture a screen shot of your mockup, bring it into Photoshop, slice it up, and create your page. See Quick CSS Mockups with Photoshop at A List Apart.

More Ideas

If you need more inspiration, see Tools for Capturing Design Inspiration.