人们为什么总是告诉我我的网站看起来糟透了?


9

我已经开发了一个网站,最近正在寻找工作。几乎所有访问者在快速浏览一下之后都告诉我,我的网站设计得很糟糕(但喜欢这个概念)。我应该提到我是一名软件工程师,但我实际上也在努力使设计部分正确无误。我一直在尝试重新设计它,但不知道有什么要更改。

现在是这样的:
在此处输入图片说明

我真的很感激任何针对我的网站的技巧,或者关于如何总体上改善网站设计的技巧(我已经访问了一些解释如何设计网站的网站,但这似乎无济于事:))。

编辑1:正如我所说,即使在介绍功能之前,人们往往只是看一下就对它有不好的印象。这使我认为我选择的颜色或布局有问题。我当时认为,特定的站点设计可能对那里的设计师有帮助,就像特定的故事对文学专业的学生有教育意义,而特定的算法对软件专业的学生有帮助。谢谢。

旁注:功能:如果确实很重要,这是网站旨在(非常简短)要完成的任务:用户可以添加主题,并为每个主题添加问题及其答案。该网站为用户创建“测试”和“测验”以进行比较

编辑2:这是另一个打印屏幕:
在此处输入图片说明

编辑3:为了清楚起见,这些屏幕截图都不是我的登录页面。它们是特定于主题的内容页面。


6
+1总是很高兴看到有关设计的问题,而不是软件使用和字体查找的问题-但是,要获得明确的答案(这是我们在StackExchange上追求的目标),我们需要更多信息,以便有一些标准评估答案,因此我们正在解决一个与他人相关的一般设计问题,而不仅仅是为一个人提供免费的设计咨询;)。谁是网站的目标受众?预期的互动是什么?到目前为止,您收到了什么反馈?看起来与StackExchange类似的网站吗?
user56reinstatemonica8'7

@ user568458:非常感谢您的评论。添加了“编辑1”和“补充说明:”。
奥伦2012年

5
您可能应该聘请真正的设计师来进行设计。当然,您在职业生涯中已经建立了一些联系,这可能会吸引您。快速提示:除大标题外,请勿将衬线字体用于任何其他内容,它们在屏幕上显示尺寸较小时效果不佳。子主题标签看起来也很糟糕,您应该添加一些填充并为其选择更好的颜色,橙色的紫色效果不佳。
kotekzot 2012年

1
Blimey,有很多答案,而且它们都不都是很有帮助的...如果您想了解一些相关的扎实的基本设计原则,这是我不久前看到的一个相关问题的经典答案,您可能会发现有用的stackoverflow。 com / a / 58947/568458
user56reinstatemonica8

@ user568458该帖子已被删除...在任何地方?
日安倍晋

Answers:


9

首先,我想强调的是,这个答案中的所有内容都是MHO,而不是某些普遍真理;)。

作为软件工程师,您知道在每个项目中拥有清晰且定义明确的结构(顺序)是一件重要的事情。“视觉”艺术和设计几乎相同。我倾向于将设计视为“视觉封装”。设计师知道他/她想要传递给目标受众的信息结构。例如:他设计了一本书。他知道这本书分为几章,每一章又分为几章。他知道主要事项由一些注释(边注,脚注,边注)注释。现在,他必须使用他的“武库”使该结构“可见”。他可以使用一种字体大小和形状,并在所有连续页面中填充一小段字形,但这意味着读者必须阅读,解释和理解所有内容,才能知道其中包含的信息结构。设计者还可以向读者“建议”各种信息的重要性/水平。技巧之一是使用字体大小显示所呈现“数据”的等级。如果这样做,读者将不必阅读(更不用说解释)文本来区分主要内容和脚注。信息的重要性和相互“位置”在视觉上“描述”。阅读器能够轻松地“解封装”信息。人们还可以将其视为在可视域中发生的一种序列化/反序列化过程(抽象信息被强制转换为“可视”空间)。简化了一下,但是对于初学者来说这已经足够了。如果这样做,读者将不必阅读(更不用说解释)文本来区分主要内容和脚注。信息的重要性和相互“位置”在视觉上“描述”。阅读器能够轻松地“解封装”信息。人们还可以将其视为在可视域中发生的一种序列化/反序列化过程(抽象信息被强制转换为“可视”空间)。简化了一下,但是对于初学者来说这已经足够了。如果这样做,读者将不必阅读(更不用说解释)文本来区分主要内容和脚注。信息的重要性和相互“位置”在视觉上“描述”。阅读器能够轻松地“解封装”信息。人们还可以将其视为在可视域中发生的一种序列化/反序列化过程(抽象信息被强制转换为“可视”空间)。简化了一下,但是对于初学者来说这已经足够了。人们还可以将其视为在可视域中发生的一种序列化/反序列化过程(抽象信息被强制转换为“可视”空间)。简化了一下,但是对于初学者来说这已经足够了。人们还可以将其视为在可视域中发生的一种序列化/反序列化过程(抽象信息被强制转换为“可视”空间)。简化了一下,但是对于初学者来说这已经足够了。

现在,关于您的设计。我个人不知道从哪里开始看它。我必须阅读所有内容,理解所有内容,仔细考虑所有内容,然后按我认为正确的顺序放回原处。作为读者,这对我来说是很多工作。一目了然,很难定义最重要和最不重要的内容。即使我花时间去了解内容,仍然没有很多视觉上的“地标”帮助我找到一些特定数据的方法。想想:当您把车停在很多地方时,您正在寻找一些“地标”来帮助您记住你的车在哪里。试着思考一下您如何使用网站,如何记住最常使用的选项/链接在哪里。您是否正在寻找一个链接,例如“该网站上部红色徽标在右侧的第二个方框”?不读书-只记得图像/位置。

我认为这里最大的问题不是“丑陋”,而是缺乏重要性等级。尝试通过数据“引导”您的网站访问者。您要他首先看到什么?从那里去哪里?这样,您可以创建“读取流” /“工作流”。您会(可能会接受吗?;)引导读者遵循的特定路径。如果有两条路线,请尝试使它们尽可能分开(例如,通过菜单的“路径” –类似目录/主要概述/结构说明,通过登录表单的“路径”等)。 )。我认为,如果您要解决此问题,那么您的设计肯定会得到改善。也许它不会立即变得“美丽”,但至少它会更易于访问和理解,因此,从副作用上讲,它在美学上更令人愉悦。

我希望这对您有意义:)。


感谢您的回答。但是,我非常不幸,每个人都喜欢您的回答,它说的正是书中所说的内容,而我仍然不明白这一点!您可能已经注意到我的网站与电子学习有关。例如,我不了解Wikipedia或本网站中的“地标”和“线索”,但是在我的网站中却没有。我在页面中有一个(完全标准的)左侧导航栏,上部登录栏,明显的标题和有序信息。还有什么比这更标准,更明显和更有条理的呢?这有多难?顺便说一句,由于一页可能令人困惑,所以我再次添加了另一个printscreen.tnx
Oren A

3
从您的评论来看,恐怕您只是在试图改进您的设计而“累死”。我本人已经经历过几次这种感觉:)。事实是,我非常专注于自己看待事物的方式,我完全失去了视野。一切似乎都“在正确的位置”,“显而易见的”和“清晰的”。但这不是:)。只是过了一段时间,当我完全忘记了最初的想法时,我才能够说出:)。我的建议是:暂时搁置一段时间,“忘记它”,然后从头开始,将以前的设计完全丢弃。
thebodzio

我的确意识到我的指示是相当粗略和笼统的,但是据我所了解,您想学习如何自行“设计”,这就是我的看法。这就是为什么我不会告诉您的原因:“在此处移动徽标,在此处放置菜单”。那只是为您设计一切。如果您先尝试为之前完全不了解的项目做设计,也许会更好?但这将是一个较长的过程,比此服务更适合于PM。
thebodzio

8

我注意到我不太喜欢的几件事是:

  • 这看起来更像是网站的“后端”或“管理”部分,尤其是某种形式的内容管理系统,而不是“前端”或人们看到的内容。特别是,PhpMyAdmin突然出现。
  • 使用的颜色不一致。徽标(我发现它有点局促)已经有一些颜色,因此可以使用这些颜色为网站开发颜色方案。此配色方案应适用于表格的条带,链接的颜色等。
  • 对比鲜明的视觉效果太多。我通常主张在设计中更多地简化和标准化。但是,在此屏幕截图中,我们看到:
    • “所有”框是一个硬的直角框。
    • 侧边栏导航使用圆角。
    • 子主题使用径向渐变。
    • 没有一个框具有足够的“填充”:注意“ subtopics”链接中单词的局促程度。如果周围有空间,它们看起来会好得多。

然后,一定要仔细阅读@thebodzio的答案,因为它非常准确:新来该网站的访问者将很难知道首先要看什么,这通常是“不良”设计的标志。


非常感谢您的评论!非常有教育意义!不过,我想回复一下:) 1.这是一个电子学习网站,我想到了一种类似于Wikipedia的设计。因此,它不是“办公室”,但我希望它简单明了。我走得太远了吗?:) 2.这正是我试图做的!徽标是蓝色和黄色,所以我要选择颜色的所有内容也差不多!不显示吗?3.这是一个很好的提示!是否所有具有背景的物品都应具有相似形状的背景?最后,我也回复了@thebodzio :)如果您喜欢:),可以查看一下。谢谢!
Oren 2012年

8

这里有一些很好的答案,因此我将指出一些具体示例。对我来说,页面的基本结构看起来不错。正如其他人所说,三列布局多年来一直是Web设计的主要内容。大多数问题与图形设计有关。

话虽如此,“子主题”的相对重要性似乎很奇怪:

  • 标题应该像“子主题”吗?

  • 它在右边,看起来比主题标题更重要。也许您可以将其合并到主要主题主体中,以使其感觉更从属?

  • “子主题”标题​​的权重使其看起来比主题面包屑更重(更重要)。

对于图形设计,您可以问自己有关页面每个元素的基本原则:

  • 对比:并非相同的元素应该看起来足够不同,以使用户可以立即区分它们。

  • 重复:设计只有很好看,如果事情是相同的外观喜欢它。换句话说,追求一致性。这可能是所有背景具有相同的饱和度和亮度,但色调有所变化,或者在所有标题上使用渐变(或不使用任何渐变)。例如:

    • “子主题”背景是唯一具有渐变的背景(按钮是另一回事,因此在其上具有渐变会使其看起来有所不同,从而使对比度发挥作用)

    • 左侧的导航突出显示具有圆角,而其他大多数元素具有尖锐的方形角

    • 徽标中没有出现“ Quiz首选项”的颜色(拼写错误),否则您尝试将其用作颜色;尝试使页面元素的色调与书中的颜色相同

(实际上,有一种简单的方法可以确保颜色融合在一起:从单一颜色开始,然后仅改变色相,饱和度或明度中的一种。通过此方法生成的所有颜色都应该看起来很好。)

  • 对齐:对齐使元素连接成一个整体,而不是看起来分散且不连贯。例如:

    • “记住我”框低于其旁边的其他文本

    • “测验偏好”比上面的主题面包屑更靠右。

    • 首选项居中,而其他大多数正文文本则左对齐

  • 邻近性:将对象靠近在一起会使它们在用户的脑海中分组,尽管在对象周围留出的空间太小会使它们狭窄而难以看成是单个项目。例如:

    • 您的主题面包屑或子主题周围没有空间(在我看来,这是最常见的功能之一,可告诉我图形设计尚未完全开发)

    • 主体标题下方的段落间距不一致

Web上还有很多关于设计原则的内容,但这是最重要的四个。


使其+2 ...
Oren A

7

我认为您网站设计的主要问题不是图形设计,而是用户界面设计。具体来说,当我查看上面的屏幕截图时,我问自己的问题不是“ 很酷,我应该首先尝试什么? ”,而是“ 这到底是什么,我应该怎么做?

这是工程师(或其他领域专家)设计的网站和其他用户界面的常见问题:他们已经知道应该如何使用该系统,因此对他们来说,一切都很好,只要可以方便地访问他们需要的所有功能即可。 。las,这通常会导致所有功能同样醒目且易于使用,从而使新用户对从何处开始的线索知之甚少。

图形设计在这里确实有一定的作用,只要不良的图形设计会使任何用户界面混乱,而好的图形则可以通过使不同界面元素的含义和关系清晰明了并吸引用户的注意力来增强用户界面。但从根本上讲,问题更多的是什么,以呈现给用户,以及如何构建它不是关于如何使它看起来不错。


好的,让我们更具体一些。我的第一条建议是:简化!您可能想从Google最初的首页设计中汲取灵感,该设计基本上包含三个元素:徽标,搜索框和两个按钮(有人可能会说第二个按钮不必要地混乱)。哦,还有一些指向其他页面的链接,其中包含更多内容-向下,小字体和/或灰色则明显标记为具有次要重要性-并附有版权声明,显然是对用户认为页面确实确实到此结束。

或看看Doodle公司,这家公司的名字叫高贵,而且首页设计简单而有效。为了方便起见,我对他们的首页进行了屏幕截图,并在顶部添加了一些红色的涂鸦:

Doodle.com带有注释的首页截图

Doodle是一个非常不错的网站,可以与您进行比较,因为他们的网站(与您一样)基本上是一个框架,可让用户设计自己的内容(针对您的测验,针对他们的活动时间表)并邀请其他用户与之互动。最大的不同是,与您的设计不同,Doodle员工花费了大量精力使用户逐渐进入界面,而不仅仅是将他们扔进游泳池深处,等待他们下沉或游泳。

看看他们的头版,特别是没有我的涂鸦,显而易见的是,上面的东西很少-特别是无关紧要的东西。当然,页面底部有一堆小注释和链接,但这全都在“折叠之下”,而新用户只会忽略这些内容。第二个最明显的东西,是用大写的友好字母表示用户可能首先看到的地方,它是一个八个(!)的单词blurb,用于解释网站的含义。在明显的就是大图形显示,在简单的图片,工作流的主要步骤,使得这一切看起来很容易,并邀请。它们之间是一个大按钮,邀请用户单击它并开始使用。

实际上,在页面的顶部,只有四个可单击的内容(不包括徽标,它是可单击的(正如用户期望的那样,但可以带您回到首页)):第一步的两个链接在事件调度向导中,一个不够自信的用户可以选择一个示例,右上角的一个不引人注目的链接为已建立的用户打开一个弹出式登录对话框。就这样。


那么您的网站又如何呢?屏幕快照中让我跳出来的第一件事,也许是值得一看的东西,是绿色标题,该标题至少是短标题,是大字体,位于“内容区域”的中间。las,这里没有什么有趣的地方-“主题信息”部分只有一些琐碎的元数据,应该在某个角落以小字体显示,“子主题”部分有几个链接(指向其他相似页面?)复制右上角的内容,“资源”部分只是空白。而且,即使阅读了所有这些内容,我仍然不知道该网站的内容或该如何处理。

那么,我该如何处理您的网站? 好吧,您说我可以创建和参加测验,那么如何在首页上放置一些大而美观的链接/按钮,例如“ 参加测验 ”和“ 创建测验 ”呢?(前者应该更为突出,因为新用户大概比进行测验更容易进行测验,但是在首页上包括第二个测验至少可以使用户知道他们也可以进行测验。)对您的网站所进行的简短解释(从几句话到一小段)也将是不错的。(这也可能是添加“更多信息”链接的好地方。)

或者,从另一面看,您可以负担得起当前页面的损失吗?好吧,我真的会说“大部分”,但是最明显的跳跃(除了元数据转储)是顶部的登录表单。当然,可以为已建立的用户提供一种简单的登录方法,但这并不意味着您必须在每个页面上都显示登录表单。取而代之的是,按照Doodle的方式进行操作,并且只有通过链接可访问的弹出式登录表单。(对于禁用了JavaScript的用户,最好还有一个单独的登录页面作为链接的后备目标。)

您还可能会遇到很多其他事情:例如,作为一个新的未注册用户,为什么我看到看起来像“删除”链接的东西?我真的可以删除该页面吗?如果是,为什么?如果没有,为什么链接在那里?

同样,“(703可用问题)”注释在这里毫无意义,因为它看起来像一个界面元素。如果您想用您网站的深度来打动访客,请在网站所属的地方加上内容:在内容区域中显示适当的外观。(“ 我们已经有703个问题,并且还会有更多问题! ”)

最后,我要注意的是一切都是相对的。 举例来说,TV Tropes的用户界面很糟糕(确实很像您的用户界面),但这没关系,因为它们通过负载大量优质且紧密互连的内容来弥补它,因此大多数新用户都不会完全不必触摸导航界面。实际上,这在Wiki网站中很常见。维基百科实际上并没有那么好。但是,要注意的是,您必须已经具有该内容负载(或致力于创建内容的用户群),然后该效果才能开始为您服务。


哇,那是一些很棒的评论:)。我想提一下,尽管您正在将其他网站的目标页面与我网站的内容页面进行比较(我可能应该在问题中提到这一点)。如果我放好我的目标网页。.至少可以说,您的设计师对我的设计不会那么耐心。但是您给了我一些有关如何改善目标网页的好主意!其次,我的登录就像该站点的登录一样(就像该站点我有计分方案一样,登录栏变成“ Oren A.这样的得分和奖牌...”),所以我不确定有关..
奥伦一个

以及显示不可点击的链接。.它是否不帮助用户了解注册后将要执行的操作?最后一件事-建议我添加“创建测验”按钮,以证明您的观点我的网站没有传达消息-用户无法真正创建测验,他们只能添加问题,而网站本身会为他们创建测验。
Oren A

关于登录表单的我的观点是您的屏幕截图显示了嵌入在顶部栏中的整个表单。当您真正需要的只是一个单独的链接,上面写着“登录”时,这会带来很多不必要的混乱。
Ilmari Karonen

对于不可点击的链接,我通常会说“不”,至少对于诸如“删除”之类的操作,这些操作大概仅适用于有限的一组用户。(请注意,如果您没有销售代表的话,Stack Exchange也会隐藏大多数界面功能。)如果您希望许多用户想要使用该功能,并且要使用所有的功能进行登录,然后我将其设置为实际的工作链接,但首先会弹出一个登录/注册表格。
Ilmari Karonen 2012年

附言 我确实应该为您的第二个屏幕截图写一些更详细的信息,但是让我快速地建议,如果实际上已经准备好进行测验,请将按钮移到prefs表单上方(或旁边),然后不再强调后者,会更清楚。照原样,该页面的标题应该是“ Quiz Prefrences”(原文如此),这使其看起来像某种admin / prefs页面,而不是您通常去参加测验的地方。
Ilmari Karonen 2012年

3

您的“设计”在1995年会很不错。实际上,它已经过时了。这是一个设计工程师总是能想出:-)你可以做最简单的就是用一些,即CSS框架Twitter的引导Zurb不管。框架可以帮助您保护自己免受自己的“创造力” ;-)


1
我不知道为什么这被否决了。它不是很有帮助,但也不是完全错误的。我设计的第一印象是,这我们更希望从一个软件开发谁可能更关心的是一切正常,而不是谁想要确保一切看起来不错设计师设计的类型。因此,+ 1足以提前编写此简短响应。
阿南达·马赫托

1
...但是,嘿,我们编写了很棒的代码:)。至于框架,尽管我看了很多站点,但我也会看一下这些站点,谢谢。
Oren 2012年

当然可以-我也是开发人员:-)框架应该沙盒化并引导您,因此不需要颜色选择(已经预设),页面/信息体系结构(已经预设)等。您只需遵循预设路径。您唯一要做的就是确定页面上的哪些信息重要,哪些信息不那么重要等。示例:在两个屏幕截图中,您都在视觉上将网页的两个不同部分混合在一起:面包屑和标题。CSS框架应阻止您执行此操作,因为这些元素已预先设置。
nubm 2012年

3

从布局的角度来看,您的网站没有任何真正的问题。这是标准的3列布局,徽标在左上方。这个总体框架已经使用了很长时间,这是因为它有效。大多数现代网站仍基于少数常见布局使用相似的原理,但隐藏在许多平滑的图形下。(要非常警惕那些基于现代事物的批评而提出批评的人-仅仅因为过去了几年并不意味着人类获取信息的方式突然之间大为不同。)

有些人可能会质疑主导航链接是应该在左侧还是在顶部,但是这些差异不会影响站点。

不,问题不在于您选择的事物位置。它与图形,颜色选择,事物的大小等有关。我区分术语布局,这与布局有关,而设计则与感觉和外观有关。不过,我不确定是否每个人都会以与我完全相同的方式使用这些术语。

话虽这么说,您的布局本质上不错,但设计却有问题,不幸的是,这是较难解决的情况。如果您的布局有问题,我们可以提供更具体的建议,例如“在此处移动搜索字段”或“在此处放置徽标”。布局实际上是可用性的实现。

但是,设计是关于感觉和风格的,当然,要评论起来要困难得多。虽然我可以说您只是简单地保留了许多颜色选择作为默认设置(背景为白色,链接为蓝色,界面图像很少),但要说的是什么颜色和图形要困难得多。这很大程度上取决于您想要什么样的感觉。无聊而安全的蓝色和灰色给人一种整体感觉,粉红色和黄色给人一种纯真的孩子气的感觉,红色和黑色给人一种令人兴奋的夜总会感觉……即使如此,仅使用这些示例颜色也不一定会导致觉得我已经爱上了他们。细节决定成败。

在更具体的布局问题和更空灵的设计问题之间存在一些重叠,例如thebodzio他/她的答复中说的有关标题和脚注的字体大小变化的内容,以便强调重要性并帮助指导站点访问者通过您希望他们拥有的信息。您应该听取他/她的建议。

但是,如果您的目标不是与设计师合作,而是学习如何应用引人注目的网站设计,恐怕您不仅会获得答案,而且还在旅途中。成为一名优秀设计师的途径与设计师一样多,并且那里有大量资源,因此不乏学习机会。

为了获得对该特定站点某种设计感的最短途径,我将研究您喜欢的其他站点以及提供与您正在做的站点相似的服务的其他站点,并开始比较并对比您的想法和所见之处。这些以及您网站上缺少的内容。

不幸的是,这几乎是客观的,而且只是冰山一角的最高点。希望我所讲的内容有所帮助。


就我而言,这就是“他的”;)
thebodzio

1
我认为您暗示了症结所在-感觉。我看过很多网站,在我看来,我的设计与他们的网站并没有太大不同。我想我只是在错过那种看起来都很好的“感觉”。这让我有点失去希望:( :)。我可以整日使用颜色,但仍然不知道哪种颜色最合适……也许更多地探索其他网站,尝试获得颜色如何相互融合的“感觉”会有所帮助。不过,请注意,我选择的颜色与徽标相匹配(蓝色和黄色)。我猜那没有用:)我感到黄色是..太大声
Oren

@OrenA blog.visual.ly/ 黄色数据使用设计-有关信息设计的更多信息,但原理仍适用。基本上,黄色的声音很大:小心使用。非常适合微妙的飞溅和亮点
user56reinstatemonica8 2012年

1
@OrenA:我的意思并不是要让我的职位受到挫折,如果那样的话我很抱歉。请不要将其表示“感觉”,因为它是无法量化的,因此您一定会为之苦恼。我只想强调一点,因为学习设计在很大程度上是一个过程实际的实验,所以您应该准备好不要在支持论坛中单击带有一个或两个说明的设计。如果您喜欢并想要做某事,那么我只是在提醒您,需要一点耐心,不要太沮丧。
提问者

2

这就是为什么我认为人们对您的网站做出负面反应的原因:它提出了太多问题!

如您所说,介绍功能之前。这告诉我人们不了解它的含义。这应该是网站上第一个回答的问题。因为如果在网上,您不能站在他们旁边并解释它。

“世界上的所有知识”并不能完全传达您在网站上可以找到的内容(或者对此不太可信)或您应该登录的原因。因此,您的设计被认为很糟糕,因为它不支持回答这些问题。

因此,首先您需要回答“此网站的内容是什么?”。例如,带有任务说明。这对您来说可能很明显,但对网络上的其他人却不是。主要目的是什么?参加测验还是进行测验?您希望人们做的第一件事是什么?登录?回答测验吗?创建一个?如果您希望其他人留在页面上,则应该回答这些问题。

然后,您应该整理您的信息。什么是内容,什么是元(徽标,导航,登录)。看一下stackexchange。内容(浅色)与元(深色)有明显区别。

组合在一起的东西。您有与导航断开的面包屑。视觉和措辞。我在主导航中没有找到“所有内容”。我如何到那里?

为什么要这样?人们越了解提供给他们的信息,他们停留和互动的可能性就越大。如果他们感到困惑并面临无法回答的问题,他们将做出负面反应。


1

因为有。那是不是在说:)那只是个玩笑,我最好的答案是在设计部分与某人合作,如果您没有人与之合作,请聘请自由职业者,如果那不起作用也只是从头开始,但请尝试使事情更简单,并让内容呼吸...

一些初步的提示/建议/建议: 使h标签(Titles)字体比p标签更大,更大(在标题字体大小30-48和段落(11-max 13)范围内)。至少允许内容块之间有20 px的边距或填充(例如maring-bottom:20px;登录栏将使其更独立且易于阅读。

找人为您设计合适的徽标,您现在拥有的徽标...不好。尝试使用其他字体,可能是sans-serif字体(例如Open Sans,在Google字体上免费,或者.. Arial-Helvetica)。

如果您对颜色没有感觉只是因为它很酷或者只是因为它看起来更好而不要使用渐变,请尝试坚持纯色,也许最后当您尝试仅在CTA上尝试渐变时,号召性用语)区域(例如按钮)。

您可以做很多事情...但是这些事情通常会随着时间的流逝而出现,通过查看许多出色的设计并试图了解结果是如何产生的,您会得到训练有素的眼睛...最好的方法是尝试自己重新创建相同的结果,在此过程中,您将获得一些知识和洞察力,以了解为什么/如何做/制作/外观/交互和体验UI。

书籍推荐:粉碎书籍[第一本书和第二本书]和网站:

http://smashingmagazine.com

另一个:http//www.bamagazine.com/


非常感谢您提供的具体提示!他们有很大的帮助。顺便说一句,我确实找人(自由职业者)为我创建徽标:)
Oren A

1

哇!您真的产生了回应!至少您知道您的设计并没有被人忽视;)

这是您问题的简短答案: 该站点看起来像是由软件工程师设计的。那就是你所做的,我相信你做得很好。现在,您需要进行UI设计的人员来使您的想法更容易实现。没有办法解决。您不会在周末学习设计并解决问题。

寻找一个学生或年轻的设计师,他们希望填写自己的作品集并给他们一些自由。您希望这个工作的人干净整洁。看看是否可以找到喜欢简约的设计师。


0

我不是专业设计师,所以从用户的角度以及浏览各种网站的经验来看,我能指出几点吗?

  1. 页面的背景颜色为白色,但节标题/突出显示部分为黄色或白色阴影,您可以尝试使用一些对比色,可以设计对比级别以匹配元素层次结构(更多高级标题=更多对比度或固定的标题内容配色方案(例如,书的徽标中显示的深蓝色,如书第二页中的橙色,标题为白色,内容文本为深灰色)。
  2. 页面中的可用空间过多,可以为用户提供喘息的空间,但是可用空间过多会使您的页面看起来像后台/维护不足。例如,第一个屏幕中的“子主题”部分可能已覆盖“所有”部分下的整个空间。还为什么要有两个多余的子主题部分?
  3. 国际海事组织的内容分发应该属于一个等级体系。如果以Google代码页(看起来与您的网站非常相似),Wikipedia或该网站为例,它们都会为网站标题花费大量空间,然后内容就会出现。如今也有几天,很多页面使用标题为标题的工具栏(具有独特的颜色),常规菜单和网站徽标嵌入其中,但是您可能会说徽标太大而无法做到这一点。
    以页面最右侧的子主题部分为例,它们真的看起来更像是当前内容的专业化吗?相反,它们看起来更像是随机标签或相关主题。您可以通过制作一个类似于各种文档页面中的树状结构,这也将使面包屑变得不必要。此外,IMO在该树的正确位置(导航)将在左侧栏中,其余操作将在面包屑的位置进行。
  4. 均匀性与分布同样重要。您的按钮可以根据其用途/重要性而具有不同的颜色。但是它们的结构应该保持不变。当“立即参加测验”为四角时,您的“登录”按钮为锐利边缘。您可能想要摆脱这两种方法中的任何一种。
  5. 链接和动作不相同,您也应该相应地命名它们。就像左侧的“删除”菜单反映了已删除的项目或删除操作一样,不能说。就像在GMail中一样,为用户提供一个删除按钮和一个已删除项目的菜单/选项卡。
  6. 字体对于反映目的非常重要。如果您要创建一个艺术页面或任何衬线系列都很好,但是要创建一个电子学习网站,您必须选择一种字体,该字体可以轻松跟随不同的大小,并且扩展程度较小(例如长边),Sans擅长这一点。维基百科例如使用它。尺寸和重量的选择也很重要。当统计数据很重要(并且不断变化)时,将数字以粗体显示(例如703个可用问题)。就像您在第二个屏幕中选择问题数量所做的那样。标头IMO中的斜体看起来不太好,为什么不使用粗体字呢?
  7. 这非常像我的个人观点,但我认为,如果将圆角弄得圆滑,则会使用户摆脱盒子般的感觉。

0

我是专业的设计师和开发人员。我认为与设计相关的最重要的事情是在实施设计之前,先使用图形程序(例如Fireworks)创建设计。这样可以更轻松地进行更改和实验。从开发背景来看,我知道这一点的重要性。

我不知道你正在申请什么职位。如果您要申请图形设计职位,则可能需要一些时间来学习专业的图形设计。如果您要担任开发职位,那么可能需要花一些专业设计师来做出漂亮的设计,或者做一个快速修复而不是花几个月的时间来学习。

如果您想快速修复,我将尝试提供一些具体信息以帮助您入门。这里的答案很好-但不是很具体。我会尽力。

请注意,可变宽度设计总是比固定宽度设计更棘手。我认为您选择3列设计是正确的。内容是正确的,设计不是很好(我认为)。

这是我要做的事情(可能需要不到一天的时间):

  1. 从徽标开始。看起来很忙->尝试使其更简单。使用更鲜艳的色彩;黄色看起来很脏。尝试使用更简单的字体。
    • 完成徽标后,您可以将网站颜色与其匹配
  2. 有关网站的所有内容均应为“通风”。因此,不要使事情局促。
    • 左栏应该更宽。是当前宽度的1.5倍
    • 顶部应在登录字段周围留出更多空间
    • 右侧的子主题应放在换行符之间。使它们周围有较大的间距,以免彼此挤压
    • 子表可以在单元格上使用更多的填充,标题div可以更多地填充,等等。
  3. 整个内容应该流动而不是断断续续。这意味着要尽可能对齐,使用统一的字体和适当的大小。
    • 中心列“世界上的所有知识”与其他内容显得格格不入。也许将其向左浮动,删除下划线,并确保使其小于标题。
    • 页面内容未对齐。如果您将子内容与子标题左对齐,则看起来会更好。
  4. 顶部的登录字段可以做得更好。
    • 您可以将标签放在文本输入框内(变灰)。这样可以使其更清洁。
    • 您可以使“记住我”复选框/字体小得多。它不是最重要的功能,因此它不应与重要部分一样大。

这不会使您的站点成为Internet上最出色的站点,但是希望它可以进行足够的抛光以使其能够通过检查。:)


-1

哇...真是太糟糕了

如果您没有任何设计意识,我认为您不能学会根据一些建议重新设计某些东西,因此,我真的认为您应该让其他人来进行布局。课堂将以它为例。

但是,如果不这样做,这里是我的一些建议。索引/着陆页尽管有名称,但其功能需要更像广告牌或杂志广告。它需要在几秒钟内传达其消息FAST。请注意,我说的是“消息”而不是信息。观众在寻找信息时就需要那里的信息,但是并不需要像稍微乱七八糟的目录那样布置所有信息。

因此,关于消息……首先要考虑的是他们在看什么。网页,是的,但是网页是什么?即使阅读您的类别,我也不清楚该页面是什么。

“什么”将通过配色方案,总体布局以及标题来传达。

解决了什么是问题之后,请确定您希望他们首先看到的内容。我的选择是“ Practice Makes Perfect”徽标,我会增加其大小并将其弹出标题。但是您可能有理由让他们专注于其他事情或某种行动号召。

我猜您最重要的事情是“世界上的所有知识”,因为您已经将其居中(坏主意)变成了斜体(坏主意!),并为其周围留出了很多空间(好主意)。自己说一句话...不清楚是什么还是做什么,尝试一些更具描述性和更少愚蠢的事情。

尝试将整个目标网页分为3个设计元素和3个级别的信息重要性。问自己,他们应该看的第一件事,他们应该做的第一件事?什么是第二,第三?然后尝试相应地重新设计。

使用较少的颜色并使它们有意义。.为什么在文本周围随机散布3种不同的蓝色?使用更多的字体大小(!),再将其分成3秒钟是一个好的开始,大字体用于最重要的,中等字体用于辅助等。

我的最后建议是在编写代码之前先进行设计。我建议以PAPER和钢笔或铅笔开始来遮盖页面。.只是快速的草图,在执行这些操作时不要写出实际的单词,而在尝试确定内容区域与页眉应多大时才遮挡区域,侧边栏有多大等等。

然后在图形程序中进行更最终的设计。移动事物并尝试放置。请记住,您设计的页面需要像杂志页面那样起作用。让您的观众暂停,尝试向他们展示您希望他们看到的东西,尝试引导他们去做您想要他们做的事情。

并开始在设计时查找。只是看看。不要评估内容,而是查看网页正在传达的消息。他们如何使用间距,颜色,字体大小?尝试模仿好的设计。祝好运

并考虑艺术学校的建议。图形设计程序经常为他们的学生寻找现实世界中的重新设计项目。


-2

我从该线程收集到的主要问题是,与学习如何创建具有吸引力的东西相比,您对辩论和捍卫“设计”更感兴趣。典型的软件工程师。您认为可以将页面分解为组件元素,测试并审核这些元素,然后在集成组件后,您认为这些元素应在数学上枚举一个好的设计。然后,您认为通过发布此问题,您可以再次将页面划分为各个组件,并讨论每个组件的优点,并讨论其如何遵循答案提供者的说法。

在您不愿意接受UX之前,您将继续遇到此问题。如上所述,图形设计与感觉有关。图形设计不等于工程设计。您无法在数学上构造某些事物,无法将其与其他“数学上正确的”事物集成在一起并期望获得良好结果。您可能永远不会擅长UX,因为您根本不会以设计师的眼光看待世界。但是,如果停止测量页面并将其与其他页面进行比较-完全开放自己以学习意识到自己对平面设计一无所知,那么您可能会开始使用它...


1
哦,我完全接受我在UX方面的经验。但是,为了用新的观念改变我当前的观念,我需要理解为什么它们是错误的。我不能仅仅告诉自己“我的字体看起来不好,因为专业设计师这么说”。那不是学习。我宁愿对我到底做错了什么有一个很好的解释,为什么我做错了,然后才可以采用一种新的看待事物的方式。我不是“卫冕”,只是想了解..
奥伦一个

奥伦 您仍在使用相同的想法。告诉我出什么问题了,这样我就可以衡量和计算错误-量化和纠正。错误!在没有接受不是您自己的问题的外部输入的情况下,您永远都无法想出自己的局限性。参加绘画课。吃点药。遭受。让其他人选择您的体验。在没有窗户的盒子里看不到答案。
VariableLost

将您的评论视为接受的答案。
Oren
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.