シンプルなワイヤフレームを使ってデザインを始める方法を学ぶ
Webワイヤフレームは、 Webページの外観を示す簡単なビジュアルガイドです。 これは、グラフィックやテキストを使用せずに、ページの構造を示唆しています。 ウェブサイトのワイヤフレームには、どのページがどこにリンクされているかなど、サイト構造全体が表示されます。
Webワイヤフレームは、設計作業を開始するのに最適な方法です。 また、膨大な量の詳細な複雑なワイヤフレームを作成することは可能ですが、計画はナプキンとペンから始めることができます。 良いワイヤフレームを作るための鍵は、すべての視覚的要素を省くことです。 ボックスや線を使って写真とテキストを表現する。
Webページのワイヤフレームに含めるもの：
- 主要なグラフィック要素用のボックス
- ヘッドラインとサブヘッドの配置
- 単純なレイアウト構造
- 行動の呼びかけ
- テキストブロック
単純なWebワイヤフレームを構築する方法
あなたが便利な紙切れを使用してWebページのワイヤフレームを作成します。 ここで私はそれを行う方法です：
- 大きい矩形を描画します。これは、ページ全体または表示可能な部分のみを表すことができます。 私は通常、目に見える部分から始まり、折りたたみの下にある要素を含むように展開します。
- レイアウトをスケッチする - それは2列、3列ですか？
- ヘッダーグラフィックのボックスに追加 - 列の上に単一のヘッダーを表示する場合は列を描画するか、必要な場所に追加するだけです。
- あなたのH1の見出しをどこにしたいかを "見出し"と書いてください。
- H2と下位の見出しが必要なところに "Sub-Head"を書いてください。 比例関係にすると、h1がh1よりも小さく、h3がh2より小さくなるなどの場合に役立ちます。
- 他の画像用のボックスに追加
- ナビゲーションに追加します。 タブを計画している場合は、ボックスを描き、上に「ナビゲーション」と書いてください。 または、ナビゲーションを必要とする列に箇条書きリストを配置します。 コンテンツを書き込まないでください。 単に「ナビゲーション」と書いたり、テキストを表す行を使ったりしてください。
- ページに要素を追加する - テキストの内容を特定しますが、実際の内容のテキストは使用しないでください。 たとえば、右下に[行動を促す]ボタンを表示するには、そこにボックスを入れ、「行動を促す」というラベルを付けます。 「今すぐ購入する」と書いてはいけません。 その箱に。
あなたのシンプルなワイヤフレームを書いたら、それをスケッチするのに15分以上かかることはありません。それを他の人に見せてください。 不足しているものがあるか、その他のフィードバックがあるかどうか質問してください。 彼らが言うことに基づいて、あなたは別のワイヤーフレームを書くことができます。
なぜ紙製のワイヤーフレームが最初のドラフトに最適なのか
Visioなどのプログラムを使用してワイヤフレームを作成することも可能ですが、最初のブレインストーミングセッションでは紙に固執する必要があります。 紙は永久的ではないようで、多くの人が5分で一緒に投げたと思っていますので、あなたに良いフィードバックを与えることを躊躇しないでください。 しかし、プログラムを使用して完全な四角形と色を備えた魅力的なワイヤーフレームを作成すると、プログラム自体に巻き込まれ、今まで生きていないことを完成させる時間を費やすリスクがあります。
紙のワイヤーフレームは簡単です。 そしてあなたがそれを気に入らなければ、紙を壊してリサイクルして新しいシートをつかんでください。