Quick Web Design Mockups Using iWeb
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:
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.
I previously used Photoshop and plain old pen and paper to create layouts for all kinds of homepages, but this tip is much appreciated. Thank you for your pointer, I will definitely try it out next time.
soho, I’ve used Photoshop before, too, but I find iWeb easier for brainstorming. I find Photoshop’s power distracting. In iWeb, I don’t worry about getting things just right, so I can play more with ideas and fine tune later.
Great idea. I may give this a try on my next design.
Nice Tip!
Thanks for helpful information you catch up us with your instructional explenation.
What people do is more important that what they say…
Best regards
Looking for customization of your theme for my needs, most of it is covered in your new design but would like few more things, will you be able to spare some time!
ani, which theme are you using and what customization would you like? I don’t have time to customize the theme for you, but if it’s simple enough, I might tell you how to do it :)
Post a comment on the page for the theme you’re using.
Drag and drop creation of so-called web pages is not a very good thing in my opinion. I do not want my blog hosted by some company that has a java control panel for making boxes with type and graphics here and there. Can you recommend a site with info about doing this the right way… with actual HTML and Dreamweaver and EXTENSIVE Photoshop graphics?! A perfect example of the problem with the direction all this is going is “isp.netscape.com” absolute mechanical garbage with no creativity at all. Lines, boxes and dividers, they aren’t even using Tables for cripe sakes! Mediocrity for the masses. How did this happen?
yeah, great quick web desing. thank you for sharing
Quick Web Design Mockups Using iWeb is perfect sharing, goods admin thank you for sharing…
soho, I’ve used Photoshop before, too, but I find iWeb easier for brainstorming. I find Photoshop’s power distracting. In iWeb, I don’t worry about getting things just right, so I can play more with ideas and fine tune later.
thank you m8..nice tut
Great idea.
Thank you for sharing.
Thanks
thats great. thanks for tip Robert. i ll add this to my blog.
thanks a lot!
best regards,
Mehmet
I designed http://frenchmaidtv.com in iWeb and I liked it so much I kept it. I do wish there was an easy way to take the design I created and port it over to Wordpress.
I like the RSS feeds from Wordpress much better than the podcasting and blogging tools that currently come with iWeb.
Maybe they will come out with a Pro Version of iWeb and announce it at the Apple WWDC next week?
Does anyone know what font is used in the first screencap of iWeb, the part that says “25 steps to launching your blog and making $100+ a month in 30 days”
I am working furiously to get a good design down for my new site and I love that font, but can’t find it anywhere. Any help appreciated! Love this site!
Interesting idea. I typically avoid such tools, but I tried out your suggestion and I think iWeb might be exactly what I was looking for.
I previously used Photoshop and plain old pen and paper to create layouts for all kinds of homepages, but this tip is much appreciated. Thank you for your pointer, I will definitely try it out next time.
tekstil
Thank you for saving my night.
Ibanda.
Does anyone know what font is used in the first screen cap of iWeb, the part that says “25 steps to launching your blog and making $100+ a month in 30 days”
I am working furiously to get a good design down for my new site and I love that font, but can’t find it anywhere. Any help appreciated! Love this site!