1812:網格_指導設計:網格的歷史

1812:網格

The grid has long played a central role in the development of art and design due to its organizational nature; acting as a matrix for controlling the placement of elements. In art: Foreground and background. In design: Image and type. And so on.

網格由于其組織性質,長期以來在藝術和設計的發展中起著核心作用。 作為控制元素放置的矩陣。 在藝術中??:前景和背景。 在設計中:圖像和類型。 等等。

In his book Grid Systems in Graphic Design / Raster Systeme Fur Die Visuele Gestaltung, Josef Müller-Brockmann wrote: “The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice.”

在他的書中電網系統在平面設計/光柵Systeme的皮草模具Visuele Gestaltung 約瑟夫·繆勒·布羅克曼說:“網格系統是一種輔助,不能保證。 它允許多種可能的用途,并且每個設計師都可以尋找適合其個人風格的解決方案。 但是必須學習如何使用網格。 這是一門需要實踐的藝術 。”

Closeup of Egyptian hieroglyphs
Some of the earliest representations of the design grid can be found in Egyptian hieroglyphs
設計網格的一些最早表示形式可以在埃及象形文字中找到

And it’s a practice that has aided designers and artists in bringing order to chaos—often on vertical and horizontal lines—since the birth of written language. The development of the modern grid can be traced back to the late medieval period, pre-mechanical type, but its symbolic aspect is not generally recognized or often suspected to the untrained.

自從書面語言誕生以來,這種做法已幫助設計師和藝術家使混亂(通常在垂直和水平線上)變得混亂。 現代網格的發展可以追溯到中世紀晚期,即機械前的類型, 但是其象征性的方面通常未被未經培訓的人認可或經常被懷疑。

In autumn 1986 Jack Williamson published “The Grid: History, Use, and Meaning” in Design Issues. In his essay, he defined four distinct periods that showed changing values in the constructive usage of the grid that impacted the meaning of the grid itself.

1986年秋天,杰克·威廉姆森(Jack Williamson)出版了《網格:歷史,使用和意義》。 設計問題 。 在他的論文中,他定義了四個不同的時期,這些時期在網格的建設性使用中顯示出變化的值,這影響了網格本身的含義。

中世紀晚期的網格 (The late medieval grid)

The hands and minds of early bookmakers were guided by the divine, so it’s not surprising that the earliest examples of the grid are best characterized by late medieval Christian manuscripts. The late medieval—or point-based—grid supported a symbolism on the page that represented relationships between the superphysical (above) and reality (below) in both image representation and text placement.

早期博彩公司的手法和思想受到神的引導,因此,最早的網格示例以中世紀晚期的基督教手稿為特征就不足為奇了。 中世紀晚期(或基于點的)網格支持頁面上的象征,該象征代表圖像表示和文本放置中超物理(上)與現實(下)之間的關系

Close up detail from the Book of Kells
University of British Columbia.不列顛哥倫比亞大學 。

And these earliest examples show a deep reliance on the power of visuals in storytelling at a time when most of the public was largely illiterate.

這些最早的例子表明,在大多數公眾大多是文盲的時代,講故事時非常依賴視覺效果。

Image for post
Tres Belles Heures de Notre Dame with visible grid linesTres Belles Heures de Notre Dame帶有可見網格線

The Book of Kells, a ninth-century book containing the gospels of the New Testament, shows careful attention to arrangement of elements on guidelines to create symmetry between hand-written text and visual decoration. The development of medieval grid-based design extends into the fifteenth-century, with Williamson noting Tres Belles Heures de Notre Dame as a prime example.

凱爾斯書(Kells )是一本包含新約福音的九世紀書籍,它特別注意指南中元素的排列方式,以使手寫文字和視覺裝飾之間保持對稱。 中世紀基于網格的設計的發展一直延伸到15世紀,威廉姆森(Williamson)注意到Tres Belles Heures de Notre Dame是一個很好的例子。

As the Dark Ages gave way to the Renaissance, so too was the modern grid entering its infancy. Gutenberg’s 42-line bible (1450–55) contains visible lines used to position text, headings, and margins in a 2-column grid, and many Gothic illuminated manuscripts featured sets of horizontal rules placed to guide the scribe’s hand and ensure optimal engagement with the image.

隨著黑暗時代讓位于文藝復興時期,現代網格也進入了嬰兒期。 古騰堡(Gutenberg)的42行圣經(1450–55)包含用于在2列網格中定位文本,標題和頁邊距的可見線,并且許多哥特式照明手稿都帶有水平線組,以引導抄寫員的手并確保與之的最佳接合。圖片。

Close up detail from a copy of the Gutenberg Bible
Gutenberg Bible古騰堡圣經的細節

文藝復興時期和笛卡爾網格 (The Renaissance and Cartesian grid)

Beginning with the Renaissance, the grid began shifting to field-based—using numerical values to emphasize the repetition of vertical and horizontal axis lines in continuous extension—in turn defining relationships that occurred in the physical world versus the superphysical of the medieval grid.

從文藝復興時期開始,網格開始轉向基于字段的網格(使用數值強調連續延伸的垂直和水平軸線的重復),進而定義了物理世界與中世紀網格的超物理關系

Leonardo’s The Last Supper painting
Linear perspective was a monumental advancement in Renaissance art
線性透視是文藝復興時期藝術的巨大進步

The grid was now being used to depict an extension of the viewer’s own physical space. The rise of mathematical pictorial perspective (such as the perspective lines seen in da Vinci’s The Last Supper) would continue to drive the grid of choice into seventeenth-century painting.

現在,該網格用于描繪觀看者自己的物理空間的擴展。 數學繪畫透視圖(例如達芬奇的《最后的晚餐》中的透視線)的興起將繼續推動選擇網格進入17世紀的繪畫。

Descartes’s Discourse on Method (1637) was the first attempt to inform the meaning of the grid and in his later treatise of the same year, Geometry, he laid the formulaic foundation for determining grid coordinates and axes that would become the Cartesian grid. A prime example of this can be seen in Jacques Louis David’s The Death of Socrates, in which the grid used to transfer the drawn figure onto the canvas is evident in the finished painting.

笛卡爾(Descartes)的方法論 ( Discourse on Method) (1637)是首次嘗試了解網格的含義,并在同年的后來論文《 幾何學》(Geometry)中奠定了確定網格坐標和軸的公式基礎,這些坐標和軸將成為笛卡爾網格。 雅克·路易·戴維(Jacques Louis David)的《蘇格拉底之死》(Death of Socrates)就是一個很好的例子在該作品中,用于將繪制的人物轉移到畫布上的網格很明顯。

Detail of a pencil sketch from The Death of Socrates showing a cartesian grid
Detail from a study for The Death of Socrates showing the use of a Cartesian grid
《蘇格拉底之死》研究的細節顯示了笛卡爾網格的使用

現代網格 (The modern grid)

In the early twentieth century, grid use moved strongly toward structure. Beginning, according to Williamson, with Cubism and peaking with Mondrian’s pictorial grid and the de Stijl movement.

在20世紀初, 網格的使用向結構強烈發展 。 根據威廉姆森的說法,從立體主義開始,到蒙德里安的圖畫網格和de Stijl運動達到頂峰。

Mondrian’s painting Composition II in Red, Blue, and Yellow featuring colorful squares
Composition II in Red, Blue, and Yellow by Piet Mondrian, 1930. Source: Kunsthaus Zürich
彼得·蒙德里安(Piet Mondrian),《 紅色,藍色和黃色構圖II》 ,1930年。資料來源: 蘇黎世美術館

The modern grid became a free-form version of the Cartesian grid. In design, the highly influential Bauhaus style used the invisible matrix of the grid to present cleanly geometric sans serif type while also including vertical and horizontal bars and rules—parts of the regularly invisible grid—to subdivide the page as design elements. The additional practice of sole upper or lower case letter usage further emphasized strict adherence to grid lines.

現代網格成為笛卡爾網格的自由形式。 在設計中,極富影響力的包豪斯(Bauhaus)風格使用了網格的不可見矩陣來呈現整潔的無襯線幾何形狀,同時還包括垂直和水平條和規則(規則不可見的網格的一部分)來將頁面細分為設計元素。 單獨使用大寫或小寫字母的其他做法進一步強調了嚴格遵守網格線。

A Kandinsky poster showing angled grid design
This poster designed by Herbert Bayer utilizes grid as visual design element
此海報由赫伯特·拜耳(Herbert Bayer)設計,利用網格作為視覺設計元素

The Bauhaus philosophy of modern grid use was expressed in Jan Tschichold’s seminal The New Typography (1928). The subsequent generation of Swiss graphic designers would dictate the modern grid into the 1960s, proving to be a universally-valid and future-focused design tool, while still retaining a majority of Cartesian symbolism.

包·豪斯(Jack Tschichold)的開創性著作《新印刷術》( The New Typography ,1928年)表達了包豪斯現代網格使用的哲學。 后來的瑞士平面設計師將現代網格定為1960年代,被證明是一種普遍有效且面向未來的設計工具,同時仍然保留了大多數笛卡爾的象征意義。

Outside of moving from the page to the screen, the modern grid has changed very little today. Mobile devices and responsive web design placed a greater emphasis on modular grids, which were first developed in the mid-nineteenth-century to aid in newspaper layouts.

除了從頁面移動到屏幕之外,現代網格今天的變化很小。 移動設備和響應式網頁設計更加注重模塊化網格,模塊化網格最早于19世紀中葉開發用于輔助報紙版面設計。

后現代的網格 (The postmodern grid)

During the 1970s, like all things, a number of designers began to throw out the conventions of the modern grid. The deconstructed postmodern grid brought the elements to the forefront of the composition as decoration, often visually exposed and anti-rationally random.

1970年代,就像所有事物一樣,許多設計師開始放棄現代網格的慣例。 經過解構的后現代網格將元素作為裝飾擺到了作品的最前沿,通常是視覺上暴露且反理性的。

“Usually the grid was established and then violated,” wrote Williamson. Like other manifestations of postmodern culture, the postmodern grid completely reversed the superphysical of the late medieval grid to create an opening instead into the sub physical (beneath the surface).

威廉姆森寫道:“通常會先建立網格,然后再破壞網格。” 像后現代文化的其他表現形式一樣,后現代網格完全顛倒了中世紀晚期網格的超物理結構,從而為地下空間(在表面之下)創造了一個開口。

Image for post
Wolfgang Weingart postmodern grid experimentation from the 1970s
Wolfgang Weingart的1970年代后現代網格實驗

A prime example of the descent to the sub physical is the Charles and Ray Eames film Powers of Ten, likely encountered by a majority of students in primary education classrooms.

下降到子物理的一個典型的例子是查爾斯和蕾伊默斯電影十的權力 有可能是由大部分學生在小學教室中遇到。

The introduction of computers introduced a new approach to design. In addition to making grid development easier and more mathematically perfect (and reproducible), new movements like California Graphic Design emerged. This group, among others, would continue to push avant-garde grid usage to further heights with the aid of computer software.

計算機的引入引入了一種新的設計方法。 除了使網格開發更容易,數學上更完美(并且可重現)外,還出現了諸如加利福尼亞圖形設計公司的新機芯。 該小組,除其他外,將繼續借助計算機軟件將前衛網格的使用推向新的高度。

Image for post
AIGA Eye on Design.AIGA設計觀察 。

Williamson’s research presents a thorough survey of historical grid use toward an effective understanding of use and meaning. But, more importantly, it allows us to see and think about grids in a new way. Not only in art and design, but in everyday objects, or even nature itself.

威廉姆森(Williamson)的研究提出了對歷史網格使用的全面調查,以有效地了解使用和含義。 但是,更重要的是,它允許我們以新的方式查看和思考網格。 不僅在藝術和設計上,而且在日常物品甚至自然本身中。

In Making and Breaking the Grid (2005) Timothy Samara states “in order to effectively break the rules of grid-based design, one must first understand those rules.” Understanding the meaning, as well as the purpose, allows us to more effectively utilize the grid as a tool and develop new ways of implementing it in our work.

蒂莫西·薩馬拉(Timothy Samara)在《 制造與破壞網格》 (2005年)中指出:“ 為了有效地打破基于網格的設計規則首先必須了解這些規則 。” 了解含義和目的,使我們能夠更有效地將網格用作工具,并開發在工作中實現網格的新方法。

Image for post
UX Para Minas Pretas (UX For Black Women), a Brazilian organization focused on promoting equity of Black women in the tech industry through initiatives of action, empowerment, and knowledge sharing. Silence against systemic racism is not an option. Build the design community you believe in.UX Para Minas Pretas (UX For Black Women),這是一個巴西組織,致力于通過采取行動,賦權和知識共享的舉措來促進科技行業中的黑人女性平等。 對系統性種族主義保持沉默是不可行的。 建立您相信的設計社區。

翻譯自: https://uxdesign.cc/guiding-design-the-history-of-the-grid-ca1e6cf7d832

1812:網格

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/274639.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/274639.shtml
英文地址,請注明出處:http://en.pswp.cn/news/274639.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

HDU ACM 1728 逃離迷宮 (廣搜BFS)

http://acm.hdu.edu.cn/showproblem.php?pid1728 題意:給出一張圖,轉彎數k,起點(x1,y1),(x2,y2)判斷能不能最多只轉k個彎時從起點走到終點 輸入時注意起點與終點是先y后x的 思路:用point[4][2]表示方向向量,每次遍歷遍歷一行或者一列,遍歷時要注意遇到遍歷過的點要跳過去,繼續…

Element使用的async-validator表單校驗庫源碼超詳細解析

大家好,我是若川。持續組織了8個月源碼共讀活動,感興趣的可以 點此加我微信ruochuan12 參與,每周大家一起學習200行左右的源碼,共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》 包含20余篇源碼文章。歷史面試系列。另外…

從零手寫 Vue 之響應式系統

大家好,我是若川。持續組織了8個月源碼共讀活動,感興趣的可以 點此加我微信ruochuan12 參與,每周大家一起學習200行左右的源碼,共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》 包含20余篇源碼文章。歷史面試系列。另外…

WPF 分頁控件應用

效果圖&#xff1a; 前臺代碼&#xff1a; <UserControl x:Class"Layout.UI.Comm.Pager"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/winfx/2006/xaml"xmlns:mc"http:/…

李寧品牌重塑_邁伊多品牌重塑的幕后

李寧品牌重塑This post was originally published on the Maido blog.這篇文章最初發表在 Maido博客上 。 You might notice that we’ve had a little facelift at Maido. Or you might not — and that’s totally fine. What we launched at the end of last year was not r…

搭建前端監控,如何采集異常數據?

大家好&#xff0c;我是若川。持續組織了近一年的源碼共讀活動&#xff0c;感興趣的可以 點此加我微信ruochuan12 參與&#xff0c;每周大家一起學習200行左右的源碼&#xff0c;共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》 包含20余篇源碼文章。歷史面試系列。…

產品經理如何提高創造力_如何提高產品設計師的創造力

產品經理如何提高創造力When David Kelley, Bill Moggridge, and Mike Nuttall founded IDEO, a consulting firm that would become one of the most innovative companies of the late 90s, they brought a new perspective in product development.當大衛凱利(David Kelley)…

Github上8個很棒的Vue項目

大家好&#xff0c;我是若川。持續組織了近一年的源碼共讀活動&#xff0c;感興趣的可以 點此加我微信ruochuan12 參與&#xff0c;每周大家一起學習200行左右的源碼&#xff0c;共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》 包含20余篇源碼文章。歷史面試系列。…

域名解析文件hosts文件是什么?如何修改hosts文件?

如何修改hosts文件&#xff1f; hosts文件的位置&#xff1a;xp,2000等系統在 C:\windows\system32\drivers\etc 文件夾中找到Hosts文件并用記事本打開(Windows 9x/Me系統在C:\Windows文件夾中找)按照 ip地址 域名 的格式添加單獨的一行記錄。例如72.14.219.190 www.hbcms.net…

python 投資組合_成功投資組合的提示

python 投資組合Lately, I’ve had some free time during my job transition and have been reviewing a few of my friends’ design portfolios. Gradually, I found some common themes around the feedback I’ve given. And it occurred to me that others might find so…

Github上8個很棒的React項目

大家好&#xff0c;我是若川。持續組織了近一年的源碼共讀活動&#xff0c;感興趣的可以 點此加我微信ruochuan12 參與&#xff0c;每周大家一起學習200行左右的源碼&#xff0c;共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》 包含20余篇源碼文章。歷史面試系列。…

騰訊的筆試題一道

搜羅了一些騰訊的筆試題目 題目是這樣的&#xff1a;在如下8*6的矩陣中&#xff0c;請計算從A移動到B一共有多少種走法&#xff1f;要求每次只能向上揮著向右移動一格&#xff0c;并且不能經過P&#xff1b; B P …

屏幕廣播系統_如何設計系統,而不是屏幕

屏幕廣播系統重點 (Top highlight)Over the past several decades, rapid advances in technology have dramatically enhanced the digital customer experience and their expectations. In the face of these heightened customer expectations, the role of the Interactio…

Umi 4 發布啦

大家好&#xff0c;我是若川。持續組織了近一年的源碼共讀活動&#xff0c;感興趣的可以 點此加我微信ruochuan12 參與&#xff0c;每周大家一起學習200行左右的源碼&#xff0c;共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》 包含20余篇源碼文章。歷史面試系列。…

Win32匯編--加載菜單資源

基本上的窗口都會有一個菜單,現在就來看看Win32匯編中是如何加載菜單的: 1>在工程中添加新的菜單資源 2>雙擊新添加的菜單資源進行編輯 3>菜單欄:Make->Compile RC來編譯資源文件 4>導出資源中的ID號并寫到數據段的.const中 5>下面是完整的源代碼供參考:(工程…

Futura:從納粹主義到月球-甚至更遠

Reading the title of this article, the first thing that will come to mind for some is the funny expression of Buzz Lightyear — the Disney character — when he stretches his arms outwards and utters the famous phrase “To infinity and beyond!” before jump…

如何碎片化時間高效學習前端~

前端技術日新月異&#xff0c;發展迅速&#xff0c;作為一個與時俱進的前端工程師&#xff0c;需要不斷的學習。這里強烈推薦幾個前端開發工程師必備的優質公眾號&#xff0c;希望對你有所幫助。大家可以像我一樣&#xff0c;利用碎片時間閱讀這些公眾號的文章。前端從進階到入…

爬取淘寶定價需要多久時間_如何對設計工作進行定價—停止收??取時間并專注于價值

爬取淘寶定價需要多久時間Pricing creative work is a new concept for most freelancers who are starting their business. We are used to being paid for our time, either by an hourly wage or an annual salary. It makes it simple to quantify how much value we thin…

OEA 框架中集成的 RDLC 報表介紹

之前 OEA 一直用著一個 Delphi 開發的報表&#xff0c;所以兩年來我一直就想在 OEA 中構建一個純 .NET 的報表模塊&#xff0c;但是一想到要開發復雜的報表引擎和設計器就覺得麻煩。所以這事一直拖著。最近開始研究一些成熟的報表引擎&#xff0c;經過對比&#xff0c;還是發現…

昆蟲繁殖_“專為昆蟲而生” –好奇!

昆蟲繁殖重點 (Top highlight)The industry is changing towards a more agile approach and jacks of one trade can go extinct sooner than we think.該 行業正在發生變化 朝著更加靈活的方法和一個貿易的插Kong可以去滅絕快于我們的想法。 I’ve read a quote in a book r…