《众妙之门——网页设计专业之道》——1.6 丰富强大的版式

简介:

本节书摘来自异步社区《众妙之门——网页设计专业之道》一书中的第1章,第1.6节,作者: 【德】Smashing Magazine 译者: 赵俊婷 更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.6 丰富强大的版式

多年以来,排版在网页设计中一直扮演着重要角色。大胆、强烈、沉重的刊头能够有效地宣传电子商务网站或作品集网站;然而一个巧妙的刊头则更有助于呈现内容的结构,并且提升易读性。很显然,我们见到了更大的变化,更灵活的排版,在一定程度上使@font-face属性和字体嵌入式服务的出现成为可能,如TypeKit。丰富的版式元素能够在浏览器中选择和复制,这在几年前可不是一件容易的事。未来追求的是夸张和大胆的排版。丰富的字族不仅将运用到标题上,还将运用到正文和副本中,将排版技术从印刷界带入网页设计界。此外,设计师们还将大胆尝试更多丰富的、复杂的衬线字体,以及有气势的slab字体。网页设计师还可以通过CSS3文字阴影属性为排版添加了更多深度。当然,这些细微之处与布局的选择密不可分。这些排版设计通常是基于网格的设计,并且是从印制界引入的技术,如旁注和脚注。我们进一步了解到,设计师正在扩大他们的字体集合,添加越来越多的阴影字体,避免特定的字体不可用。这样很好,毕竟字体的大小(或粗细)不太一样;一些字体会显示得比其他字体更宽或更粗一些。因此,更大的长宽比例意味着,一些用户在查看你的页面时,将比你看到更小的字体尺寸。

Kilian Muster
Kilian Muster采用了相当宽松的衬线字体来完成设计,包括字族中的Palatino、Palatino Linotype、Book Antiqua、Constantia、Times和Times New Roman字体。在Kilian的博客中也含有便笺。


303c0b848efa7c15b9712261ba83bb36656feb7a

extrapolish
请注意,这家波兰网页设计机构网站上的文本大多数设置为大写,如导航菜单、简介,甚至联络地址都是大写。尽管如此,其设计仍显得平静、大气、干净且精致。

ef5a9fb42ae145f4ebf359e8afe6962f3b2d27d6

DNA to Darwin
此网站仅采用了衬线字体贯穿整个设计。字体为:“skolar-1”、“skolar-2”、Georgia和Times。值得注意的是,文本被区分成列。直到去年我们还没有看到过此类设计。

e3ef8274f4c29f2c943886dcffa4cbe7356da807

Pioneers
此网站结合了生动形象的图片和俏皮的排版。和“传统经典”的网页比较起来,该设计更像是一本小册子或一张海报。

6628d603e78b1682e97ae4c7bee0b0cfc48d0cd1

Colly
Simon Collison巧妙地将访客的注意力引向最微小的细节,从而呈现出排版之美。没有加粗字体和令人感到惊艳的排版,只有简单易读和美观大方的设计。


fc7b6c3691df6e7cc1d8b7bec61e2f94e8d7da3d

The Saint John’s Bible
此网站将衬线字体运用到了极致。该字体配合主题,完美地适应了布局。请特别注意,这样美观的视觉设计是如何与传统经典的排版布局相融合的。


ba37537b8a086d1684af27031f50e99971c29094

Brewhouse
不错的风格和视觉的组合,使页面很醒目。但是到目前还不清楚为何设计者在该页面使用了三种不同的标题字体,理论上两种就已经足够了。


2dfd733432e7a586ab7b28c43d8da7ed4bdb1c55

图_页面_294_图像_0001.jpg

terminalbrewhouse.com

Tick Talk
还能再大胆一些吗?大型加粗字体,大写字母贯穿了整个页面。当用户滚动页面时,能观看到非常漂亮的背景效果。这是一个非常简单而有力的设计。


72b72344e4d6896f7521ec68833da7618de56c15

总结
现代网页设计应该更好、更丰富且更便于用户使用。我们注意到,使用良好的视觉设计可以获得更美观和更好的用户体验。传统的技术,从印刷排版逐渐被应用到网络,作为布局技术或丰富的多功能排版技术,水平甚至是对角线布局的排版给多年来我们所熟知的平面设计带来了崭新的视角。这些进展都是网页设计时代到来的一个标志。在这个时代中,设计师可以使用新的工具和技术,并使其潜能发挥到最大。网页设计师理应期待激动人心和有有前途的时代到来。

相关文章
|
前端开发 JavaScript 数据可视化
(web前端网页制作课作业)使用HTML+CSS制作非物质文化遗产专题网页设计与实现
(web前端网页制作课作业)使用HTML+CSS制作非物质文化遗产专题网页设计与实现
(web前端网页制作课作业)使用HTML+CSS制作非物质文化遗产专题网页设计与实现
|
Web App开发 JavaScript 前端开发
《众妙之门——自由网站设计师成功之道》一导读
《众妙之门——自由网站设计师成功之道》出自世界知名Web设计网站Smashing Magazine,其内容是全球顶级设计师的精华总结。全书共4章:第1章介绍了作为一名自由网站设计师需要具备的基本技能,读者可以从中找到自己还欠缺的能力;第2章讲述了应该如何与客户及合作伙伴进行有效地沟通,以便达到共赢;第3章展现了自由网站设计师的营销策略——说服客户,完成任务;第4章涉及谈合同与报价的技巧,这是自由设计师最为关心,也是最不擅长的,读者可以直观高效地了解如何与甲方谈酬劳。
1618 0