webデザイン、DTPデザインどちらにも言える事ですが、ワイヤーフレームを作りましょう。
紙と鉛筆でよいので、設計図（枠組み／ワイヤーフレーム）を作成後、ツール（Photoshop、Illustrator、Fireworksなど）を使用し、デザインをしていきます。
ぶっつけ本番でツールを使用すると、レイアウトがおかしかったり、内容が入りきらないなど、余計に時間がかかってしまいます。
下記のサイトで、説明していますので、今回のCafe課題に着手する前に、読んでおきましょう。
以下、抜粋>>
誰のため？何のため？Webサイトを作り始める前に。
目標：Webサイトを作る目的を明確にする
目的
- このサイトはユーザーに何をもたらすのか
- 最終的なゴールは？
- なぜWebサイト（オンライン）でなければいけないか
- リニューアルの場合、その目的は何なのか？
- クライアントが希望している事は何なのか？
ターゲットユーザー
- 年齢層
- 性別
- 職業
- パソコンorモバイル
など、作成する理由を考えます。
ワイヤーフレームとは
ターゲット層や、どんなサイトにするか決まったら、Webページの設計図「ワイヤーフレーム」を作成します。
ワイヤーフレームはお部屋の間取図のようなもので、ページ内で「何を」「どこに」「どのように」表示させるかをまとめたものです。突然Photoshopを立ちあげてデザインを開始するのではなく、このワイヤーフレームの段階で骨組みを固めておくと、その後の作業がスムーズにすすみます。
自分のサイトなら、紙とペンで手書きするのもOK！ただしクライアントのサイトや、グループで作業をする場合は、メールでのやり取りをする事になると思うので、画像やPDFなどのデータ化をおすすめします。
ワイヤーフレームの実例
ワイヤーフレーム画像にカーソルを合わせると、実際のサイトを見ることができます。
