次のウェブサイトやブログを作る時に参考にしたいUIデザインのリソースのまとめ

Bootstrap, WordPressで作られたかっこいいサイト、最近のウェブデザインのトレンドのフラット、サークル、レスポンシブ、ブラー、デザイナーが注目する今年のカラーなどのリソースをまとめました。

まずは、Bootsrapで作られたかっこいいウェブサイトをコレクションしたサイト。ぱっと見では、Bootstrapとは分からないのばかりです。

サイトのキャプチャ

Bootstrap Expo

WordPressで作られたコーポレートサイトのまとめ。ブログで使うWordPressとは一味も二味も異なります。

サイトのキャプチャ

Corporate WordPress Design Inspiration

今年のトレンド「フラット」なUIを備えたウェブサイトをコレクションしたサイト。カテゴリもブログ・Eコマース・プロダクト・プロモーションなどに分けられているので便利です。

サイトのキャプチャ

Flat UI Design

これもフラットなデザインのウェブサイトのコレクション。最近のものが多く、フラットも少しずつ進化しているのを感じます。

サイトのキャプチャ

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のように小さくなるの最近よく見かけます。

サイトのキャプチャ

Clever Fixed Header Effects

サークル・円状のエレメントを効果的に使ったまとめ。サイズやレイアウトなど、ユーザーの視線をコントロールします。

サイトのキャプチャ

Circular Graphics

テクスチャを使ったウェブデザインも長く人気のあるトレンドです。去年はざらっとしたもの、大きめのパターンが人気でしたが、テクスチャの使い方も進化しています。

サイトのキャプチャ

Using Textures in Web Design

ぼかしたブラーな写真を背景に使ったウェブサイトのまとめ。フォーカスを与えたいものはくっきりさせ、半透明のパネルなどに載せるとより美しく見えます。

サイトのキャプチャ

Showcase of Websites with Blurred Backgrounds

デザインに奥行きを使ったウェブサイトのまとめ。写真だけでなく、シャドウの使い方、イラストやエレメントを使った事例がたくさんあります。

サイトのキャプチャ

CREATING DEPTH IN WEB DESIGN

ホワイトスペース・空白を効果的に使ったウェブサイトのコレクション。見せたいものがこれ以上に際立つものはないでしょう。

サイトのキャプチャ

White Space In Web Design

レトロ・ヴィンテージもトレンドのキーワードの一つです。最近のレトロカラーのトレンドをはじめ、テクスチャ・フォントなどを楽しめます。

サイトのキャプチャ

Retro is Reborn

最後は、COLOURloversの2013年に使ってみたいカラーのアンケート結果。ピンクやグリーンが気になってる人が多いですね。

サイトのキャプチャ

Top Colors of the Year 2013!

top of page

©2017 coliss