講座（4日目 マークアップしてワイヤーフレームを作る）のほうでは、ワイヤーフレーム（枠組み化、レイアウト）を作成する際、コンテンツ（内容）ありきの話だったので、コーディングを先にやってからデザインを考えていくという流れでした。
しかし、ホームページ全体のイメージをし、先にデザインとしてのワイヤーフレームを決めていくのもひとつの方法です。
デザイン（レイアウト）とコンテンツ（内容）を平行しながら決めていってもよいと思います。
ホームページを構成するパーツとしては、
- ヘッダー
- フッター
- コンテンツ
の主に3つから成ります。
詳細を見ていくと、
- ヘッダー
-
- ロゴ
- Webサイトの説明文
- グローバルナビゲーション（お問い合わせやサイトマップページへのリンクなど）
- お問合せ先（電話番号やメールアドレス、住所）
- メインメニュー
- フッター
-
- コピーライト（Webサイトの著作権表示）
- お問合せ先
- フッターメニュー
- コンテンツ
-
- サブメニュー
- バナー
- 内容（本文）
などが考えられます。ホームページの内容によって不必要あるいは追加しなければならないものもあります。
これらを元に紙、あるいはツールを使用してワイヤーフレーム（枠組み化、レイアウト）を行っていきます。
ワイヤーフレームを作り込まない
実際にワイヤーフレームを作る際、作り込まなくても構いません。むしろ、実際にコーディング（ソースコードを記述）していく際にいろいろ変更していくと思いますので。ワイヤーフレームを作るのに時間がかかってしまうと息切れしてしまうのであくまでラフな図案にしましょう。
グリッドデザインを心がける
ワイヤーフレームを簡単に作れるWebサービスなどもあるのですが、初心者の方は結構敷居が高いのでまずは紙ベースで行いましょう。
適当にパーツを並べていく（レイアウトする）と、なんだか見た目がちぐはぐになってしまいます。またそういうホームページはコーディングするのも難しくなってしまいます。
グリッドを用いてパーツを配置する方法があります。紙は方眼紙を用意しましょう。
ひとつのボックスの横幅を決めます。この幅がパーツの最小横幅になります。ボックスとボックスの間には一定の余白を設けます。ボックスと余白を組み合わせて独自のサイズのグリッドを作ります。
実際のボックスや余白のサイズと方眼紙のマスの大きさが合っていなくても構いません。
例えば、ひとブロックを5mm方眼紙のマス15個分、余白を1個分、実際のサイズは1マス10pxと決めます。
そうすると自ずとテンプレートの横幅が決まってきます。例えば、コンテンツが2カラムのホームページを制作するとすると、メインコンテンツ部の横幅をブロック3つ分（それに余白が2個含まれるので）と決めるとトータル470pxになります。 サブコンテンツをブロック1つ分とすると、メインコンテンツとサブコンテンツの間に1つ分の余白があることになりますので、テンプレートの大きさとしては630pxになりますね。
逆に先にテンプレートの横幅を決めてから、ボックスや余白の大きさを決めても構いません。
縦方向に関しては、コンテンツ（内容）が可変のため制御が難しいのであまり考えなくてもよいです。
以上のようにして、各パーツを配置していきます。
参考になるかわかりませんが、960pxのグリッドデザインで構成されたWebページのまとめサイトです。
ワイヤーフレームをツールを使って作る
手描きが面倒！パソコンでやりたい！という方は、無料でワイヤーフレームが作れるサービスがお勧めです。今のところ、英語圏のサービスしかないようで、日本語が使えないのですが、参考程度には使えそうですね。
Firefoxを利用しているなら、アドオンのPencilというアドオンがお勧めです。Firefox上でワイヤーフレームを作ることができます。
ワイヤーフレームのまとめです。人が作ったワイヤーフレームが見られるので参考になります。