最近、UI(ユーザインタフェース)に関する記事が多く見られるので少しまとめてみました。脈絡ないですが。

UIのトレンド

Web Designer Wall で2010年のユーザインタフェースをどうすべきかまとめられていたのでご紹介します。

 

What to Expect in 2010: UX/UI Design Simplicity

 

2010年のトレンドとしては、Ajaxを利用してページ遷移の少ないWEBサイトの構築をすることが重要ですね。また、ウェブフォントの普及によって、タイポグラフィの重要性が高まることが考えられます。
 
多くのユーザの画面の解像度がおおきくなったことで、画面をより広く使ったページデザインが可能になりました。さらにPC以外からのアクセスにも対応するため、携帯用のページやiPhone用のページを作ることが必要とされるようです。

 

素材

インターフェースの設計に便利な素材も一緒にご紹介しておきます。
 
50 Free UI and Web Design Wireframing Kits, Resources and Source Files – Smashing Magazine
WEBページの設計に便利なワイヤーフレームや、携帯用サイトの素材が載っています。特にiPhone用の素材はボタンやチェックボックスがPSD形式で紹介されていて、有用性が高そうです。

 

Freebie: Massive Web UI & Button Set » MediaLoot Blog

こちらのサイトではボタンやログインボックスなど、多くの素材を一つにまとめてダウンロードできます。個人的にはパンくずリストの素材がうれしいですね。

 

jQueryとUI

AjaxといえばjQuery、だと個人的には思っているのですが、せっかくなのでjQueryを使ったUIに関する記事も紹介します。

 

45 New jQuery Techniques For Good User Experience – Smashing Magazine

スライドバーやモーダルボックスなど、オーソドックスなものからマウスジェスチャーで動かせるミュージックプレイヤーなんてものまであります。

 

25 Tutorials and Resources for Learning jQuery UI – Speckyboy Design Magazine
こちらはjQueryのチュートリアルが中心ですね。シンプルなタブメニューの作り方から、ドラッグを使ったUIまで様々です。

 

UIギャラリー

最後に、色んなインターフェースを見てみたいという方のためにユーザインタフェースのギャラリーサイトを御紹介します。

 
25 UI Inspiration and Design Pattern Resources – Speckyboy Design Magazine
色々あって見ていて飽きませんね。個人的にはQuinceというサイトがとっても個性的で面白かったです。

 

「使えるUIパターンをまとめたサイト40選!」という記事があったので本当に使えるものだけ選んでみた – IDEA*IDEA ~ 百式管理人のライフハックブログ

上のとかぶっているのもありますが、本当に使えるものだけを厳選して紹介しています。