UIパターンいろいろ

先月、公開されたばかりのNETTUTS。 NETTUTSでは、HTML、CSS、JavaScript、CMSなどのサンプルを、丁寧な説明と、コードを公開してくれる、とってもありがたいウェブデザイナーの為のチュートリアル・サイト。 毎回、ハイクオリティなPhotoshopのチュートリアルをアップされているPSDTUTSの姉妹サイトなので、サイト自体もとっても見やすくて、これからどんどん追加されていくチュートリアルに期待大のサイトです!

NETTUTS

NETTUTS

現在、公開されているチュートリアルは、

How To Create A ‘Mootools Homepage’ Inspired Navigation Effect Using jQuery

jQueryを使った、とってもきれいな、ナビゲーションエフェクト

How To Create A ‘Mootools Homepage’ Inspired Navigation Effect Using jQuery

Create a Slick Tabbed Content Area using CSS & jQuery

ブログなどで使えそうな、jQueryとCSSで作るTabコンテント

Create a Slick Tabbed Content Area using CSS & jQuery

などが紹介されています。 アイデア次第でブログやウェブサイトの見せ方もいろいろありそうですね。 本日は、そんなアイデアの元になりそうな、UIパターンをいろいろ、まとめてみました。

The Highly Extensible CSS Interface

ひとつのサンプルページを4つのパートに分けて、説明してくれているサイトです。サンプルファイルもダウンロードできるのも良いですね。

The Highly Extensible CSS Interface

UI-patterns.com

カテゴリに分けて、たくさんのUIパターンが紹介されているライブラリです。

UI-patterns.com

Yahoo! Design Pattern Library

Yahoo!のデザイン・パターン・ライブラリ。それぞれ動画がついていて、動きがわかりやすいですね。

Yahoo! Design Pattern Library

Interaction Design Pattern Library – Welie.com

たくさんのデザイン・パターンが紹介されています。サンプルも豊富で見てるだけでも楽しいですよ。

Interaction Design Pattern Library - Welie.com

Konigi

見せ方にこだわったインターフェースがたくさん紹介されているインスピレーション・ライブラリです。見てて飽きないですね。

Konigi

blink design library

シアトルのコンサルティング会社が紹介するデザイン・ライブラリのブログです。

blink design library

Collection: [Design Solutions] | flickr

デザインのサンプルが大量にアップされているflickrのページです。こちらこちらにも大量にアップされていました。ご参考にどうぞ。

Collection: [Design Solutions] | flickr

関連記事

1件のコメント

  1. ピンバック: ST Station 3

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です