デザインをする前に。

webデザイン、DTPデザインどちらにも言える事ですが、ワイヤーフレームを作りましょう。

紙と鉛筆でよいので、設計図(枠組み/ワイヤーフレーム)を作成後、ツール(Photoshop、Illustrator、Fireworksなど)を使用し、デザインをしていきます。
ぶっつけ本番でツールを使用すると、レイアウトがおかしかったり、内容が入りきらないなど、余計に時間がかかってしまいます。

下記のサイトで、説明していますので、今回のCafe課題に着手する前に、読んでおきましょう。


以下、抜粋>>

誰のため?何のため?Webサイトを作り始める前に。

目標:Webサイトを作る目的を明確にする

目的

ターゲットユーザー

など、作成する理由を考えます。

ワイヤーフレームとは

ターゲット層や、どんなサイトにするか決まったら、Webページの設計図「ワイヤーフレーム」を作成します。

ワイヤーフレームはお部屋の間取図のようなもので、ページ内で「何を」「どこに」「どのように」表示させるかをまとめたものです。突然Photoshopを立ちあげてデザインを開始するのではなく、このワイヤーフレームの段階で骨組みを固めておくと、その後の作業がスムーズにすすみます。

自分のサイトなら、紙とペンで手書きするのもOK!ただしクライアントのサイトや、グループで作業をする場合は、メールでのやり取りをする事になると思うので、画像やPDFなどのデータ化をおすすめします。

ワイヤーフレームの実例

ワイヤーフレーム画像にカーソルを合わせると、実際のサイトを見ることができます。


Wireframe Showcase