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

デザインblogランキング

コメント 1 Comment »   はてなブックマーク   del.icio.us

この記事に関連する記事



One Response to “UIパターンいろいろ”

  1. ST Station 3 Says:

    Flickrのデザインソリューションサンプル…

    Flickrにサイトのデザインのサンプルが掲載されています。ヘッダーとかロゴとか、サインアップ、ビデオ、チャート等々のUIサンプルです。 今回は大学のカテゴリーで英国のノッティンガム大学を選んでみました。この真ん中のカラー別に区別されているものを、ブログの個別記事にしたりできると面白いかも。自分はソリューション提案型だからやっぱデザイン的には学術系が割と近いデザイン規範なのかな。 Flickr Design Solution 引用元:ブログ”DesigWalker”さん …

この記事に対するコメントを残す




この記事のトラックバックURL

広告掲載のお問い合わせはこちら

検索

Google

カテゴリーアーカイブ

最近の記事

タグ・クラウド

月別アーカイブ

Agile Media Network パートナーブログ