テクスチャとパターン — ビジュアル デザインの縁の下の力持ち

Coinbaseと共同で開催される学習プログラムであるAyagigs Web3 Fellowship でのフェローシップは楽しかったです(笑) 。

製品デザイン リードのAjiri Omafokpeとプログラム アソシエイトのFolushola Estherの仕事に感謝します。彼らはプログラムを親しみやすく、教育的で、面白いものにするために本当に多くのことをしてきました。

基礎フェーズが完了し、メイン フェーズに向かいますが、その前に、2022 年 11 月 21 日月曜日に開始されたチャレンジ ウィークがあり、基礎フェーズ全体で学んだことをテストしました。MCQ、QA、実技テスト (これが 2 日間で完了したとは信じられないでしょう) を含むあらゆる種類のテストを行うことは困難であり、この記事はチャレンジ ウィークの最後のタスクです。

パターンとテクスチャの使用について多くのリクエストがあったため、この機会にこのテーマに関する知識を共有することにしました.

それでは、始めましょう。

テクスチャとパターンは、一般的にデザインに欠かせない視覚要素です。彼らはほとんど見過ごされがちですが、好奇心旺盛なデザイナーによって発見されたときに非常に貴重になるため、私は彼らを縁の下の力持ちと呼んでいます。

それらはアートから借用した要素であり、デジタル デザインを補完し、奥行きを感じさせます。テクスチャは、ユーザーの視線を誘導することで、Web ページの主要なコンテンツを表示できます。パターンは、鈍い空間を鮮やかに見せることができます。どちらもインターフェースを楽しくすることに大きく貢献し、ユーザーエクスペリエンスを向上させます。

しかし、テクスチャーは長い間「GRUNGE」風のデザインと誤解されていたようです。多くの Web ページでは、クールなエフェクトを目立たせるために大量に使用されており、悪用の疑いさえあることがわかります。乱用の結果は、その真の利益が埋もれてしまうことです。テクスチャを最大限に活用するには、微妙に意図的に使用する必要があります。

一方、パターンは使いやすく、画面の特定の領域に注意を引くために使用できます。テクスチャと同様に、パターンはさりげなく使用すると効果的ですが、必要に応じてより明白な方法で使用できます。

この 2 つの単語は時々交換されますが、これは間違っています。類似点はほとんどありません。パターンは通常、特定の視覚的リズムを伴ういくつかの小さな反復要素で構成されます。テクスチャはパターンよりも大きな要素で構成されており、必ずしも反復的ではありません。

テクスチャとパターンの使用例

テクスチャは、モバイル アプリではなく Web 向けにデザインする場合に主に使用されます。パターンは、Web とモバイル アプリの両方のデザインで人気があります。デザインをする理由は「見た目が美しい」だけではなく、ある機能を満足させることであり、テクスチャーやパターンをデザインに使う目的のほとんどは、Webページのレベルやビジョンを高めることです。それらの使用例のいくつかを見てみましょう。

クリックするユーザーを引き付ける

アイコン、ボタン、タイトルなどの要素はすべてテクスチャ化できます。対応する要素をクリックするようにユーザーを引き付けることができます。これが、テクスチャの使用が一般的である理由かもしれません。テクスチャの主な用途は、Web 上の他の要素と区別できるように要素に適用することです。

情報の視覚的表現の強化

テクスチャは、線、ボックス、コントラストと同様に、視線を誘導するために使用できるため、特定の視覚規則に従ってコンテンツを表示するための組版にも使用できます。同時に、テクスチャ効果を適切に使用し、他の視覚規則と調整する必要があります。最終的な出力効果は素晴らしいものになります。

同時に、テクスチャはウェブサイトのスタイルとテーマに完全に一致する必要があります。たとえば、手作りのウェブサイトは布のパターンと一致し、ペイントされたウェブサイトは紙のパターンと一致します。これらすべての要素は、特定の論理規則を通じて Web サイトのコンテンツを反映し、全体的な情報階層を強化することができます。

雰囲気を作り個性を際立たせる

現在、ウェブサイトがインターフェースデザインを使用して自分自身についてより多くの情報を伝えることができることを好む顧客がますます増えています. ウェブサイトが自分の個性を強調し、ブランド効果を発揮できることを望んでいます。テクスチャとパターンは、個性を確立するための強力なツールです。

判読できるようにしておく

読みやすさは、ウェブページが維持しなければならない最重要事項です。テクスチャを使用する場合でも、コンテンツを簡単にスキャンして読みやすくすることができます。どんなにきれいなWebページでも、読みやすさが悪いとユーザーは使い続けられません。下図のように、このような事態は避けてください。

テクスチャを控えめに使用する

前述のように、テクスチャは慎重に使用し、悪用しないでください。Web ページでは、メイン コンテンツへのユーザーの注意を妨げないように、抑制し、大規模に使用しないようにする必要があります。

練習は完璧を作る

テクスチャとパターンを使用する場合は、さらに試してください。試用して初めて、最終結果を知ることができます。思いもよらなかったところにテクスチャーを配置すると、また違った発見があるかもしれません。パターンとテクスチャを使用すればするほど、より良くなります。

意図して使う

パターンとテクスチャを使用する場合は、意図的に行う必要があります。デザインと同じように、やるためにやるのではありません。テクスチャとパターンの使用は、目的を達成するための手段であるべきです。

探検、探検、探検…

優れたテクスチャとパターンを無料で提供しているサイトは何千もあります。探索に時間を費やすと、得られるものが気に入るはずです。設計の時間を大幅に節約するには、バックアップ リソースを平時で作成するのが最善の方法です。設計の時間をリソースのダウンロードや収集に使用すると、時間が足りなくなる恐れがあります。

テクスチャ探索のための厳選されたリンク

ダウンロードできる 365 種類のテクスチャ (JPG、PSD、PAT、ABR) — WeGraphics

背景 | グラフィックバーガー

パターン ライブラリ

ava7 パターン /// 1905 の無料シームレス背景パターン

パターン探索のための厳選されたリンク

無料の SVG ジェネレーター、カラー ツール、Web デザイン ツール (fffuel.co)

パターン モンスター — SVG パターン ジェネレーター

微妙な模様 | 次の Web プロジェクト用の無料テクスチャ (toptal.com)

パターンジェネレーター | ロイヤリティフリーのシームレスなパターンを作成する (dodad.dev)

読んでくれてありがとう、そして素晴らしい一日を！

参考文献

• UXdesign.cc