次のウェブサイトやブログを作る時に参考にしたいUIデザインのリソースのまとめ
Post on:2013年3月15日
sponsors
Bootstrap, WordPressで作られたかっこいいサイト、最近のウェブデザインのトレンドのフラット、サークル、レスポンシブ、ブラー、デザイナーが注目する今年のカラーなどのリソースをまとめました。
まずは、Bootsrapで作られたかっこいいウェブサイトをコレクションしたサイト。ぱっと見では、Bootstrapとは分からないのばかりです。
WordPressで作られたコーポレートサイトのまとめ。ブログで使うWordPressとは一味も二味も異なります。
Corporate WordPress Design Inspiration
今年のトレンド「フラット」なUIを備えたウェブサイトをコレクションしたサイト。カテゴリもブログ・Eコマース・プロダクト・プロモーションなどに分けられているので便利です。
これもフラットなデザインのウェブサイトのコレクション。最近のものが多く、フラットも少しずつ進化しているのを感じます。
Pixel Perfection: 20 Examples Of Flat Web Design
フラットデザインのレイアウト方法に注目したまとめ。カラースキームやエレメント、写真やイラストの使い方などかっこいいものばかり。
Flat Website Layouts for Design Inspiration
デスクトップ・タブレット・スマートフォンなど、レスポンシブ対応のウェブサイトのまとめ。それぞれのディスプレイサイズに対応した秀逸なレイアウトのコレクション。
10 Great Examples of Adaptive Websites
レスポンシブ用のナビゲーションパターンのまとめ。
Multi-Toggle, Ol' Right to Left, Skip the Sub-Nav, Priority+, Off-Canvas Flyout, Carousel+のそれぞれの利点と欠点、実例やリソースを紹介。
Complex Navigation Patterns for Responsive Design
これもトレンドの一つ、ヘッダを固定表示にしたウェブサイトのまとめ。単に固定するだけでなく、半透明やアニメーションを組み合わせるなど、さまざまなエフェクトの事例集です。By Association Onlyのように小さくなるの最近よく見かけます。
サークル・円状のエレメントを効果的に使ったまとめ。サイズやレイアウトなど、ユーザーの視線をコントロールします。
テクスチャを使ったウェブデザインも長く人気のあるトレンドです。去年はざらっとしたもの、大きめのパターンが人気でしたが、テクスチャの使い方も進化しています。
ぼかしたブラーな写真を背景に使ったウェブサイトのまとめ。フォーカスを与えたいものはくっきりさせ、半透明のパネルなどに載せるとより美しく見えます。
Showcase of Websites with Blurred Backgrounds
デザインに奥行きを使ったウェブサイトのまとめ。写真だけでなく、シャドウの使い方、イラストやエレメントを使った事例がたくさんあります。
ホワイトスペース・空白を効果的に使ったウェブサイトのコレクション。見せたいものがこれ以上に際立つものはないでしょう。
レトロ・ヴィンテージもトレンドのキーワードの一つです。最近のレトロカラーのトレンドをはじめ、テクスチャ・フォントなどを楽しめます。
最後は、COLOURloversの2013年に使ってみたいカラーのアンケート結果。ピンクやグリーンが気になってる人が多いですね。
sponsors
