ウェブデザインのクオリティをアップする20のエッセンスをnoupeから紹介します。
20 Vital Techniques & Best Practices For Effective Web Design
下記、各エッセンスの簡単な説明とワンポイントとサイトの紹介です。noupeのサイトでは他にも多くのサイトが紹介されています。
- 1. ビビッド カラー
- 2. グラデーションとライトのエフェクト
- 3. 透過
- 4. グランジ
- 5. 手書き風のデザイン
- 6. 押さえた色味
- 7. 水彩画のエフェクト
- 8. ネイチャー系のエレメント
- 9. 写実的でリアルな背景
- 10. 特大のタイポグラフィ
- 11. デコラティブなタイポグラフィ
- 12. 大胆な背景
- 13. レトロやヴィンテージのエレメント
- 14. アイキャッチなヘッダ
- 15. コラージュしたエレメント
- 16. テクスチャを使った背景
- 17. タブ型のナビゲーション
- 18. ブラックとホワイト
- 19. 水平方向のスクロール
- 20. コミックタッチのエレメント
1. Vivid Colors.
ビビッド カラー
明るいカラーは多くの視覚効果を与え、特にカジュアルなサイトに適しています。
- one point
- ビビッドなカラースキームを使用する際は、テキストの可読性のためにもコントラストを充分に確保します。
2. Gradients and Lighting Effects.
グラデーションとライトのエフェクト
グラデーションとライトのエフェクトは大胆から繊細までさまざまに取り入れることができます。あなたのデザインにほんの少しの光沢を加えるだけで見栄えが変わるでしょう。
- one point
- グラデーションをライトや他のエフェクトと一緒に使用する時は、ごちゃつかないように色数やエフェクトの強さなどを制限します。
3. Transparency.
透過
透過のボックスは凝った背景に対してうまく働きます。写真やスケッチをはじめ幾何学的や写実的なものにかかわらず、この透明なレイヤーは背景の画像をより効果的に見せるでしょう。
- one point
- 透過のボックスの周りに1pxのラインを使用すると、より繊細で美しくなります。
4. Grunge.
グランジ
汚した感じのグランジはデザインの全体に適用することもエレメントの一部に適用することもできます。
- one point
- グランジデザインの入門は、テクスチャやボーダーや小さいエレメントに適用することから始まります。
5. Hand-Drawn Designs.
手書き風のデザイン
手書きやスケッチ風のエレメントは、サイトにカジュアルさを与え、リラックスした楽しい雰囲気にします。
- one point
- まずはフォントやアイコンからはじめ、部分的にも多くの場所にも利用が可能です。
6. Muted Colors.
押さえた色味
押さられた色味は微妙で魅力的なサイトにする素晴らしい方法です。
- one point
- アクセントカラーは一つか二つにし、特定のエレメントを際立たせるように使用します。
7. Watercolor Effects.
水彩画のエフェクト
水彩画のエフェクトはPhotoshopのブラシやテクスチャのおかげで、より簡単に使用できるようになりました。最近の傾向としてはヘッダや背景に水彩画のエフェクトを使用しています。
- one point
- 水彩画のエフェクトは、使用する色とその透明度でアピール度をコントロールできます。
8. Nature-Inspired Elements.
ネイチャー系のエレメント
自然を想起させるエレメントは環境や産業のウェブサイトで人気が高いものでしたが、最近ではポートフォリオや個人ブログなどでも見かけるようになりました。
これらのエレメントは多重に使用することができ、背景の一部やヘッダやアイコンなどに使用されます。
- one point
- 自然を想起させるエレメントは、必ずしも写真のようにリアルである必要はありません。
9. Photo-Realistic Backgrounds.
写実的でリアルな背景
これは単に写真を使っただけでなく、多数の写真から構成されていたり、本物のように見える画像を使用するということです。デスクトップなどをモチーフにしたり、背景とエレメントに一体感を持たせることができます。
- one point
- 光源と影を一貫させると、その効果は素晴らしいものになります。
The Ernest Hemingway Collection
10. Oversized Typography.
特大のタイポグラフィ
特大のタイポグラフィはそのテキストエレメントに重要性を与えることができます。
- one point
- サイズはバラバラにするのではなく、一つあるいは二つにします。
11. Decorative Typography.
デコラティブなタイポグラフィ
装飾されたデコラティブなタイポグラフィは、サイトの雰囲気に大きな影響を与えます。
- one point
- 見出しなどの共通エレメントに使用すると、一貫性を与えることができます。
12. Bold Backgrounds.
大胆な背景
最近のデザイン傾向として、大きくて大胆な背景があります。シンプルなデザインでも複雑なデザインでもマッチし、カラースキームの数が少なくても魅力的なデザインが可能です。
- one point
- シンプルで単純なコンテンツでも大胆な背景を使用するだけで、大きなインパクトを与えます。
13. Retro and Vintage Elements.
レトロやヴィンテージのエレメント
レトロやアンティークなエレメントはデザインに郷愁のレイヤーを加えます。しかし、このレトロのデザインは一見して新しくみせ、フレッシュさを与えることができます。
- one point
- エレメントや画像だけでなく、フォントやカラースキームもレトロ調にするとより効果がでます。
14. Eye-Catching Headers.
アイキャッチなヘッダ
ヘッダはユーザーが必ず目にする重要な場所です。サイトのイメージを伝え、重要な情報を提供することができます。
- one point
- 人目を惹くヘッダのデザインとは、必ずしも派手で輝くようなものでなくてよいです。ヘッダ以外の箇所とのコントラストのバランスを考慮します。
15. Collage Elements.
コラージュしたエレメント
コラージュしたエレメントは最も用途が広いデザインオプションです。
- one point
- エッジの処理には注意をしてください。特に背景に凝ったものを使用する際は丁寧に作業します。
16. Textured Backgrounds.
テクスチャを使った背景
背景に単色を使用するだけなく、テクスチャを使用すると一見してサイトの雰囲気を変えることができます。
- one point
- 紙や布のテクスチャだけでなく、グランジや微妙な模様のテクスチャもビジュアルに面白さを加えます。
17. Tabbed Navigation.
タブ型のナビゲーション
タブ型のナビゲーションは多くのサイトで見かけられるようになりました。複数のノートを持ち、タブをクリックするとそのノートの表示させるというメタファがユーザーの期待を裏切りません。
- one point
- タブのアクティブ時には、それが分かるようにデザインをします。
18. Black and White.
ブラックとホワイト
ブラックとホワイトの配色設計は強烈なデザインステートメントを作ることができます。
- one point
- ブラックとホワイトはそのコントラストのレベルで雰囲気を変えることができます。
19. Horizontal Scrolling.
水平方向のスクロール
全てのサイト向きではありませんが、特定のサイトでは水平方向のスクロールが魅力的に使用されています。
- one point
- 水平方向のスクロールを採用しているサイトの多くは、それに複合したデザインやアイデアを取り入れています。
20. Cartoon Elements.
コミックタッチのエレメント
コミックタッチのエレメントはサイトに楽しみのレベルを加えます。
- one point
- キャラクターを単に置くだけでなく、アイコンやコンテンツにも使用します。
Post on:2009年9月2日
