본문 바로가기
DESIGN

그리드 시스템

by 오다다 코드 봄똥 2020. 7. 24.

브레이크 포인트의 범위별 컬럼과 마진/가터

브레이크 포인트 가로 사이즈 칼럼 마진/가터
Mobile 360 (psd 720) 4 16
Tablet 768 (psd 1536) 8 16
PC 1280, 1130(N), 1080(D) 12 24

 

그리드 계산기

http://gridcalculator.dk/

 

Grid Calculator by Nicolaj Kirkgaard Nielsen

 

gridcalculator.dk

grid-system.xd
0.03MB
grid-system.xd
0.03MB
mobile-2배-grid-720.png
0.00MB
mobile-grid-360.png
0.00MB
pc-grid-1536.png
0.00MB
tablet-2배-grid-1280.png
0.00MB
tablet-grid-768.png
0.00MB

 

그리드 시스템을 사용하는 목적

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

"정보에 질서와 구조를 부여한다" - baseline, units, columns, gutters, margins

 

 

 

정보에 질서와 구조를 부여한 웹디자인

프린트 디자인의 다음 세대 매체인 웹/모바일 또한 객관적이고 합리적인 디자인 접근이 필요합니다!

12 컬럼 그리드 시스템

Topbots

 

Black Estate

 

16 컬럼 그리드 시스템

DAUM

 

NATE

 

NAVER

 

 

그리드 시스템 설계/적용 사례 - 웹 디자인

 

 

 

 

 

그리드 시스템 용어

 

 

용어풀이

Margin 마진(외부 여백)
Row 로우(행)
Column 컬럼(열)
Gutter 거터(열 간격)
Flowline 플로우라인(기준선)
Module 모듈(교환 가능한 구성부분)
Spatial Zone 여백(비어있는 공간)


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

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

baseline / rows / columns / modules

 

 

 

'DESIGN' 카테고리의 다른 글

사이트별 가로 크기  (0) 2020.07.24
그리드 시스템  (0) 2020.07.24
색상 선택 도구  (0) 2020.07.24
그리드 시스템  (0) 2020.03.02

댓글0