网格的历史:从印刷机现代网页设计

网格是秩序的构建块

我们不需要看上去比我们日常环境进一步看到网格带来的美和平衡。从办公室文件柜杂货店的货架,网格简化浏览我们的世界。

网格工作的一种几何魔法,指导视觉元素坚持垂直和水平线。设计师们运用他们的向导,使秩序和组织原本是混乱。对齐,间距和比例都是重要的成分在创造和谐的视觉。

网格作为隐藏框架指导设计从古代历史的墨水和纸莎草卷轴的像素今天日益数字化的世界。

早期的平面设计师之手的引导下,神圣的概念

与很多早期文化作品,最早的(保存)发表的作品通常是宗教。画画,写作,和绑定这些书是耗时的,那么又何必浪费这些努力在任何少于从上面发生了什么?历史小说和励志书将不得不等上数百年,当出版酒吧得多,低得多。

proto-graphic设计师生产这些文本没有正式的培训,但是他们的工作显示了一个令人难以置信的视觉和谐,和深度感知视觉的力量与文盲的观众交流。

从下面的凯尔斯书的示例中,创建和包含在公元800年新约的四部福音书,我们看到两个对称和平衡。网格布局信息直观,这些早期的宗教学者有天生的情感安排这些神圣的文本后,优雅的无形的指导方针。

我们可以再进一步。古埃及人跟着我们所说的佳能的比例。数据描述的雕刻和绘画这个网格规则。埃及人根据他们佳能的比例作为一个人的拳头,测量18拳头从地面到额头站的图。他们的象形文字也表现出不同的网格布局。想象一下这些早期的创造者与CSS网格和石头可以做flexbox !

从手动机械

活字首次在中国开发大约公元1040年,陶瓷用于字符。在西方,金属活字会出现1450年左右,古腾堡圣经的释放约1455将在出版的第一个巨大的里程碑。

工作的性质与金属型网格必要性。

印刷机可以大规模生产的书籍,并与手工制作的宗教经文之前很久,他们使用为均匀的欧宝体育在线首页金属板。古腾堡圣经提出了其文本在一个简单的两列布局。

细化和(相对)印刷机的负担能力,相比hand-production,导致非宗教主题的图书印刷和报纸的创建。欧宝体育在线首页网格改变了印刷技术的进步,使复杂的布局和大小不等的列,行,文字,和所有可能的照片。

网格得到艺术:彼埃•蒙德里安和De Stijil运动的影响

引发了1917年在荷兰,并一直延续到1931年,德Stijil是现代艺术运动植根于极简主义和抽象。简单取代错综复杂的现实主义,与线性方法,接触艺术和建筑。装饰艺术的特点是多余,De Stijil是剥离了实用性的梗概。

与稳定的假象粉碎了第一次世界大战,De Stijil提供了一种新的承诺,希望订单能被恢复。

彼埃•蒙德里安随着Theo van Doesburg一起创立了这个运动。蒙德里安的绘画著称的网格方块和直线的颜色,它们并不复杂但几乎神秘迷人。

下面这个坚持简单,他曾与一个基本颜色使用黄色,蓝色,红色和灰色,黑色,白色。这个方程3原色+ 3的主要价值观产生了作品植根于克制,然而标有实验复杂。

蒙德里安的堆叠积木的颜色很容易识别从远处,他的影响力也同样明显现代网页设计。CSS网格等工具,创建自己的网站Mondrian-inspired布局是一个容易的过程。

商业化和网格:市场在1940年代

第二次世界大战结束,和一个强大的邪恶的征服,乐观主义取代了恐惧和新消费主义兴起。广告抓住这个繁荣,伴随着快速经济扩张。

被许多人认为是现代营销的祖先之一,保罗·兰德实施营销策略和品牌,没有之前使用。和网格中扮演了重要角色在这个新的广告方式。

网格状的肥皂盒,杂志广告,电视广告。他们甚至用于创建排列整齐的房屋在新兴郊区。网格是无处不在的,秩序和效率这一新的消费。

网格和现代主义

1940年代和50年代带来瑞士运动,塑造了如此之多的图形和网页设计。瑞士运动摆脱了严格的指导方针,但网格是漂浮在他们经常不对称布局。

它强调了更多的情感组件的设计。特别注意如何排版可以塑造意义,把装饰的衬线字体,文本不受格式化。从这个功利主义哲学的普遍使用,有时鄙视字体,Helvetica。

瑞士设计运动将网格最强有力的支持者之一:埃米尔粗鲁的的书Typographie:手工设计,支持良好的网格在三列布局,与每一列拿着他的写作的不同翻译。

约瑟夫Muller-Brockmann是另一个重要成员的瑞士运动网格具有权威性。他的海报作品,以及书的设计,由网格对齐,用视觉审美灵感来自包豪斯艺术运动和De Stijil的直系后裔。

打破网格计算机的力量

在电脑前,一个平面设计师的绘图桌美工刀,橡胶水泥、和镊子。将类型和视觉效果的过程是一个物理的经历。错误不能被改变,从一个电脑键盘命令。

电脑的出现开辟了一个全新的设计方法。类型可以被替换,边界缩小或扩大,拖到不同的空间布局的要素——都在瞬间。和这缓解了新的偏好实验。解放从物理介质的限制,风险低和一些新的冒险。

电脑设计的引入导致加州图形设计运动,于1975年出现。运动带来avante-garde情感只可能的协助下电脑。电脑帮助设计师塑造他们创造性的愿景与少费时的过程。今天,很难想象一个没有他们的数字的世界援助。

在现代网页设计网格

几乎所有的网格指南。尽管他们的本质是一个框架的垂直和水平线不变,他们可以以多种方式使用。

基线网格:网格是传授一致性和基线网格带均匀垂直对齐的文本元素。的页面排一天计划。每一行是一个更大的基线网格的一部分,让你记下的东西在一个有组织的方式,而不是分散,无组织的写作的混乱。

在网页设计中,这些基线不实线,但通常是透明的指导调整元素。

手稿网格:这只是一个大列包含所有的文本和图像。你正在阅读的这篇文章就遵循一个手稿网格。

多列网格在网页设计:这是常见的。多列网格内容组织成垂直的街区。到处都是这些网格从标准两列头布局设计的特色项目组合。

模块化的网格:模块化的电网特性有组织的分工水平块,把它垂直与指导方针。我们前面提到的瑞士学校,使用模块化的网格对齐视觉海报对他们来说是一个常见的做法。

CSS网格给网页设计师的力量修复元素在垂直和水平轴在几乎任何方式他们可以想象。

不规则网格:这种风格颠覆了严格的行常规电网。覆盖的元素,扭曲项目成不规则的地位和独特的形状可以打破这些网格的单调,没有将布局成一个自由格式的灾难。

CSS网格也是一个伟大的工具带来的不同布局,使不规则网格容易完成。

下面的这个例子的动量会议Webflow既有重叠的视觉元素和文本仍然遵循逻辑组织,但不拴在一个传统的网格。

网格将永远不会过时

从史前到21世纪,网格有指导设计。他们让一个线性方法,元素可以轻松地安排到视觉上的组织。无论你是遵循传统的布局或颠覆适合自己的艺术灵感,他们让设计,很容易理解和简单的导航。