グラフィックデザインとウェブデザイン

グラフィックとウェブデザインは、しばしば互いに混同される二つの領域です。 結局のところ、彼らは両方とも”デザイン”に焦点を当て、彼らは両方ともしばしば同じプロジェクトに取り組んでいます。

しかし、それは彼らが同じであるという意味ではなく、違いを知ることは、プロジェクトの任意の時点で誰に向けるべきかを知るために不可欠です。 そのために、各ロールの詳細な内訳とその主な違いを以下に示します。

もちろん、個々のスキルはそれぞれの人やチームに基づいて変化する可能性がありますが、グラフィックデザインとwebデザインの重要なコアステープル

グラフィックデザインとは何ですか?

グラフィックデザインとは、製品のユーザーが直面する側のための視覚的、コミュニケーションの資産の作成を指します。 これには、イラストやアイコン(ほとんどの人が間違いなく”グラフィックス”と考えるもの)だけでなく、タイポグラフィ、写真、さらにはテンプ グラフィックデザイナーやチームは、プロジェクトに必要な資産や組成物を作成するために、これらの媒体のすべてを使用します。

最大の可能な区別は、グラフィックデザイナーが技術的な知識を持っていないということです。 代わりに、彼らはユーザーの行動の理解と問題を研究する能力で彼らの視覚的なスキルを補完します。 このため、グラフィックデザイナーは、ユーザーの行動を理解し、それに応じてフロントエンドを設計するなど、ページレイアウトを支援することもできます。

これに加えて、グラフィックデザインは、描画や説明する能力よりもはるかに多くを必要とします。 色の理論(色がどのように相互作用するか)、心理学(視覚がユーザーの行動にどのように影響するか)、視覚的階層(二次的なものよりも重要な選択肢を視覚化 グラフィックデザインは、デジタルプロジェクトに必要な技術的な知識を欠いている領域ですが、ビジュアル、ユーザー、および両者の関係についての理解

グラフィックデザインの例

グラフィック-デザインは私達のまわりですべてに起こる-それはあなたがについて考えることができる雑誌、掲示板、フライヤ、および他のどの印刷物 それは言った、ここにデジタル媒体に関してグラフィックデザインの少数の例は-ウェブサイトと重複し、いかに働くか含んでいる。

  • LinkedInの。 我々は、任意のソーシャルメディアネットワークが”グラフィック重い”とは考えないだろうが、彼らはすべてにもかかわらず、本質的な視覚的なショートカ 例としてLinkedInを使用して、トップバーは、画面間で簡単にナビゲーションを確保し、簡単に解釈可能なアイコンの数が少ないに削減されています。 さらに、これは、視覚的なレイアウトを変更することができるが、アイコンは、一貫性と親しみやすさを確保するように、モバイルやタブレットによ

  • これは世界中で知られているロゴを持つブランドなので、ウェブサイトや印刷物が可能な限りグラフィックデザインのコンポーネントを利用していることは驚くことではありません。 すべてはテキストライト現われ、ロゴ、色および写真撮影によって決め付けることを運ぶ。 実際、これはレストランや配信アプリなど、ほとんどすべての最高の食品関連サービスに当てはまります:ショー don’t tellは行く方法です。

  • イケア すべてのeコマースや小売事業は、強力なビジュアルを必要としますが、イケアはブランディングとスタイルで自分自身を固 同社は、家庭環境でその製品を表示するために、その鮮やかな青と黄色の色から、できるだけ多くのグラフィックスを利用しています。 これらは、会社の命名規則とほぼ同じくらい定義されているグラフィックデザインの選択肢です。

Webデザインとは何ですか?

Webデザインとは、webサイトの制作と維持の両方で使用されるスキルと方法を指します。 これには、コーディングや検索エンジン最適化(技術的な選択の影響を大きく受ける)などの技術的スキルと、インターフェイスやユーザーエクスペリエンスなどのデザイン関連のスキルの両方が含まれます。

それは個々のwebデザイナーや必要なそれぞれのスキルを包含するチームであるかどうか、webデザインは、非常に最初にアクティブなプロセスです。 実際には、我々はそれが本質的にウェブサイトのための製品設計だと言うことができます。 これには、webサイトの目標を理解し、ユーザーがwebサイトとどのように対話するか、それぞれの技術の選択を行い、今後の道を計画することが含まれます。

しかし、我々はちょうどwebデザインは、いくつかのグラフィカルな要素を含めることができることを言及しました。 このため、webデザインチーム内でいくつかのグラフィカルなスキルセットを見ることは珍しいことではありません-これは間違いなく最初の混乱のい

また、ウェブサイトのデザインは、多くの場合、独自のスキルセットとして考慮されていることは注目に値します。 ボタンやナビゲーションなど、他のソフトウェアと共通する多くの視覚的要素がありますが、webサイトには独自の特定の技術の選択肢があります。 そうは言っても、進歩的なwebアプリの台頭に伴い、webサイトとアプリケーションの境界がますますぼやけてきています。

私たちは、もはやビジネスドメイン内のアプリケーションやその他のソフトウェアから完全に別のエ 同様に、私達はまたより広い区域で必要とされる網の設計技術を見ている。

Webデザインの例

すべての良いウェブサイトは、その概念でwebデザインを利用しているので、そこに素晴らしい例の広大な範囲があります。 ここでは、我々が指摘したいのですが、ほんの一部です:

  • Dropbox。 このサイトは非常に最小限に見えるかもしれませんが、それは完全にポイントです。 Dropboxのウェブサイトは、ビジネスサービス(ファイルの転送)をサポートするように設計されているため、ナビゲーションは清潔でシンプルです。 同様に、多くの設計上の選択肢が、最新のブラウザやデバイスで動作するような方法でファイル共有プロセス自体を作成することになりました。 これは、Dropboxが直感的でスムーズなプロセスを保証する方法です。

  • スラック ブラウザ内とダウンロード可能なスタンドアロンオプションの両方に存在する製品として、Slackはウェブサイトやより専用のソフトウェアがぼやける プラットフォームは、明確なナビゲーションを利用しています,機能の成長リストにもかかわらず、,そして使いやすさ,それは、その競争力のあるニッチ

  • ウィキペディア… これは、本質的に可能な限りグラフィックデザインの影響から削除されたウェブサイトの例です。 それは言った、それは理由のために作られた選択肢がたくさんあります。 ウィキペディアは、単一の画面上に大量の情報を明確かつ簡単に表示する必要があります。 簡単に聞こえるかもしれませんが、Wikipediaのオリジナルデザインを見ると、できるだけ直感的で使いやすいものにするために多くの作業が行われてい

グラフィックとWebデザインの違い

動的と静的

グラフィックデザインは、webデザインよりもはるかに長い周りされているが、その関与の多くは、雑誌や印刷メディアなどの物理的なメディアにあ 一方、webデザインは純粋にデジタル媒体に焦点を当てており、ここでは重要な違いがあります。

雑誌や本では、コンテンツは特定の順序で配置され、デザインはしばしばこれを当然のものとしています。 順序はやや静的です。 しかし、ウェブサイトでは、異なるユーザーが独自のパスを持っており、デザイナーは確立されたパターンに頼ることはできません。

これは、webデザインは、ユーザーが簡単にナビゲートするためのツールを提供するだけでなく、ビューの各ページがそれぞれの目的のためのスタンドアロン画面とし

多くはである何、個人専有化および動的ローディングの内容の時代に、網デザイナーはますます創造的でなければならない。 これの良い例は、電子商取引にあります。 デジタルストアでは、ショップはお客様の好みに基づいてアイテムの優先順位を付けたり、履歴データや傾向に基づいて推奨を行ったり、その他のカス これのどれもカタログで起こらない-技術はそこにない。 それは網デザイナーが彼らの仕事でますます考慮しなければならない全新しい区域である。

創造性

あらゆるプロダクトのように、ウェブサイトは使用可能、競争から際立っている必要がある。 黒と白のテキストのプレーンなウェブサイトは非常に遠くにあなたを取得しません。 今日のユーザーは、強力な視覚的な努力を期待しています-このためには、創造的な人が必要です。

グラフィックデザインはこれが入って来るところである。 設計者は、ターゲットユーザーに関する知識を使用して、機能するビジュアルを作成します。 これはより大きい決め付ける面のいくつかがまた演劇に、余りに入って来るところである。 ウェブサイトは、物理的なお店や印刷物など、ビジネスが行う他のものと一致する必要があります。 ブランド忠実な信者は、簡単にウェブサイトと識別することができるはずです。

ファイルサイズ&パフォーマンス

webサイトでは、ファイルサイズが大きいほど読み込み時間が遅くなり、その他のパフォーマンスの問題が発生します。 それは人々が遅いウェブサイトを立て、応答が十分に速くなければかちりと鳴ることができないこと知られている。

人々はまた、グラフィックスやアニメーションの完全な美しいウェブサイトを楽しむ一方で、さらに、これらは、大きなファイルサイズと遅いパフォーマ

Webデザイナーは、全体としてのパフォーマンスを見てください。 グラフィックデザイナーと協力して画像をできるだけ軽量にすることに加えて、コンテンツがどのように読み込まれているか、舞台裏でどのような他のアクションが機能しているか、パフォーマンスに影響を与える可能性のあるその他の領域についても検討します。

スケール&

従来の印刷メディアでは、ページのサイズはほとんど変更されません。 これはグラフィックデザイナーが完全なサイズである材料を必ず提供することを容易にする。 しかし、デジタルの世界では、私たちはすべて異なるサイズの画面を所有しています。

その結果、webデザイナーは、大型のコンピュータモニタ、タブレット、または小型のスマートフォンで処理できるデザインを検討する必要があります。 これを行うには多くの方法があります-今日、私たちは私たちのウェブサイトの二次的なモバイルバリアントを持つのではなく、デバイスに基づいて

Webデザイナーは、スケールに動的に適応する構造を作成する必要があります。 ターンでは、これは彼らがまた適応する資産を計画する必要があることを意味します。 デスクトップに表示される画像は縮小する必要がありますが、テキストに合わせて調整する必要がある場合もあります。

これはまた写実的な、網の設計心配間の重複を作成するタイポグラフィおよび他の区域に影響を与える。 たとえば、グラフィックデザインチームは最も美しいフォントを選ぶかもしれませんが、webチームは小さな画面ではっきりと読むことができるかどうかをテストする必要があります。

視覚理論

以前は、色理論と視覚的階層の両方について言及しました。 それはウェブサイトに必要のこのより広い視覚理論である。 ユーザーがwebサイトに着陸すると、フロントエンドの視覚的なプレゼンテーションがどこに行くのかを指示します。 より速く、彼らはどこにクリックするには、移動する場所を理解することができ、どのように彼らが必要なものを見つけるために、より成功したウェブサ

このために、グラフィックデザイナーは、どの色を使用するか、ページをレイアウトする方法、最も重要な側面にスペースと視覚的な”重み”を与える方法、およ

継続的なサポート

ビジュアルアセットが完了すると、それはそれです-それは終了しました。 しかし、ウェブサイトは常に適応し、進化しています。 新しいページかセクションは加えられている、または網の設計チームはそれをさらにもっとperformantようにするために新技術を選ばなければならない。 次に、これらの選択は、新しいセクションを計画したり、既存の構造を再設計したりすることを意味します。

インターネットが進化してきたように、ウェブサイトは、より適応性とパフォーマンスになっています。 追いつくためには、網デザイナーはこのペースに遅れずについていかなければならなかった。 例えば、スマートフォンの台頭は、モバイルサイトがますます重要になったことを意味し、デスクトップでさえ、新しいブラウザやその他の技術を考慮する必要があることを意味しました。

しかし、これのほとんどは、純粋にフロントエンドに焦点を当てているので、グラフィックデザインに関係することはめったにありません。 技術の選択が視覚資料に影響を与えるとき、グラフィック-デザインは頻繁に複雑であるが、それまで、既存のウェブサイトを維持し、改良するのは網

分析

私たちはすでに、webデザインは進行中のプロセスであることを確立しました-ので、あなたはそれが現在のウェブサイトのパフォーマンスとデータを分析 Webデザイナーは、この情報を使用してwebサイトの成功を測定し、次の改善を計画します。

たとえば、一般的なwebサイトでは、どのページが表示されているか(どれが表示されていないか)、webサイトをすばやく離れる人の数(直帰率)、webサイト全体がユー また、どのキーワードが人々を描いているか、どのページが非常にランク付けされているか、最も一般的なトラフィックソースが何であるかなど、SEOにも焦点を これらの多くは、新しいwebデザインの決定につながることができます。

しかし、より具体的なウェブサイトのために、それはそこに停止しません。 Eコマースストアだけでなく、他のポータルは、多くの場合、さらに多くのユーザーの活動を考慮する必要があります。 ユーザーは必要なすべての項目を見つけることができますか? 支払いプロセスはスムーズに実行されていますか? 人々は多かれ少なかれ頻繁に購入していますか? これらのすべては、何かがうまくいかず、改善する必要があるときを示すことができます。

開発者との役割

webデザイナーはweb開発者ではないことは明らかですが(両者はしばしば”web dev”業界の下で集中していますが)、彼らはまだ強力な技術的知識 これにより、特定のプロジェクトで開発者と並んで作業するのに最適な選択肢になります。

設計者は開発者と重複する技術的選択をしなければならないので、設計の役割が後者と密接に相互作用することは完全に理にかなっています。 Webデザインの役割はファイルサイズとパフォーマンスの問題を考慮しますが、最終的にはすべてを機能コードに変換する必要があるのは開発者です。 それはその後の改善や適応に来るとき、これも当てはまります。 その結果、これらの2つのチーム間のコミュニケーションが不可欠です。

一方、グラフィックデザインは、まったく重複することはめったにありません。 Webサイトにビジュアルアセットが必要な場合は、通常、プロジェクト全体の一部として開発者にこれらを渡すのはwebデザインチームです。

TL;DR-グラフィックデザイン対Webデザイン

ウェブサイトで作業している場合は、webデザインとグラフィックデザインの両方が必要です。 前者は、初期の選択から開発者がすべてを正しく実装するのを助けるまで、プロジェクト全体で活発です。 これに加えて、グラフィックデザインは、フロントエンドが可能な限りユーザーフレンドリーで感動的であることを確認するために資産を作成するために、ユーザーの行動や視覚理論の知識をもたらします。

コメントを残す

メールアドレスが公開されることはありません。