ECサイトデザイン実習⑤

Photoshop

デザインラフ制作

ECサイトデザイン実習④で制作したワイヤーフレームに画像などを入れて、デザインラフを制作していきました。

前回も少し画像を入れたりしていたのですが、改めてワイヤーフレーム制作における注意点などを聞くとちょっと修正した方がいいなと気が付くことが多かったです。(特に余白の取り方など…)

【ワイヤーフレーム】

【デザインラフ】

参考にしたい文字サイズやサイズなども教えていただきました。

文字サイズ
h1 32px
h2 24px
h3 18px
h4 16px

ファーストビュー
横 1000~1200px 縦500~650px

余白目安 100px(デバイスにより前後あり)

【ワイヤーフレーム】Webサイトの設計図
情報やコンテンツの配置を線と枠だけで表現するシンプルな図
※住宅設計における間取り図のようなもの

【デザインラフ(デザインカンプ)】WEBサイトの完成イメージ図
画像や文字の色、フォントなど実際のデザインに近い形で作成された図
※住宅設計における内装・外観デザインのようなもの

Photoshopの使い方にもだいぶ慣れてきた気がします。
写真を使った画像作成が個人的には大好きなので、Photoshopは画像加工などでできることが多く使っていくほどにはまっている気がします。
今後、コーディングしてLPを完成させるのがとても楽しみです。

タイトルとURLをコピーしました