`
huoquan
  • 浏览: 27160 次
  • 性别: Icon_minigender_2
  • 来自: 北京
文章分类
社区版块
存档分类

文字设计是网页设计的根本

阅读更多

恩,网页设计的秘密是什么

  这是一个艰难的问题,一个可能没有答案的问题。在 2006 年,Oliver Reichenstein 写下了 Web Design is 95% Typography. 一些人狂爱它,一些人却不以为然。

  若网页设计过多的依赖于文字设计,那么学习其他事物的意义何在?你所需要做的只是理解文字设计的各个元素,然后就能做的很好。

  当然文字设计并不只意味着字体的选择,随着@font-face技术和一些如 TypekitWebtypeFontdeck, 以及 Google Web fonts等服务的到来,你在文字设计上的技术并没有提升,你可以在你的余生中轻易的只用一种字体创造出杰出的设计,如果你这样选择的话 —— 而在很久之前那些人(设计师们)则不得不这样做,他们可没有 Photoshop 作为向导。如果有什么区别的话,更多的字体选择会使事情更加糟糕,这是因为一旦有了更多的选择,创造性以及美观就会变得很难实现。

  更多的玩具意味着更多的乐趣,不是吗?如果你想走这条路,那就全力以赴,尽一切可能去达成。我喜欢看着不同的字体被使用,钦佩那些可以成功的在网站上使用新字体的人。然而,我已经太多次看到当开发方案提供给大众时会发生什么,这并不是很好(就像 Myspace)。而 Typekit 能让你在开始使用一种字体之前就能使用文字设计来阅读一本书,这会很酷,假如如果没有用户协议的话 —— 如果是这样的话,网站将会改进十倍。

  并非是我尖酸刻薄,说这就是对大多数网站来说你所需要知道的。试着仔细查看你喜爱的所有网站设计,去掉其中所有的图片,然后问下自己:“只有文本和空白的网站会是什么样?”当设计师们说“文本是一种界面”时,他们来真的了。iA site(网站)就是一个杰出的例子。可以500%提高开发效率的前端UI框架!  

再说一遍:文字设计是网页设计的根本

  我最喜欢的作品之一是A Working Library。它是以文本的展示来形成界面,留白刚刚好,文字设计也很到位。

再说一遍:文字设计是网页设计的根本

  一些人认为这样的设计枯燥而乏味,他们认为设计应该有更多的流行风格。到了最后你设计的剩余部分可能会被你的一些多余的视觉嗜好所占据(你不再重视设计本身),所以你需要完成设计最初的 95%。但你此刻正在阅读的这篇文章所在的网站就已经做得很好,展示了不依靠图像而仍旧美观的视觉设计。

  很可能会设计出一个精彩的网页而不用丁点图片,我知道这听起来很疯狂,但这很有可能。我并不满足这本应如此,但是如果我们能够仅用文字设计和空白就能体现优雅,那为什么我们不应该试着去插入图像、视频和其他效果来创造杰出呢?可以500%提高开发效率的前端UI框架!  

  在使用图像时我不是想说那些真正要表达什么的图像,就如图标,但图像在这里就是为了引人注目。有时一张图胜过千言万语,所以最好使用图片(但你仍然需要考虑使用留白)。这里有两个以上的美好网站的例子,它们都将重点放在文字设计上以实现整个设计。第一个网站是 Blake Allen Design,第二个是 The Harriet Series(这两个网站都是使用图像来表达他们的文字设计,你要认识到这一点)

再说一遍:文字设计是网页设计的根本

再说一遍:文字设计是网页设计的根本

  上面的两个设计之所以让我感兴趣,是因为文字设计并不单是指引你经过这段过程,它是在用自己的风格做着这件事。你几乎感觉到文字设计就是设计者的表达。Blake Allen 使用赫维提卡体(Helvetica)来使他的网页满是瑞士风格式的清新、有序的风格。而在另一方面,哈里特系列的网站则显得有一点顽皮,也更具实验性。这就是文字排版所造就的有组织的混乱之美。

  对在这之外的 99% 的设计师,文字设计和留白是你们潜在的基础。所以如果你不好好了解改正,你接下来的设计便如同无根可依。对你的设计的担心还是停下来吧,首先要担心的是如何让设计坚挺站立。应该了结了这个之后再开始装扮你的设计。

  Clear应用是 iOS 上的一款简洁的任务管理列表应用。当围绕它的兴奋点主要是用手势来控制界面时,你会发现单是文字设计就足以解决一切并让你享受着这款应用。当然这是使用了 Helvetica 字体,如果是使用了到处是糟糕间距的 Comic Sans 字体呢?杰出的文字设计并不一定以很美好的方式引人注目,而这并不意味着它也要以一种负面的方式突出,然后带来足够的伤害。可以500%提高开发效率的前端UI框架!  

再说一遍:文字设计是网页设计的根本

  Art of the Menu是一个很棒的菜单设计网站。

再说一遍:文字设计是网页设计的根本

  The Art of the Menu 网在说明文字设计对菜单设计的重要性上做出了很多贡献。当一些餐馆很乐意地去往菜单加入图像和插画以让其变得招人眼球时,他们并没有使用合适的文字设计结构以使你更容易的浏览菜单,这很失败。可以500%提高开发效率的前端UI框架!  

  如果你是一个设计师,没有理由会说你不想要一个合适得体的设计。当你进行一个没有坚实根基的设计时,你往设计里增添任何东西都只会使你的设计变得更糟。太多的设计师都会茫然的尝试着用无价值的东西去拯救他们的设计,他们无疑是在火上浇油。

  是否已经更好的理解了文字排版呢?不久之前 Smashing 杂志做了这个一些顶尖的文字设计的工具和资源的综合总结也可以看一下。

0
0
分享到:
评论

相关推荐

    【网页设计和制作】结课论文.doc

    "网页设计与制作结课论文" 网页设计与制作是指使用HTML、ASP、JSP、PHP等语言创建的网页,网页是构成WWW(World Wide Web)的一个基本元素。网页可以用图像档来提供图画,网页要使用网页浏览器来阅读,现在流行移动...

    网页设计流程.ppt

    网页设计流程详解 网页设计流程是网站开发中最耗时、最关键的一个环节。本文将从零开始,遵循Web标准,介绍网页设计的7个步骤:内容分析、结构设计、原型设计、效果图设计、布局设计、视觉设计和交互设计。 一、...

    网页设计基础习题库.doc

    网页设计基础习题库涵盖了互联网和网页设计的核心概念,以下是对这些知识点的详细解释: 1. Internet,即“因特网”,是一个全球性的开放计算机网络,汇集了海量的信息资源。 2. TCP/IP(传输控制协议/互联网协议)...

    《互动媒体设计A》教案.doc

    在课程安排中,第一章的教学目的和要求是认识互动媒体设计的根本概念、熟悉互动媒体设计的分类与设计方法、掌握网页设计的根本元素、根本结构形式以与设计制作程序。教学重点和难点包括互动媒体设计的设计方法、互动...

    大学 毕业设计 项目实训 留言簿系统网站.zip留言板_毕业设计根本不会做

    【标题】"大学毕业设计 项目实训 留言簿系统网站.zip留言板_毕业设计根本不会做" 提供了一个关于毕业设计项目的主题,这个项目是一个留言簿系统网站。这个项目对于大学生来说,可能是他们初次接触实际的Web开发,...

    平面设计专业毕业设计论文自选题目.doc

    5. 网页设计的根本要求及好的网页设计:关注网页设计的基本原则,如用户体验、信息架构、交互性和视觉美感,探讨如何创建高效且引人入胜的网页。 6. 公益海报设计的体会:公益海报需要传达社会关怀和价值观,通过...

    以市场需求为导向的高职电商视觉设计课程改革.pdf

    电商视觉设计指的是通过视觉元素的创造性组合,包括布局、色彩、图形、文字等,对电商网页进行设计,以吸引用户、提升用户体验,并最终促成交易。这一设计领域的专业人才需求日益紧迫,而高职院校作为人才培养的重要...

    产品设计 03 可达性.pdf

    根据统计,约有 8% 的人口非常困难或者根本无法使用网站,约 4% 的人口有视觉障碍,2% 有行动障碍,1% 有听觉障碍,不到 1% 的人口有学习障碍。 为了确保可达性,应当遵守《联邦可达性标准 508 条款》,包括为非...

    XML轻松学习手册--XML肯定是未来的发展趋势,不论是网页设计师还是网络程序员,都应该及时学习和了解

     第一:XML肯定是未来的发展趋势,不论是网页设计师还是网络程序员,都应该及时学习和了解,等待只会让你失去机会;  第二:新知识肯定会有很多新概念,尝试理解和接受,您才可能提高。不要害怕和逃避,毕竟我们...

    JSP程序设计期末大作业[归类].pdf

    JSP 将网页逻辑与网页设计的显示分离,支持可重用的基于组件的设计,使基于 Web 的应用程序的开发变得迅速和容易。 此外,HTML 超级文本标记语言是标准通用标记语言下的一个应用,也是一种规范,一种标准,它通过...

    浅析数字媒体背景下的互联网广告设计.pdf

    在信息社会的快速发展下,传统的传播媒介如纸媒和电视逐步被新媒体所替代,而数字媒体由于其互动性强、受众面广等特点,在现代广告行业中占据了核心地位,并对广告设计的形式产生了根本性的影响。 首先,数字媒体的...

    前端Web开发基础课程标准.doc

    2. 掌握应用上述理论知识,制作根本网页、设计网页布局、实现多样化及良好客户体验的页面效果等应用技能; 3. 培养学生的创新意识,设计特色网页。 课程教学目标: 1. 知识目标: * 了解本课程容在Web开发领域的...

    教你制作静态网页的方法.doc

    一、网页设计根底 1. 熟悉 Dreamweaver 8 的工作环境 在 Dreamweaver 8 中,界面主要分为五个部分:工具栏、文档窗口、属性面板、文件窗口和状态栏。工具栏提供了多种工具和命令,文档窗口是当前文档的编辑区域,...

    CSS Tab Designer 网页特效工具

     你可以把CSS Tab Designer理解为网页生产工具,使用它,你根本不需要写代码、也不需要对色彩进行构思,点几下鼠标,设定好导航文字和链接就可以了,生成的xhtml代码绝对的标准,其速度也真的是非常的快。...

    把复制来的网页乱码转换清零

    - 在设计网页时,尽可能使用普遍支持的字符集,如UTF-8,以减少跨平台和跨软件的兼容性问题。 ### 四、总结 通过理解和应用上述方法,我们可以有效解决从网页复制到Word时遇到的乱码问题。这不仅提升了工作效率,...

    大学网站策划书.docx

    我们还将设计一个 div 三段文字和一个悬浮窗链接四个网页附属链接。 青春校园 青春校园是在线交流的社团性质存在,旨在提供一个开放、自由的交流平台。我们设计的青春校园将包括四个导航:主页、青春校园、信息...

Global site tag (gtag.js) - Google Analytics