Webデザイン初心者向けのあれこれ

Webデザイン初心者向けのあれこれを書いていきます。

本格的な作業に入る前に! サイトの全体や構成が一目で分かる手書きワイヤーフレーム例

 

 

ワイヤーフレーム

企画やサイトの方向が決まったら、どこにどういう内容を入れるかで結構悩みますよね。

PhotoshopやFireworksでやっている方もいらっしゃると思いますが、

個人的にはソフトを使用する前に、手書きのワイヤーフレームを作るのをオススメします。

 

メリット

・修正が早い、作業時間が早い

・細かい要素なども描けるため、よりサイトの全体像が分かる

・チームメンバーやクライアントにより直感的に伝えることができる

 

デメリット

・具体的な数値やサイズがないため、またソフトで作業しなければならない」

・絵が下手だと逆効果(涙目)

 

単純なボックスや配置の仕方よりも

スケッチで細かいところまで表現することによってより理解が深まると思います。

 

 

手書きワイヤーフレームの例

 

iPad app sketch

結構細かいところまで描いています。

マガジンやカタログのサイトの時は撮影の時点から使えるかも。

 

Sketching

細かさ+フローなどが分かるので

導線を作る時にいいかもしれませんね。

 

Design Strategy

  

sketch: vimeo nickel tour page ideas

 

New Local

  

element

レイアウトを考える時に良さそうですね。

  

ms5_concept

 

5-year campaign site - sketch

こういうレイアウトも結構ありましたよね。

これは逆にソフトで作る時に時間がかかりそう。

 

Sample screen: statistics

いいアイデアですね。

使い回しがきけそう。

 

ing_landing_page_concept

絵のクォリティはそこまで重要ではないと思います。

要素が分かるくらいでいいかな。

 

ツール

UI Stencils

ワイヤーフレーム制作時に使えそうなツールですね!

どこで売っているのでしょう。。。

 

iPad Mockups

最近はノート形の素材もいっぱい出てますよね。

 

Cacoo

有名なツールの一つですが、

最近手書き風も出てきたので使えるかと。

 

 

参考にしたサイトはこちらとなります。

I ♥ wireframes

http://wireframes.tumblr.com/

http://www.flickr.com/groups/ilovewireframes/ 

 

ぜひ、参考にしてみてください。