现代设计 - 那是什么?

平面设计 网站设计 字体 趋势
2022-02-05 09:28:26

我正在重新设计我的网站并通过五秒测试进行迭代。

总体反馈正在改善,但无论我改变什么,有几个人提到我的设计看起来“过时”。“不现代”。“使用现代字体”。

什么是“现代字体”? 从技术上讲,Calibri、Cambria 等是“现代字体”,但我很少在网上看到这些。在网页设计的背景下,哪些字体被认为是“现代”的?

“现代设计”的特点是什么?相反,“过时”设计的标志是什么?

作为参考,这是我设计的最新版本。它仍然看起来“过时”吗?如果有,是什么元素给人这样的印象?

最新版本


我想我开始对什么是“现代网页设计”有了更好的了解:

  1. 无渐变或浅渐变
  2. 无衬线字体
  3. 灯光阴影
  4. 良好的页面层次结构/引导访问者的注意力

还有什么能让设计看起来“现代”的吗?

我已经实现了答案中的大部分建议,我觉得它对设计有很大的改进。(不要介意徽标 - 稍后会弄清楚)

“现代化”版本

我还停留在过去吗?还是我终于到了某个地方?


实施所有建议,这就是我得到的: 所有建议均已实施

它显然要好得多,但它达到现代标准了吗?如果没有,它可以在不大规模改变布局的情况下到达那里吗?


学习过程永远不会结束,不是吗?假设中央菜单有熔岩效果,希望我能拍到一张像样的自己的照片来代替那张。

最新迭代

纵观各种版本,我可以看到设计突飞猛进。不确定它需要改进多少才能达到专业标准,但它肯定在朝着正确的方向前进。

非常感谢大家。我对建议的质量以及迄今为止大多数建议的具体和可操作性印象深刻。

4个回答

您的按钮样式非常老派。尝试使用纯 CSS 按钮为您简化维护并避免在演示方面产生不必要的影响。

该徽标具有早期的 Y2K 剪贴画外观。除非您在品牌化方面付出了很多努力,否则如果您不打算花钱请专业人士绘制独特的东西,我只会放弃图形并使用类型。

您用于子弹的 3D 箭头很奇怪。尝试只使用普通的旧<ul>图形并避免此处的图形。

通常,该页面似乎对您希望访问者查看的内容缺乏清晰的认识。

  • 特征区域的左右两侧相互竞争。决定哪个对最大/最有利可图的访问者群体更重要,并将其置于中心位置。
  • 功能区域下方的标题(“...的语言”)使用了比上面更大的字体,这让我认为它可能真的是最重要的查看内容。
  • 您在两个地方有同等权重的导航/链接:在页面的顶部和中线。我应该关心哪组链接?

如今,网络上的复杂程度使任何没有高效 UI 的东西看起来都过时了。

我认为“现代”一词在这里的使用非常广泛,通常意味着 - 简约、干净、几何、高效

基本上这意味着删除所有不必要的装饰并将内容放在中心

为您的 UI 实现现代外观的一些技巧

  • 排版 - 喜欢无衬线字体
  • 字体 - 谷歌字体是一个很好的来源
  • 颜色 - colorhunt 是一个很好的来源,也是 dribbble.com/colors/
  • 图像 - 边缘到边缘
  • 图像 - unsplash / pexels 是一个很好的来源
  • 插图 - undraw 是一个很好的来源
  • 间距 - 大量的负空间,避免使用框/分隔符

我附上了一个我认为更“现代”的 UI 设计的比较——注意很多元素是如何被移除并剥离到它们的本质的

比较 看大版本

你基本上是在问如何设计,这是一个非常广泛的问题。

基本上,有两种类型的人设计网站:

  • 那些对设计有眼光的人,既能注意到别人在做什么,又能想出自己的新风格。
  • 那些按照他们被教导的程序进行设计的人。

不幸的是,看起来你是第二个,而且你学过(或自学过)的设计程序已经有 10 年的历史了——几乎没有人知道的设计程序和约定再使用的设计程序和约定。

在您的示例中,只有 3 个看起来“过时”和“过时”的东西是:

  • 带有投影的闪亮、反光、弧形按钮。说真的,没有人像这样设计了 10 年。 这里是当今如何完成按钮的一个示例。
  • 那些渐变。人们不再那样做渐变了,而且已经有一段时间了。人们要么不使用渐变,要么很少使用非常微妙的渐变,或者微妙的阴影效果
  • 顶部的菜单很不错,但人们倾向于更努力地制作菜单,而不是旧的“文本链接|分隔|带有|垂直条”方法。

当您查看网站时,您需要能够以某种方式“睁大眼睛”去设计网站。注意这些天网站是如何做按钮、菜单等的。设计时,不要遵循任何旧的设计程序或方法,而要注意其他人在做什么。

第三个版本看起来好多了这是我要做的一些额外更改。

将小飞箭和虚线规则放在背景中。它们只是在越来越集中的布局中分散注意力。

不要拉伸按钮中的类型。

在页面的上半部分下定决心。您仍然有两个相互竞争的信息块。这是我要做的:

  • 让“专业翻译服务”成为整个事情的标题。

  • 将项目符号列表移动到左侧。

  • 删除“需要翻译?” 标题。

  • 将带有呼叫中心女士的盒子缩小到项目符号列表的高度(将填充物切成两半)。

  • 将按钮放在所有信息下方的页面中心。

综上所述,我想说你已经准备好迎接黄金时段了。在您为此赚到第一笔 10 万美元后,请聘请一名 UI 设计师将其提升到一个新的水平;)