ex) 집중해서 읽어야 하는 책, 소설책 등의 레이아웃 → 화려한 디자인 변화를 추구하지 않고, 가독성이라는 한 가지 목적을 추구하여 정제된 디자인 형태를 가짐
거실 배치
거실은 친구를 만나거나 가족과 이야기하는 등 다채로운 공간이기 때문에 한 가지 목적만을 가지고 있지 않음
ex) 사진, 이미지와 함께 글이 배치되는 책, 미술도록, 건축책 등의 레이아웃 → 다양한 기능, 목적을 가지고 있기 때문에 다양한 배치가 이루어짐
호텔 로비 배치
호텔 로비처럼 공공장소는 책을 읽는 것보다는 '보는 것'에 적합한 공간 즉, 누구를 만나려고 기다리다가 시간이 남아서 잠깐 보는 책과 같은 느낌
ex) 잡지, 광고, 인터넷 신문 등의 레이아웃 → 시각을 자극해 보고 싶은 욕구가 들도록 만드는 것에 특화되어 있기 때문에 1차적으로 시각 자극을 위한 배치 형태, 다이내믹한 연출
부엌 배치
부엌은 용도가 확실하기 때문에 집에서 가장 분류가 엄격한 공간
ex) 카탈로그, 상품상세표시, 목차 등 → 정보 전달이 가장 중요(용도 확실) 하기 때문에 정보가 엄격하게 분류되어 있는 형태
3. 그리드(Grid) 정의
그리드를 사용해 디자인 진행
모듈, 컬럼, 그리드
모듈(Module)
쪼갠 한 칸
컬럼(Column)
세로 한 줄로 모여있는 모듈 그룹
그리드(Grid)
모든 모듈의 그룹
주어진 공간을 분할해 정보 전달을 용이하게 하는정렬선
그리드를 활용해 레이아웃(디자인 요소 배치)하는 것
그리드는 디자인 작업 시 도움을 주는 안내선으로 만든 사람에게만 보이고 완성된 디자인에서는 보이지 않음
세로 모듈이 모여 컬럼이 되고, 컬럼이 모여 그리드가 됨 즉, 모듈 < 컬럼 < 그리드
그리드는 다양한 디자인을 포함할 수 있어야 함(시스템을 구성하는 것)
그리드는 공간을 규칙성 있게 분할하는 것
4. 그리드 생성 방법(인디자인 기준)
인디자인에서 그리드 생성 방법
상단 메뉴바 [레이아웃] > [안내선 만들기] > 행, 열, 간격 입력하고 여백 여부에 따라 옵션 선택 후 그리드 생성
상단 메뉴바 [보기] > [격자 및 안내선] > [안내선 잠그기]를 하면 안내선이 잠김
5. 그리드 활용
공간 분리
일반적인 공간 분리 순서 판형 제작(작업할 화면 공간) → 그리드 세팅 → 내용 분석 → 내용 대분류하여 배치 → 간격 조절(spacing) → 글자 그룹핑(grouping)해 배치 → 공간 분리(그리드 사용)
공간 분리는 시선의 이동(흐름)을 만들어주어 '정보 분리, 구분'에 용이함
글자를 어떻게 배치하느냐에 따라 공간 분리가 달라짐
얼마의 공간을 차지하고 있느냐에 따라 강조, 중요도가 달라짐
강조할 내용의 공간을 가장 크게 해야 가장 강조됨
주어진 공간을 쪼개는 것 = 그리드를 활용해 레이아웃(배치) 하는 것
공간을 짜임새 있게 연출할 수 있는 실력이 있는 사람 = 레이아웃을 잘하는 사람
글줄 길이에 차등을 준 경우
공간 분리 + 글줄 길이 차등(자간, 행간, 수평, 수직 등) → 다이내믹한 느낌 제공, 내용 강조, 정보 분리 가능
글줄 길이 차이 → 리듬 생성(길이 차이 때문) → 공간 분리 다양화 → 정보 분리
공간 구분, 글줄길이, 글자 크기 변화
정보 중요도에 따라 글자 크기변화 → 입체적인 정보 구성, 내용 강조
공간을 의도적으로 겹쳐서 정보 읽기 목적(가독성, 정보 전달)보다 정보를 보는 것을 목적으로 함 → 입체적인 구성, 느낌 제공
글자 크기 변화 → 글줄 차이 → 공간 입체적 분리(크기와 글줄 차이를 통해) → 정보의 입체화(단지 읽기 위한 목적이 아닌 내용에 따라 다양하게 보는 것)
공간 분리, 글줄길이 차이(공간이 더 쪼개짐), 글자 크기 차이(공간이 오버랩되어 입체적)
정렬선을 어떻게 맞추느냐에 따라 다양한 공간이 만들어짐
공간 분리(정보 분리) → 글줄 길이 차등(다이내믹한 느낌, 정보 주목성 강조) → 글자 크기 차등(정보 입체화, 실험적인 디자인 가능)
공간 분리, 글줄길이 차이(공간이 더 쪼개짐), 글자 크기 차이(공간이 오버랩되어 입체적)
워크숍 포스터 예시
워크숍 포스터 제작 순서 내용 분석 → 판형 제작 → 그리드 생성 → 내용 임의 배치 → 내용 분류(유사 내용끼리 그룹핑, 축 만들기를 통해 공간 분할) → 글자 강조 → 같은 그룹 내 글자 크기, 굵기 차등 두어 글자 정리 즉, 내용 분석 → 내용 배치 → 내용 분류 → 글자 강조 → 글자 정리
정렬 축
정렬 축을 통해 정보 그룹 생성 → 시선 집중, 정보 결합
ex) 첫 번째 포스터는 축이 하나이기 때문에 시선이 집중됨 두 번째 포스터는 축이 양쪽에 있기 때문에 시선이 분산됨
축의 분리
축을 의도적으로 분리 → 글의 리듬, 강조 가능
ex) 'grap'와 'Emil'을 축의 왼쪽으로 분리시켜 글의 리듬을 만들고, 강조되는 느낌을 제공
축 길이 차이
축 길이 차이 → 정보 구분 용이
ex) 첫 번째 포스터는 축이 끊어지고 길이가 다르고, 두 번째 포스터는 축이 이어짐 첫 번째 포스터보다 두 번째 포스터가 정보 구분이 용이함
ex) 첫 번째 포스터를 세 번째 포스터와 같이 변경할 경우, 정보 구분이 보다 명확해짐
간격 차이
간격 차이 → 정보 구별 용이
ex) 첫 번째 포스터는 간격이 동일하고, 두 번째 포스터는 간격에 차등을 줌 간격이 동일한 것보다 차등을 주는 것이 정보 구별을 용이하게 함
입체적 공간
공간이 겹침(오버랩) → 입체적 공간 생성, 정보 입체적 변화 (정보 전달, 읽기 목적 이상의 다양한 시선으로 바라보는 것)
