The Zen of CSS(翻译)(3)

本文探讨了Tranquille作为Zen Garden项目的默认设计选择的原因。通过对细节的关注,如使用Calligraphic421字体及手工绘制元素,设计者Shea创建了一个既简约又富有内涵的界面。此外,还讨论了汉字元素的含义及其在设计中的应用。

缺省的设计Tranquille

    Zen Garden的前五个设计已经证明了这个项目最初的成功,只有默认的设计方法能够在长时期内保持较高的可用性。该项目的默认设计中往往尽可能少地包含Tranquille,#002设计中,Salmon Cream Cheese有考虑过更直接使用tranquille的效果,值得庆幸的是,这一设计由于Tranquille而增色不少。

         在默认的设计中,所有的图像与文字,除了文本的字体外,都是通过photoshop以手绘的方式作出的。在最初的设计中,Shea花费了整整一个小时的时间,用笔刷和墨水的效果一笔一画地来表现标题的字体,但是后来,他却发现Calligraphic 421字体是一个更好的选择。(如图)

 

         由于汉字的错综复杂、美妙无比,很多设计者都非常欣赏用汉字来表现出额外的细节。Shea 在设计中,试图避免仅仅利用汉字神秘性与复杂性来表现思想,而是花费了更多的时间,让布局在页面左上角的汉字的意义能够使设计更为丰满。虽然经过了诸多的苦心经营,这些汉字元素只是粗略地表达了几个意思:开始、结束、或者完整、熟练。

你在小学的时候,做过这样的活动吗?把墨水随意地泼洒在纸面上,然后用吸管去吹那些墨水,使它形成一棵树。然后粘上一些弄皱了的纸来代表花。设计页面右下脚的树的灵感,就来自于我们小时候玩过的这种活动。就如你在屏幕上所见一般,这棵树的设计经过了几个步骤的修改。这几个步骤就是从草图然后到添加简单的颜色再在草图之上添加各个层次的细节。

 

原文


Default DesignTranquille

Though the first five designs would prove important for the project's initial success, only the default design would retain a high visibility over the long term. The subtle and minimal Tranquille was always designed to be the default, though design #002, Salmon Cream Cheese, was considered for a while due to its more immediate impact; thankfully, the decision was made in favor of Tranquille.

All images and text within the default design, aside from the body type, were digitally hand-painted in Adobe Photoshop. The intended rendering of the title text was a series of hand-painted calligraphic brushstrokes, but after spending an hour with a brush and india ink, Shea decided that the Calligraphic 421 font from Bitstream was a much more desirable option (FIGURE 12).

 

Figure 12. Calligraphic 421 samples.

 


Because Chinese characters are intricate and beautiful, many designers appreciate the extra detail they can add to a piece. Trying to avoid the typical Westerner method of joining a bunch of random Chinese characters together for mystique and detail, Shea spent some time researching the characters to add some meaning to the scroll hanging down from the top-left corner of the design. Well intentioned as this approach was, the result still ended up largely nonsensical anyway: The symbols chosen roughly represent a beginning, complete or whole, and skill in English.

Remember the project in grade school where you dumped some india ink onto a sheet of white paper, then blew on it with a drinking straw to create a black treelike shape, and finally pasted on crumpled pieces of tissue paper as "blossoms"? The tree in the bottom-right corner of the design grew out of fond memories of that project. As you can see from the screen shot, it went through a few revisions (FIGURE 13). The process involved sketching a rough outline with simple colors and then building up layered detail over top of it.

 

Figure 13. Building the tree illustration.

 

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值