推荐阅读
网站建设
整合营销
一个清洁的网页设计元素
日期:2012-03-27
干净,简单的网页设计已成为一种流行趋势。成都网页设计就是一个很好的例子, 本文将讨论通过由两部分组成的讨论主题。 首先,我们来谈谈几个性状,洁净的设计往往有共同的。 其次,我将分享一些技巧和技术,可以是有益的,当试图实现一个干净的设计。
一个清洁的网页设计的共同特点
让我们开始寻找干净网页设计的一些基本特征。
固体网页布局结构
如果您花几分钟时间浏览网站可能落入“干净”的类别,我敢打赌,他们都有一个共同点:成都网页设计的设计师,真正把工作的一个深思熟虑的网格。
对于任何不熟悉一格的设计,只是想象,每个小样开始列和行的无形结构,该结构驱动的规模和组成元素的位置。 这个网格创建的秩序感,帮助设计师建立层次结构,节奏和一致性。
像素的梦想是设计网格中使用流行的960网格系统 。
一个坚实的网格布局结构提供秩序和团结。 创意评论 ,例如,某些类型的内容有几个页面布局,但是,浏览体验是连续的,因为他们都有着相同的基本框架。
当一个网站有大量的内容显示,如网上杂志或报纸网站,实现一个干净的设计美学,可能更加困难。 但“卫报” ,英国一家报纸,如网站显示,它是一个深思熟虑的布局网格的可能。
如果他们所有的内容页上屁股没有了坚实的结构,头版肯定是一个烂摊子。 然而,强大的内容为起点,通过他们的电网和依靠规则和白色的空间,以建立层次,感觉铺天盖地而来。 保证金和每一条规则的每一个像素被调整了,直到它是“恰到好处”,所有这些努力,在布局,感觉毫不费力。
这里有两个资源,这将有助于你更多地了解一格的设计:
摘要在基于网格的布局看网页设计
960网格系统,
好的排版
看来,好的排版往往围绕中心做的多与少,当谈到在您的设计,“干干净净”的感觉,克制是关键。
使用太多的字体时,他们互相竞争,使设计显得杂乱和无序。
如果你做了精心设计的网站快速调查,你可能会发现,他们依靠一个或两个字体,然后不同规模的情况下,颜色和重量,以建立一个清晰的排版层次。
这种方法创建一个一致性和细化感,如网站上可以看到纽约时报 “和“Mavenist 。
纽约时报
在Mavenist
在上述两个例子中,有不超过两种字体的样式表,但设计师们建立了层次清晰,最充分的使用这些字体。
好的排版是最好的显示细节。 领导 ,文本行之间的空间,可以帮助使内容易于阅读和悦目。 当有足够的空间,读者的眼睛可以很容易地返回从结束一个行至下月初。 在网页设计,可以进行调整,通过line-height CSS属性。
类型的大小,以领先的最佳比例,往往取决于文本块的字体,颜色和宽度。
此外, 字母间距 ,字母之间的空间,可以让呼吸位的字母。
以下是有关网页排版的一些资源:
在版式在网页设计的基本外观
CSS排版:基础知识
CSS排版技术和最佳实践
CSS排版:例子和工具
有限调色板
在印刷设计,色彩往往是有限的必要性。 预算可能会允许只有两色的海报,所以设计师被迫在这些制约因素。
这是从来没有与网站的情况下,虽然,因为最现代化的电脑显示器,可以显示数百万色。
然而,干净设计的网站,似乎向有限的调色板趋势。 从我所看到的,这些网站经常使用的核心,灰色和一种颜色。 颜色是预留的最重要因素(如链接和标题),一招,不仅增强了实用性,而且还有助于直观地团结整个网站的元素。
A1滚动这个方向,使用蓝绿色和灰色的调色板。
同时,在罚款乡亲Fuzzco把它一路下跌到一个单一的颜色:红色。
清洁的设计,成功地推超出一个或两个调色板经常这样做,有节制地使用颜色,并使用中性色,打破东西。 单独是一个很好的例子。
一样的字体和消息之间的连接,这不是所有关于挑选好看的颜色。 较强的设计纳入调色板设置网站的内容相呼应的视觉基调。
例如,明亮,互补色,使感Notologist因为该网站的性质。
一致的意象
难道你不烦时,图像的风格(摄影,插图,图表等)从网页转移整个网站页面? 我也一样。
确保这些显眼的元素是在和谐的风格,是一个非常强大的把戏当谈到创建一个网站用干净的外观。
例如,IBM的智慧地球运动涉及几十个课题。 整个帮助一起配合活动的材料和主题相关的印刷和互动材料,插图和图表,共享几何的框架,大胆的笔触和色彩饱和度。
及以上蛋白质 ,你会发现,即使型材摄影出来的不同枝条,是在精心制作的图像组成,深入现场和质量轻的相似性。 跨越这些往往突出的元素的一致性,有助于观众看过去的单件和作为一个整体的网站。
显然,有实例,它仅仅是不实际的,产生相同的样式中的所有图像。 新闻网站和博客不能扔了一个伟大的形象,增强了故事,只是因为它不适合与他人。
有时客户没有预算,以产生新的图表和插图,所以设计师被迫使现有资产的工作。 我注意到,在这些情况下,使用图形元素周围的图像,如边界,可以帮助不一致的意象感觉有点更均匀。
实现清洁设计的技巧
下面是用于生产清洁网页设计的一些技巧。
开始复杂,然后简化

把页面上的东西,这是设计过程的一部分。 在我的经验,陷阱的设计者之一,可以很容易陷入时,他们成立了创建“简单”的东西正变得害怕任何补充页。 由此产生的设计通常很平淡,因为这个过程没有允许勘探(和那些“设计幸福意外”我们所有的爱)。
为了避免这个问题,我发现它是有用的“启动复杂,然后简化。”
在设计的早期阶段,不限制你在页面上。 探索不同层次的内容,并尝试不同的设计元素。 然后,一旦设计感觉可能接近完成,开始简化。
问问自己,“什么不真正需要的是这里吗?” 如果删除一个设计元素(如规则或纹理),似乎使页面土崩瓦解,保持周围。 但是,如果这不是个案,抛弃它。
我们都听到过20%,结束了80%的工作做的格言,我们只是运用这一理论,设计元素正在做我们的布局繁重。 (更多关于这个主题: 网页设计中的还原。 )
它甚至有可能带来值得人谁更重要的是从外界看来应该留什么和应该怎样去设计脱节。 如果你不能给一个为什么比“这很酷”或其他页面上的事情应该更稳固的防守:“他们做这个其他网站上,”然后将其删除。
最终,你会被留下的成分,会给你最强的设计。 一旦你那里,一点点微调应该离开你有一个强大的,整洁的设计。
调整

有人告诉我,我倾向于“击败提交到我的网页设计。” 老实说,我把它看作赞美。
对我来说,设计从来都不是真正的“成品”,总是可以推进一步。 认真,就问人已不幸的运气和我一起工作的任何设计师或学生。 我猜它不是所有的乐趣时,我问他们第十二届一次尝试另一种绿色的树荫。
正如我们刚才探讨的,是“干净”的感觉是产品设计的所有方面 - 工作和谐 - 组成,层次结构,调色和排版。 如果你像我一样,发生意味着花了很多时间调整:这里增添了点line-spacing ,消除2px的保证金,试图代替#ddd #eee #ddd虚线规则,等等,这些似乎无关紧要的调整一样,但是当涉及到所有的组成元素一起工作时,单个像素可以使一个很大的区别。
因此,调整,然后调整一些。 一是调整将导致另一个,有时你发现什么,将带领您到餐桌您的设计或原路返回。
让东西看起来很干净和凝聚力,是一个过程,需要时间和毅力(,一般来说,很多咖啡)。
但是,如果你坚持下去,所有的细节将最终落入到位,并设计将成为凝聚力。
千万不要错过大图

在我以前的生活作为“大多印刷设计师,”印刷和牵制了你的布局是每天的例行公事。 该公司的墙壁饱和,一切从年度报告标识探索。
但一些有趣的事发生了,当我开始专注于网页设计 - 我停止印刷。 这几乎就像我决定,因为该项目绝不会看到一个新闻,它从来没有看到纸张。
经过一段很长时间的空白墙壁(以及随后的挫折与我的项目是如何走到一起的块),它打我。 美丽的印刷和牵制,看到大画面。
我错过了我的机会,以评估系统作为一个整体,支撑throughlines,并寻找机会,以简化。
通过在Illustrator或Photoshop图层翻转,只是不提供相同的观点,看到所有的边谱曲边。
所以,我的建议是打印针和重复。 它会帮助你找出不一致的地方,找到机会来同步你的布局,所有这些都将导致一个更清洁的设计。 (抱歉树)。
结论
无论你是在创建“干净”的设计或寻找朝着这一方向精通,注重细节方面的想象,将很长的路要走.正如我所说的早期,一个有机的,但故意的过程 - 而不是标准和手册 - 会在最方便的。 当然,每个设计师在整个神奇的时刻,他或她个人的过程。因此,如果您有任何的提示和技巧,你倾向于使用,以加强你的布局,或“干净”的设计,你爱的例子,请随时将它们添加下面,所以我们可以继续讨论。

