UIパターンいろいろ
先月、公開されたばかりのNETTUTS。
NETTUTSでは、HTML、CSS、JavaScript、CMSなどのサンプルを、丁寧な説明と、コードを公開してくれる、とってもありがたいウェブデザイナーの為のチュートリアル・サイト。
毎回、ハイクオリティなPhotoshopのチュートリアルをアップされているPSDTUTSの姉妹サイトなので、サイト自体もとっても見やすくて、これからどんどん追加されていくチュートリアルに期待大のサイトです！
NETTUTS
現在、公開されているチュートリアルは、
How To Create A ‘Mootools Homepage’ Inspired Navigation Effect Using jQuery
jQueryを使った、とってもきれいな、ナビゲーションエフェクト
Create a Slick Tabbed Content Area using CSS & jQuery
ブログなどで使えそうな、jQueryとCSSで作るTabコンテント
などが紹介されています。
アイデア次第でブログやウェブサイトの見せ方もいろいろありそうですね。
本日は、そんなアイデアの元になりそうな、UIパターンをいろいろ、まとめてみました。
The Highly Extensible CSS Interface
ひとつのサンプルページを４つのパートに分けて、説明してくれているサイトです。サンプルファイルもダウンロードできるのも良いですね。
UI-patterns.com
カテゴリに分けて、たくさんのUIパターンが紹介されているライブラリです。
Yahoo! Design Pattern Library
Yahoo!のデザイン・パターン・ライブラリ。それぞれ動画がついていて、動きがわかりやすいですね。
Interaction Design Pattern Library - Welie.com
たくさんのデザイン・パターンが紹介されています。サンプルも豊富で見てるだけでも楽しいですよ。
Konigi
見せ方にこだわったインターフェースがたくさん紹介されているインスピレーション・ライブラリです。見てて飽きないですね。
blink design library
シアトルのコンサルティング会社が紹介するデザイン・ライブラリのブログです。
Collection: [Design Solutions] | flickr
デザインのサンプルが大量にアップされているflickrのページです。こちらやこちらにも大量にアップされていました。ご参考にどうぞ。
![Collection: [Design Solutions] | flickr](http://www.designwalker.com/img/ui_pattern/ui_pattern11.jpg)
この記事に関連する記事
![Web Designing (ウェブデザイニング) 2008年 07月号 [雑誌]](http://images-jp.amazon.com/images/P/B001APYMOY.09.TZZZZZZZ.jpg)
June 11th, 2008 at 5:01 am
Flickrのデザインソリューションサンプル…
Flickrにサイトのデザインのサンプルが掲載されています。ヘッダーとかロゴとか、サインアップ、ビデオ、チャート等々のUIサンプルです。 今回は大学のカテゴリーで英国のノッティンガム大学を選んでみました。この真ん中のカラー別に区別されているものを、ブログの個別記事にしたりできると面白いかも。自分はソリューション提案型だからやっぱデザイン的には学術系が割と近いデザイン規範なのかな。 Flickr Design Solution 引用元：ブログ”DesigWalker”さん …