본문 바로가기
design/Principles

그리드시스템 :: grid system

by heesangs 2020. 8. 25.

그리드 시스템

정의 : 페이지를 구성하는 정보를 의미있고 논리적으로 일관성있게 구성하는 것을 중요시하는 그래픽 디자이너에게 도움을 주는 정밀한 프레임워크(구조, 체제). 

목적 : 정보에 질서와 구조를 부여한다. - 베이스라인(Baseline)기반의 타입디자인.

baseline
units, columns, gutters, margins

 

 

종류

 

원고그리드

원고그리드(Manuscript Grid)

원고 그리드는 간단한 구조의 그리드입니다.

주로 광범위하고 지속적인 텍스트 블록에 사용되는

단일 컬럼으로 만든 큰 사각형 영역입니다.

 

 

 

 

 

 

컬럼그리드

컬럼그리드 ( Column Grid )

컬럼(열) 그리드는 페이지에 여러 개의 열을 배치할 때 사용되는 그리드입니다.

불연속 정보 및 콘텐츠의 요구를 제시할 때 유용합니다.

 

 

 

 

모듈그리드

모듈그리드 ( Modular Grid )

모듈러 그리드는 컬럼 그리드와 유사하며, 로우와 거터를 추가한 그리드입니다.

다소 복잡한 프로젝트에 사용됩니다.

 

 

 

 

계층그리드

계층그리드  (Hierarchy Grid)

계층 그리드는 웹사이트에서 일반적으로 발견됩니다.

정보의 요구에 따른 요소의 직관적 레이아웃의 기본이 됩니다.

컬럼/모듈러 그리드를 확장하여 블록별로 그룹을 짓습니다.

 

적용 사례 - 북 디자인

페이지 하모니(Page Harmony)

 

 

 

적용사례 웹디자인 

적용사례 웹디자인.

 

 

그리드 시스템 용어

그리드 시스템 용어

 

 

용어풀이

Margin마진(외부 여백)

Row로우(행)

Column컬럼(열)

Gutter거터(열 간격)

Flowline플로우라인(기준선)

Module모듈(교환 가능한 구성부분)

Spatial Zone여백(비어있는 공간)

 

기타

 

모듈러 그리드 시스템 디자인

모듈(작은 덩어리) 단위로 대상(Object)을 응집하거나 분산함으로 디자인을 완성하는 것.

모듈러 그리드 시스템

'design > Principles' 카테고리의 다른 글

글자 크기 :: type scale  (0) 2020.11.03
사람-컴퓨터-상호작용 :: HCI  (0) 2020.08.31
무드보드 :: moodboard  (0) 2020.08.24
컨셉트 디자인 :: concept deisgn  (0) 2020.08.22
뷰 타입 :: View type  (0) 2020.08.11

댓글