インターネットのおかげで、グラフィックデザインとプログラミングはますます重複する分野になりつつあります。

プログラマーとして、私はグラフィックデザインの基本的な知識を常に必要としていますが、徹底的かつ簡潔なグラフィックデザインの学習リソースを見つけるのに苦労しています。

あなたの経験では、効果的で質の高い学習教材であるWebデザインの初心者レベルの概要を提供する、いくつかのヒントを提供したり、良い本、チュートリアル、ブログ、Webサイトを推奨したりできますか？画像編集ツールの使用方法に関するヒントを探しているわけではありませんが、それらの基本的な把握を前提として、新しいデザイナーがプロフェッショナルなデザインを作成するのに最も役立つリソースとアドバイスはどれですか？

• シンプルなまま -最初はあまりに空想的で冒険的なことをしようとしないでください。最初に基本を理解してから、実験を開始できます。スタートレックのコンピューターインターフェイスをエミュレートしようとしないでください。
• 一貫性を保つ -一貫性のあるデザインは、優れたデザインの基盤の一部です。マージン、サイズ、配置を追跡し、デザイン全体でそれらを維持します。
• クラッターの削除 -デザインに必要な要素のみを含めます。他のすべてを削除します。
• 優先順位付け -設計の主な目的は何ですか？その目的を強調します。はっきりさせてください。
• 空白を使用 -適切なマージンを考慮してください。余白がほとんどない、またはまったくない大きなテキストブロックは、読みにくいです。他の設計要素についても同様です。
• カラーパレットを使用する -合計で4〜5色を超える色を使用しないでください。
• 一貫したフォント-1つまたは2つのフォントに固執します。一貫して使用します。通常は見出し用、段落テキスト用です。一貫したフォントサイズ、行の高さ、および行間隔を計算して維持します。猛烈なヴェロキラプトルのゾンビをかわすことができない限り、コミックサンズを使用しないでください。
• Design First-デザインは後から考えるべきではありません。計画段階の第一級のメンバーでなければなりません。デザインは、ユーザーがプログラミングと対話する方法であり、ユーザーはまずデザインに基づいて意見を形成します。デザインに適切な重要性を与えます。

リソースについては、次のWebサイトのいずれかをチェックアウトします。

• スマッシングマガジン
• PSD Tuts
• アブゼイド
• UXブース
• タイポグラフィが大好き
• ジェイソン・サンタ・マリア

Jim Krauseのデザインの基本インデックスは、構成、色、タイプの基本の非常に良い要約を与えてくれました。私は彼の例の大部分の大ファンではありませんでしたが、彼らは彼のポイントを非常によく説明しており、彼は私が見たことがないいくつかの貴重なものに触れています。そして、おそらく最も重要なことは、それを読んで、彼が紹介しているアイデアを試してみて、本当に興奮したことです。

Web開発とWebデザインとの間には若干のオーバーラップがある場合がありますが、Web開発者は、プログラミングを学んだのと同じくらいの労力を費やそうとしない限り、フルタイムのデザイナーになろうとは思いません。週末に手を出して上手にできるものではありません。

これがあなた自身のウェブデザイナーになることを学ぶことができるなら（すなわち、あなたが取り組んでいるすべてのサイトに対してあなた自身のウェブデザインをする）、私は本当にいくつかの正式なトレーニングを受けることをお勧めします（たとえ大学デザインコースをいくつか受講しているとしても）視覚的なデザインと構成の基礎を学びます。Damonが投稿したような教科書スタイルのデザインブックは役立ちますが、実際にはブック内のすべての演習を行い、資料を必ず理解する必要があります。しかし最も重要なことは、多くの時間を見て（オンラインデザインギャラリーを閲覧したり、雑誌や雑誌広告をめくるなど）、デザインを作成する（オンラインでいくつかの練習デザインブリーフをダウンロードするか、オンラインデザインコンテストに参加する）ことです。

作業するWeb /グラフィックデザイナーとのコミュニケーションを支援する場合は、語彙（タイポグラフィの概念など）を説明し、使いやすさ、アクセシビリティ、UXデザインに焦点を当てた本を手に入れるのが、おそらく時間の最適な使い方です。これにより、プロジェクトの創造的な方向性に関与し、インターフェイスの設計を支援できますが、デザイナーはサイトの「外観」または美学を作成する人です。

Virtuosi Mediaには多くの優れたリソースがリストされています（Tutsplusネットワークは一般的に素晴らしいものであり、Smashing MagazineはWeb開発者/デザイナーにとって必読です）。

• http://www.alistapart.com/
• http://webdesignledger.com
• http://behance.net-多くの世界クラスのデザイナーのポートフォリオをホストして、インスピレーションを引き出します

私はプログラマーであり、私にとって非常に役立つ次の本を読んでいます。

• ロビン・ウィリアムズによる非デザイナーのデザインブック：この本は、グラフィックデザインの基本をカバーしています。
• ベティ・エドワーズ著 『脳の右側に描く』：描画スキルを伸ばすための本。
• The Humane Interface by Jef Raskin：この本は、ユーザーインターフェイスの設計についての考えを引き起こします。

おそらくすべてのケースに関連するわけではありませんが、ウェブプログラマーにとって私にとって際立っている最大のことの1つは、おそらくギャップを少し埋める、CSSを内側と外側から学ぶことです作成中のプロジェクトに統合できない場合。

2004年、私は自分の人生の大半を過ごしていたように、両方の世界の中間にいることに気付きました。両親（振付家および教育者）によってApple // eで育てられました。デザインは芸術ではなく、実際、Webを使用しているかどうかに関係なく、よりアルゴリズム的なパターンの一部はプログラミングとうまく調和しています。

• Bookshelf Histogram-大学院でデザインyと開発者yの両方で作成した印刷物。

2004

したがって、おそらく高等教育、または同様にあなたのためにすべてを消費する方法で従事しているものを検討してください。いずれにせよ、頑張ってください。

タイポグラフィについて多くを学びます。

クラシックから…

^{ヤン・チホールド}

ピエロではない…

^{デビッド・カーソン}

戦略的で効果的なタイポグラフィは、この分野で最も一般的に見られない品質の1つです（常にそうでした）。

通常、タイプの取り扱いだけに基づいてデザイナーを採用できます。ストーリーの約80％が履歴書のセットアップに含まれています。

良い（無料）スタートは、Robert BringhurstからのWebへの応用のために不可欠なリソースのこの詳細な適応です。

^{活版印刷スタイルの要素、ブリングハースト}

これは、タイプとレイアウトの相互作用を扱うより広範な考慮事項です。

^{グラフィックデザインのグリッドシステム、ブロックマン}

1. 周囲のデザインされたオブジェクトについて批判的に考える

   人工環境のほとんどすべてには、グラフィック、ウェブサイト、ファッションアクセサリーなど、何らかのデザインが背後にあります。

   デザインが意図した目的にどの程度うまく機能しているか、またどのように見えるかに注目してください。

2. 設計は、ニーズを満たす、または問題を解決する方法と考えてください

   見た目を良くするよう努めていますが、デザインは他のタイプのアートとは異なり、実用的です。

   たとえば、ロゴは、ブランドや会社をすばやく認識できるようにするグラフィックデザインの一種です。

   衣料品は、着用者をより魅力的に見せることに加えて、身体を覆う目的を果たします。

3. 視覚的なコミュニケーションの練習。

   設計者は、設計の図面や他の表現を作成して、それらを改良し、設計の同僚やメーカーなどの他の人に説明できる必要があります。

   描画はデザイナーにとって強力なツールですが、写真のようにリアルに描画できなくても心配する必要はありません。デザイナーのドローイングは傑作である必要はなく、完成品につながるアイデアをすばやくキャプチャする方法にすぎません。トレースも完全に受け入れられます。

   設計者は、図面に加えて、モックアップ、プロトタイプ、コンピューターイメージングなどを使用して設計を視覚化します。

4. 物事がどのように作られているかを探る

   デザイナーとして仕事をするとき、目に見えるものを考慮するだけでなく、デザインがどのように実装されるかを常に考慮する必要があります。

   携帯電話のケースのようなオブジェクトの場合、工業デザイナーは、どのような種類のプラスチックおよび成形プロセスが使用されるか、および各部品がどのように一緒に取り付けられるかを考える必要があります。

5. 良い情報源を見つける

   デザイン雑誌に加えて、デザインのプロセス、原則、および方法に関する本を探してください。

   アパレルの構造、製造方法、さまざまな工芸技術については、教科書や技術ビデオをご覧ください。

   デザインについて学ぶことは、ファッションを読んだり雑誌を飾ったりすることよりも深くなりますが、これらは現在のトレンドにとって良いリソースです。

6. 設計スキルの開発

   勉強と練習は良いですが、実際にデザインを次のレベルに引き上げるのは、実世界での経験です。

7. すぐに間違いを犯す

   あなたは多くの間違いを犯します、そして、あなたがそれらをより速く得ることができるほど、より良いです。

8. 常にアイデアをキャッチする準備をしてください。

   どこからでもインスピレーションを探してください。インスピレーションは、他のデザインやデザインのトレンドから得られる必要はありません。多くの場合、自然や偶然の出来事からインスピレーションを得ています。

書籍と資料

http://www.alistapart.com

http://webdesignledger.com

スマッシングマガジン

PSD Tuts

アブゼイド

UXブース

留意すべきいくつかのポイント：

1. すべてのデザインが問題を解決します

「これをきれいにするにはどうすればよいか」という観点から設計について考えるのをやめます。「これを人間的に可能な限り使いやすくするにはどうすればよいか」という用語で考え始めます。

あなたがウェブサイトを作っているとき、これは、最も広い意味で、あなたがビジネス上の問題を解決していることを意味します。

ビジネス目標を実現するウェブサイトが存在します。

ウェブサイトのユーザーも自分の目標を念頭に置いています-彼らは何かを購入したり、製品を比較したり、トピックを読んだりしたいかもしれません。

それは、設計者として、あなたの仕事ですビジネスを助ける、できるだけ多くのユーザーがビジネス目標を満たすとすることを確認することで、ユーザーが助ける彼らは自分の目標を満たすことができるようにウェブサイトをナビゲートします。

たとえば、eコマースストアを設計している場合：ここでのビジネス目標は、製品を販売することです。そして、ユーザーの目標は、できるだけ早く購入したいものを正確に見つけて、できるだけ早くチェックアウトすることです。

設計プロセスの大部分は、問題の解明、ユーザーのプロファイルの構築、ビジネス目標の実現方法の検討などに費やされます。

色、フォント、レイアウト、すべてのデザインの決定は、ウェブサイトの目標によって決定される必要があります。

2. 物事をきれいにする繰り返しです。

それが一貫性です。

たとえば、フォントのペアリング。フォントは、詳細の繰り返しに基づいて、同様の特性に基づいてペアリングされます。

試合はファーナムとベントン・サンスです。

この投稿2によると、これら2つのフォントは次の理由で一致しています。

[...]顔は小文字のしゃがみ具合が似ており、明らかに短いアセンダーとディセンダーがあります。[...]両方の小文字は幅広です。

特定の特性を繰り返すことで、これら2つのフォントがうまく機能します。こちらのウェブページでご覧いただけます3。

繰り返しはデザインに調和をもたらします。そして調和はデザインを美しく見せます。

しかし、ご覧のとおり、ファーナムとベントンサンは対照的です。ファーナムはセリフフォントであり、ベントンはサンセリフです。

なぜコントラストが必要なのですか？デザインに類似点を導入しようとしていますか？

ええ、はい。しかし、繰り返しが多すぎると、デザインが鈍くなり使いにくくなります。

治療法は対照的です。

3. コントラストは、ユーザーが自分の道を見つけるのに役立ちます

異なる要素を互いに区別するのに役立ちます。見出し、ナビゲーション、ボタンなどの重要な要素を見つけるのに役立ちます。

要素の重要度が高いほど、周囲とのコントラストが強くなります。

繰り返しを使用して、設計の一貫性を保ちます。他の人が言ったように—2つのフォントは限られたカラーパレットなど。

要素を他の要素と区別する必要がある場合は、コントラストを使用します。

知っておくと良いことですが、...次のウェブサイトの設計にはまだ役立ちませんよね？

まあ、私もそのための解決策を持っています。

Webデザインを改善するためのステップ1は、他人の作業を観察して吸収することです。それの多く。それが「インスピレーション」の源です。

あなたが好きな100のデザインを見て、それらを分析し、パターンを見つけ始めます。あなたの脳は、これらのパターンをあなたが見たすべての類似したデザインのバリエーションであるあなた自身のデザインに結合するのに役立ちます。「ユニーク」なものを作成する必要はありません。

概要：次回、サイドプロジェクトの設計を開始するとき

多数の同様のWebサイト/ Webアプリを調べて、それらのデザインの簡単なスケッチを作成します。彼らが使用したワークフローに注意してください。なぜ彼らはそれを使用したのですか？使用した形状、色、フォントに注意してください。

次に、このプロセスを実行して、独自のデザインを作成します。

1. プロジェクトを定義します。プロジェクトに没頭し、次のことについてもっと知りましょう。

   1.その目的、意図された結果

   2. その（将来の）ユーザー
   3. ユーザー/訪問者向けの意図したエクスペリエンス
   4. プロジェクトの背後にあるブランド
2. 必要なリソースを取得します。（サンプル）コンテンツを手に入れます（同様のサイトから借ります）

3. コンテンツに形を与える

   1. コンテンツをタイプセットする書体を選択します（サイトの雰囲気やメッセージに合ったものを選択します）
   2. 本文コピーのフォントサイズを選択する
   3. ボディコピーのフォントサイズからモジュラースケール（比例調和次元のテーブル）を生成します（Type Scale-A Visual Calculatorを使用）
   4. プロジェクトの要件に基づいてさまざまなレイアウトをスケッチする
   5. モジュラースケールの助けを借りて（HTML＆CSSで）レイアウトを構築します。列幅、行の高さ、見出しサイズ、下余白、列（必要な場合）
   6. ブランドガイドラインに従って色を適用する

あなたはできますここで、このプロセスから、各ステップについての詳細を読みます。

さらにいくつかの：

1. 心に強く訴えるウェブサイトのコレクションを一目見ましょう。心に強く訴えるウェブサイトコレクションのコレクションマザーロードには、かなりの数のコレクションがリストされています。別の2つの良いサイトはsiiimple.comとminimalsites.comです。

2. Virtuosi Mediaの「Remove Clutter」の提案は明確な理想ですが、初心者が行うクラッタのあるサイトは、初心者が行うミニマリストのサイトよりも見た目が良いです。クラッターは、他の貧弱なデザイン要素を幾分カモフラージュし、コンテンツに注意をそらします。典型的なビジネスサイトは、ほとんどすべてのテンプレートと同様に、あまりにも散らかっていますが、それでも十分に見た目はプロフェッショナルです。
   
   フォント、コントラスト、ネガティブスペース、カラーリング、密度、フローなどと密接に関連しているため、通気性に優れた真に優れたデザインの効率的なサイトを作成できます。

3. すべてが少し圧倒されるようになったら、テンプレートの購入を検討してください。

UIデザインに興味のあるプログラミングのバックグラウンドから来た人々のために、さらに2、3のリンクを追加します。

• ハッカーのためのデザイン（印刷本）
• ユーザーインターフェイス設計の原則（サイト）
• ステップバイステップUIデザイン（電子ブック）
• The Shape Of Design（無料オンライン版）

いくつかのことがあなたの邪魔にならないので、最初はトラブルに直面します。しかし、あなたは忍耐強く、多くの練習をしなければなりません。私がデザインを始めて4年前の仕事を振り返ると、その仕事をしたとは信じられません。

あなたは本当に他の素晴らしいデザイナーの仕事を探す必要があります。そのためには、Dribbbleの優れたデザイナーに従う必要があります。また、他の非常に重要なことは、www.minimalistgallery.comなどのCSSギャラリーサイトで最新のデザインを定期的に見ることです。

すべての最高を願っています!!!

毎日のニュースレターを入手するには、http：//sidebar.io/を購読してください。各記事は、何らかの方法で役立ちます。デザインについて自己学習する別の素晴らしい方法はドリブルです。

これは非常に一般的なヒントかもしれませんが、私にとっては、誰かが優れたデザイナーかどうかを本当に伝えるものです。

空白、マージンおよび配置。

滑らかでプロフェッショナルなデザインを作成するための鍵です。それらは一種の「呼吸空間」を作成し、デザインが組み立てられるかどうかを実際に決定できます。フォントと同様に、特定のマージン/空白に固執して、レイアウトがきれいに見えるようにします。

このようなことを追跡するには、グリッドまたはガイドを使用してデザインすることが非常に便利です。

あなたの質問は、「デザイナーとして、私は常にアプリプログラミングの基本的な知識が必要だと感じています」のようなものです。どちらも広大なエリアであり、互いに必要なスーパー重畳領域があります。良いニュース：あなたは興味を持ち、それらの重要性を理解しています。悪いニュース：適切なコースや方法論がなければ、優れたデザインを作成するために必要なことを完全に理解する簡単な方法はありません。しかし、最初のステップとして、この本は何らかの意味で、意味のある視覚システムの構築を安全に開始するのに適しています。

デザイナー以外のデザインブック