グラデーションを使用しないでウェブデザインをする方法

なんとなくグラデーションを使用したり、困ったらグラデーションを使用したり、トレンドだからグラデーションを使用したりしていませんか？
グラデーションを使用しないでデザインする方法をBuild Internet!から紹介します。また、グラデーションをより効果的に必然として使用するためのエントリーでもあります。

Designing Without Gradients

下記は各ポイントを意訳したものです。

除くことを学ぶ

多くのウェブデザインのブログで周期的にページデザインのPhotoshopのチュートリアルを紹介しています。これらは素晴らしいウェブページを作成するためにグラデーションベースのデザインが一般的であるというおかしな印象を与えてしまいました。こういった記事を書く我々は間違って解釈されてしまう記事を書いたという罪があります。

ウェブデザインはデザイントレンドがどれだけ含まれているかのチェックリストではありません。何を使用するにしても、何をやめて何をアレンジするか学ぶ必要があります。
WeFunctionの記事「How to Spot Quality within Web Design: Examples & Tips（邦訳：ウェブデザインのクオリティをアップする7つのポイント）」にデザインのクオリティに関する素晴らしい記事があります。あなたはそれらを取り入れたことがないかもしれません。しかし、別の方法でそれを実践することができます。

有意義なデザインエレメント

グラデーションを使用しないデザインでは何にフォーカスすればよいでしょうか？　フォーカスをあてる有意義なデザインエレメントを三つとりあげます。

タイポグラフィ

ウェブにはいくつかの安全に利用が可能なWebセーフフォントがあります。しかし、ここでいうタイポグラフィはこれらタイプフェイス以上のものです。

デザインでフォントの多様性を見せるなら、画像として見出しなどを作成するか、置き換えフォントを使用することができます。

ビジュアル ヒエラルキー

もしあるエレメントが重要であるなら、あなたはどのようにそれを知らせますか？　カラー、サイズ、ウェイト、配置などでヒエラルキーを明示することができます。

もしそのテキストがページの上部にあり、大きいものであれば、おそらく重要なエレメントでしょう。
グラデーションのような飾りは他の具体的なデザインエレメントと一緒でなければ、ヒエラルキーを表現するのは難しいです。

ラインでトレース

これは一冊の本「The Principles of Beautiful Web Design」で学んだ興味深い概念です。
コンセプトはシンプルです。デザインをラインだけでトレースした状態で、重要なエレメントが認識できるなら良いというものです。これはデザインのシンプルなテストとしても役立ちます。また、ビジュアルエリアを指定するために微妙な変化に頼るレイアウトを確認するためにも役立ちます。

下記はそのテストを「art in my coffee」のデザインで行ったものです。

art in my coffee

グラデーションだけでレイアウトのセクションを区別するのは良い方法ではありません。それはグラデーションがくっきりとした境界線を持っていないためです。グラデーションは既存のデザインエレメントを補強することはできます。しかし、それだけで重要さを明示するべきではありません。

Subtleはパワフル

グラデーションをインクルードするのに意味をなす場合はどうでしょうか？　その際に非常に効果的な方法があります。「Subtle（繊細）」を取り入れることです。

atebits

ナビゲーションは#ffffffのホワイトからはじまり、#e7e7e7の薄いグレーのトーンで終わります。このカラーの移行はシンプルながら繊細で、ユーザーの注意を余分に引くものではありません。

はじめの一歩

あなたの挑戦は、グラデーションを使用しないで小さいサンプルのデザインからはじまります（もちろん、任意です）。
下記のサイトは、これら小さいエレメントのデザインがどのようにページ全体に影響を与えているかを物語る素晴らしい例です。

Dribbble

各エレメントにみられる繊細なヒンティング処理から、私たちはインスピレーションをえることができます。