設計癖 - 關注設計癖 提升幸福感

注冊 X

設計癖 - 關注設計癖 提升幸福感

登錄

忘記密碼?

登錄 X

設計癖 - 關注設計癖 提升幸福感

郵箱注冊

《設計癖免責聲明》

密碼找回

取消

網格的歷史:從印刷術到現代網頁設計

網格的歷史,你了解多少?

本文轉自公眾號:terechen ? 追波范兒
微信ID:dribbbledesign
編輯:捌條

網格為設計師提供了一種直觀的組織方法。從攝影中指導構圖的 “三分法則”,到像亞馬遜這樣的電子商務網站上的產品排版,網格提供了一種視覺邏輯,可以幫助我們快速、輕松地理解我們所看到的東西。讓我們一起來看看網格的歷史,從最早的網格化身到現代網絡上的應用。

網格的歷史:從印刷術到現代網頁設計一些攝影作品中也蘊含了網格

 

01
網格是秩序的基石

我們不需要多看一眼我們的日常環境,就能看到網格帶來的美麗和平衡。從辦公室的文件柜到雜貨店的過道,網格讓我們的世界變得更加輕松。

網格具有一種幾何學的魔力,可以引導視覺元素依附于垂直和水平線。設計師就是揮舞著它們的魔法師,為混亂的世界帶來秩序和組織。對齊、間距和比例都是創造和諧視覺感的重要因素。

網格作為一個隱藏的框架,指導著設計,從古代歷史上的水墨和紙莎草書卷到今天日益數字化的像素世界。

早期平面設計師的手是以神性觀念為指導的。

就像許多早期的文化作品一樣,最早(保存下來的)出版的作品往往是宗教作品。繪制、寫作和裝訂這些書是很費時間的,為什么要把這些努力浪費在上面的東西上呢?歷史上的言情書籍和自助書籍要等上百年,那時的出版門檻會低得多。

制作這些文本的原始圖形設計師并沒有受過正規的培訓,但他們的作品顯示出他們對視覺和諧的關注,以及對視覺傳達給文盲觀眾的力量的深刻認識。

在下面的《凱爾斯書》的例子中,我們看到了對稱和平衡。格子書是直觀的信息布局,這些早期的宗教學者們有先天的感覺,按照這些無形的指引的恩典來安排這些圣典(書籍)。

網格的歷史:從印刷術到現代網頁設計

我們可以再往前追溯一下。古埃及人遵循著我們所說的比例法則。他們的雕刻和繪畫中所描繪的人物都遵循了這一網格規則。古埃及人把他們的比例法則作為一個人的拳頭,從地面到站立的人物的額頭上,有18個拳頭大小。他們的象形文字也表現出明顯的格子布局。試想一下,這些早期的創作者們在石器上工作的時候,用CSS網格和flexbox能做什么?

網格的歷史:從印刷術到現代網頁設計

 

02

從手工到機械化

網格的歷史:從印刷術到現代網頁設計

網格的歷史:從印刷術到現代網頁設計

1568年的古騰堡印刷機

活字印刷術大約在公元前1040年左右在中國開始發展,用瓷器制作字體。在西方,金屬活字大約在1450年左右出現,1455年左右《古騰堡圣經》的問世是出版業的第一個重大里程碑。

金屬類型的工作性質使得網格工作成為一種必然。

網格的歷史:從印刷術到現代網頁設計

朝鮮移動式印刷機的復制品,始于1447年。位于韓國首爾仁川國際機場。

印刷機的出現使書籍的批量生產成為可能,而且與之前的手工制作的宗教典籍不同,他們使用的金屬版材使其具有統一性。《古騰堡圣經》以簡單的雙欄式排版方式呈現其文字。

網格的歷史:從印刷術到現代網頁設計

在古騰堡圣經是第一大規模的書曾經被釋放印上使用金屬活字機之一。

與手工制作相比,印刷機的精細化和(相對)廉價,導致非宗教題材的書籍被印刷出來,報紙也隨之誕生。隨著印刷技術的進步,網格也發生了變化,使得復雜的排版、大小不一的列、行、文字和照片都成為可能。

 

03

網格的藝術性:Piet Mondrian和De Stijil運動的影響

網格的歷史:從印刷術到現代網頁設計

De Stijil于1917年在荷蘭興起,一直持續到1931年,是一場根植于極簡主義和抽象主義的現代藝術運動。簡約主義取代了現實主義的錯綜復雜,以線性的方式觸及藝術和建筑。在裝飾藝術以過剩為標志的地方,De Stijil則是將實用性的骨子里剝離出來。

網格的歷史:從印刷術到現代網頁設計

網格的歷史:從印刷術到現代網頁設計

尼亞加拉莫霍克(Niagara Mohawk)建筑的裝飾柱觸及天空,這是裝飾藝術不受束縛的裝飾的一個例子。

第一次世界大戰打破了穩定的假象,德斯蒂吉爾提出了新的希望,希望能夠恢復秩序。

網格的歷史:從印刷術到現代網頁設計

這些由約瑟夫·以色列·斯普林(JozefIsra?lsplein)設計的公寓體現了德斯蒂吉爾運動(De Stijil Movement)的功利精神。

皮特·蒙德里安(Piet Mondrian)與西奧·范·杜斯堡(Theo van Didburg)共同創立了這一運動。蒙德里安的繪畫以其直線和方塊狀的色彩網格而著稱,這些色彩簡單而又神秘地吸引人。

遵循這種對簡約性的堅持,他的畫作采用了基本的顏色,用黃、藍、紅、灰、黑、白三色。這種三原色加三原色的等式,使他的作品具有內斂而又不失實驗上的復雜性。

蒙德里安的色彩堆疊的色塊很容易讓人從遠處就能辨認出來,而他的影響在現代網頁設計中也同樣明顯。通過CSS網格等工具,創建自己的網站布局是一個簡單的過程。

網格的歷史:從印刷術到現代網頁設計

Webflow中的“ Piet Mongrid ”向將網格提升到新的創作水平的藝術家表示了敬意。?

 

04

商業與網格:20世紀40年代的市場營銷

隨著第二次世界大戰的結束,一個可怕的惡魔被打敗,樂觀主義取代了恐懼,出現了新的消費主義。隨著經濟的快速擴張,廣告公司抓住了這種狂熱的情緒,并以迅雷不及掩耳盜鈴之勢迅速發展起來。

保羅·蘭德(Paul Rand)被許多人認為是現代營銷的鼻祖之一,他實施的營銷策略和品牌意識是以前沒有使用過的。而網格在這種新的廣告方式中發揮了不可替代的重要作用。

網格塑造了肥皂盒、雜志廣告和電視廣告的面孔。它們甚至被用來在新興的郊區創造出整齊的房子排成一排。網格無處不在,為這種新的消費主義帶來了秩序和效率。

網格的歷史:從印刷術到現代網頁設計

 

05

網格和現代主義

20世紀40年代和50年代,”瑞士運動”(Swiss Movement)產生了,它塑造了許多平面和網頁設計。瑞士運動擺脫了僵化的指導思想,但格子是浮在其不對稱布局之下的東西。

它強調設計中更多的情感成分。它特別關注字體設計如何塑造意義,舍棄了襯線字體的字體裝飾,以使字體不受樣式影響。從這一功利主義哲學出發,產生了普遍使用的、有時被人鄙視的Helvetica字體家族。

從瑞士設計運動中走出了一個最有力的倡導者。Emil Ruder,他的著作《字體設計手冊》(Typographie: 他的《設計手冊》(Typographie: A Manual of Design)一書中,以三欄式的布局,每一欄都有不同的文字翻譯,支持網格的好處。

網格的歷史:從印刷術到現代網頁設計

Jan Tschichold的這張海報中的膠版印刷版面是瑞士運動的象征。

約瑟夫·穆勒·布羅克曼(JosephMüller-Brockmann)是瑞士運動的另一位重要成員,他把格網格畫帶到了瑞士運動的前沿。他的海報作品以及書籍設計都是以網格為核心,其視覺美學靈感來自于包豪斯藝術運動,也是De Stijil的直接后裔。

 

06

用計算機的力量擺脫網格的束縛

網格的歷史:從印刷術到現代網頁設計

穆里爾·庫珀(Muriel Cooper)在麻省理工學院出版社(MIT Publications)從事傳統圖形設計和計算機工作。

從1983年開始的夏季工作坊宣傳片充分利用了這項新技術的力量。資料來源:Alliance Graphique International。

在電腦之前,平面設計師的繪圖桌上有X-acto刀、橡皮泥和鑷子。擺放字體和視覺效果的過程是一種物理體驗。錯誤不是通過電腦鍵盤上的指令就能改變的。

網格的歷史:從印刷術到現代網頁設計

黛博拉·蘇斯曼(Deborah Sussman)為1984年奧運會設計的這張海報具有視覺上的復雜性,計算機輔助設計使其更易于執行。資料來源:AIGA設計觀察。

計算機的出現,為設計帶來了全新的設計方法。字體可以被替換,邊框可以被縮小或放大,版面元素可以被拖到不同的空間–這一切都在瞬間完成。隨著這種便利,人們對實驗的需求也隨之而來。擺脫了物理媒體的束縛,新事物的出現讓我們有了更多的機會。

1975年加州平面設計運動的興起,計算機的引入導致了加州平面設計運動的興起。這場運動帶來了只有在計算機的幫助下才有可能實現的超凡藝術感。計算機幫助設計師們用更少的時間來塑造他們的創意愿景。今天,你很難想象沒有他們的數字協助的世界。

?

07

現代網頁設計中的網格

網格幾乎指導著一切。雖然它們作為垂直和水平線的框架的本質沒有改變,但它們可以被用于多種方式。

基線網格:網格是關于傳遞一致性,而基線網格為文字等元素的垂直對齊方式帶來了統一性。想一想,就像一個排版的日子計劃書的頁面一樣。每一行都是一個更大的基線網格的一部分,它讓你可以有條理地記下事情,而不是散亂的、無條理的書寫。

在網頁設計中,這些基線不一定非得是實線,但通常是透明的指引,用于對齊元素。

稿件網格:這只是一個單一的大列,包含了所有的文字以及圖片。你現在正在閱讀的這篇文章就是采用的稿件網格。

多列網格:這類網格在網頁設計中很常見。這在網頁設計中很常見。多列網格將內容組織成垂直的塊。從標準的雙列標題布局到設計作品集中的特色項目,這些網格無處不在。

網格的歷史:從印刷術到現代網頁設計

捷克創業公司You Shine主頁,對這一重要內容使用了三列網格。

模塊化網格:模塊化網格的特點是將水平塊有條理的劃分,用指導原則垂直劃分。我們之前提到過瑞士學派,使用模塊化網格來對齊海報上的視覺效果是他們常用的做法。

CSS網格給了網頁設計者以幾乎任何可以想象的方式將元素固定在縱軸和橫軸上的能力。

網格的歷史:從印刷術到現代網頁設計

內置于Webflow中的日式網格使用CSS網格在水平和垂直方向上組織這些視覺效果。

不規則網格:這種風格顛覆了常規網格的嚴格線條。疊加元素,將項目歪斜到不規則的位置和獨特的形狀,可以打破這些網格的單調性,而不至于讓一個布局變成自由形式的災難。

CSS 網格也是一個很好的工具,可以為布局帶來一些變化,讓不規則的網格變得更容易。

下面這個在Webflow中制作的Momentum Conference的例子,既有重疊的視覺元素,也有文字,它們仍然遵循著合理的組織方式,但沒有被傳統的網格所束縛。

網格的歷史:從印刷術到現代網頁設計

 

08

網格永遠不會過時

從史前到21世紀,網格在設計中起到了很大的指導作用。它們是一種線性的方法,可以將元素輕松地排列成一個視覺上令人愉悅的組織。無論你是遵循傳統的布局,還是顛覆傳統的布局,以適應你自己的藝術感受,它們都能讓設計變得簡單易懂,簡單易行。

最后力推這個視頻(Jen Simmons):

https://www.youtube.com/watch?v=t0b3uBoDkBs

你喜歡這種網格元素嗎?

加載中 ... 加載中 ...

你此刻的心情

  • 7

  • 0

  • 0

  • 0

  • 0

版權聲明: 凡本站注明來源非設計癖的文章,目的在于傳播,如需轉載,請與稿件來源方聯系,如產生任何問題與本站無關;凡本站所發布的圖片、視頻等素材,版權歸原作者所有,僅供學習與研究,如果侵權,請提供版權證明,以便盡快刪除。

留下評論 全部評論(0)

体彩浙江6+1开奖