ビジュアルライブラリの構築:設計のヒントと課題

公開: 2020-12-17

ベテランデザイナーとジュニアデザイナーの大きな違いの1つは、彼/彼女が構築するビジュアルライブラリです。

ビジュアルライブラリとは何ですか?

これは、UI要素とUXプラクティスに関して頭の中にあるものです。 あなたが構築したものとそれがどのように機能するかを理解しているもの。 ライブラリが豊富であればあるほど、その場で解決策をすばやく思いつくことができます。

例を挙げましょう:デザイナーとして、あなたは新しいウェブサイトを構築する任務を負っています。

どのウェブサイト? あなたは尋ねるかもしれません。 さて、それはあなたが持っているすべての要件です。 同僚からの挑戦。 ああ、また、あなたはそれをするために1時間あります。 これはDevriXで行った課題であり、3600秒後の結果の1つです。

アレックスディミトロフによるデザイン

トピックを検討する時間があまりなかったので、それはヘッダーの中にありました。 ヘッダーにはどのようなコンポーネントがありますか?

  • 確かにタイトル
  • ナビゲーション
  • 検索バー
  • いくつかのソーシャルリンク
  • 主にアカウントを登録および/または作成するための行動を促すフレーズのボタン
  • それを面白くするためのいくつかのナビゲーション

これらすべてはどこから来たのですか? 以前は空白のページでした。 そもそもトピックすらありませんでした。 それはすべて、ウェブサイト、アプリケーション、およびそれらの周りのすべてを構築してきた長年にわたってデザイナーの心の中で作成されたビジュアルライブラリが原因で発生しました。

ヘッダーをデザインする方法はいくつありますか? 何百もの方法。 さまざまな種類の要素、地形、色、オーバーレイ、ボタン、要素などがあります。 面白い実験です。

ビジュアルライブラリを構築する方法

最も簡単な答えは「より多くのデザインを作ること」ですが、それがはるかに多いという理由だけで、それはあまり満足のいくものではありません。 さらに重要なのは多様性です。 さまざまなデザインを構築する。 これに取り組むことができる1つの直接的な方法は、大きなサイトの再設計を行うことです。

次にいくつかの例を示します。

フェイスブック:

画像ソース:ドリブル

Gmail:

画像ソース:ドリブル

ツイッター:

画像ソース:ドリブル

非常に多くの例があります。 設計が複雑になるほど、進行が速くなります。 しかし、それはどのように正確に機能しますか?

例としてリストを見てみましょう。 リストには、リストに名前を付けるヘッダーを含めることができます。また、色を付けたり、デザインが似ている、またはデザインが異なるアイコンを含めることができます。 また、より大きなタイトルとサブタイトル、おそらく番号付きのラベルを付けることもできます。 次に、ホバー状態、選択または無効化できる項目などを追加できます。 これらすべてのバリエーションを使用して、さまざまなリストデザインを作成できます。

画像ソース:ドリブル

非常に多くの構成とレイアウトを考え出すことができるということは、優れたビジュアルライブラリを持つことです。 あなたがそれをそのようにすることができることを知ること。 隣に「ボックスを描いて」、「タイトルを追加」と言う人がいて、何も考えずにやっているようなものです。 これらの決定はすべて、以前に行ったことがあるために行われます。 確かに、それはデザインの基本にも従っていますが、あなたはいつもあなたのメモや本に手を伸ばすことができません。 AIをトレーニングするようなものです。「要素の成功した順序」を使用してパターンを構築する必要があります。

すべてのビジュアルアーティストはライブラリを構築する必要があります

この典型的な例は、金政基です。これは、あらゆる視点を使用して本物そっくりのアートワークを作成できる天才です。

アート:キム・ジョンギ

インタビューの中で彼は、生涯を通じて自分の周りのすべての物体を見て、それらの形を理解し、異なる視点からそれらを描くことを試みてきたと述べています。 このスキルにより、彼は、参照なしで白い紙から始めるだけで、上の画像に表示されているすべてのものを描くことができるようになりました。

または、より良い言い方をすれば、彼の参照が頭の中にあるために到達できる参照なしで、彼のビジュアルライブラリです。 これは、デザイナーのために努力する大きな目標であるマスターの仕事の例です。

ウェブデザイナーがボタン、リスト、カード、入力フィールド、ポップアップなどについて学ぶのと同じように、デジタルアーティストは、素材、照明、シルエット、筋肉の働き、重力があなたを引き下げる方法、そしてあなたに負担をかける方法について学びます。ボディなど。

SuzanneHelmighによるグラフィック

これは、デジタルアーティストがさまざまな素材を球体に適用して学習する方法の例です。 マグマ、木、毛皮、ワイン、卵、チーズ、何でも有効です。 それについて学び、手を使ってそれを行うことは、あなたの脳に少しずつそれを刻印します。 そして、その素材を実際の絵画に適用するときが来ると、それが実際にどのように機能し、最終結果が実際にどのように見えるかをよりよく理解できるようになります。

これは、肌、革、金属、髪の毛をすべて使用して、非常に見栄えの良い最終製品を作成する例です。 これらの材料の基本的な理解が不足していると、金属がプラスチックや革のような紙などのように見える可能性があります。

画像ソース:Artstation

Webデザインコンポーネントの課題

それでは、Webデザインで頻繁に使用するいくつかの一般的なコンポーネントと、実行するいくつかのプラクティスをもう一度見てみましょう。

1 –ボタン

Webサイトの最も基本的なコンポーネントの1つ。 ボタンにはさまざまな形とサイズがあります。 グラデーションの設定、色の変更、テキストシャドウの追加、境界線の追加(複数)、光沢スタイルの追加、輪郭の作成、形状の変更(正方形、角の丸い、円)が可能です。アイコンが付属しているものもあれば、アイコンが区切られているものもあります。サブクリック可能な領域。

画像ソース:ドリブル

タスク:20の異なるスタイルでボタンをデザインします。 それらの差が大きいほど良いです。 それぞれについて、コントラスト、バランスなどの観点から、ベストデザインプラクティスに従ってください。

2 –カード

カードやボックスは、もう1つの非常に一般的なコンポーネントです。 ヘッダー/フッター+メインコンテンツなどの一般的な要素もありますが、あらゆるタイプのコンテンツを保持できます。

画像ソース:ドリブル

タスク:コンテンツを使用して、上記のカードを作成し、理想的には可能な限り異なる10のバリエーションをデザインします。 スタイルを変更し、新しい要素を追加し、それらを回転させ、グラデーション、シャドウ、アイコン、およびイラストを使用します。 それでワイルドになってみてください。

3 –コメント

ほとんどすべてのブログには、何らかの形のコメントシステムがあります。 しかし、コメントコンポーネントは実際のコメントを保持しているのではなく、「ステータス」の変更のようなものであると考えましたか?

画像ソース:ドリブル

タスク:上記の例はまさにそれを示しています。 ここで、コメントコンポーネントに関連するもの、つまりユーザーからのコメント、タスクの更新ステータス(コメント領域にあります)、チャットのようなコメントなどを考えてみてください。 7〜10のバリエーションのいずれかが適切な数になります。 繰り返しますが、すべて異なるものにしてください。 詳細を調べ、アイデアを見つけ、サイトを閲覧します。

これらの演習の目標は、これまで知らなかった新しい方法で共通の要素を実行する方法を見つけることです

4 –スライダー

スライダーは、多くのフロントエンド開発者が作成する膨大な量の問題と、バックグラウンドで実行される可能性のある重いJavaScriptのために、嫌うコンポーネントの1つです。 しかし、それはあなたがそれを作る必要がないという意味ではありません。

画像ソース:ドリブル

タスク:さまざまなレイアウトとアプローチの詳細については、Webとさまざまなデザインを参照してください。 たぶん、スライドを実行するJSライブラリを見て、何があるかを確認してください。 そこから、スライダーの10〜15の異なるデザインをデザインします。 繰り返しになりますが、すべてのデザインを以前とは可能な限り異なるものにするようにしてください。わずかな機能強化を使用するだけではありません。

5 –入力フォーム

入力フォームは、ほとんどすべてのWebサイトのもう1つのコア部分です。 彼らにとって興味深いのは、彼らが情報を出力する代わりに受け取ることです。

画像ソース:ドリブル

タスク:ここでのあなたの仕事は、誰かがWebサイトで必要とする可能性のある最も奇妙なタイプの情報を考え出すことです。 PDFまたはPSD(1つ選択)、クレジットカード情報をアップロードし、Cookieのレシピを追加し、塗料の混合比を計算し、自動車販売店のコンフィギュレーターを作成します。 頭に浮かぶものは何でも、ユニークであるほど良いです。 もう一度ウェブサイトを閲覧して、実際の解決策を確認してください。 ユニークなデザインで少なくとも10の異なるユニークなフォームをデザインします。

概要

デザイナーとしてデザインライブラリを構築することは、ワークフローを改善し、デザインを迅速に作成し、クライアントの問題を解決し、ユーザーエクスペリエンスを改善するためのユニークで天才的な方法を考え出すための主要な足がかりの1つです。 Web上の各要素を参照して詳しく調べると、ユーザーのアクション、ユーザーが見ているもの、およびそれをどのように改善できるかを検討し始めます。

上記のタスクを宿題として使用すると、ポートフォリオ埋めるのに役立ちます 上記の5つのタスクだけにとどまらず、そこに出て、Webサイトを閲覧し、再設計を行い、それらを研究し、デザインセンスの開発と独自のビジュアルライブラリの構築を続けてください。