• 레이아웃의 한 수단으로 가로와 세로로 분활된 화면을 말하며 시각적 질서와일관성을 유지시켜 주제를 쉽게 파악하게 해준다는 장점이 있다

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

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

그리드(grid)란?

가로/세로 칸의위치

그리드 디자인을 제작하기 위해 레이아웃에조직적인체계를 부여하자

페이지의 단 수 (칼럼)

글줄사이(gap)

서체크기Titlesub titletext

여백

가로세로 3x3 grid variations세로 컬럼 grid variations

페이지의 단 수 (칼럼)

Examples of basic landscape layout grids.

1 column landscape grid

2 column landscape grid

3 column landscape grid 4 column landscape grid

특정한 규칙으로 화면을 네모 반듯하게 잘 잘라내고, 내용 및 이미지를

그 틀에 맞게 잘 정리 해서 집어넣는 것

Grid layout

그리드를 일단 나누면, 악착같이 거기에 맞

추어 정렬시키고, 영역들 사이 사이 공간을

일정한 폭으로 맞추어 준다.

grid box layout

How To Setup A

Layout Grid In

Photoshop

https://www.sitepoint.com/how-to-setup-a-layout-grid-in-photoshop/

• View > Show > Grid.

• Edit > Preferences> Guides, Grids

& Slices & Count.

• Snap to > guides

View

Preferences> Grid, Snap

지나치게 그리드 시스템에

의존하여 레이아웃을 구성하다

보면 일률적이고 경직된 느낌의

디자인이 되기도 한다.

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

사용 하기 보다는 디자인을

만들기 위한 하 나의 방법일 뿐

절대적으로 사용하는 것을

피해야 한다.

Grid layout +color_coordinate(accent color)

Pallette site를 통해 color 조합에 대한 정보를 활용한다.

http://www.colourlovers.com/

color_coordinate

http://www.colourlovers.com/web/trends/websites

https://audiotheme.com/blog/how-to-use-gradient-maps-to-create-a-cool-duotone-effect-in-photoshop/

Duo(2 tone)color_coordinate