細部にこだわることで、情報をうまく1ページにまとめたWebデザイン – Codrops

codrops

Codrops

私が大好きなWeb制作技術にまつわる情報をお届けしている海外人気ブログ。よくありがちなレイアウトで情報が多いタイプ。そんな普通だったら視線が散乱してしまうところを、細部にこだわる演出で見事に情報整理がされている、素晴らしいWebデザインブログです。

Webデザイン3つの良いとこ : 3 Good Point!

  1. 色使い、背景、−細部にこだわるWebデザインで、目を飽きさせない
  2. 情報整理力
  3. 綺麗なレスポンシブウェブデザイン

私はWebデザインのココを見た!

なんといっても、その細部にこだわった装飾で、1ページに沢山の情報をまとめることに成功していると思います。

このように情報を1ページに詰め込んだ場合、目が疲れてしまったり、見る気がなくなってしまうことが多いもの。それを克服する一つの方法が、単調なんだけど単調じゃない細部にこだわるWebデザインを行なっているからだと思いました。

 

どの細部へのWebデザインが、情報整理を可能としているんだろう。

そのデザインは参考になるところが沢山ありますが、ざっと以下のような点ですね。

  • ヘッダー部分の配色・パターンの変化
  • コンテンツごとの背景色の変更
  • マウスホバーのテキパキとした色変更
  • レスポンシブデザインを考慮したコンテンツ配置
  • などなど・・・

なによりも私が良いな−!と思った点は、ヘッダーの変化と、コンテンツごとの配色変化です。

 

ヘッダーへのこだわり

Codrops-header

まずヘッダーについて。最丈夫とヘッダー部、ヘッダー下でデザインが異なります。けど、統一感がある。

それは斜め斜線がヘッダー上部と下部にだけうまいこと適用されていて、目が流れを捉えているからだと思いました。とても勉強になる。

 

情報整理へのこだわり

Codrops-content

またコンテンツごとにベース背景と、白背景を使い分け、更に目立たせたいコンテンツにはCodorps独自のバックグラウンドが適用されています。

このおかげで沢山の情報が1ページに入っても、「同じもの」と簡単に認識しないんだけど、疲れることなく情報を追えるようになっているのではないでしょうか。

 

他にも沢山のこだわりと、情報整理にかかせないデザインがつまっています。こんなサイトが作りたい!!

今日参考にさせて頂いたサイト

Codrops

    この素敵なWebデザイン、「いいな」と思いました?
    その気持ちをポチッと残しておきましょう!

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

関連するWebデザイン

コメントをどうぞ。

1日1Webデザイン

あなたにとっての素晴らしいWebデザインが見つかりますように。

Webデザインレビュータグクラウド

ホバーしてね