越来越多的网页设计师开始知道,进行布局设计时需要用到栅格线。但是对于老手来说,栅格线不是唯一的可选项,这些老手经验丰富,基础扎实,他们懂得怎样去创新,懂得用新颖的设计完成目标。条条大路通罗马,他们会凭借自己的感觉去摸索成功的方式,而最终的效果却更出彩。

栅格线与设计的关系可谓源远流长,对栅格线应用的熟练程度可以衡量一名设计师的水平。在看今天的文章之前,不妨一起来阅读一下与栅格有关的两篇文章吧!

高手之路!网页设计师应该知道的网格系统
一篇文让你了解什么是栅格系统

先忘记栅格吧!你应掌握的11个创新布局技法

左图: 瑞士风格海报 by Josef Müller-Brockmann。右图: 后现代主义风格海报 by Wolfgang Weingart

现代布局栅格线系统是由瑞士设计(又名国际主义平面设计风格)在20世纪早期确立的。

到了70年代,后现代风格影响了瑞士设计风格,瑞士风格一改过去僵化的栅格线系统,换之以更加灵活的栅格线布局。以完成更复杂、装饰更华丽的设计。后现代主义设计师从未抵制过栅格线系统,但是他们打破了限制。

先忘记栅格吧!你应掌握的11个创新布局技法

左起:Sex Pistol Album cover by Jamie Reid,。Magazine, 'Emigre' Spread, 'Ray Gun' Magazine cover

还有一些平面设计师以新式风格继续推动着栅格线系统的发展,形成了诸如朋克、新浪潮、数字表现主义等新风格。一些设计师,比如David Carson,完全摒弃了栅格线。更多的是对栅格线系统理解基础上的改良、突破。

时至今日,栅格线系统依然重要。但是不要那么死板,脑子要活一点儿,还有很多设计的技法,尤其是以自由开放而著称的网页设计。

先忘记栅格吧!你应掌握的11个创新布局技法

如图: The Amanda Project website, Ed Fella's website, Kutztown Communications department website,MTV's website

你看上面这些网页设计,都使用了栅格线系统,设计师"玩"的比谁都"溜",他们会根据现有的情况,突破栅格线的限制,在不牺牲可用性的前提下,达到出色的视觉效果。

因此,要想掌握本文的技法,必须要有扎实的基本功,要对栅格线有充分的了解和心得。本文可不是新手向的文章,"要想跑,先会走"。同理,要想改造栅格线,必须先要掌握栅格线基础。什么叫做伟大的设计师?伟大的设计师便是:心中对基础和原则了如指掌,但又不墨守成规,根据实际情况与个人经验,打破规则,完成更美的设计。

废话不多说,看看这些设计师们是如何打破规则的吧。

1. 阶梯状布局

先忘记栅格吧!你应掌握的11个创新布局技法

阶梯状的字体布局富有后现代主义气息,配合相关的图像,能够达成与众不同的视觉效果。

2. 适度倾斜

先忘记栅格吧!你应掌握的11个创新布局技法

性感的翘臀?性感的翘字?个性十足,遐想连篇。

3. 环绕形布局

先忘记栅格吧!你应掌握的11个创新布局技法

更好的图文结合、打造视觉焦点、充分利用空间,挖掘栅格线系统的潜力。

4. 插画元素

先忘记栅格吧!你应掌握的11个创新布局技法

栅格式布局太呆板?试着加入一点插画元素吧。让页面看起来更具娱乐性,更好的平衡美学与功能。

5. 重叠

先忘记栅格吧!你应掌握的11个创新布局技法

在Frank Chimero的动态个人网站中,他采用了图像重叠的手段,而非传统的栅格线布局。令人印象深刻。

6. 利用页面边缘

先忘记栅格吧!你应掌握的11个创新布局技法

不要为了留边距而留边距——可以做点小实验,让文本超出页面边缘,然后用成沓的印刷品来呈递作品。

7. 妙用形状

先忘记栅格吧!你应掌握的11个创新布局技法

锐利的矩形配合以文本,看起来像是玻璃碎片,暗含一种暴力、兴奋的因素。

8. 不对称设计

先忘记栅格吧!你应掌握的11个创新布局技法

不对称设计让人感觉非常自然、淳朴、无修饰。比如说这罐蜂蜜,感觉就很天然。

9. 拼贴画

先忘记栅格吧!你应掌握的11个创新布局技法

这则可爱的婚礼邀请函感觉非常人性化、有手工质感,浓厚的拼贴风格。

10. 加入引用

先忘记栅格吧!你应掌握的11个创新布局技法

用户对一成不变的阅读节奏感到厌倦怎么办?那就试着打破节奏,给用户一点惊喜,引用就是一个好方法。尤其是在大块大块的文本信息中,加入引用可以适度缓解多栏布局的阅读节奏感,让用户读起来更舒心。

11. 手绘字体

先忘记栅格吧!你应掌握的11个创新布局技法

适度添加手绘风格的字体,让你的设计更加有趣,别有风味,而不是一本正经。
这就是突破栅格线布局设计的一些技法,大家可以举一反三,在熟悉基础的前提下,突破原则,也突破自我!

原文地址:99designs
优设网翻译:@MartinRGB

转摘请注明优设网译文出处,谢谢各位小编。

 
================关于优设网================
"优设网uisdc.com"是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
设计讲座:每月邀请国内互联网公司设计前辈及行业总监在群内及YY语音(YY频道:156982)分享实战经验。
设计微博:拥有粉丝量56万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的"福利"吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

先忘记栅格吧!你应掌握的11个创新布局技法
 

收藏 4
点赞 1

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。