그리드 세팅

그리드 시스템에 관한 이론은 많습니다.
너무 깊게 들어가기 전에 저는 그리드 시스템을 "요소들을 배열하는 단순하고 체계화된 방식"이라고 설명하겠습니다.
이 튜토리얼에서는 일러스트레이터를 사용하지만, 어떤 툴이든 사용할 수 있습니다.
먼저 화면 크기를 세팅합니다.
저는 1280 x 900으로 정했습니다.
저의 웹사이트가 모바일 해상도에서 최대 1140 pixel까지 수월하게 늘어나도록 cssgrid를 이용할 것이기 때문이지요.

cssgrid에서 템플릿을 다운로드해서 일러스트레이터 화면에 놓으세요. 

팁:
다운로드 가능한 그리드 템플릿은 엄청 많습니다.
하지만 원하는 디자인에 맞추려 한다면 responsify.it에 있는 템플릿을 확인해 보세요.

<박스(boxes)로 레이아웃 정하기>

박스를 그리드에 그립니다.
방문자에게 보여주고픈 정보의 순서를 왼쪽에서 오른쪽으로, 위에서 아래로 생각해 보세요.
아래 있는 와이어프레임 예제는 요즘 소프트웨어 회사에서 흔히 사용하는 레이아웃입니다.

때론 여러분이 디자인하는 목적과 본질에 따라서 창의적인 레이아웃을 제작할 수 있습니다.
마음속에는 정보의 체계를 유지하면서요.
아래는 저의 클라이언트 중 한 클라이언트에서 제작했던 실제 와이어프레임 예제입니다.
거기서 저는 보편적인 테크놀로지 회사의 웹사이트 레이아웃을 탈피했습니다.

아래는 블로그 레이아웃입니다.
레이아웃에는 신중히 자리를 잡은 광고 컨테이너와 클라이언트를 위해 자세히 적은 설명이 있습니다.