预览模式: 普通 | 列表

网页的栅格系统设计

栅格系统的形成
1692年,新登基的法国国王路易十四感到法国的印刷水平强差人意,因此命令成立一个管理印刷的皇家特别委员会。他们的首要任务是设计出科学的、合理的, 重视功能性的新字体。委员会由数学家尼古拉斯加宗(Nicolas Jaugeon)担任领导,他们以罗马体为基础,采用方格为设计依据,每个字体方格分为64个基本方各单位,每个方各单位再分成36个小格,这样,一个印 刷版面就有 2304个小格组成,在这个严谨的几何网格网络中设计字体的形状,版面的编排,试验传达功能的效能,这是是世界上最早对字体和版面进行科学实验的活动,也 是栅格系统最早的雏形。

栅格系统英文为“grid systems”,也有人翻译为“网格系统”,其实是一回事。不过从定义上说,栅格更为准确些,从维基百科查到栅格的定义为:栅格设计系统(又称网格设计系统、标准尺寸系统、程序版面设计、瑞士平面设计风格、国际主义平面设计风格),是一种平面设计的方法与风格。运用固定的格子设计版面布局,其风格工整简洁,在二战后大受欢迎,已成为今日出版物设计的主流风格之一

网页设计中的栅格系统
我给网页栅格系统下的定义为:以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。
网页栅格系统是从平面栅格系统中发展而来。对于网页设计来说,栅格系统的使用,不仅可以让网页的信息呈现更加美观易读,更具可用性。而且,对于前端开发来说,网页将更加的灵活与规范。

查看更多...

分类:设计理论 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 855

30大优秀Logo设计详解

原文:30 Brilliant Vector Logo Designs, Deconstructed -Chris Spooner

编译:Vinwin (不倒猫

(转载请注明出处,标注链接,谢谢合作)

拥有一个抢眼的Logo对企业来乃一大幸事,毕竟Logo千千万,但真正让人过目不忘的作品可是屈指可数。好的Logo必须量体裁衣,迅速传递出企业的价值和理念。
但Logo不能只是金玉其外,还必须有思想、多功能。比如,可以用标准色在任何尺寸的纸张完美复制和再现。下面就晾出当前30个自认为很杰出的Logo,飨宴大家。

1.    Castle Print
一个打印机品牌,该Logo直截了当地体现了了企业的业务性质:利用减色模型,直指其打印行业背景,同时通过色彩的混合塑造出一个与其品牌相符的城堡(Castle)形象。


2.    Ryan-Biggs
负空间的运动使得这幅Logo有一种奇幻的效果,完全考验你的空间想象力!B和R两个字母代表了这个品牌,微微的倾斜让整个设计看起来更有深度和立体感。色彩搭配极为简单—红色,赋予了Logo更广的使用范围。

3.    One Leaf
One Leaf, 顾名思义,即一片树叶。以此为轴线,就呈现出了如此简洁巧妙的画面。

4.    Greener
设计师用粗细不同的灯芯体(San-serif)字体塑造出一种现代感。该Logo不但层次感强,更重要的是可以用单一色调复制重现(这也是评判Logo好坏的重要标准之一)。

5.    Talkmore
Talkmore字面意思是“多说点儿”。设计师采用象征的手法,用英文中的单引号分别代替字母“a”和“e”,从而在图形上给予品牌最鲜活的注解。


6.    Black Sparrow
看上去很简单的图标,但在细节处理上却达到了极致。从麻雀(即Black Sparrow的中文)的图案到字体,柔和的曲线与平滑的字体相得益彰,将完整的设计融入品牌表现。


7.    Swannie Lake
富有时代气息的Avenir字体配合平滑的图案,不但与该Logo完美贴合,而且增添了一许微妙的色彩。

8.    Elara Systems
先介绍一下,Elara Systems是一个动画和动态模型工作室,也必然要求2D和3D的结合。体现在Logo上,就是大家所看到的效果:柔软弯曲的字体配上3D的字母“e”(即首字母),很好的创意。

9.    Onwine
完美的字体搭配独到的理念,Onwine Logo为我们展现出一个酿酒商的特质,无论是图案还是字体设计都无可挑剔。


10.    Popp
什么叫一气呵成?这幅Logo将基于同一字体的设计方法带上了全新的高度。每个字母都包含字母“O”,只是做了细微的改动就成了“P”,独具匠心。

11.    Therauz Fashions
能看出这个Logo的绝妙之处吗?该公司从事时装设计业务,所以针线活是少不了的。画面中央的长针,不仅反映了公司业务,而且将中间一串字母给“缝”了起来,成了必不可少的一部分,内涵之深可见一斑。

12.    Alatau
无论是字母还是彩色远点,共同的特点就是间距较大,这种手法带来的效果就是严肃而前卫。这样排列的好处还在于以中间两个字母中心,整个Logo看起来非常平衡。


13.    Spiffy Sparrow
作品采用复杂的形状、线条和色彩,为以后的调整打好了基础。另外,用负空间来塑造鸟的躯干也是令人叫绝的地方。


14.    About Thyme
干净利落的线条和形状,是Logo设计的固有套路。不过,本作品似乎摆脱了这样的条条框框:粗糙的手绘图案,给人以一种亲和力,也给体现了品牌所有者作为调味品公司的价值。

15.    Ta Jevi
一个娱乐网站。Logo的每一部分都闪烁着欢乐感。箭头组成的笑脸传递出了这样的信息—欢乐无止境。跳跃的色彩和超酷的手写字更突出了该网站的娱乐价值。


16.    Anti Particle
中文名—反粒子,是一家电影制作公司。这里有必要做个小小的科普,反粒子其实很简单,比如负电子的反粒子就是正电子,质子的反粒子就是反质子……好了,回到Logo上,很明显,这又是一个用公司名做文章的范例。首先首字母“a”有无数颗粒组成,但里面恰恰有一颗蓝色颗粒,这就体现了“反粒子”的概念。


17. 69 Monos
不同于平面2D设计,有些Logo,就像69 Monos,通过3D效果给Logo增添深度和趣味。改变角度就能带来动感,何乐而不为?


18.    Green Dolphin
Logo使用海豚(Dolphin)的轮廓和绿色来传递品牌信息,同时也隐藏了次级画面—即大写字母G。

19.    Aramova
经典的莫比乌斯带(Mobius Strip http://hi.baidu.com/totogo/blog/item/629a233ff2239aec54e723ad.html)使用案例!柔软的质地+奇幻的色彩,整幅画面让人体会到永不停息的动感。


20.    Vize
并不是所有的Logo都需要附属图案,比如我们看到的这个。虽然只有字体,但由于在排版上做足了功夫,Logo同样可以表达品牌的理念。

21.    Friends in Places
交友网站,很明显。看似纷繁复杂的箭头构成了一幅世界地图,表现了互联网时代网络社交的全球性和广泛性,企业的品牌价值由此得到体现。


22.    Koloroo
一款色彩方案的软件产品。随机的颜色搭配勾勒出了一只袋鼠的形象,这也符合其产品形象。字体设计同样出众,因此可以说,该Logo两部分合起来是精品,拆开来也是优秀的图案和文字标识。


23.    Pangur
手工玻璃制造商。通常而言,透明的运用在Logo设计中是慎而又慎的,不过随着打印技术的改进,已经没有理由限制这种技法的使用了。设计师用不同色彩的玻璃碗进行简单堆砌,且呈现不规则倾斜,这恰恰抓住了玻璃手工艺的特点。Futura字体也给作品锦上添花。

24.    Tammy Lenski
美国一家争端解决公司(比如劳资纠纷等等)。现在,搭上千纸鹤,来一趟意境之旅吧。大多数Logo都直截了当地反映目标企业的各个方面,然而这个设计却通过千纸鹤的故事和寓意来展现企业形象(编者注:之所以这么说,是因为西方人并不了解千纸鹤的含义)。


25.    Eco Cafe
图案简洁又不是标识性,整幅作品看起来就像破土而出的生命。生态咖啡馆—该企业的名称—得到了最鲜明的宣示。而正因为标识本身的简洁,使得它贴在窗户上,也可以印在咖啡杯上。

26. Firefish
这又是一个运用流行技术—比如透明—塑造多层次标识的典范。火焰拼成的鱼(即Firefish,火鱼)搭配上经典的大写灯芯体(san-serif)字母,堪称一绝。

27. Boxbound
立体和透明同属当今Logo设计潮流,这幅作品同时运用了这两种技巧。生动的色彩加上浑圆可爱的字体,俨然一副基于网络的时代先锋形象。


28. AdMagik
看完这个Logo,你应该能学会用颜色区分信息。品红色部分突出了公司的名称“Magic”(魔术),而灰色字体暗示了该公司的身份,也是Logo的重点所在,即“Ad”(广告)。最后,在字母J和I上做图,使之成为兔子的形象(编者注:兔子在西方是魔术的象征),再一次强调了企业点石成金的业务能力。


29. Jivespace
这个Logo用爆炸性的手法给人以强烈的视觉冲击,既有深度又充满活力,同时,全部小写字母的排版方式体现出其时代气息。

30. Core
和前面提到的“Popp”Logo类似,它也是基于一个形状延续下去,线条干净利落,颜色单一,该Logo的功能性可想而知有多么强大。

Tags: logo

分类:设计欣赏 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 826

阿里旺旺产品项目UED流程图

分类:设计理论 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 702

网页设计谈单经典案例

客户不签就加价
网页设计报价从来就没有个标准,公说公有理,婆说婆有理,于是很多时候我们的业务人员在跟客户谈判时,如果久谈不下就会想到降价,而我这次却用了一个恰恰相反的办法;那是个很小的单,就5、6个页面,第一次去的时候我报了个3500的价,客户听了后说:“这个价太高,我们没法接受”,我于是问他的预算是多少,客户没正面回答,只说要考虑一下,显然他自己也没底而且客户第一次不签单很正常,于是我打道回府。隔了十来天客户来电话问我“有没空聊聊网站的事呀”,于是我们又开始谈,在谈得差不多的时候我问他上次的合同还在吗?他推说不知放哪去了,我只好重新拿出一份新合同来,这次我在合同上写了个3800的价格,客户接过合同看了看说:“这样吧,我们也对比一下,如果别家公司报的价都跟你们差不多就给你们做吧”;我没说什么,我知道这时解释是多余的,因为越解释客户会越觉得你的价格是可以浮动的,于是我起身对他说:“好的,其实我们一直都很鼓励客户多做些比较的”。第三次再去时客户直接说:“网站我们是要做的,只是希望能用最实惠的价格把事情做好”,看得出来这次客户是真的打算做了,为了给客户个台阶也为了表示诚意,我也就顺水推舟的作了个100块钱的让步,最后以3400签下了这个单。
引用内容 引用内容
评:当然这里有两个因素我们不能忽略,首先是客户是公务员且经常出差,他所能接解触到的网络公司将非常有限,所以我也就不担心他会去做比较了,二是单子比较小,凭我的直觉客户的预算不会超过2500,也就是说正常情况下客户绝对不可能3400签,而如果价格太低我们又不想做,于是我才用了这个违反常规的办法。


查看更多...

分类:销售技巧 | 固定链接 | 评论: 1 | 引用: 0 | 查看次数: 720

画Web流程图的一点心得

一个哥们在MSN上告诉我,他们公司的交互设计师只产出流程图,并问我用什么标准评价流程图的好坏。他的说法把我彻底震了-这分工也太细了吧!也不知道该说他们那里这样是好还是不好。

不过仔细想来,我倒的确没有仔细考虑过流程图的好坏,正好借此机会自我总结一下。

1、各司其职的形状

在我的流程图中,适用于不同目的和功能的形状都有各自确定的规范。到目前为止,我一共定义了以下一些形状:

(1)开始和结束

查看更多...

分类:设计理论 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 456

喷绘写真的基础知识

喷绘一般是指户外广告画面输出,它输出的画面很大,如高速公路旁众多的广告牌画面就是喷绘机输出的结果。一般是3.2米的最大幅宽。喷绘机使用的介质一般都是广告布(俗称灯箱布),墨水使用油性墨水,喷绘公司为保证画面的持久性,一般画面色彩比显示器上的颜色要深一点的。它实际输出的图象分辨率一般只需要30~45DPI(按照印刷要求对比),画面实际尺寸比较大的,有上百平米的面积。

       写真一般是指户内使用的,它输出的画面一般就只有几个平米大小。如在展览会上厂家使用的广告小画面。输出机型如:HP5000,一般是 1.5米的最大幅宽。写真机使用的介质一般是PP纸、灯片,墨水使用水性墨水。在输出图象完毕还要覆膜、裱板才算成品,输出分辨率可以达到300—1200DPI(机型不同会有不同的),它的色彩比较饱和、清晰。

  下面我们简单介绍一下喷绘和写真中有关制作和输出图象的一些简单要求。

查看更多...

Tags: 喷绘 写真 保存格式 ps

分类:设计理论 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 552