richorw / web-grid-system

A simple research for grid system in web design.

网页设计中的网格系统 Grid System in Web Design

历史

• 自然界的网格系统

  • 黄金分割
  • 人体比例

• 平面设计中的网格系统

  • 海报设计：包豪斯、国际主义风格

    • examples: Typographic Posters

  • 书籍设计

    • Canons of Page Construction

    • 企鹅出版社 Marber Grid

  • 名片设计

    • CA+ NameCard

  • Logo 设计

    • Apple Grid

  • 建筑设计

    • 柯布西耶：《走向新建筑》

  • ……

  • 网页设计

网页设计中的网格系统

What & How ？

• 设计：拉参考线 - 确定网格 - 摆放组件元素
  • 网格系统设计规范
    • 一些概念
      • Column & Gutter
  • 网页网格系统的流变：从静态到响应式
    • 960 Grid
    • 1200 Grid
    • 1000 Grid for responsive design
    • Unsemantic Grid：responsive and freedom
• 前端：使用框架
  • Unsemantic
  • Bootstrap
  • Cascade
  • Responsive Grid System
  • CSS Grid View
• 日趋复杂化
  • 多重网格
  • 组件的网格系统
  • 不规则网格
  • 更为复杂的响应式设计

Why ？

• 历史 History
  • 任何一个新技术都是旧技术的延伸，网页设计是印刷设计的延伸。
  • 一个问题：为什么像素是方形的？如果人类已开始建立的网格系统是基于圆形的话……
• 美学 Asthetics
  • Rationality
    • 信息设计：必须是成逻辑的、有次序的、理性的
    • 更容易成体系、成理论、成套路
• 功利性 Utility
  • 更容易引入生产流程，工业化，商业化

Good or Bad ?

• Good
  • 设计：可用性
    • 建立用户习惯
    • 保持风格统一
  • 生产：复用性
    • 对于设计师：降低设计难度
    • 对于前端工程师：模块化，降低工程量
• Bad
  • Creativity ？设计是“戴着镣铐跳舞”，没有限制就没有创造。

Future

• 再看历史
  • 印刷 Print
    • 确定的尺寸
    • 确定的呈现方式：平面
  • 网页 Web Page
    • 不确定的尺寸：弹性化设计（Resilient Design）
    • 确定的呈现方式：平面
  • 信息页 Information Flow ：如何保证网格系统？
    • 不确定的尺寸
    • 不确定的呈现方式
      • 物体之上的屏幕，非平面
      • VR、AR 之中的信息页：立体，透视
      • 脑机接口：信息流

未来的网格会是怎样的？

Reference

《平面设计中的网格系统》

A collection of resources and templates of Grid System

The ultimate resource in grid systems

A Chrome Extention for Grid System Preview

Resilient Design by Jeremy Keith