我开发了一个网站，最近正在找工作。几乎所有的面试官在快速浏览后都告诉我，我的网站设计得很糟糕（但喜欢这个概念）。我应该提到我是一名软件工程师，但我真的在努力让设计部分正确。我一直在尝试重新设计它，但不知道有什么要改变的。
这是它现在的样子：
我真的很感激任何针对我的网站的提示，或者关于如何改进网站设计的一般技巧（我访问了一些解释如何设计网站的网站，但这似乎没有帮助:)）。
编辑1：正如我所说，即使在我介绍该功能之前，人们往往只看一眼就会对它产生不好的印象。这让我觉得我选择的颜色或布局有问题。我在想一个特定的网站设计可能对那里的设计师有帮助，就像一个特定的故事对文学学生有教育意义，而特定的算法对软件学生有帮助。谢谢。
附注：功能：如果它确实很重要，这就是网站的目标（非常简单）：用户可以添加主题，并为每个主题添加问题及其答案。该网站创建“测试”和“测验”供用户参加和比较他们的结果
编辑 2：这是另一个打印屏幕：
编辑 3：为了清楚起见，这些屏幕截图都不是我的登录页面。它们是特定主题的内容页面。
首先，我想强调，这个答案中的所有内容都只是 MHO，而不是一些普遍的真理；）。
作为一名软件工程师，您知道在每个项目中拥有清晰且定义明确的结构（顺序）是多么重要。“视觉”艺术和设计的情况几乎相同。我倾向于将设计视为“视觉封装”。设计师知道他/她想要传递给目标受众的信息结构。例如：他设计了一本书。他知道这本书是按章节划分的，每一章又分为子章节。他知道主要内容有一些注释（边注、脚注、旁注）。现在他必须使用他的“武器库”让这个结构“可见”。他可以使用一种字体大小和形状，并用一团字形填充所有连续的页面，但这意味着读者必须阅读、解释和理解所有内容才能知道包含的信息结构。设计者还可以向读者“建议”各种信息的重要性/级别。技巧之一是使用字体大小来显示呈现的“数据”的渐变。如果这样做了，读者将不必阅读（更不用说解释）文本来区分主要内容和脚注。信息的重要性和相互的“位置”被直观地“描述”。读者能够轻松地“解封装”信息。人们也可以将其视为一种发生在视觉域中的序列化/反序列化过程（抽象信息被投射到“视觉”空间）。这是一个很好的简化，但我认为对于初学者来说已经足够好了。如果这样做了，读者将不必阅读（更不用说解释）文本来区分主要内容和脚注。信息的重要性和相互的“位置”被直观地“描述”。读者能够轻松地“解封装”信息。人们也可以将其视为一种发生在视觉域中的序列化/反序列化过程（抽象信息被投射到“视觉”空间）。这是一个很好的简化，但我认为对于初学者来说已经足够好了。如果这样做了，读者将不必阅读（更不用说解释）文本来区分主要内容和脚注。信息的重要性和相互的“位置”被直观地“描述”。读者能够轻松地“解封装”信息。人们也可以将其视为一种发生在视觉域中的序列化/反序列化过程（抽象信息被投射到“视觉”空间）。这是一个很好的简化，但我认为对于初学者来说已经足够好了。人们也可以将其视为一种发生在视觉域中的序列化/反序列化过程（抽象信息被投射到“视觉”空间）。这是一个很好的简化，但我认为对于初学者来说已经足够好了。人们也可以将其视为一种发生在视觉域中的序列化/反序列化过程（抽象信息被投射到“视觉”空间）。这是一个很好的简化，但我认为对于初学者来说已经足够好了。
现在，至于你的设计。我个人不知道从哪里开始看它。我必须全部阅读，全部理解，全部考虑，然后将事情按我认为正确的顺序放回原处。作为一名读者，这对我来说是很多工作。很难一眼就定义出最重要和最不重要的内容。即使我会花时间了解内容，但仍然没有很多视觉“地标”可以帮助我找到获取某些特定数据的方法。想一想：当你把车停在停车场时，你正在寻找一些“地标”来帮助你记住你的车在哪里。试着想想你是如何使用网站的，你是如何记住你最常使用的选项/链接在哪里的。是不是您正在寻找一个链接作为“站点上部此红色徽标右侧的第二个正方形”？没有阅读——只是记住图像/位置。
我认为这里最大的问题不是“丑陋”——我认为这是缺乏重要性等级。尝试通过您的数据“引导”您的网站访问者。你想让他先看到什么？从那里去哪里？这样你就创建了“一个读取流”/“一个工作流”。您诱导（可能是？；））您的读者将遵循的特定路径。如果有几条路线，请尝试使它们尽可能分开（例如，通过菜单的“路径”——例如目录/主要概述/结构描述，通过登录表单的“路径”等。 ）。我认为如果你能解决这个问题，你的设计肯定会改进。也许它不会马上变得“漂亮”，但至少它会更容易理解和理解，并且作为副作用，在美学上更令人愉悦。
我希望这对你有意义:)。
我注意到我不特别喜欢的一些事情是：
然后，一定要仔细阅读@thebodzio 的答案，因为它非常准确：网站的新访问者很难知道首先看哪里，这通常是“糟糕”设计的标志。
这里有一些很好的答案，所以我会指出一些具体的例子。对我来说，页面的基本结构看起来不错；正如其他人所说，三栏布局多年来一直是网页设计的主要内容。大多数问题都与图形设计有关。
话虽如此，“子主题”的相对重要性似乎很奇怪：
标题应该类似于“子主题”吗？
它在右边，看起来比主题标题更重要；也许您可以将其合并到主题主体中以使其感觉更从属？
“子主题”标题的重量使它看起来比主题面包屑更重（更重要）。
对于平面设计，你可以问问自己页面每个元素的基本原则：
对比：不同的元素看起来应该有足够的不同，以便您的用户可以立即将它们区分开来。
重复：只有相同的东西看起来像它，设计才看起来不错。换句话说，以一致性为目标。这可能采取所有背景的形式，具有相同的饱和度和亮度，但色调不同，或者在所有标题上使用渐变（或不使用任何渐变）。例如：
“子主题”背景是唯一一个带有渐变的背景（按钮是不同的东西，所以它上面有一个渐变使它看起来不同，带来了对比）
左侧的导航突出显示有圆角，而大多数其他元素有尖角
“测验首选项”的颜色（拼写错误）没有出现在徽标中，否则您会尝试使用颜色；尝试使页面元素的色调与书中的颜色相同
（事实上，有一种简单的方法可以确保颜色搭配在一起：从单一颜色开始，然后只改变色调、饱和度或亮度中的一种。通过这种方法生成的所有颜色都应该看起来不错。）
对齐：对齐使元素连接成一个整体，而不是看起来分散和不连贯。例如：
“记住我”框低于旁边的其他文本
“测验首选项”比上面的主题面包屑更靠右
首选项居中，而大多数其他正文是左对齐的
接近性：将对象靠得更近可以让它们在用户的脑海中归为一组，但在对象周围留出的空间太小会使它们显得局促并且难以作为单独的项目来查看。例如：
您的主题面包屑或子主题周围没有空间（在我看来，这是告诉我图形设计尚未完全开发的最常见功能之一）
正文标题下方的段落间距不一致
网上还有很多关于设计原则的内容，但这是最重要的四个。
我认为您网站设计的主要问题不在于图形设计，而在于用户界面设计。具体来说，当我看到你上面的截图时，我问自己的问题不是“酷，我应该先尝试什么？ ”而是“这到底是什么，我该怎么处理它？ ”
这是工程师（或其他领域专家）设计的网站和其他用户界面的常见问题：他们已经知道应该如何使用系统，所以对他们来说，只要他们需要的所有功能都可以方便地访问，一切都很好. 唉，这通常会导致所有功能都同样显眼且易于访问，从而使新用户几乎没有从哪里开始的线索。
平面设计在这里确实有一些作用，因为糟糕的平面设计会使任何用户界面混乱，而好的图形可以通过明确不同界面元素的含义和关系并将用户的注意力吸引到最重要的元素上来增强用户界面。但从根本上说，问题更多在于向用户展示什么以及如何构建它，而不是如何让它看起来不错。
好的，让我们更具体一点。我的第一条建议是：简化！您可能想从Google 最初的首页设计中获得灵感，它基本上包含三个元素：徽标、搜索框和两个按钮（有人可能会争辩说第二个按钮是不必要的混乱）。哦，还有一些指向其他页面的链接，其中包含更多内容——这些内容被明显标记为次要的，因为它们在下方、小字体和/或灰色中——以及版权声明，显然是作为一个微妙的提示添加的该页面确实到此为止的用户。
或者看看Doodle，这是另一家名字不俗、首页设计简单但有效的公司。为方便起见，我截取了他们的首页并在顶部添加了一些红色涂鸦：
Doodle 是一个非常好的网站，可以与您的网站进行比较，因为他们的网站和您的网站一样，基本上是一个允许用户设计自己的内容（为您进行测验，为他们安排活动）并邀请其他用户与之互动的框架。最大的不同在于，与您的设计不同，Doodle 人员花费大量精力让他们的用户温和地进入界面，而不是仅仅将他们扔到池子的最深处，然后等待他们下沉或游泳。
看看他们的首页，尤其是没有我的涂鸦，很明显的一点是上面的东西——尤其是不相关的东西——是多么的少。当然，页面底部有一大堆小注释和链接，但这些都是“首屏”，新用户会忽略。第二个最明显的东西，在用户可能首先看的地方用大而友好的字母，是一个八（！）字的简介，解释网站的内容。最明显的是大图形，以简单的图片显示工作流程的主要步骤，使其看起来简单而吸引人。在它们之间是一个大按钮，邀请用户单击它并开始使用。
事实上，在页面的顶部，只有四个可点击的东西（不包括徽标，它是可点击的——正如用户所期望的那样——但只是带你回到首页）：两个指向第一步的链接在事件调度向导中，一个为没有足够信心直接进入的用户提供的预制示例，以及右上角的一个不显眼的链接，它为已建立的用户打开一个弹出式登录对话框。就这样。
那么你的网站是怎样的呢？在您的屏幕截图中，可能值得一看的第一件事是绿色标题，它们至少很短，大字体并且位于看起来像“内容区域”的中间。唉，那里没有什么有趣的东西——“主题信息”部分只有一些琐碎的元数据，应该在某个角落用小字打印，“子主题”部分有几个链接（到其他类似的页面？）复制右上角的那些，“资源”部分是空的。此外，即使阅读完所有内容，我仍然不知道该网站是关于什么的，也不知道我能用它做什么。
那么，我可以用您的网站做什么？ 好吧，你说我可以创建和参加测验，那么在首页上放置一些大而吸引人的链接/按钮，上面写着“参加测验”和“创建测验”怎么样？（前者应该更突出，因为新用户可能更有可能参加测验而不是创建测验，但在首页上包含第二个至少让用户知道他们也可以这样做。）此外，a简短的解释——从几句话到一小段——你的网站是关于什么的也很好。（这也可能是一个添加“阅读更多”链接的好地方。）
或者，从另一边看，你能承受从当前页面中失去什么？好吧，我真的会说“大部分”，但最明显的跳跃（除了元数据转储）是顶部的登录表单。当然，为已建立的用户提供一种简单的登录方式是件好事，但这并不意味着您必须在每个页面上实际显示登录表单。相反，按照 Doodle 的方式进行操作，只需通过链接访问一个弹出式登录表单即可。（对于关闭 JavaScript 的用户，最好还有一个单独的登录页面作为链接的后备目标。）
还有很多其他的东西你也可能会丢失：例如，作为一个新的未注册用户，为什么我会看到一个看起来像“删除”的链接？我真的可以删除页面吗？如果是，为什么？如果没有，为什么链接在那里？
类似地，“（703 可用问题）”注释在它所在的地方是一个毫无意义的分心，因为它看起来像一个界面元素。如果你想用你网站的深度给访问者留下深刻印象，把它放在它所属的地方：在内容区域中一个合适的、令人印象深刻的简介中。（“我们已经有 703 个问题可用，而且还会有更多问题！ ”）
最后，我应该指出，一切都是相对的。 例如，TV Tropes有一个糟糕的用户界面（真的很像你的），但这没关系，因为它们用大量优秀且相互关联的内容来弥补它，因此大多数新用户不会根本不必触摸导航界面。实际上，这在 wiki 站点中很常见。维基百科并没有那么好。然而，问题在于，您需要已经拥有大量内容（或致力于创建内容的用户群），然后才能开始为您服务。