ウェブデザイナーのウェブデザイン学習経験とスキルのまとめ

ウェブデザイナーのウェブデザイン学習経験とスキルのまとめ

会社の影響力が拡大し、製品が改良され続けるにつれて、関連するイメージデザインもそれに追いつき、徐々に改良していく必要があるため、私たちは一緒に成長するために新卒のウェブデザイナーを採用しました。新卒者は勤勉で学ぶ意欲がありますが、非現実的な野心も持っています。彼らの出発点は似ているため、 Web デザイナーをどのようにトレーニングするかが重要になります。デザインに触れ、学んだ経験の一部を皆さんと共有し、皆さんからさらに多くの提案をいただければ幸いです。

ウェブデザイナー

1. 色合わせ

実際、色彩感覚はデザイナーが持つべき最も基本的な資質です。彼らの作品は、Web インターフェース、システム インターフェース、製品パッケージなどに広く使用されています。暖色と寒色、対照色・補色、色彩心理学、マッチングの原則など、基本的な理論はどこにでもあります。興味があれば、1つか2つ検索して見てみてください。ウェブデザイナーにとって、色はバスケットボールをシュートするときの感覚のような感覚です。この感覚は観察と練習を通じて養うことができます。マースが初めてデザインに触れた頃、彼はバスに乗っているときでさえ、道端にある特定の会社やレストランの看板の色の組み合わせに注目していました。彼はいつも生活の中で色の組み合わせの美しさに注目していました。彼は何枚のカラースクリーンショットを撮ったかさえ覚えていません。

マース氏は、デザイナーは一般的にいくつかの段階で色を使用すると考えています。

  1. 初期段階: 他の要素や他の人たちの気持ちを考慮せずに、最適だと思う 1 ~ 2 色を使用します。
  2. 移行段階: 1 色または 2 色では単調だと感じ始めるので、できるだけ多くの異なる色を試してください。この段階では、目的なしに混ぜたり組み合わせたりすることが非常に簡単です。
  3. 成熟段階: この段階では、デザイナーは大衆の色彩に対する審美的嗜好を理解し、 1~2 色を合理的に組み合わせ始め、異なる色値による同じ色の微妙な違いを認識します。ほとんどのデザイナーはこの段階にあります。
  4. 最終段階: 1つの色を極端に使用したり、黒、白、グレーだけを使用したりして、特定の色に完全に浸り、少し異常であっても、その創造的な効果により、第3段階のデザイナーは一目でそれがマスターの作品であると認識します。

実はこれも継続的な練習と積み重ねのプロセスであり、色彩感覚が向上していきます。

2. レイアウト

ウェブデザイナーは色彩感覚だけでなく、レイアウトもしっかり把握していなければなりません。その組み合わせの質が作品の効果に直接影響します。実際、適切なレイアウト設計を行うのは難しくありません。次の手順を実行するだけです。

  1. レイアウトの準備: コンテンツの主要部分に必要なテキストと画像を明確にします。細かいことについてはあまり考えすぎないでください。
  2. レイアウト形式: さまざまなレイアウト形式があります。主要なコンテンツが最も目立つ場所に配置されている限り、レイアウトを自由に選択できます。ウェブページの場合、ほとんどの人が上から下、左から右の順に閲覧することを踏まえ、最も重要なコンテンツや画像などをページの左側と上部に配置する必要があります。
  3. 詳細なレイアウト: 全体的な配色、フォント、モジュール間の間隔、イラスト、コンテンツの追加と削減などの側面を考慮します。このステップは繊細な作業です。

Mars 氏は、レイアウトを練習する最良の方法は PPT を作成することだと考えています。 PPT を美しく簡潔に作成するのは簡単ではありません。ソフトウェア業界のプリセールス担当者にとって、美しい PPT を作成する方法は、自習のための必須コースになるはずです。 PPT レイアウトが完成すると、他の Web ページやパンフレットなどのグラフィック レイアウトも簡単に作成できるようになります。

3. 詳細

「細部が成功と失敗を決める」という有名な格言は、デザインの分野ではさらに重要です。背景色、色のグラデーション、コンポーネント間の間隔、タイトルのスタイル、ハイライトのスタイル、フォント/サイズ/色、行/段落の間隔、イラストの位置/エッジの処理、入力ボックスの幅と高さ/境界線の色/背景色、ボタンの位置など、多くの詳細は視聴者には見落とされる可能性がありますが、デザイナーはそれらを決して見逃してはなりません。これまでと同様に、さらに詳しく見て比較してみなければ、これらの詳細がわかりません。これらの詳細は大したことではないと考える人もいますが、複数の詳細が組み合わさると、人々は不快感を覚えます。

例えば、以下はあるシステムの記事の下にコメントを追加するためのフォームです。上部はプログラマーが直接書き込んだ、美化されていないプログラム(上)、下部はデザイナーの協力を得てデザインされ美化されたフォームインターフェース(下)です。

インターフェースの詳細

普通の美的感覚を持つ人なら、以下のものは間違いなく美しいと思うだろうが、何が良いのか分からないのだろうか?マースがさまざまな角度から説明するのを聞いてください。

  1. 色のマッチング: フォントの色は、何も考慮せずに 32 色のパレットから直接取得されているようです。フォームの境界線の色が暗すぎます。フォームの背景はページの背景と同じで、目立った階層がありません。
  2. レイアウト: このコンポーネントには複数の操作行がないため、リスト形式を使用する必要はありません。コンポーネントタイトルの上に保存ボタンを配置するのは不合理です。コンポーネントタイトルの位置とサイズは目を引くほどではありません。
  3. ユーザー エクスペリエンス: これはシステム内のインターフェイス コンポーネントであることを明確にします。このユーザーはすでにログインしているので、レコーダーに入力する必要はまだありますか?時間は間違いなく提出時間です。提出者は主に自分のコメントを提出するため、提出内容を入力する大きな入力ボックスを用意し、シンプルで明確にします。上の写真の提出ボタンでは、コメントを入力してから左上隅に戻って「保存」をクリックする必要がありますが、これは明らかに不合理です。次の写真のインターフェースには右側に大きなボタンがあり、見た目がわかりやすく、操作も快適です。

上記の点はすべて個人の美的感覚を向上させるためのものです。美的感覚の研究を行うつもりがないのであれば、純粋に理論的な学習をしすぎても美的感覚はあまり向上しないと思います。だから私のアドバイスは、もっと見て、もっと真似して、もっとやって、もっと比較することです。美的感覚を持たずに盲目的に創作しないように注意してください。実際、模倣は恥ずかしいことではありません。それは学習の必要な段階です。誰かが MJ のダンスを真似すると、たとえ MJ とまったく同じように見えなくても、少なくとも学校やクラスのクリスマス パーティーなどで少数の人から好かれ、賞賛されるでしょう。しかし、大衆の美的嗜好を理解していない場合、その人はおそらくシスター フロンのように踊るでしょうが、それは単なるジョークに過ぎません。優れた美的価値観を育むことは生活のあらゆる面に応用でき、写真撮影、部屋や机の装飾、服装の組み合わせなど、生活のあらゆる面でも美的価値観を発揮でき、生活の趣味を向上させることができます。

4. 考え方

蓄積段階では、冷静な心を保ち、着実に忍耐強く、焦らないようにする必要があります。Webデザイナーは繊細な仕事なので、不安になっても意味がありません。基本的な美的観点では、創作するときはリラックスし、やりたいことをし、食べたいものを食べ、自分の心に従い、創造的なインスピレーションを得るための環境を自分に提供する必要があります。ただコンピューターの前に座って考え続けるだけではいけません。2 倍の努力で半分の結果しか得られず、結局は落ち込んでしまうことになります。

5. スキル

優れた美的基礎と創造性があれば、次のステップは制作です。美的価値観の涵養や創造性の出現に比べると、いくつかのツールスキルは習得しやすいとマースは感じています。それは、鉛筆を使って描くか、筆を使って描くかという問題に過ぎません。火星が接触するツールについて簡単に紹介します。

  1. グラフィックスキル: Photoshop (グラフィック処理など)、Illustrator/CorelDraw (ベクターグラフィック)、Flash (アニメーション)、Premiere Pro (映画やテレビのポストプロダクション) など。これらは単なるアプリケーションツールです。
  2. Web プログラミングスキル: HTML、CSS、JavaScript など。
  3. 最適化スキル: 画像の圧縮、Web ページの最適化など。

上記のツールに関するチュートリアルはインターネット上にたくさんあります。NetEase チュートリアルをお勧めします。基本的な内容をいくつか読んで、何度も練習すれば習得できます。将来的には、より高度なテクニックを学習して向上させることができます。深く記憶に残るように、使いながら学ぶ必要があります。

6. ユーザーエクスペリエンス

ユーザー エクスペリエンスは、一般的に Web デザインやシステム インターフェイス デザインに現れます。ユーザーと人間とコンピューターのインターフェイス間のインタラクション プロセスです。インターフェイス操作の容易さは、製品に対するユーザーの印象に直接影響します。ユーザーエクスペリエンスは、Web デザイナーにとってより高い要件であり、Web デザイナーの範疇を超えています。ただし、Web デザイナーがこれを理解して初めて、インターフェイスのレイアウト、全体的なマッチングなどをより合理的に設計できます。

マースはユーザーエクスペリエンスの重要性を認識していますが、深く研究していません。しかし、マースは他の人のウェブページやシステムの利便性を記録し、次回自分のデザインに反映させます。これは模倣の段階と見なすことができます。これは火星が常に学んできた方法でもあります。

最後に、Mars はプロのデザイナーではなく、理論的根拠もありません。上記の要約はすべて実際の経験に基づいており、さらに良い提案が得られることを期待しています。

<<:  MySQLデータベースでの値の追加、変更、削除、クリアの例

>>:  Vueプラグインの書き方を説明する記事

推薦する

Linux で仮想コンソール セッションをロックする方法

共有システムで作業しているときは、他のユーザーが自分のコンソールを覗き込んで、自分が何をしているか見...

Webページ作成の質問: 画像ファイルのパス

この記事は 123WORDPRESS.COM Lightning によるオリジナルです。転載する際に...

CentOS 7 で yum を使用して MySQL 5.7.20 をインストールする最も簡単な方法

CentOS7 のデフォルトのデータベースは mariadb ですが、mysql を使っている人も多...

Linux で nginx を起動および再起動する方法

Nginx (エンジン x) は、IMAP/POP3/SMTP サービスも提供する高性能 HTTP ...

JavaScript ベースのシンプルなカルーセルの実装

この記事では、シンプルなカルーセルを実装するためのJavaScriptの具体的なコードを参考までに紹...

mysql 8.0.16 winx64.zip インストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 8.0.16 winx64.zipのインストールと設定方法の具体的なコード...

ラベルとボタンを削除し、背景画像の点線/影を追加すると完璧な解決策になります

ユーザーが登録すると、ラベルをクリックして確認コードを変更します。クリックするとラベルに影の部分がで...

LAMP ソースコードを使用したエンタープライズレベルのインストールチュートリアル

目次LAMPアーキテクチャ1.ランプの紹介2. WebサービスワークフローWebサーバーのリソースは...

DockerはMariaDBのサブライブラリとサブテーブル、および読み書き分離機能を実装します

目次1. はじめに2. 環境整備1. 基本環境3.Mysqlマスタースレーブ構成をインストールする1...

nginxを使用して取得したIPアドレスが127.0.0.1である問題を解決する

IPツールを取得 lombok.extern.slf4j.Slf4j をインポートします。 org....

mysql5.7.33 で誤って ibdata ファイルを削除した後にデータを回復する方法

目次1. シナリオの説明: 2. 事例のデモンストレーション: 2.1. MySQLの障害発生前にデ...

NODE.JS を使用して WEBSERVER を作成する手順

目次Node.jsとはNodeJSをインストールするNode を使用して Hello World を...

HTML テーブル マークアップ チュートリアル (9): セル間隔属性 CELLSPACING

テーブルがコンパクトになりすぎないように、テーブル内のセル間に一定の距離を設定できます。基本的な構文...

react-color を使用してフロントエンドのカラーピッカーを実装する方法

背景次の図に示すように、 react-color を使用してフロントエンド インターフェースのカラー...