그리드란? 격자를 의미하며 편집 페이지에서는 지면을 수직/수평으로 분할한 가상의 선을 말한다.

이러한 그리드 시스템을 응용하여 페이지를 구성하면레이아웃에 조직적인 체계를 부여하여 보다 객관적이고 기능적인 디자인을얻을 수 있다.

그리드(Grid)는 레이아웃의 한 수단으로 가로와 세로로 분활된 화면을 말하며

시각적 질서와 일관성을 유지시켜 해당 웹사이트의 주제를 쉽게 파악하게 해준다

는 장점이 있다.

그리드를 제작하기 위해서는

페이지의 단 수가로/세로 칸의 위치여백서체크기글줄사이

특정한 규칙으로 웹 브라우저상의 화

면을 네모 반듯하게 잘 잘라내고, 내

용 및 이미지를 그 틀에 맞게 잘 정리

해서 집어넣는 것.

Grid layout

원래는 오프라인 상의

인쇄매체를 위하여 개발

되었지만,

웹사이트 디자인 시에도

그리드 디자인을 빈번하

게 사용하고 있다.

신문 편집 디자인

그리드의 기본을 가장 잘 지키

는 오프라인 편집물은 신문이다.

기본 모듈그리드, 그 앆에서 텍

스트와 그래픽을 적젃히 어울리

게 배치한다.

잡지 레이아웃(편집물 그리드 디자인 )

폴 스미스 작품집젂체 4단 그리드, 또 1칼럼 앆에서 질문, 답변의 형태로 2단으로 쪼개지는 구성.많은 그래픽이 들어갔음에도 불구하고 그리드의 틀이 유지되어 지저분해 보이지 않고 정돈된 느낌.

일관성 있고 논리적인 화면 레이아웃을만드는것이 목표

여러 페이지에 걸쳐 일정한 구조를 적용할 수있기 때문에 일관성 있고 앆정적인 느낌의 레이아웃을 이끌어 낼 수 있다.

지나치게 그리드 시스템에 의존하여

레이아웃을 구성하다 보면 일률적이고

경직된 느낌의 디자인이 되기도 한다.

그리드 시스템을 고정된 틀로서 사용

하기 보다는 디자인을 만들기 위한 하

나의 방법일 뿐 절대적으로 사용하는

것을 피해야 한다.

그리드 시스템을 정형적인 구조 그대로 레이아웃에 응용할 수도 있으나

기본 구조를 변형하여 응용하기도 한다.

그리드를 일단 나누면, 악착같이 거기에 맞추어 정렬시키고,

영역들 사이 사이 공간을 일정한 폭으로 맞추어 준다.

Key:

http://modulargrid.org/#app

http://gridpak.com/

http://acrisdesign.com/2011/09/35-inspiring-grid-based-web-design/

GRID BASED WEB DESIGN

http://www.onextrapixel.com/2010/11/10/grid-style-in-web-design-with-30-great-examples/

Grid Style in Web Design with 30 GreatExamples

http://www.tutorial9.net/tutorials/photoshop-tutorials/design-a-clean-web-layout-with-the-960-grid/

Design a Clean Web Layout with the 960 Grid