ワイヤーフレーム(ウェブサイトの設計図)

シェアする

ワイヤーフレームとは、骨組みのことですね。
ウェブサイトを構築する際にしっかり作り込んでおくとデザインの作業もスムーズに進めることができる。
と、最近反省した点です。

デザインの段階で、margin、paddingもしっかり作り込むことでコーディングの際もかなり迅速に作業することができる。
それに、抜け要素なども最小限に押さえることもできるうえ、クライアントにプレゼンする際にも利用できるので、かなり効率的。

で、自分の確認のためにも勉強させていただいているサイトを載せます。
是非ともご参考に。

ワイヤーフレーム・その1

I ♥ wireframes
ここは、更新率が半端ない。


ワイヤーフレーム・その2

・The Fine Art of Wireframes
ここは、かなりのお気に入り。
手書きでまるで漫画のように書かれているので、なかなか面白い。
デッサン力って必要だなぁー、って思わせる。


ワイヤーフレーム・その3

・Web Browser Elements
ブラウザごとの、ボタンやチェックボックスなどのフォーム要素画像をダウンロードすることができる。
これは、ブラウザごとに見方が変わってくるので、かなり重宝。


ワイヤーフレーム・その4

・The Pencil Project
これはFirefoxのアドオン。
今後、フレームワーク作りに試しに使用しようかなと考えてます。


ワイヤーフレーム・その5

Lovely Charts
フォームの作成などがweb上で制作できるそう。
これは面白そう。


ワイヤーフレーム・その6

・Redesigning the ExpressionEngine Site
今しがた、頑張って読んできましたー。
英語なので、多分50%も分かってない可能性大ですが、かなり勉強になる。
ここでは、ワイヤーフレームから実際のサイトができあがるまでを解説されております。
いや、もっかい読んでこよう。

そんなこんなで、もぅ9月。
月日が経つのは早いなぁ、、
また一つレベルアップできた気がする。

========//

2011/02/19
・各サイトのスクリーンショットを追加しました。
・2009年の記事ですが、今でもかなり有用なワイヤーフレームだと思います。
(と言いますか・・・私、文末に「また一つレベルアップできた気がする。」とか、こんなこと言ってたんですね・・・お恥ずかしい。)

私も950pxのグリッドデザイン用のワイヤーフレームを公開しております。
宜しければお使いくださいね。

950pxのグリッドデザイン用のワイヤーフレーム:950pxのGrid System Design

この面白かったら、私のFacebookページ(ファンページ)の「いいね!」を押していただけけると嬉しいです。

この記事が気に入ったら
いいね ! しよう

Twitter で

フォローする