category
サイト構築 -デザイン

既存のデザインのクオリティをアップする8つのポイント

  • この記事をdel.cio.usに登録する
  • この記事をはてなブックマークに登録する
  • この記事をGoogleブックマークに登録する
  • この記事をYahoo!ブックマークに登録する
  • この記事をdiggに登録する
  • この記事をlivedoor clipに登録する
  • この記事を@nifty クリップに登録する

少し手を加えるだけで、既存のデザインのクオリティをアップする8つのポイントをBuild Internet!から紹介します。

Making Your Design Pop

Five Minute Upgrade – Making Your Design Pop

1. 色を鮮やかに

ビフォーアフターのキャプチャ

デザインが単調な感じのときには、使用している色を鮮やかにしてみます。
変更した色をベースに、カラースキームを設計します。
Color Scheme Designer 3

2. モノクロは慎重に

ビフォーアフターのキャプチャ

ブラックやホワイトなどモノクロをテーマにした素晴らしいデザインのウェブサイトは多数あります。モノクロは単色で構成されたものですが、一色加えることでデザインが容易になることがあります。
ポイントはその一色のみにこだわらずに、他の色も充分に検討することです。

3. グリッド レイアウトの活用

ビフォーアフターのキャプチャ

要素をグリッドに合わせて配置すると、スキャナビリティが増し、クオリティがアップします。
不揃いにする際は、なんとなくではなく、しかるべき理由をもって配置します。

4. デザインは丁寧に

ビフォーアフターのキャプチャ

ライトやシャドウ、1pxのライン、グラデーションなどを丁寧にデザインに加えます。

5. 境界線から飛び出させる

ビフォーアフターのキャプチャ

枠内に収めるだけでなく、要素を飛び出させて配置します。

6. ホワイトスペースを忘れずに

ビフォーアフターのキャプチャ

適切なホワイトスペースは、デザインにとって非常に重要です。

7. 質感を与える

ビフォーアフターのキャプチャ

背景にノイズやパターンなどのテクスチャを加えてデザインに質感を与えます。

8. ストローク

ビフォーアフターのキャプチャ

7. 質感を与える」のエフェクトのほかに、ストロークも背景と前景を区分することができます。
グラデーションを使用しないで、2D感を演出したい時は効果的です。

Post on:2009年7月1日

  • この記事をdel.cio.usに登録する
  • この記事をはてなブックマークに登録する
  • この記事をGoogleブックマークに登録する
  • この記事をYahoo!ブックマークに登録する
  • この記事をdiggに登録する
  • この記事をlivedoor clipに登録する
  • この記事を@nifty クリップに登録する

トラックバック

トラックバック(URL)

コメント

comment:

※承認制のため、即時には反映されません。

pome
on 2009年7月2日

はじめまして。
内容について1点質問です。

ストロークの項はリンク先を見てもよくわからなかったのですが、縁取りのことなのでしょうか?

コリス
on 2009年7月2日

> pome さん

縁取りというか、境界線のことだと思います。
おそらくサンプルのは「レイヤースタイル」の「境界線」で不透明度20%くらいではないでしょうか。

ページの先頭へ




© coliss

RSS