简洁网页设计的要素

WebFX总裁。Bill在互联网营销行业有超过25年的经验,专门从事SEO, UX,信息架构,营销自动化等。William在希彭斯堡和麻省理工学院的科学计算和教育背景为MarketingCloudFX和WebFX的其他关键研发项目提供了基础。

简洁网页设计的要素干净、简单的网页设计已经成为一种流行趋势。本文将通过两部分讨论来讨论这个主题。首先,我们将讨论干净设计往往具有的一些共同特征。

其次,我将分享一些技巧和技术,可以帮助实现一个干净的设计。

简洁网页设计的共同特征

让我们先来看看简洁网页设计的一些基本特征。

实体网页布局结构

如果你花几分钟浏览那些可能属于“干净”类别的网站,我敢打赌他们都有一个共同点:设计师真正投入工作的深思熟虑的网格。

对于不熟悉网格设计的人来说,可以想象一下,每个comp都从一个看不见的列和行结构开始,这个结构驱动了构图中元素的比例和位置。这个网格通过帮助设计师建立层次、节奏和一致性来创造一种秩序感。像素的梦想是设计在一个网格中使用的流行吗960网格系统坚实的网格布局结构提供了秩序和统一。

例如,创造性的审查对于某些类型的内容有几个页面布局,但是,浏览体验是连续的,因为它们都共享相同的底层框架。当一个网站有很多内容要显示时,例如在线杂志或报纸网站,实现干净的设计美学可能会更加困难。但是像《卫报》英国一家报纸的研究表明,通过精心设计的网格布局,这是可能的。

如果他们所有的内容都放在页面上,没有一个坚实的结构,头版肯定会一团糟。然而,通过使用他们的网格作为起点,依靠规则和空白来建立层次结构,健壮的内容远非压倒性的。每一个边缘像素和每一条规则都被调整到“刚刚好”,所有这些努力都导致了一个感觉毫不费力的布局。

这里有两个资源可以帮助你更多地了解网格设计:

良好的排版

好的排版似乎往往围绕着用更少的资源做更多的事情,当涉及到在你的设计中获得“非常干净”的感觉时,克制是关键。当使用过多的字体时,它们会相互竞争,使设计显得脱节和无序。如果你对设计良好的网站做一个快速调查,你可能会发现他们依赖于一到两种字体,然后改变大小,大小写,颜色和重量,以建立一个清晰的排版层次。

这种方法创造了一种一致性和精细化的感觉,可以在网站上看到,如《纽约时报》和《先知》。《纽约时报》的Mavenist在上面的两个例子中,样式表中不超过两种字体,但是设计人员通过充分使用这些字体建立了清晰的层次结构。好的排版最好体现在细节上。

领先的即行与行之间的空格,可以使内容易于阅读和赏心悦目。当有足够的空间时,读者的眼睛可以很容易地从一行的末尾回到下一行的开头。在网页设计中,导向性可以通过调整行高CSS属性。

字体大小与前导的最佳比例通常取决于字体、颜色和文本块的宽度。此外,字母间距字母之间的空间,可以让字母的形式呼吸一点。以下是一些与网页排版相关的资源:

有限的配色

在印刷设计中,色彩往往因需要而受到限制。

预算可能只允许一个双色的海报,所以设计师被迫在这些限制下工作。然而,网站却不是这样,因为大多数现代电脑显示器可以显示数百万种颜色。然而,设计干净的网站似乎倾向于使用有限的调色板。

据我所知,这些网站经常使用核心灰色和一种颜色。颜色被指定为最重要的元素(如链接和标题),这一技巧不仅提高了可用性,而且有助于在视觉上统一整个网站的元素。A1滚动这个方向,使用蓝绿色和灰色调色板。

与此同时,在Fuzzco把它归结为一种颜色:红色。干净的设计,成功地超越了一个或两个调色板,通常是通过使用少量的颜色和使用中性色来打破东西。独奏就是一个很好的例子。

就像字体和信息之间的联系一样,选择好看的颜色并不重要。更强的设计结合了调色板,设置了与网站内容相呼应的视觉基调。例如,明亮的互补色对Notologist因为场地的性质。

一致的图像

当图像风格(摄影、插图、图表等)在整个网站中从一页切换到另一页时,你会感到困扰吗?我也是。确保这些视觉上突出的元素在风格上是和谐的,这是一个非常强大的技巧,当谈到创建一个干净的网站外观时。

例如,IBM的“智慧星球”活动涉及了数十个主题。在相关的印刷和互动材料中,共享几何框架的插图和图表,大胆的笔触和饱和的颜色有助于将活动的材料和主题联系在一起。在Protein上,你会注意到,尽管这些个人资料的摄影来自不同的拍摄,但在构图、景深和光的质量方面,这些图像都有一种精心制作的相似性。

这些突出元素之间的一致性有助于观众跳过单个片段,将网站视为一个整体。显然,在某些情况下,用相同的风格制作所有图像是不现实的。新闻网站和博客不能仅仅因为一张图片与其他图片不匹配就抛弃它来增强故事的效果。

有时客户没有预算来制作新的图表和插图,所以设计师不得不让现有的资产发挥作用。我注意到,在这些情况下,在图像周围使用图形元素,如边框,可以帮助不一致的图像感觉更加统一。

实现干净设计的技巧

以下是一些制作简洁网页设计的技巧。

从复杂开始,然后简化

把东西放在页面上是设计过程的一部分。根据我的经验,当设计师开始创造一些“简单”的东西时,他们很容易陷入的一个陷阱是害怕在页面上添加任何东西。最终的设计通常相当乏味,因为这个过程不允许探索(以及那些我们都喜欢的“快乐的设计意外”)。

为了避免这个问题,我发现“从复杂开始,然后简化”是有帮助的。在设计的早期阶段,不要限制页面上的内容。探索不同层次的内容,尝试不同的设计元素。然后,一旦你觉得设计快要完成了,就开始简化。

问问你自己,“什么是不必要的?”如果删除一个设计元素(比如规则或纹理)似乎会让页面变得支离破碎,那就保留它。但如果事实并非如此,那就放弃吧。我们都听过这样的格言20%的人完成了80%的工作。我们只是将这一理论应用到设计中,通过识别在布局中起重要作用的元素。

(阅读更多关于这个主题:网页设计中的还原论。)甚至有必要引入一个对设计更加超然的人,让他来听听外界的意见,告诉你什么应该留下,什么应该去掉。如果除了“这很酷”或“他们在其他网站上做过”之外,你不能给出更有力的理由来解释为什么某些内容应该出现在页面上,那么就删除它。最终,你会留下给你最强的设计的成分。

一旦你做到了这一点,一点点微调应该会给你留下一个强大、整洁的设计。

调整,再调整

有人告诉我,我倾向于“让我的页面设计屈服”。说实话,我觉得这是一种赞美。对我来说,设计永远不会真正“完成”,总是可以进一步推进。

说真的,只要问问那些不幸与我共事过的设计师或学生就知道了。我猜,当我第12次让他们尝试另一种绿色时,这并不那么有趣。正如我们之前所探讨的,“干净”的感觉是设计的所有方面的产物——组成、层次、调色板和排版——和谐地工作。

如果你和我一样,这意味着要花很多时间来调整:添加一个点行间距这里,去掉2px的边距# ddd而不是# eee对于虚线规则,等等。这些看起来可能是无关紧要的调整,但当涉及到让构图中的所有元素一起工作时,一个像素就可以产生很大的不同。所以,调整,然后再调整。

一个调整会导致另一个调整,有时你发现的东西会导致你放弃你的设计或后退。让一些东西看起来干净而有凝聚力是一个需要时间和毅力的过程(通常,还需要很多咖啡)。但是,如果你坚持下去,所有的细节最终都会到位,设计也会变得有凝聚力。

不要错过大局

在我以前作为一个“主要是印刷设计师”的生活中,打印和固定你的布局是一种日常仪式。该公司的墙上贴满了从年度报告到标识探索的各种东西。但当我开始专注于网页设计时,有趣的事情发生了——我停止了打印。

几乎就像我决定,因为这个项目永远不会出现在媒体上,所以它永远不需要看到纸张。在经历了很长一段时间的空白之后(以及随后对我的项目如何进行的沮丧),它击中了我。印刷和钉钉的美妙之处在于能看到大局。

我失去了评估整个系统的机会,失去了支撑整个系统的机会,也失去了简化系统的机会。在Illustrator或Photoshop中浏览图层并不能提供与并排查看所有对比相同的视角。所以,我的建议是打印,固定和重复。

它将帮助你识别不一致的地方,并找到同步布局的机会,所有这些都将导致一个更干净的设计。(对不起树。)

结论

无论你是深谙“干净”设计的创造,还是希望朝这个方向发展,尊重想象力,关注细节都将大有裨益。正如我前面所说,一个有机而有意的过程——而不是标准和规则手册——将最有用。

当然,每个设计师在他或她的个人过程中都有神奇的时刻。所以,如果你有任何小贴士和技巧,你倾向于使用来加强你的布局,或者你喜欢的“干净”设计的例子,请随时在下面添加它们,以便我们可以继续讨论。

相关内容

WebFX职业

加入我们的使命,为全球各地的企业提供行业领先的数字营销服务-同时建立您的个人知识和个人成长。

我们招聘! 视图30 +职位空缺!