History of the design grid II-設計網格歷史2

在「設計網格的歷史」中,我們概括了文藝復興起源及20世紀設計網格的發展,探索有700年歷史的和諧比例原則是如何繼續指導印刷設計的。在這篇文章最后,我們也會看到它們對網頁的影響。

現在,讓我們考察近代設計網格,并完善主題:20世紀藝術與設計對網格的公開提倡、隨后而來的短暫抵制、以及現代最終在網頁設計上微妙而不可動搖的地位。請閱讀并思考我們立足于何處,尋找資源發揮網格的最大潛能。

20世紀的藝術與設計

當瑞士排版師在建立印刷設計中網格的中心地位時,世界純藝術領域也發起了類似運動。

網格在荷蘭風格派運動中最為明顯,這個運動由藝術家凡·杜斯堡(Theo van Doesburg)和蒙德里安(Piet Mondrian)于1917年發起。基于對模塊設計廣泛理想化的潛力和對絕對簡潔的信仰,他們在畫布上只使用縱橫交錯的線條和未經調和的顏色。

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

2年后,在1919年,德國的包豪斯成立,他們崇尚形式追隨功能,舍棄一切「不必要」及裝飾的成分。這個哲學引導他們使用網格,正如著名的包豪斯國際象棋。這副棋的棋子均為圓和方,能緊密放置保證便攜保存。

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

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

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

1972年,Massimo Vignelli重設計的紐約地鐵地圖改變了站點的地理位置,基于網格制作了一張更易讀的地圖。

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

而到1960年代的波普藝術時代,網格地位大致到達頂峰。Andy Warhol、 Roy Lichtenstein、Chuck Close 和Gerhard Richter等藝術家把這個機械大生產的「粗俗」語言提升到藝術高度,網格成為核心。

Andy Warhol的Campbell湯罐頭正以網格形式排布。


Chuck Close使用網格的肖像(左);Gerhard Richter 的色彩網格

很快人們厭倦了網格,在1970到80年代左右,許多設計師嘗試減少甚至完全放棄使用設計網格。但網頁時代改變了這一切。

當代網頁設計

數字技術曾有一個時期被認為能超越設計網格,但這沒有持續很久。設計師逐漸發現網格是組織網頁結構、在多設備間實現響應式的理想工具。

由于一格能重復使用,清晰的網格能組織良好的網頁結構,易于瀏覽也為設計師規避麻煩。由于網頁打開了印刷不能實現的新美學領域——比如可視顏色、材質和字體的多樣性——相同的網格可以做出完全不同的視覺風格。

一般來說,互聯網網格使用9、12或16欄,但正如下面的案例,當代設計師有時也會只用3欄。如果3欄足夠,就無需多用。


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

瀏覽網頁,使用特例網格的網站也越來越多。查看這些精妙例子,你會發現有些網頁使用了垂直網格,也有一些使用了更模塊化的方案。

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


AraWines.com使用更復雜、更模塊化的網格


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

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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容