webデザインとインターフェイスの人気記事まとめ2011年2月

  • 2011/03/08
  • このエントリーをはてなブックマークに追加

スポンサーリンク

webデザインインスピレーション特集
webデザインに磨きをかけたい人のためのベストデザインのショーケースです。
「刺激はいつも外部から」というわけで、色々楽しんでみましょう。

これらは私のTwitter (yamada_nt) on Twitterで毎日つぶやいて紹介した中から、webデザインに関して人気のものだけを抽出しています。全部紹介出来ませんので他にも気になる人がいたらフォローしてみてください。

IT/Web業界に強い転職サイトGreen

webデザインまとめのエントリ


リンクがまとめ記事です。それに対していくつか記事の内容がわかるものをピックアップしてご紹介しています。

独創的なwebデザイン集


30 impressive examples of web design layout
これはdeviantARTで公開された、デザインの試作をまとめたもの。様々な新しい試みが生まれています。
いくつか試作をご紹介。
keyboard shop all page ver1.0
背景を生かす透明感が素敵ですね。


for Futura
実にシンプルミニマル。わかり易い。


ペーパーデザイン
見安さ的にはあれですが、すごく素敵。特にペーパーデザインが好きなのでそう思える。



スペースを生かして画像を配置
左側のF字ラインを合えてスペースにして、印象的な写真を掲載。これによって全体的にこの写真の雰囲気になる。



F字ラインへの写真
こちらも同様にF字ラインに大きめの画像を配置して合えて雰囲気を写真ベースに作られている。



様々なユーザーインターフェイス集


40 Detailed Examples of User Interface Design
多くのUIをまとめたエントリー。
各パーツごとにピックアップされていてとてもわかり易い。
UI設計1
メニュー作成時、サイドバー作成時に。


UI設計2
ブログで使うようなボタン作成の参考に。



UI設計3
webアプリ開発のときの参考に。



フォームをデザインするときに参考になるエントリ


Showcase of Creative Contact Forms
webサイトに欠かせないお問い合わせフォームを作成するときの参考になるエントリ。
フォームデザイン
紹介した中で一番のお気に入り。砂浜に跡をつけてそこをフォームにするというアイデアが素敵。



フォームデザイン
古い手紙をベースにポストメールを送れるように設計。



フォームデザイン
こちらもくしゃくしゃっとした紙。



フォームデザイン
こちらはノートをベースに作成されている。かっちりとしたデザイン。



フォームデザイン
そのまんま大学ノートの一枚をメールにいれて送信するようなイメージ。素敵ですね。



レトロ風なwebデザイン


20+ Creative Examples of Vintage and Retro in Web Design
昔風味たっぷりのデザイン集。

レトロ風デザイン1
色合いでレトロ感をだしつつ、グリッドをなるべく壊したデザイン。



レトロ風webデザイン2
こちらもグリッドを壊しつつ古紙の質感をだして表現されています。



レトロ風webデザイン3
古紙と色でレトロ風を表現してますね。



大きな画像を背景としたwebデザイン


40+ Examples of Big Backgrounds in Web Design
大きな画像のもつインパクト性を利用して、サイト自体の印象を強めているwebデザイン集。
大き目の画像を背景にしたwebデザイン1
iPhoneアプリの紹介サイトですが、内容がシンプルなだけに、背景一つで印象が変わりますよね。



大き目の画像を背景にしたwebデザイン2
サイトに行けばわかりますが、パノラマです。



大き目の画像を背景にしたwebデザイン3
全ページ、背景が変わります。



Creative Use Of Large Background In Web Design
大き目の背景画像を利用したwebデザイン4
スペースを最大限に活用。ちと重いのがたまにきず。



大き目の背景画像を利用したwebデザイン5
背景がどんどん変わっていき、お店の雰囲気を見ているだけで感じることが出来る。



大き目の背景画像を利用したwebデザイン6
こちらも背景がどんどん変わっていく。なぜこの画像をピックアップしたかは言うまでもない。



webアプリケーションサイトのインターフェイスデザイン集


50 Beautiful Web Application Interface Designs
50種類にも及ぶwebアプリケーションのサイトデザイン、インターフェイスを比較していける記事。良記事です。(リンクミスかわからないけど既に見れないのもありますけど)
webアプリケーションサイトのインターフェイス1
超有名どころ。オンライン画像編集サービス。



webアプリケーションサイトのインターフェイス2
こちらも有名どころ。ノートPCで私が良く使うオンライン写真加工サービス。色々無料で出来るんだけど、リサイズとカッティングでちょいちょい使う。



webアプリケーションサイトのインターフェイス3
大学ノート的なものを各種デバイスで共有するためのサービス。使ったことないのでわかりませんが、この記事みて興味でた。



Facebookページデザイン


The Art of the Facebook Page Design
かなりボリュームのあるまとめ記事です。Facebookページを作る前に一度は参考にしてみるといいですね。
Facebookページデザイン1


Facebookページデザイン2


Facebookページデザイン3


以上です。
なにか良いインスピレーションはありましたか?なかったらごめんなさい。

それでは、また。



スポンサーリンク

トップへ戻る

Twitter版のネタ帳では毎週月曜~金曜までWeb屋さんに役立つ色んな情報や単なるネタまでをつぶやいています。

関連するエントリー

コメント

この記事にコメントする人はクリック

コメントポリシーをお読みください
管理者にだけ表示を許可する

FC2Ad

広告


IT・Web業界の求人なら転職サイトgreen(グリーン) ホームページテンプレート、WordPressテーマ、Facebookページテンプレートならクラウドテンプレート ネットマーケティングとは│ネットマーケティング検定 SEOコンサルティング&SEO対策 無料レスポンシブWebデザインテンプレート 広告主募集

あわせて読みたい
フィードメーター - ホームページを作る人のネタ帳

人気の記事一覧

あなたのブログの再訪問者を増やす50の方法

私の経験から感じた事を書き記します。全てが全てその時々で、正しいとは限りませんが、一つの指針としてお使いください。因みに全部リスト化すると230くらいありましたが、それはきっとセミナーとかでやるかなぁと。

http://e0166.blog89.fc2.com/blog-entry-824.html

あなたの生活を確実に拘束し時間を浪費させる動画50

今回は生産性を向上させる事ばかり考えて記事を書いてきたので、逆に年末にかけて忙しい皆さんの時間を出来るだけ拘束し、忙しさを倍増させるものが無いかを考えました。その結果、動画で行こうと言う事になったのが1ヶ月以上前。動画閲覧本数はおそらく600本以上。その中から、おもしろそうなものを50個ベストチョイスいたしました。

http://e0166.blog89.fc2.com/blog-entry-820.html

webデザインのセンスを磨く○○系のwebデザインまとめ

webデザインを学ぶならwebデザインから。と言うわけで、今回は海外のエントリを中心に、○○系のまとめをまとめます。

http://e0166.blog89.fc2.com/blog-entry-817.html

jQueryプラグインのベストトレンド総まとめ2010

もはやこの業界ではかなり浸透しつつあるjQuery。今回はそんなjQueryにスポットを当て、本年度紹介された中でも、ホットなトレンドプラグインをご紹介します。

http://e0166.blog89.fc2.com/blog-entry-816.html

ツイッターの日常における35の行動パターン

私が良く見かける35の行動パターンに名前をつけてみようと思う。年末の誰も見てない時に公開しようと思っていた、ただのネタだったのですが、結構時間がかかりこの時期に・・・。

http://e0166.blog89.fc2.com/blog-entry-823.html

ウェブデザイナーのためのウェブアプリ15

OSがWindowsであろうと、ubuntuであろうと、共通のサービスを受けることができるのがウェブアプリケーションです。ウェブデザイナーの中には、自宅ですでにubuntuを利用している人も多い。また、Mac、Windowsと、各自それぞれの使いやすい物を利用していると思います。

http://e0166.blog89.fc2.com/blog-entry-784.html

愛用するGoogleChromeエクステンション12個

この2年でノートPC2台購入。自他のPCはクラッシュしてリカバリー。会社のPCは新しいのがあたり、再セットアップ。そんなこんなで、会社はまぁともかくとして、とりあえず全PCが比較的3ヶ月に一度リカバリーしてもいいように、自分用にメモとして残しておきます。

http://e0166.blog89.fc2.com/blog-entry-784.html

文章や会話のプレゼンテーションを向上させる方法

文章力がないためにプレゼンに失敗した、会話がうまくできずにプレゼンに失敗した。こういう経験はなかなか無い。なぜなら多くの場合、失敗したことに気がつかないからです。

http://e0166.blog89.fc2.com/blog-entry-802.html

サイトの裏側の意識を変え売り上げをアップする方法

ネットショップ運営者が、あることをちょっとだけ始めてみただけでわずか5ヶ月で売り上げが3倍になりました。はたして、webサイト運営がどのように変わったのでしょうか。。

http://e0166.blog89.fc2.com/blog-entry-749.html

webサイトのリピーターを増やすさりげない5つのコツ

多くのビジネスサイトのアクセス数を支えている大手検索サイト、Yahoo、Googleのアルゴリズムが変わる事で、突然商売がひっくり返る事態を回避する方法。

http://e0166.blog89.fc2.com/blog-entry-746.html