Drafting Page Layouts with Wireframing Tools

One of the best ways to plan your layout is to use a wireframing application—a graphics application specially designed for prototyping websites. Most wireframing tools perform two primary tasks: designing page layouts and developing flow charts for organizing pages. Most enable you to create and save your designs online so you can collaborate with others.
To plan your layout, you draw objects, including menu bars, buttons, blocks for text or images, drop-down lists, charts, and so on, on a blank canvas. You can then easily resize and rearrange objects. Figure 18.3 shows a sample page layout I created online for free with Mockingbird (gomockingbird.com).
Figure 18.3: Use a wireframing tool to plan ...

Get The Complete Idiot's Guide® To HTML5 and CSS3 now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.