ワイヤーフレームで大枠配置を決めて、そして大枠にはめ込むコンテンツのラフデザインを行い、その後にウェブページのプロトタイプを作成しています。
下記の１．～２．が一般的にデザイナーさんが行う様です。３．もIllastratorなどで仕上げてしまうデザイナーさんも居ますが、リキッドデザインのプロトタイプはHTMLとCSSで記述しないと、そんなはずじゃなかったみたいな事になる場合もあります。DTP感覚でウェブページのデザインを起こしてくるデザイナーさんとの調整は大変だったりします。
１．ワイヤーフレームで大枠配置をラフデザインを書く
ワイヤーフレームの表現方法は千差万別です。これは開発者のメモなので落書き人は手書きしています。提出物として求められる場合のみ、適当なソフトで清書することもあります。
なお、コンテンツ要素の詳細なラフデザインは、この段階では書きません。
- その大枠配置のワイヤーフレームを書く。
- その枠要素部品*1も書き込む。
- レスポンシブデザインの場合は、それも記述します。
- ダイナミックな動きもメモ書きでしておきます。
２．コンテンツ要素のラフデザインを書く
コンテンツの詳細デザインはワイヤーフレームには書き込まずに、別出し*2で、コンテンツ毎に個々に書いています。
- コンテンツの詳細のラフデザイン書く。
- コンテンツ要素部品*3も指定する。
- この段階ではコンテンツ内容は気にしない。
３．ウェブページのプロトタイプ作成
ワイヤーフレームとコンテンツ詳細のラフデザインが決まったら、HTMLとCSS及びJavaScriptでウェブページのプロトタイプを作成します。
- ワイヤーフレームの大枠配置をHTMLとCSSを記述する。
- コンテンツ詳細のラフデザインをHTMLとCSSに加筆する。
- CSSだけでは表現できないダイナミックな要素をJavaScriptで記述する。
プロトタイプで出来たら、依頼者に大まかなウェブページのイメージ確認を行ってもらっています。
あとは、コンテンツの内容を書き込んで完成させるだけです。