디자인을 시작하기 전에’디자인의 기본 법칙’과 ‘디자인 제작 프로세스’ 염두해두고 작업을 들어가기감각을 떠나가 누구에게 무엇을 전달할 것인지를 명확하게 할 것그 목적에 필요한 최적의 디자인 방법을 선택해 제작할 것이라는말 이전에 디자인의 구조에 대해서 염두해보고 들어가야만 한다.이 디자인을볼 불특정 다수 혹은 명확한 대상이 있다면 내가 주고싶은 정보와 그들 혹은 그가 필요로하는 정보에 대한 우선순위 파악이 가장 먼저 진행되야한다.사용자가 필요로하는 정보는 무엇인가, 이 디자인 결과물을 접하는 사람들은 어떻게 느끼나 등 제 3자를 주체로 해서 디자인 시간의 방향을 결정한는 일대상을 명확히 파악하고 방향을 검토하는 충분한 시간이 필요한 일이다.02. 디자인 프로세스정보의 정리판형 여백의 설정그리드 계획역할의 설정강약의 설정배색타이포 그래피정보의 도식화’조금씩 만들어 나가면서 생각하는 것’이 아니라 ‘필요한 것을 먼저 순서대로 준비해놓고, 디자인을 제작한다.‘가. 정보의 정리6하원칙으로 정보의 구획을 나누기나. 판형 여백의 설정다. 그리드의 설정(격자상의 가이드라인)라. 역할의 부여(지면의 어느부분에 정보를 배치할 것인지 생각)마. 강약의 설정바. 배색사. 문자’ 서체선택아. 정보의 도식화(다이어그램)컨텐츠의 중요도 설정
레이아웃
2.레이아웃 설정01. 판형, 판명, 여백의 관계- 정보가 많거나, 와글다글한 인상을 주고싶다면 판면을 넓게 사용하고, 마진을 좁게 설정한다.- 천천히 읽어주기를 바라거나 고급스러운 느낌을 추구하는 경우 , 차분한 인상을 주고싶은 경우는 판면을 좁게 사용하고 마진을 넓게 설정한다.. 마진은 상하 및 좌우를 맞춘다.2. Grid그리드 시스템의 장점은 손쉽게 통일성을 확보할 수 있는데 있다.모더니즘 타이포그래피에서의 그리드 설정방법(많은 보충이 필요함)판면의 위치를 결정한다임의의 그리드를 설정한다기본 텍스트 세팅을 한블럭에 흘려내린다.그리드 블럭의 크기를 결정한다.(문자 Xheight에 배수로 설정한다.)블럭을 복제해서 본문을 흘려내린다.블력의 간격을 조절한다(행간간격으로 설정한다.)블럭사이의 여백 조절3. 그룹화요소간의 거리설정(인접한 컨텐츠 일수록 가깝게 배치, 멀리 있는 컨텐츠 일수록 멀리 배치)-같은 의미나 역할을 하는 요소를 연결한다.-연관성이 낮은 요소는 서로 연결시키지 않는다.-여백을 적절히 이용한다.그룹화의 방법접근, 유사, 결합4. 맞추기(정렬)명확한 기준선이 있고 보여야 만이 - 가이드 라인을 사용해 컨텐츠 배열을 한다.- 그리드를 사용한다- 시각보정을 사용하여 맞춘다5. 대비- 타이포그래피에서의 대비- 사진이나 도판과 타이포의 대비- 색체대비- 밀도대비디자인에서 대비를 사용하는 이유는 ‘강조하고자 하는 내용’과 ‘그렇지 않은 내용’을 구분하기 위해서’강조하고 싶은 요소를 명확히 하기’, ‘제대로 차이를 주기’- 크기대비크기대비가 크면 명확해지고 행태대비가 적으면 고급스러워진다- 문자간 크기대비본문, 대제목, 소제목, 주석 간의 크기차이를 말한다각각의 문자요소에 역할을 가미한 다음 문자 크기에 차등을 둬서 콘트라스트를 만들어낸다.문자간 크기대비가 높으면 시선유도가 뛰어난 결과를 만들 수 있기 때문에 지면을 훑어보는 것만으로도 중요한 정보를 전달할 수 있다. 이 방법은 순식간에 정보를 전달하고자 하는 광고나 잡지, POP 등에서 자주 이용되고 있다. 점프 비율이 높은 디자인은 임팩트에서도 효과적인 방법으로 잘 알려져 있다.문자간 크기대비가 낮으면 고급스러움이나 신뢰성, 고급스럽고 설득력이 있는, 지적인 감각 등의 이미지를 줄 수 있다.사진 도판의 점프 비율여러 장의 사진과 도판이 있고 또한 거기에 우선순위가 있는 경우 ‘우선순위가 높은 사진을 크게 배치함으로써’ 전달하고자 하는 포인트가 명확해진다.크기대비의 비율결정등비수열, 피보나치수열06. 반복과 나열동일한 디자인 법칙으로 레이아웃하는 방법이다.반복과 나열은 반복해야 하는 요소가 많으면 많을수록 효과적이다.모든 요소를 제대로 반복한다.사진, 도판의 크기문자의 크기서체의 종류선 등의 장식요소색배열여백07. 전면배치사진을 사용할 때 고려하여서 사용한다.08. 무게중심지면의 균형감을 파악하는 기준은 배치해야 하는 디자인 요소의 무게를 생각하는 것이다.무게는 문자, 사진, 도판, 색의 농도 차이에 따라 변환시켜 생각해볼 수 있다.각 요소를 배치할 때에는 무게를 판단한 다음에 지면의 중심을 고려한다.09. 여백의 설정(얀치홀트가 좌측정렬을 고집했던 이유?)레이아웃을 설정할 때에는 ‘무엇을 어떻게 배치할 것인가’ 만이 아니라 ‘어디에 여백을 만들 수 있는가?‘리는 시점도 매우 중요하다. 여백의 설정방법에 따라 완성도는 크게 달라진다.여백이 있으므로서 요소들을 연결하거나 중요한 부분을 강조하는 역할이 있다.여백이 이어질 수 있는 구조를 설정해야 한다.(4군데 모서르 중에서 2~3군데에 요소를 배치한다.)빠져나갈 수 있는 곳을 설정한다.심메트리(대칭성)좌우대칭, 거울대칭, 점대칭, 평행이동삼각형 구도는 안정감, 역삼각형 구도는 긴장감.적용사례(비교)지면분할황금비율(1:1.618)백은비율(1:root2)1/3의 법칙역피라미드 구조짧은 시간에 정보를 전달하는 방법결론>특징>상세
이미지사용사진이나 도판의 가장 큰 역할은 ‘이미지를 구체화 하는 것’누끼딴 사진피사체의 윤곽이 강조되기 때문에 주목도가 높아져 정보가 정리되어 보인다. 따라서 그 만큼 정보를 빨리 전달할 수 있다.움직임이 큰 사진을 연출할 수 있다.이미지 배치 시 유의점비슷한 이미지를 가깝게 배치한다.시선의 흐름을 의식해서 배치한다.문자는 이미지 상의 정보가 적은 부분에 배치한다.
이 디자인을볼 불특정 다수 혹은 명확한 대상이 있다면 내가 주고싶은 정보와 그들 혹은 그가 필요로하는 정보에 대한 우선순위 파악이 가장 먼저 진행되야한다.
사용자가 필요로하는 정보는 무엇인가, 이 디자인 결과물을 접하는 사람들은 어떻게 느끼나 등 제 3자를 주체로 해서 디자인 시간의 방향을 결정한는 일
대상을 명확히 파악하고 방향을 검토하는 충분한 시간이 필요한 일이다.
디자인 프로세스
정보의 정리
판형 여백의 설정
그리드 계획
역할의 설정
강약의 설정
배색
타이포 그래피
정보의 도식화
‘조금씩 만들어 나가면서 생각하는 것’이 아니라 ‘필요한 것을 먼저 순서대로 준비해놓고, 디자인을 제작한다.’
가. 정보의 정리
6하원칙으로 정보의 구획을 나누기
나. 판형 여백의 설정
다. 그리드의 설정(격자상의 가이드라인)
라. 역할의 부여(지면의 어느부분에 정보를 배치할 것인지 생각)
마. 강약의 설정
바. 배색
사. 문자’ 서체선택
아. 정보의 도식화(다이어그램)
컨텐츠의 중요도 설정
레이아웃
2.레이아웃 설정
판형, 판명, 여백의 관계
정보가 많거나, 와글다글한 인상을 주고싶다면 판면을 넓게 사용하고, 마진을 좁게 설정한다.
천천히 읽어주기를 바라거나 고급스러운 느낌을 추구하는 경우 , 차분한 인상을 주고싶은 경우는 판면을 좁게 사용하고 마진을 넓게 설정한다.
. 마진은 상하 및 좌우를 맞춘다.
Grid
그리드 시스템의 장점은 손쉽게 통일성을 확보할 수 있는데 있다.
모더니즘 타이포그래피에서의 그리드 설정방법(많은 보충이 필요함)
판면의 위치를 결정한다
임의의 그리드를 설정한다
기본 텍스트 세팅을 한블럭에 흘려내린다.
그리드 블럭의 크기를 결정한다.(문자 Xheight에 배수로 설정한다.)
블럭을 복제해서 본문을 흘려내린다.
블력의 간격을 조절한다(행간간격으로 설정한다.)
블럭사이의 여백 조절
그룹화
요소간의 거리설정(인접한 컨텐츠 일수록 가깝게 배치, 멀리 있는 컨텐츠 일수록 멀리 배치)
-같은 의미나 역할을 하는 요소를 연결한다.
-연관성이 낮은 요소는 서로 연결시키지 않는다.
-여백을 적절히 이용한다.
그룹화의 방법
접근, 유사, 결합
맞추기(정렬)
명확한 기준선이 있고 보여야 만이
가이드 라인을 사용해 컨텐츠 배열을 한다.
그리드를 사용한다
시각보정을 사용하여 맞춘다
대비
타이포그래피에서의 대비
사진이나 도판과 타이포의 대비
색체대비
밀도대비
디자인에서 대비를 사용하는 이유는 ‘강조하고자 하는 내용’과 ‘그렇지 않은 내용’을 구분하기 위해서
‘강조하고 싶은 요소를 명확히 하기’, ‘제대로 차이를 주기’
크기대비
크기대비가 크면 명확해지고 행태대비가 적으면 고급스러워진다
문자간 크기대비
본문, 대제목, 소제목, 주석 간의 크기차이를 말한다
각각의 문자요소에 역할을 가미한 다음 문자 크기에 차등을 둬서 콘트라스트를 만들어낸다.
문자간 크기대비가 높으면
시선유도가 뛰어난 결과를 만들 수 있기 때문에 지면을 훑어보는 것만으로도 중요한 정보를 전달할 수 있다. 이 방법은 순식간에 정보를 전달하고자 하는 광고나 잡지, POP 등에서 자주 이용되고 있다. 점프 비율이 높은 디자인은 임팩트에서도 효과적인 방법으로 잘 알려져 있다.
문자간 크기대비가 낮으면
고급스러움이나 신뢰성, 고급스럽고 설득력이 있는, 지적인 감각 등의 이미지를 줄 수 있다.
사진 도판의 점프 비율
여러 장의 사진과 도판이 있고 또한 거기에 우선순위가 있는 경우 ‘우선순위가 높은 사진을 크게 배치함으로써’ 전달하고자 하는 포인트가 명확해진다.
크기대비의 비율결정
등비수열, 피보나치수열
반복과 나열
동일한 디자인 법칙으로 레이아웃하는 방법이다.
반복과 나열은 반복해야 하는 요소가 많으면 많을수록 효과적이다.
모든 요소를 제대로 반복한다.
사진, 도판의 크기
문자의 크기
서체의 종류
선 등의 장식요소
색
배열
여백
전면배치
사진을 사용할 때 고려하여서 사용한다.
무게중심
지면의 균형감을 파악하는 기준은 배치해야 하는 디자인 요소의 무게를 생각하는 것이다.
무게는 문자, 사진, 도판, 색의 농도 차이에 따라 변환시켜 생각해볼 수 있다.
각 요소를 배치할 때에는 무게를 판단한 다음에 지면의 중심을 고려한다.
여백의 설정(얀치홀트가 좌측정렬을 고집했던 이유?)
레이아웃을 설정할 때에는 ‘무엇을 어떻게 배치할 것인가’ 만이 아니라 ‘어디에 여백을 만들 수 있는가?‘리는 시점도 매우 중요하다. 여백의 설정방법에 따라 완성도는 크게 달라진다.
여백이 있으므로서 요소들을 연결하거나 중요한 부분을 강조하는 역할이 있다.
여백이 이어질 수 있는 구조를 설정해야 한다.(4군데 모서르 중에서 2~3군데에 요소를 배치한다.)
빠져나갈 수 있는 곳을 설정한다.
심메트리(대칭성)
좌우대칭, 거울대칭, 점대칭, 평행이동
삼각형 구도는 안정감, 역삼각형 구도는 긴장감.
적용사례(비교)
지면분할
황금비율(1:1.618)
백은비율(1:root2)
1/3의 법칙
역피라미드 구조
짧은 시간에 정보를 전달하는 방법
결론>특징>상세
이미지사용
사진이나 도판의 가장 큰 역할은 ‘이미지를 구체화 하는 것’
누끼딴 사진
피사체의 윤곽이 강조되기 때문에 주목도가 높아져 정보가 정리되어 보인다. 따라서 그 만큼 정보를 빨리 전달할 수 있다.