なぜ人々は私のサイトがひどいように見えると私に言い続けるのですか？

私はウェブサイトを開発し、最近仕事を探していました。事実上すべてのインタビュアーは、それをざっと垣間見た後、私のサイトはひどく設計されたと私に言った（ただし、コンセプトは気に入りました）。私はソフトウェアエンジニアですが、デザインの部分も正しく理解しようとしています。私はそれを再設計しようとしましたが、何が変更されるのか分かりません。

これが今の様子です：

私は自分のサイトに固有のヒント、またはサイトのデザインを全般的に改善する方法について本当に感謝します（サイトのデザイン方法を説明しているサイトをいくつか訪れましたが、それは役に立たないようです:)）。

編集1：先ほども言ったように、機能を紹介する前でも、見ただけでは悪い印象を与えがちです。そのため、選択した色やレイアウトに問題があると思います。そして、特定のサイトのデザインは、特定のストーリーが文学の学生に教育的であり、特定のアルゴリズムがソフトウェアの学生に役立つのと同じように、デザイナーにとって役立つと考えていました。ありがとう。

補足：機能：重要な場合は、サイトが達成することを目的としています（ごく簡単に）：ユーザーはトピックを追加でき、トピックごとに質問とその回答を追加できます。このサイトでは、ユーザーが結果を確認して比較するための「テスト」と「クイズ」を作成しています

編集2：これは別のprintscreenです。

編集3：明確にするために、これらのスクリーンショット以外は私のランディングページです。これらはトピック固有のコンテンツページです。

まず第一に、この回答のすべてがMHOにすぎず、普遍的な真実ではないことを強調したい;）。

ソフトウェアエンジニアは、どのプロジェクトにおいても、明確で明確な構造を持つことが重要であることを理解しています。ほぼ同じことが「ビジュアル」アートとデザインにも当てはまります。私はデザインを「視覚的なカプセル化」と見なす傾向があります。デザイナーは、ターゲットオーディエンスに伝えたい情報の構造を知っています。たとえば、彼は本をデザインしています。この本は章ごとに分かれており、各章は章ごとに分かれています。彼は、主要な事項がいくつかのノート（マージンノート、脚注、サイドノート）で注釈されていることを知っています。今、彼は彼の「武器」を使用してこの構造を「見える」ようにしなければなりません。彼は1つのフォントサイズと形状を使用し、連続するすべてのページをグリフの塊で埋めることができますが、その場合、含まれている情報構造を知るには、すべてを読み、解釈し、理解する必要があります。設計者は、さまざまな情報の重要性/レベルを読者に「提案」することもできます。トリックの1つは、フォントサイズを使用して、提示された「データ」のグラデーションを示すことです。これが行われれば、読者は本文と脚注などを区別するためにテキストを読む必要はありません（もちろん、解釈するだけです）。情報の重要性と相互的な「位置」は、視覚的に「説明」されます。リーダーは情報を簡単に「カプセル化解除」できます。また、ビジュアルドメインで行われている一種のシリアライゼーション/デシリアライゼーションプロセスと見なすこともできます（抽象的な情報は「ビジュアル」スペースにキャストされます）。これは簡単な単純化ですが、まず第一にそれで十分だと思います。これが行われれば、読者は本文と脚注などを区別するためにテキストを読む必要はありません（もちろん、解釈するだけです）。情報の重要性と相互的な「位置」は、視覚的に「説明」されます。リーダーは情報を簡単に「カプセル化解除」できます。また、ビジュアルドメインで行われている一種のシリアライゼーション/デシリアライゼーションプロセスと見なすこともできます（抽象的な情報は「ビジュアル」スペースにキャストされます）。これは簡単な単純化ですが、まず第一にそれで十分だと思います。これが行われれば、読者は本文と脚注などを区別するためにテキストを読む必要はありません（もちろん、解釈するだけです）。情報の重要性と相互的な「位置」は、視覚的に「説明」されます。リーダーは情報を簡単に「カプセル化解除」できます。また、ビジュアルドメインで行われている一種のシリアライゼーション/デシリアライゼーションプロセスと見なすこともできます（抽象的な情報は「ビジュアル」スペースにキャストされます）。これは簡単な単純化ですが、まず第一にそれで十分だと思います。また、ビジュアルドメインで行われている一種のシリアライゼーション/デシリアライゼーションプロセスと見なすこともできます（抽象的な情報は「ビジュアル」スペースにキャストされます）。これは簡単な単純化ですが、まず第一にそれで十分だと思います。また、ビジュアルドメインで行われる一種のシリアライゼーション/デシリアライゼーションプロセスと見なすこともできます（抽象的な情報は「ビジュアル」スペースにキャストされます）。これは簡単な単純化ですが、まず第一にそれで十分だと思います。

今、あなたのデザインは。個人的には、どこから始めればいいのかわかりません。私はそれをすべて読み、すべてを理解し、すべてを考え、次に正しいと思う順序で物事を戻す必要があります。それは私にとって読者としての多くの仕事です。ここで最も重要なものと最も重要でないものを一目で定義することは困難です。内容を理解するために時間をかけても、特定のデータへの道を見つけるのに役立つ視覚的な「ランドマーク」はあまりありません。考えてみてください。車を駐車場に置いたままにすると、覚えやすい「ランドマーク」を探します。あなたの車がどこにあるか。あなたがウェブサイトをどのように使用しているのか、最も頻繁に使用しているオプション/リンクがどこにあるのかをどのように思い出すことができるのか、ちょっと考えてみてください。「サイト上部にあるこの赤いロゴから右に2番目の正方形」のようなリンクを探しているのではないですか？読書なし–画像/場所を覚えているだけです。

ここでの最大の問題は「醜さ」ではなく、重要度のグラデーションの欠如だと思います。データを通じてWebサイトの訪問者を「リード」するようにしてください。彼に最初に見てほしいことは何ですか？そこからどこへ行く？このようにして、「リードフロー」/「ワークフロー」を作成します。読者がたどる特定の経路を（多分？）誘導します。ルートが2つある場合は、それらをできる限り分離するようにしてください（たとえば、目次/メインの概要/構造の説明、ログインフォームの「パス」など、メニューの「パス」。 ）。これを直せば間違いなくデザインが良くなると思います。多分それはすぐに「美しく」はならないかもしれませんが、少なくともそれはよりアクセスしやすく、理解しやすくなり、それによって副作用として、より審美的に満足します。

私はそれがあなたにとって何らかの意味があることを願っています:)

特に気に入らない点は次のとおりです。

• これは、「フロントエンド」や人々が見るものではなく、Webサイトの「バックエンド」または「管理者」の部分、特に何らかの形のコンテンツ管理システムに似ています。特に、PhpMyAdminが思い浮かびます。
• 使用されている色の不一致。ロゴ（少し窮屈すぎます）には既にいくつかの色が含まれているため、これらの色を使用してサイトの配色を作成できます。この配色は、テーブルの縞模様、リンクの色などに適用されます。
• 対照的なビジュアルが多すぎます。私は通常、設計をより単純化し、標準化することを提唱しています。ただし、このスクリーンショットでは、次のことがわかります。
  • 「すべて」ボックスは、ハード直角ボックスです。
  • サイドバーナビゲーションは、丸みを帯びたコーナーを使用します。
  • サブトピックは放射状グラデーションを使用します。
  • どのボックスにも十分な「パディング」がありません。「サブトピック」リンクの単語がどのように窮屈に表示されるかに注意してください。周りにスペースがあると、見栄えがよくなります。

次に、@ thebodzioからの回答は非常に正確であるため、必ず慎重に読んでください。サイトを初めて訪問するユーザーは、最初にどこを見ればよいのかを知るのが難しく、一般に「悪い」デザインの兆候です。

ここでいくつかの良い答えがあるので、いくつかの具体的な例を指摘します。私にとって、ページの基本的な構造はまともです。他の人が言ったように、3列のレイアウトは何年もの間Webデザインの定番でした。問題のほとんどはグラフィックデザインにあります。

そうは言っても、「サブトピック」の相対的な重要性は奇妙に見えます。

• タイトルは「サブトピック」のようなものにすべきですか？

• 右側にあり、トピックヘッダーよりも重要に見えます。おそらく、それをメイントピックの本文に組み込んで、より下位に感じさせることができますか？

• 「サブトピック」の見出しの重みにより、トピックのパンくずよりも重く（より重要に）見えます。

グラフィックデザインの場合、ページのすべての要素の基本原則について自問することができます。

• コントラスト：同じものではない要素は、ユーザーがすぐに区別できるほど十分に異なって見える必要があります。

• 繰り返し：デザインは、同じものが同じように見える場合にのみ見栄えが良くなります。つまり、一貫性を目指します。これは、すべての背景の彩度と明るさが同じで、色相が異なる、またはすべての見出しにグラデーションを使用する（またはグラデーションを使用しない）場合があります。例えば：

  • 「サブトピック」の背景はグラデーション付きの唯一の背景です（ボタンは別物です。そのため、グラデーションを付けると、ボタンの外観が異なり、コントラストが効きます）。

  • 左側のナビゲーションのハイライトは角が丸くなっていますが、他のほとんどの要素には鋭角の角があります

  • 「クイズの設定」（スペルが間違っている）の色がロゴに表示されない。本の色と同じページ要素の色相を取得してみてください

（実際には、色が一緒になることを確認する簡単な方法があります。単一の色から始めて、色相、彩度、または明度の1つだけを変化させます。この方法で生成するすべての色は、一緒によく見えるはずです。）

• アラインメント：アラインメントは、要素を散らばって一貫性がないように見えるのではなく、全体に接続します。例えば：

  • 「Remember me」ボックスが隣のテキストよりも低い

  • 「クイズの設定」は、上のトピックのパンくずリストよりも右側にあります

  • 他のほとんどの本文テキストは左揃えですが、設定は中央揃えです

• 近接性：オブジェクトを近づけると、ユーザーの頭の中でグループ化されますが、オブジェクトの周囲のスペースが少なすぎると、オブジェクトが窮屈になり、個別のアイテムとして見にくくなります。例えば：

  • トピックのパンくずリストやサブトピックの周りにはスペースがありません（私の考えでは、これはグラフィックデザインが完全に開発されていないことを示す最も一般的な機能の1つです）

  • 本文見出しの下の段落の間隔に一貫性がない

Webにはデザイン原則について他にもたくさんありますが、これらは最も重要な4つです。

私はあなたのサイトのデザインの主な問題は、ユーザーインターフェースのデザインほどグラフィックデザインにあるのではないと思います。具体的には、上のスクリーンショットを見ると、「最初に何を試すべきですか？」ではなく、「これは一体何なのか、そして私はそれで何をする必要があるのか」と自問します。

これは、エンジニア（または他のドメインエキスパート）が設計したWebサイトやその他のユーザーインターフェースの一般的な問題です。彼らは、システムの使用方法をすでに知っているため、必要なすべての機能に簡単にアクセスできる限り、問題はありません。 。悲しいかな、これは多くの場合、すべての機能が同様に目立ち、アクセスしやすくなるため、新しいユーザーはどこから始めればよいかほとんど手がかりがありません。

悪いグラフィックデザインはユーザーインターフェースを混乱させる可能性がある限り、ここでグラフィックデザインはある程度の効果を発揮しますが、優れたグラフィックはさまざまなインターフェース要素の意味と関係を明確にし、ユーザーの目を最も重要な要素に引き付けることでユーザーインターフェースを強化できます。しかし基本的には、問題は、見栄えを良くする方法よりも、ユーザーに何を提示し、どのように構成するかということです。

では、もう少し具体的に説明しましょう。私の最初のアドバイスは、単純化です！Googleのオリジナルのフロントページのデザインからインスピレーションを得たいと思うかもしれません。基本的には、ロゴ、検索ボックス、2つのボタンの3つの要素がありました（2つ目のボタンは不要なものだと主張する人もいます）。ああ、そしてより多くの他のものへのいくつかのリンク-低く、小さいフォント、および/または灰色で下に表示されることによって二次的に重要であると明確にマークされました-および著作権表示は、明らかに微妙なヒントとして追加されましたページが実際に終了したユーザー。

または、Doodleを見てください。Doodleは、派手な名前とシンプルでありながら効果的なフロントページのデザインを備えています。便宜上、私は彼らのフロントページのスクリーンショットを撮り、上にいくつかの赤い落書きを追加しました：

Doodleはあなたのサイトと比較するのに非常に優れたサイトです。彼らのサイトは基本的に、ユーザーが自分のコンテンツ（クイズ、イベントスケジュール）をデザインし、他のユーザーにそれを操作するように招待するためのフレームワークです。大きな違いは、デザインとは異なり、Doodleの人々はユーザーをプールの奥に投げ入れて沈むか泳ぐのを待つのではなく、ユーザーをインターフェイスにやさしくリラックスさせる多くの努力を費やしているということです。

彼らのフロントページを見ると、特に落書きはありませんが、明らかなのは、その上にあるもの（特に無関係なもの）がどれほど少ないかです。確かに、ページの下部には小さなメモやリンクがたくさんありますが、それはすべて「スクロールせずに見える範囲」であり、新しいユーザーが無視するものです。2番目に目に見えるのは、ユーザーが最初に見る可能性が高い大きな親しみやすい文字で、サイトの内容を説明する8つの単語（！）の宣伝文です。最も目に見えるものは、それをすべて簡単な外観と魅力作り、簡単な絵で大きなグラフィック上映、ワークフローの主要なステップです。そしてそれらの間には大きなボタンがあり、ユーザーはそれをクリックして開始することができます。

実際、ページの上部にはクリック可能なものが4つしかありません（ユーザーが期待するとおりにクリック可能なロゴは除きますが、フロントページに戻るだけです）。最初のステップへの2つのリンクイベントスケジューリングウィザードでは、すぐにジャンプする自信がないユーザー向けの既定の例と、右上隅にある確立されたユーザー用のポップアップログインダイアログを開く目立たないリンクの1つ。それで全部です。

それではあなたのサイトはどうですか？何かのように私のために飛び出し、あなたのスクリーンショットの最初のものかもしれない、少なくとも大型タイプにし、「コンテンツ領域」のように見えるものの真ん中に、短い緑色の見出しは、ある時おそらく価値が見ていること。悲しいかな、そこにはあまり興味はありません。「トピック情報」セクションには、隅に小さな印刷が必要な些細なメタデータがあります。「サブトピック」セクションには、他の同様のページへのリンクがいくつかあります右上隅にあるものを複製するには、「リソース」セクションは単に空です。それに、それをすべて読んだ後でも、サイトの内容やそれで何ができるのか、まだわかりません。

それで、あなたのサイトで私は何ができますか？ さて、あなたは私がクイズを作成して取ることができると言います、それで、「クイズを取りなさい」および「クイズを作りなさい」と言うフロントページにいくつかの大きくて魅力的な外観のリンク/ボタンを置いてみてはいかがですか？（前者の方が目立つはずです。新しいユーザーは、クイズを作成するよりクイズを受ける可能性が高いためです。ただし、2番目のクイズをフロントページに含めると、少なくともユーザーはクイズを実行できることを知ることができます。）また、あなたのサイトが何であるかについての短い説明-短い言葉から短いパラグラフまで-も良いでしょう。（これは、「続きを読む」リンクを追加するのに適した場所でもあります。）

または、それを反対側から見ると、現在のページから何を失う余裕がありますか？さて、私は本当に「ほとんど」と言いますが、（メタデータダンプのほかに）ジャンプアップする明らかなことは、上部のログインフォームです。もちろん、確立されたユーザーに簡単にログインする方法を提供することは良いことですが、それは実際に各ページにログインフォームを表示する必要があることを意味しません。代わりに、Doodleと同じようにして、リンクからアクセスできるポップアップログインフォームを用意します。（JavaScriptがオフになっているユーザーの場合、リンクのフォールバックターゲットとして別のログインページも用意することをお勧めします。）

他にも失う可能性のあるものはたくさんあります。たとえば、新規の未登録ユーザーとして、「削除」リンクのように見えるのはなぜですか？ページを本当に削除できますか？はいの場合、なぜですか？そうでない場合、なぜそこにリンクがあるのですか？

同様に、「（703利用可能な質問）」というメモは、インターフェース要素のように見えるので、意味がありません。サイトの深さで訪問者を感動させたい場合は、それをそれが属する場所に配置します。コンテンツ領域の適切な印象的な外見に入れます。（「すでに703の質問が利用可能です。さらに質問があります！」

最後に、すべてが相対的であることに注意する必要があります。 たとえば、TV Tropesには恐ろしいユーザーインターフェースがありますが（実際はあなたのものと同じです）、負荷が高く、相互にリンクしている優れたコンテンツで補われているため、ほとんどの新規ユーザーはそれを実現できます。ナビゲーションインターフェイスに触れる必要はまったくありません。実際、これはWikiサイトではかなり一般的です。ウィキペディアは本当にそれほど良くはありません。ただし、問題は、その効果が機能し始める前に、コンテンツのロード（またはコンテンツを作成することにコミットしているユーザーベース）をすでに持っている必要があることです。

あなたの "デザイン"はいいでしょう... 1995年です。実際、時代遅れです。これは、エンジニアは常に思い付くことを設計です:-)あなたがすることができる最も簡単なことは、すなわち、いくつかのCSSのフレームワークを使用することでTwitterのブートストラップ、Zurb、何でも。フレームワークは、あなた自身の「創造性」からあなたを保護するのに役立ちます;-)

レイアウトの観点から見ると、Webサイトに実際に問題があることは何もありません。それは左上にロゴがある標準的な3列のレイアウトです。この全体的なフレームワークは古くから使用されてきましたが、それが機能するからです。最近のほとんどのWebサイトは、少数の一般的なレイアウトに基づいて、依然として同様の原則を使用していますが、より洗練されたグラフィックスに埋もれています。（非常に現代的なものに基づいて批判する人々に非常に注意してください-数年が経過したからといって、人間が情報をどのように取り込むかが突然大きく異なるというわけではありません。）

メインのナビゲーションリンクを左側に配置するか、上部に配置するかについて疑問を抱く人もいますが、それらの違いによってサイトが成功したり壊れたりすることはありません。

いいえ、問題は配置の選択にありません。それはグラフィックス、色の選択、物事のサイジングなどです。私は配置に関するすべてのレイアウト、感触と外観に関するすべてのデザインという用語を区別しています。誰もが私とまったく同じ方法でこの用語を使用するかどうかはわかりませんが。

レイアウトは基本的に問題ないと述べましたが、デザインに問題があり、残念ながら解決するのが難しい状況です。レイアウトに問題がある場合は、「検索フィールドをここに移動する」、「ロゴをそこに配置する」など、より具体的なアドバイスを提供できます。レイアウトは実際にユーザビリティの実装です。

けれどもデザインは感じとスタイルについてである、そしてそれはもちろんコメントするのがはるかに難しい。多くの色の選択肢をデフォルトのままにしただけです（背景は白、リンクは青、インターフェイス画像はほとんどありません）が、代わりにどの色とグラフィックスを表示するかを言うのは非常に困難です。 。それはあなたがどのような感じがしたいかに大きく依存します。退屈で安全なブルーとグレーは企業の雰囲気、ピンクと黄色は無邪気で子供っぽい雰囲気、ホットな赤と黒はエキサイティングなナイトクラブの雰囲気...そして、それでも、これらの例の色を使用するだけでは必ずしも私は彼らに愛着を感じています。悪魔は細部にあります。

なものと、より具体的なレイアウトの問題と、よりエーテル設計上の問題、間にいくつかの重複がありthebodzioはで述べている彼/彼女の答えように見出しおよび脚注とのフォントサイズを変更することについては、重要性を強調し、ヘルプサイト訪問者を案内するために、彼らが欲しい情報を通して。あなたは彼/彼女のアドバイスに注意する必要があります。

しかし、あなたの目標がデザイナーと提携するのではなく、説得力のあるサイトデザインを適用する方法を自分で学ぶことである場合、私は恐らくあなたは単に答えを得ることではなく、旅に出ています。優れたデザイナーになるには、デザイナーの数と同じくらい多くのルートがあり、そこにはたくさんのリソースがあるので、学ぶ機会が不足することはありません。

この1つの特定のサイトのデザインセンスを獲得するための最短ルートとして、あなたが好きな他のサイトと、あなたが作っているものと同様のサービスを提供している他のサイトを見て、あなたが好きなものと比較して比較し始めますそれらとあなたのサイトで欠けているもの。

残念ながら、それは可能な限り客観的であり、氷山の先端の最上部のポイントにすぎません。しかし、私が言ったことのいくつかが役に立てば幸いです。

人々があなたのサイトに否定的に反応すると思う理由はここにあります：それはあまりにも多くの質問を引き起こします！

あなたが言ったように、機能を紹介する前に。それは人々がそれが何であるかを理解していないことを私に告げます。これは、Webサイトが最初に回答する質問です。それがウェブ上にあるなら、あなたは彼らの隣に立ってそれを説明することができないからです。

「世界のすべての知識」は、サイトで見つけられるもの（またはそのことについて非常に信じられない）またはログインする必要がある理由を正確に伝えていません。したがって、これらの質問への回答がサポートされていないため、デザインの評価は低くなっています。

したがって、最初に「このサイトは何について」と答える必要があります。たとえば、ミッションステートメントを使用します。それはあなたには明らかかもしれませんが、Web上の他のすべての人にはわかりません。主な目的は何ですか？クイズを取るか、クイズを作成しますか？人々に最初にしてもらいたいことは何ですか？ログインする？クイズに答えますか？一つ作る？これらは、人々があなたのページに留まることを望むなら答えるべきものです。

次に、情報を整理する必要があります。コンテンツとは何か、メタ（ロゴ、ナビゲーション、ログイン）とは何か。stackexchangeを見てください。コンテンツ（明るい）はメタ（暗い）と明確に区​​別されます。

一緒に行くものをグループ化します。ナビゲーションから切り離されたブレッドクラムがあります。視覚的にも言葉遣い。メインナビゲーションに「すべて」が見つかりません。そこにどう行けますか？

なぜこれなのか 提示された情報を人々がより早く理解するほど、彼らは滞在し、交流する可能性が高くなります。彼らが混乱し、答えることができない質問に直面した場合、彼らは否定的に反応します。

それがあるので。それは意味がありませんでした:)それは単なる冗談でした、私の最良の答えは、誰かが働いていない場合は、デザインパートで誰かと一緒に働くことです。また、最初からやり直すだけですが、物事をよりシンプルに保ち、コンテンツが呼吸できるようにします...

いくつかの初見のヒント/アドバイス/推奨事項： hタグ（タイトル）フォントをpタグより大きく、はるかに大きくします（タイトルフォントサイズ30〜48の範囲の何か、および段落（11〜13））。少なくともコンテンツのブロック間に20ピクセルのマージンまたはパディング（たとえば、maring-bottom：20px;ログインバーの場合）を使用すると、より分離して読みやすくなります。

誰かにあなたに適切なロゴをデザインしてもらってください、あなたが今持っているものは...良くありません。別のフォント、おそらくサンセリフフォントを試してください（Open Sans、Googleフォントで無料、またはArial-Helveticaなど）。

クールだからか、見た目がいいからといって色の感覚がない場合は、グラデーションを使用しないでください。無地の色に固執し、最後にCTAのみでグラデーションを試してみてください。行動を促すフレーズ）領域（ボタンなど）。

できることはたくさんありますが、通常、これらのことは時間の経過とともに起こります。多くの優れたデザインを見て、その結果がどのようにして生成されたかを理解しようとすることによって、訓練された目が得られます...そのための最良の方法は、自分で同じ結果を試して再現してみてください。その過程で、UIの外観や操作、体験を行う理由と方法についての知識と洞察を得ることができます。

本の再推薦： Smashing Book [1番目と2番目の本]とウェブサイト：

http://smashingmagazine.com

そしてもう一つ：http : //www.bamagazine.com/

うわー！あなたは本当に応答を生成しました！少なくともあなたはあなたのデザインが見過ごされていないことを知っています;）

あなたの質問に対する短い答えは次のとおりです 。サイトはソフトウェアエンジニアによって設計されたように見えます。それはあなたがすることであり、きっとあなたはそれをうまくやっていると確信しています。今あなたはあなたのアイデアを親しみやすくするためにUIデザインをする人を必要としています。それを回避する方法はありません。あなたは週末にデザインを学び、問題を修正するつもりはありません。

ポートフォリオに記入して自由を与えようとしている学生や若いデザイナーを見つけましょう。あなたは、このプロジェクトのために、仕事をしている人が清潔で整然としていることを望みます。ミニマリズムを好むデザイナーを見つけることができるかどうかを確認してください。

私はプロのデザイナーではないので、ユーザーの観点から、そしてさまざまなWebサイトを閲覧した経験から、いくつかのことを指摘できますか？

1. ページの背景色は白ですが、セクションヘッダー/ハイライトは黄色または白の色合いです。少しコントラストの強い色を試すことができ、要素の階層に一致するようにコントラストのレベルを設計できます（より高レベルのヘッダー=詳細コントラスト）または固定ヘッダーコンテンツの配色（例：ヘッダーのロゴに白、ヘッダーテキストに白、コンテンツテキストに濃い灰色で表示される本の2ページ目のような深いオレンジ色）。
2. 自由空間あまりにも多くのページでは、自由空間は、ユーザーが息をする場所を与えるために良いのですが、あまりにも多くの空き容量がバックオフィス/アンダーメンテナンスのようなあなたのページの外観を作ります。たとえば、最初の画面の「サブトピック」セクションは、「すべて」セクションの下のスペース全体に広がる可能性があります。また、なぜ2つの冗長なサブトピックセクションがあるのですか？
3. コンテンツのIMO配布は階層の下にある必要があります。Googleのコードページ（サイトに非常によく似ている）、Wikipedia、このサイトなどのサイトを例にとると、サイトのヘッダーにかなりのスペースが費やされ、コンテンツが表示されます。また、今では多くのページでヘッダーのようなツールバーが使用されており、色が異なり、一般的なメニューとサイトのロゴが埋め込まれていますが、ロゴが大きすぎてそれができないと言うかもしれません。たとえば、ページの右端
   のサブトピックセクションを見てください。それらは、現在のコンテンツの専門分野のように見えますか？むしろ、ランダムなタグや関連トピックのように見えます。あなたはさまざまなドキュメントページのようなツリーのような構造は、パンくずリストも不要にします。また、IMOはそのツリー（ナビゲーション）の適切な場所を左側のサイドバーに配置し、残りのアクションはブレッドクラムの場所に配置します。
4. 均一性は分布と同じくらい重要です。ボタンの目的や重要性に応じて、ボタンの色を変えることができます。しかし、それらの構造は同じままである必要があります。「ログイン」ボタンは鋭角であり、「クイズを今すぐ行う」は角が丸いです。あなたはそれらのアプローチのどちらかを取り除きたいかもしれません。
5. リンクとアクションは同じではないので、それに応じて名前を付ける必要があります。左の「削除」メニューは削除されたアイテムや削除アクションを反映するように、言うことはできません。Gmailと同じように、ユーザーに削除ボタンと削除済みアイテムのメニュー/タブを提供します。
6. フォントは目的を反映するために非常に重要です。アートページや文学セリフファミリーを作成している場合は、この方法に適していますが、eラーニングサイトを作成するには、さまざまなサイズで読みやすく、拡張が少ない（細長いエッジのような）フォントを選択する必要があります。Sansはその点で優れています。ウィキペディアは、例えばそれを使用しています。サイズと重量の選択も重要です。統計が重要な（そして変化している）場合は、数字を太字にします（例：703の利用可能な質問）。2番目の画面で質問の数を選択するために行ったように。ヘッダーIMOのイタリック体は見栄えがよくありません。代わりに太字を使用しないのはなぜですか？
7. これは非常に私の個人的な見解のようですが、私はいくつか考えて、より丸みを帯びた角は、箱状の感情からユーザーを和らげるだろう。

私はプロのデザイナー兼開発者です。デザインで行う最も重要なことは、Fireworksなどのグラフィックプログラムを使用して、実装する前にデザインを作成することだと思います。これにより、変更や実験が簡単になります。開発の背景から来て、その重要性を知っています。

どの職種に応募するのかわかりません。グラフィックデザインのポジションに応募する場合は、プロのグラフィックデザインを学ぶために少し時間がかかる場合があります。開発の立場にある場合は、プロのデザイナーに少しお金を払って素敵なデザインを作ったり、何ヶ月もかけて学ぶ代わりに簡単な修正を行ったりするのが理にかなっています。

簡単な修正が必要な場合は、具体的な方法を説明して、最初に説明します。ここでの答えは良いです-しかし、それらはあまり具体的ではありません。私が試してみます。

可変幅の設計は、固定幅の設計より常に少し注意が必要です。3カラムデザインを選択するのは正しいと思います。内容は正しいですが、デザインはそれほど良くありません（私の意見では）。

これが私がやろうとしていることです（おそらく1日もかかりません）：

1. ロゴから始めます。とても忙しいようです->もっとシンプルにしてください。より鮮やかな色を使用します。黄色は汚れて見えます。より単純なフォントを試してください。
   • ロゴを作成したら、サイトの色をそれに合わせることができます
2. ウェブサイトに関するすべてが「風通しの良い」ものである必要があります。だから物事を窮屈にしないでください。
   • 左の列はもっと広いはずです。現在の幅の1.5倍
   • 上部には、ログインフィールドの周囲の間隔を広げる
   • 右側のサブトピックはそれぞれ新しい行に配置する必要があります。それらが互いの間に押しつぶされないように、それらの周囲の間隔を大きくします
   • サブテーブルは、セルでより多くのパディングを使用でき、タイトルdivは、より多くパディングできます。
3. コンテンツ全体が途切れるのではなく流れるはずです。つまり、可能な限り揃え、均一なフォントと適切なサイズを使用します。
   • 中央の列「世界のすべての知識」は、残りのコンテンツでは場違いに見えます。多分それを左に浮かせ、下線を取り除き、そしてタイトルよりも確実に小さくしてください。
   • ページのコンテンツが揃っていません。サブコンテンツをサブタイトルに左揃えすると、見栄えが良くなります。
4. 上部のログインフィールドをよりよくすることができます。
   • テキスト入力ボックス（グレー表示）内にラベルを配置できます。それはそれをよりきれいにします。
   • あなたは私のチェックボックス/フォントをはるかに小さくすることができます。これは最も重要な機能ではないため、重要な部分ほど大きくすることはできません。

これはあなたのサイトをインターネット上で最も素晴らしいサイトにすることはできませんが、うまくいけば検査に合格するように十分に磨き上げるでしょう。:)

うわー...それはかなり悪い笑です。

デザインのセンスがないと、いくつかの提案で何かを再設計することを学ぶことができないと思うので、実際に誰かにレイアウトを依頼してもらうべきだと思います。地元のアートカレッジに連絡して、クラスはそれを実際の例として取り上げます。

しかし、それが失敗した場合、これが私のいくつかの提案です。インデックス/ランディングページは、その名前にもかかわらず、看板や雑誌広告のように機能する必要があります。メッセージを数秒で高速に伝える必要があります。情報ではなく「メッセージ」と言ったことに注意してください。情報は、視聴者が探すときに必要ですが、すべてが少しスクランブルされた目次のようにレイアウトされている必要はありません。

だから、メッセージに関しては...最初に考えることは、彼らが何を見ているのかということです。あなたのカテゴリーを読んでも、そのページが何であるか私には分かりません。

「何を」それは配色、全体的なレイアウト、見出しのタイトルによって伝えられます。

それが何であるかを解決した後、あなたが彼らに最初に何を見て欲しいかを決めてください。私の選択は、Practice make Perfectのロゴであり、そのサイズを大きくして、ヘッダーからポップします。しかし、何か他のことに焦点を当てたり、何らかの行動を促す理由があるかもしれません。

あなたが最も重要なことは「世界のすべての知識」だと思います。なぜなら、あなたはそれを中央に置いて（悪い考え）斜体にし（悪い考え！）、それ自体の周りにたくさんのスペースを与えたからです（良い考え）。言葉そのもの...それが何であるか、または何であるかは明確ではありません。

ランディングページ全体を3つのデザイン要素と3つのレベルの情報重要度に分割するようにしてください。彼らが最初に目にすべきことは何か、自分が最初にすべきことは何なのかを自問してください。2番目、3番目は何ですか？それに応じて再設計してみてください。

使用する色を減らして、意味を持たせてください。なぜ、テキストの周りにランダムに3つの異なるブルーを散りばめたのですか より多くのフォントサイズ（！）を使用します。これを3に分割するのは良い出発点です。最も重要なものにはLARGEフォント、セカンダリには中程度のフォントなどです。

私の最後の提案は、コードを書く前に、最初に設計を行うことです。紙とペンまたは鉛筆から始めて、ページをブロックすることをお勧めします。簡単なスケッチで、実際の単語を記述しないでください。ヘッダーに対してコンテンツ領域の大きさを決定するときに、領域をブロックしてください。 、サイドバーの大きさなど。

次に、グラフィックスプログラムでより完成した設計を行います。物事を動かし、配置を実験してください。雑誌のページのように機能する必要があるページをデザインしていることを思い出してください。視聴者を一時停止させ、見せるところを見せてもらい、期待どおりの行動をとらせるようにしてください。

そして、デザインを見てみましょう。見てください。コンテンツを評価せず、代わりに、Webページによって伝えられているメッセージを探します。間隔、色、フォントサイズをどのように使用しますか？良いデザインをエミュレートしてみてください。幸運を

アートスクールの提案を検討してください。グラフィックデザインプログラムは、学生向けの現実世界の再設計プロジェクトを頻繁に探しています。

私がこのスレッドから収集する主な問題は、魅力的な何かを作成する方法を学ぶことよりも、「デザイン」の議論や防御に関心があることです。典型的なソフトウェアエンジニア。ページをコンポーネント要素に分解し、これらの要素をテストおよび精査した後、コンポーネントを統合すると、要素が数学的に優れた設計を列挙するはずであると確信できます。次に、この質問を投稿することで、ページをコンポーネントに切り分けて、それぞれのメリットを主張し、回答プロバイダーが言ったことにどのように反応するかを議論できると思います。

あなたがUXを吸うことを受け入れる用意があるまで、あなたはこの問題を抱え続けるでしょう。上で述べたように、グラフィックデザインは感触についてです。グラフィックデザインはエンジニアリングデザインとは異なります。数学的に何かを構築し、それを他の「数学的に正しい」ものと統合して、良い結果を期待することはできません。あなたは単にデザイナーがそれを見る方法で世界を見ないので、（おそらく）UXが得意ではありません。しかし、ページを測定して他のページと比較するのをやめたら、完全に自分を開いて、グラフィックデザインについて何も知らないことに気づくことを学ぶと、あなたはそれを取得し始めるかもしれません...