History of the design grid II-設(shè)計網(wǎng)格歷史2

在「設(shè)計網(wǎng)格的歷史」中潜索,我們概括了文藝復(fù)興起源及20世紀(jì)設(shè)計網(wǎng)格的發(fā)展逢净,探索有700年歷史的和諧比例原則是如何繼續(xù)指導(dǎo)印刷設(shè)計的被芳。在這篇文章最后肪获,我們也會看到它們對網(wǎng)頁的影響。

現(xiàn)在狮含,讓我們考察近代設(shè)計網(wǎng)格顽悼,并完善主題:20世紀(jì)藝術(shù)與設(shè)計對網(wǎng)格的公開提倡、隨后而來的短暫抵制几迄、以及現(xiàn)代最終在網(wǎng)頁設(shè)計上微妙而不可動搖的地位蔚龙。請閱讀并思考我們立足于何處,尋找資源發(fā)揮網(wǎng)格的最大潛能映胁。

20世紀(jì)的藝術(shù)與設(shè)計

當(dāng)瑞士排版師在建立印刷設(shè)計中網(wǎng)格的中心地位時木羹,世界純藝術(shù)領(lǐng)域也發(fā)起了類似運動。

網(wǎng)格在荷蘭風(fēng)格派運動中最為明顯解孙,這個運動由藝術(shù)家凡·杜斯堡(Theo van Doesburg)和蒙德里安(Piet Mondrian)于1917年發(fā)起坑填。基于對模塊設(shè)計廣泛理想化的潛力和對絕對簡潔的信仰弛姜,他們在畫布上只使用縱橫交錯的線條和未經(jīng)調(diào)和的顏色脐瑰。

一本風(fēng)格派運動出版物(左)以及蒙德里安使用網(wǎng)格的畫作

2年后,在1919年娱据,德國的包豪斯成立蚪黑,他們崇尚形式追隨功能,舍棄一切「不必要」及裝飾的成分中剩。這個哲學(xué)引導(dǎo)他們使用網(wǎng)格忌穿,正如著名的包豪斯國際象棋。這副棋的棋子均為圓和方结啼,能緊密放置保證便攜保存掠剑。

包豪斯出版物(左)以及包豪斯國際象棋

同時,網(wǎng)格在平面設(shè)計中的地位越來越牢固郊愧。翻看Josef Muller Brockmann, Richard P. Lohse, Armin Hofmann 和Alberto Longhi等大師的著名招貼作品朴译,你能看到它們都嚴(yán)格遵循網(wǎng)格(有時網(wǎng)格是傾斜的,這被唯一許可)

這些是 Armin Hofmann和Alberto Longhi做的海報

1972年属铁,Massimo Vignelli重設(shè)計的紐約地鐵地圖改變了站點的地理位置眠寿,基于網(wǎng)格制作了一張更易讀的地圖。

Massimo Vignelli重設(shè)計的紐約地鐵地圖為獲得易讀性改變了站點的絕對地理位置

而到1960年代的波普藝術(shù)時代焦蘑,網(wǎng)格地位大致到達頂峰盯拱。Andy Warhol、 Roy Lichtenstein、Chuck Close 和Gerhard Richter等藝術(shù)家把這個機械大生產(chǎn)的「粗俗」語言提升到藝術(shù)高度狡逢,網(wǎng)格成為核心宁舰。

Andy Warhol的Campbell湯罐頭正以網(wǎng)格形式排布。


Chuck Close使用網(wǎng)格的肖像(左)奢浑;Gerhard Richter 的色彩網(wǎng)格

很快人們厭倦了網(wǎng)格蛮艰,在1970到80年代左右,許多設(shè)計師嘗試減少甚至完全放棄使用設(shè)計網(wǎng)格雀彼。但網(wǎng)頁時代改變了這一切壤蚜。

當(dāng)代網(wǎng)頁設(shè)計

數(shù)字技術(shù)曾有一個時期被認為能超越設(shè)計網(wǎng)格,但這沒有持續(xù)很久徊哑。設(shè)計師逐漸發(fā)現(xiàn)網(wǎng)格是組織網(wǎng)頁結(jié)構(gòu)仍律、在多設(shè)備間實現(xiàn)響應(yīng)式的理想工具。

由于一格能重復(fù)使用实柠,清晰的網(wǎng)格能組織良好的網(wǎng)頁結(jié)構(gòu),易于瀏覽也為設(shè)計師規(guī)避麻煩善涨。由于網(wǎng)頁打開了印刷不能實現(xiàn)的新美學(xué)領(lǐng)域——比如可視顏色窒盐、材質(zhì)和字體的多樣性——相同的網(wǎng)格可以做出完全不同的視覺風(fēng)格。

一般來說钢拧,互聯(lián)網(wǎng)網(wǎng)格使用9蟹漓、12或16欄,但正如下面的案例源内,當(dāng)代設(shè)計師有時也會只用3欄葡粒。如果3欄足夠,就無需多用膜钓。


Khoi Vinh設(shè)計的著名網(wǎng)頁遵循了14欄網(wǎng)格嗽交;他在文章中記錄了這一過程
times的網(wǎng)站又是一個著名的網(wǎng)格案例,它由一個細左邊欄和5欄內(nèi)容組成颂斜。
在Smashing Magazine的這篇文章中夫壁,Chris Brauckmuller 描述了他怎樣使用三欄網(wǎng)格制作FloridaFlourish.com

瀏覽網(wǎng)頁,使用特例網(wǎng)格的網(wǎng)站也越來越多沃疮。查看這些精妙例子盒让,你會發(fā)現(xiàn)有些網(wǎng)頁使用了垂直網(wǎng)格,也有一些使用了更模塊化的方案司蔬。

Pixelot.de完全使用網(wǎng)格邑茄,并使橫縱線均可見
42Angels.com 基于5欄網(wǎng)格,但也使用一些不明顯的馬賽克背景完善視覺頁面
TDHCreative.com俊啼,簡單且美肺缕。


AraWines.com使用更復(fù)雜、更模塊化的網(wǎng)格


一些能幫你著手使用的資源:

Ultimate Guide To Grid-Based Web Design: Techniques and Tools

Grid-Based Web Design, Simplified

Foundation

Bootstrap

The 960 Grid System Made Easy

50 Useful Responsive Web Design Tools for Designers

10 Lightweight & Minimal Responsive Grid Frameworks

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市搓谆,隨后出現(xiàn)的幾起案子炒辉,更是在濱河造成了極大的恐慌,老刑警劉巖泉手,帶你破解...
    沈念sama閱讀 211,290評論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件黔寇,死亡現(xiàn)場離奇詭異,居然都是意外死亡斩萌,警方通過查閱死者的電腦和手機缝裤,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,107評論 2 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來颊郎,“玉大人憋飞,你說我怎么就攤上這事∧房裕” “怎么了榛做?”我有些...
    開封第一講書人閱讀 156,872評論 0 347
  • 文/不壞的土叔 我叫張陵,是天一觀的道長内狸。 經(jīng)常有香客問我检眯,道長,這世上最難降的妖魔是什么昆淡? 我笑而不...
    開封第一講書人閱讀 56,415評論 1 283
  • 正文 為了忘掉前任锰瘸,我火速辦了婚禮,結(jié)果婚禮上昂灵,老公的妹妹穿的比我還像新娘避凝。我一直安慰自己,他們只是感情好眨补,可當(dāng)我...
    茶點故事閱讀 65,453評論 6 385
  • 文/花漫 我一把揭開白布管削。 她就那樣靜靜地躺著,像睡著了一般撑螺。 火紅的嫁衣襯著肌膚如雪佩谣。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,784評論 1 290
  • 那天实蓬,我揣著相機與錄音茸俭,去河邊找鬼。 笑死安皱,一個胖子當(dāng)著我的面吹牛调鬓,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播酌伊,決...
    沈念sama閱讀 38,927評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼腾窝,長吁一口氣:“原來是場噩夢啊……” “哼缀踪!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起虹脯,我...
    開封第一講書人閱讀 37,691評論 0 266
  • 序言:老撾萬榮一對情侶失蹤驴娃,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后循集,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體唇敞,經(jīng)...
    沈念sama閱讀 44,137評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,472評論 2 326
  • 正文 我和宋清朗相戀三年咒彤,在試婚紗的時候發(fā)現(xiàn)自己被綠了疆柔。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,622評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡镶柱,死狀恐怖旷档,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情歇拆,我是刑警寧澤鞋屈,帶...
    沈念sama閱讀 34,289評論 4 329
  • 正文 年R本政府宣布,位于F島的核電站故觅,受9級特大地震影響谐区,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜逻卖,卻給世界環(huán)境...
    茶點故事閱讀 39,887評論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望昭抒。 院中可真熱鬧评也,春花似錦、人聲如沸灭返。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,741評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽熙含。三九已至罚缕,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間怎静,已是汗流浹背邮弹。 一陣腳步聲響...
    開封第一講書人閱讀 31,977評論 1 265
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留蚓聘,地道東北人腌乡。 一個月前我還...
    沈念sama閱讀 46,316評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像夜牡,于是被迫代替她去往敵國和親与纽。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,490評論 2 348

推薦閱讀更多精彩內(nèi)容