Webサイト図を作成する方法

会社のWebサイトが基本的なサイト図を超えて発展したら、個々のページのどこに何があるのかを判断し始めることができます。 Webサイトの回路図（ワイヤフレーム）では、デザイン要素、配色、タイプスタイル、またはインタラクティブ要素自体を組み込むことなく、さまざまなページ機能を提供します。回路図を平面図として、完成したページを家具付き部屋として考えてください。壁を塗り直したり、家具を並べ替えたり交換したりしてページをまとめる方法を変更するのではなく、サイトページの機能を設定するボックスやプレースホルダを使用してオンラインスペースを計画できます。

1。

ページに表示される定期的な商品をリストします。これらには、ロゴ、サイトナビゲーション、写真領域、テキスト領域、ヘッダー、フッター、サイドバーなどの要素が含まれます。

2。

ページ要素の相対的なサイズ、およびそれらの垂直方向と水平方向の位置を示す図を描きます。この図を紙にスケッチしたり、画像編集プログラムやイラストプログラムで作成したり、オンラインのワイヤーフレームアプリケーションを使用してまとめたりすることができます。

3。

あなたのウェブサイトが必要とするページの種類ごとにページ図を作成してください。あなたのホームページには、商品やサービスのページ、連絡先のページ、ブログとは異なるページ要素のサブセットがあります。

4。

プレースホルダテキストを使用して、冗長性が現れる場所を示します。あなたはセリフとサンセリフの書体の間で選択したいかもしれませんが、回路図はタイプスタイルの実験やデモンストレーションのための場所ではありません。

5。

ワイヤフレームに、要素の機能やリンク先に関するメモを付けて注釈を付けます。 RSS、Twitter、Facebook、パートナーサイト、製造元サイトなど、外部のサイトやサービスにリンクするアイコンを追加します。

6。

レビュー、ディスカッション、承認のためにワイヤフレームを回覧し、必要に応じて修正します。実際のページに必要なすべての繰り返し要素が回路図に含まれ、要素の相対的な位置とサイズがWebサイトのニーズに合うようになったら、ワイヤフレームの段階を超えることができます。

ヒント

Webサイトの回路図は通常、設計プロセスでモックアップやプロトタイプの前に作成されます。モックアップは、実際に実装を検討しているフォームに配色、タイプスタイル、その他のデザインの詳細を表示します。プロトタイプはモックアップを超えて、実際のページの外観を示すきちんとフォーマットされた見本に進みます。
あなたがあなたのサイトのモバイルとブラウザの両方のバージョンを作成するつもりなら、あなたは複数のデザインフローのために回路図を構築する必要があるかもしれません。
回路図を手で描く場合は、色付きのペンまたは鉛筆を使用して、デザインまたは開発プロセスでより重要になるページレイアウトの特定の領域を強調します。たとえば、特定の個人によってコード化されるモジュールを表すために特定の色を選択することができます。これらの色は、デザインの選択ではなく計画要素を示しています。