Webデザインでよく使う要素やカラーやタイポグラフィに一手間加えて、マンネリ化から抜け出すデザインテクニックを解説
Post on:2016年2月24日
sponsors
Webデザインで今、注目されているトレンドはデザイン的にも面白く、かなり使いやすいです。最新のデザインやトレンドな機能をサイトに加えて、いつもの同じようなデザインから抜け出すために使ってみるのもよいでしょう。
ここで紹介するトレンドは、よく使用している要素やカラーやタイポグラフィに一手間加えるだけで、新鮮なデザインに変わります。
Essential Design Trends, February 2016
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。
DuoToneのカラースキーム
DuoToneのカラーパレットは存在自体は昔からありましたが、最近の使い方としてはフルスクリーンの画像にDuoToneのグラデーションを加えて強いインパクトを与えます。フラットデザインの方向性とは異なりますが、非常に魅力的なデザインになります。
DuoToneとは、2つのカラーを使用してパレットを構成します。カラーの基本的な選び方は、カラーホイールの補色の組み合わせです。上級者になると、あらゆるカラーのコンビネーションを使い、規則を破った組み合わせを使用します。
DuoToneエフェクトは主に、明るいカラーで画像の上にオーバーレイさせて利用します。DuoToneを使うことで、画像の暗いとこと明るいとこが強調され、印象的なカラーでビジュアルのインパクトを生み出します。
このテクニックはいろいろなデザインに利用できます。フルスクリーンの画像をより魅力的にしたり、面白い背景を作ったり、UI要素を強調したり、デザインの特定部分に強調を加えることもできます。
DuoToneエフェクトは、一つのデザイン要素のためだけに使うことで、最もよく効果があります。このテクニックは強烈なので、使いすぎに注意してください。
Split-Screenのデザイン
Split-Screenのデザインを採用しているWebサイトが急激に成長しています。デザインの大きな特徴は、コンテンツを2つのパネルで分割して配置することです。左右のパネルは同じ形、同じ大きさで、コンセプトの大部分が対称的なアウトラインを使います。
その結果は非常にクールで、デスクトップでは二重のコンテンツエクスペリエンス、モバイルデバイスでは積み上げられたスクロールエレメントとして機能します。
Split-Screenのデザインは、カード型レイアウトとグリッド型レイアウトの良いとこ取りとも言えます。分割されたパネルで異なる内容をビジターにナビゲートするので、ユーザー解析も正確なデータが取得できます。
Split-Screenのデザインはユーザフレンドリーで、レスポンシブで非常によく機能します。そして他のデザインのテクニックを妨げることもありません。
Split-Screenを使う時は、以下の点に注意するとよいでしょう。
- 強いビジュアル要素がない時は、カラーとタイポグラフィを対に。
- 左から右に移動する人の目の動きに合わせて、ユーザーの視線をフォーカス。
- 分割する時にカラーでブロッキングするのも効果的。
- 分割したパネルを特定のカードとして考えるのも有りです。内容の異なる小片を目立つように表示するために、コンテンツ要素をレンガ状に積み重ねます。
- それぞれのパネルはシンプルにしておきます。このデザインの大事なコンセプトは「分割」です。ミニマルなデザインにすることで、パネルの内容が強調されます。
共有スペースのタイポグラフィ
これはあなたが見て、そして理解しなければならないトレンドの一つです。
ほとんどのWebサイトには、画像と背景と文字があります。画像や文字の要素はそれぞれ一緒か、あるいは完全に切り離された状態で配置されています。
多くのデザイナーはこのフォーマットから抜け出して、文字が他の要素のスペースにおよぶプロジェクトを作っています。それは非常に興味深く、見るのが楽しいです。
同時に、リーダビリティについての懸念があるため、チャレンジでもあります。
テクニックとしてはまず、サンセリフの通常のウェイトを使ったシンプルなタイポグラフィでよく機能します。文字が背景と交差する時に際立つために、たくさんのコントラストが必要だからです。同じ理由で、カラーはホワイトかブラックをよく使用します。
文字はある程度の大きさが必要です。カラーのコントラストと同じくらい、サイズとスペースでつくるコントラストは重要です。異なるサイズのスクリーンでうまく機能させるには、文字が重要な画像のエリアをカバーしないように処理します。
これのの最も良い例は「Deux Huit Huit」です。文字がメイン画像の上を横切っていますが、画像の邪魔にならないだけでなく、文字の可読性も充分です。
Little Flyers Learning Centres
総括
ここで紹介したトレンドは、あなたのデザインに新しさを加えることができます。既存のデザインに加える時も、今までのものを破壊することなく、そして後に取り除くことも簡単です。
新鮮なビジュアル効果のために、これらのテクニックを試してみてください。
sponsors
