5. 효과적인 LAYOUT 핵심 20KEYs
01. 기본 구조를 익혀라
02. 가장 중요한 것을 먼저 배치하라
03. 순서를 정하라
04. 모든 요소를 동시에 고려하라
05. 페이스를 조절하라
06. 성격에 맞는 서체를 사용하라
07. 비례를 생각하라
08. 괘선을 사용하라
09. 변화에 일관성을 부여하라
10. 타이포그래피로 단을 구분하라
11. 과밀하지 않게 주의하라
12. 획일적인 디자인을 탈피하라
13. 매체의 특성을 고려하라
14. 내용을 분해하라
15. 숨 쉴 여지를 남겨라
16. 격자를 탈출하라
17. 시각적 장치를 이용하라
18. 타이포 그래피와 컬러를 조화 시켜라
19. 정보에 색을 입혀라
20. 색상 분류 체계를 활용하라
6. 01.기본 구조를 익혀라.
효과적인 LAYOUT 핵심 20KEYs
1단 그리드
설명글, 보고서, 단행본 처럼 연속적인
글에 적용한다.
텍스트 블록이 페이지의 주요 요소다.
2단 그리드
텍스트 양이 많거나 정보의 성격이
다양할 때 단을 나누어 배치한다. 두단의 너
비가 같을 수도 있고 다를 수도 있다.
다단 그리드
다양한 너비의 단을 조합한 다단 그리드는
1단,2단 그리드 보다 활용도가 훨씬 높다.
잡지, 웹사이트용.
모듈 그리드
UI/X, 신문 달력, 그래프, 목록 처럼 복잡한
정보를 담아내기에 가장 좋은 그리드이다.
판면을 수직과 수평으로 구획하여 작은
덩어리들로 쪼갠다.
계층 그리드
한 면을 몇 개의 구역으로 나누는 그리드다.
보통 여러 개의 가로단으로 구성된다.
7. 효과적인 LAYOUT 핵심 20KEYs
02.가장 중요한 것을 먼저 배치하라
내용의 텍스트를 파악하여 작업을 조직화 분석한다.
텍스트의 짜임새는 타이포 그래피의 크기, 장평 및 자간, 행간에 따라 결정된다.
다음 >
13. 효과적인 LAYOUT 핵심 20KEYs
05. 페이스를 조절하라
많은 정보를 담기 위해서는 이미지나 텍스트를
반복적으로 질서 정연하게 배치
- 몇 가지 템플릿으로 여러 페이지를 제어 한다.
14. 효과적인 LAYOUT 핵심 20KEYs
06. 성격에 맞는 서체를 사용하라
서체 배치의 가장 중요한 것은 균형과 비례이다.
내용의 성격을 파악 후 서체 선택.
15. 효과적인 LAYOUT 핵심 20KEYs
* 취미 또는 음식에 설명과 어우러지는 메인/서브서체 예시이다.
16. 효과적인 LAYOUT 핵심 20KEYs
07. 비례를 생각하라
황금비율
디자이너들은 보통 자신의 눈과 느낌에 따라 가장 균현 잡
힌 비율을 찾아낸다. 수치로 나타내면 약 1 : 1.618
17. 효과적인 LAYOUT 핵심 20KEYs
07. 비례를 생각하라
* 양면에 사용된 이미지와 폰트의 발란스를 맞춘다.
18. 효과적인 LAYOUT 핵심 20KEYs
08. 괘선을 사용하라
설명서에서는 정보가 매우 자잘한 덩어리로 세분 되어
두 단 사이에 적당한 괘선을 사용한다.
*하지만 괘선을 너무 지나치게 사용한 판면은 산뜻함이 떨어진다.
19. 효과적인 LAYOUT 핵심 20KEYs
09. 변화에 일관성을 부여하라
레이아웃은 일관성, 질서, 명확성, 견고한 구성을 갖춰야 한다.
20. 효과적인 LAYOUT 핵심 20KEYs
10. 타이포그래피로 단을 구분하라
효과적인 레이아웃은 언뜻 보기에는 단순해 보이지만 실제로는 매우 유연한 구조
타이포그래피로도 각 단의 성격을 규정 할 수 있다. 서체의 두께와 크기를 달리하여 정보에
질서를 부여.
공간을 명확히 구성하기만 한다면 다양한 서체를 사용하면서 시각적 혼란을 피할 수 있다.
21. 효과적인 LAYOUT 핵심 20KEYs
11. 과밀하지 않게 주의하라
모든 공간을 완벽하게 채울 필요가 없다.
정보가 많아질 수록 괘선을 이용하여 조직화하고 강렬한 시각 효과를 창출 할 수 있다.
23. 효과적인 LAYOUT 핵심 20KEYs
13.매체의 특성을 고려하라
대형 웹사이트는 엄청나게 많은 양의 정보를 소화하기 위해 그리드를 사용해서 화면을 구축한다.
따라서 명확한 타이포그래피를 사용하는 것이 매우 중요하다.
24. 효과적인 LAYOUT 핵심 20KEYs
14. 내용을 분해하라
정보가 많아질 수록 괘선을 이용하여 조직화하고 강렬한 시각 효과를 창출 할 수 있다.
도표와 단위로 구성된 정보가 있다. 이런 복잡한 정보를 디자인 할 때의 기준은 명확성, 가독성, 여백
그리고 변화다.
여러가지 성격의 정보가 어지럽게 섞여 있을 때, 이것들 알기 쉬운 덩어리들로 분해하면
더 명확한 레이아웃을 구성 할 수 있다.
25. 효과적인 LAYOUT 핵심 20KEYs
15. 숨 쉴 여지를 남겨라
모듈 그리드라고 해서
모든 모듈을 채워야
하는 것은 아니다.
26. 효과적인 LAYOUT 핵심 20KEYs
16.격자를 탈출하라
모듈의 격자를 탈출하는 순간, 모듈 그리드의 또 다른 아름다움이 드러난다.
일관된 모듈 그리드 상에서도 형태나 크기, 패턴을 변형하여 얼마든지 질서 정연하면서도
경쾌한 판면을 구성 할 수 있다.
27. 17.시각적 장치를 이용하라
모듈의 도표나 그래프는 숫자만 사용해 단순하게
나타 낼수도 있지만, 시각 요소를 이용하여 훨씬
읽기 쉽게 할 수 있다.
그래픽을 사용하면 도표를 훨씬 기억하기 쉬워진다.
야금 야금 전기를 잡아 먹는 “흡혈귀식 전기 낭비” 를
설명하는데 흡혈귀 만큼 어울리는 인물이 또 있을까?
효과적인 LAYOUT 핵심 20KEYs
28. 효과적인 LAYOUT 핵심 20KEYs
18. 타이포 그래피와 컬러를 조화 시켜라
모듈의 컬러를 사용하는 설명서라면
되도록 색을 절제하여 독자가 설명
하고 있는 내용 외의 요소에 관심을
돌리지 않도록 주의 한다.
29. 효과적인 LAYOUT 핵심 20KEYs
19.정보에 색을 입혀라
달력이라는 주제에 맞게, 계절감이 나타날 수 있는 컬러를 선택해 따뜻한 컬러감과 역동성을 나타내는
RED컬러를 사용하였으며, 폰트 컬러는 진한 색감의 보색인 옆은 회색 계열로 폰트를 나열해 어울어지도록
부드럽게 표현.
30. 효과적인 LAYOUT 핵심 20KEYs
20.색상 분류 체계를 활용하라
색으로 정보를 분류하여 원하는 정보를
손쉽게 찾을 수 있게하라.
색상 분류를 사용한 판면은 아이콘과
마찬가지로 글 또는 색만 사용했을 때
보다 훨씬 많은 정보를 전달해준다.
다음 >
31. 효과적인 LAYOUT 핵심 20KEYs
색상만으로도 정보 체계를 파악 할 수 있다.
성격에 맞는 색상을 사용하고 대담한 필체로 여백을 만들어, 다음에 이어질 내용에 대한 흥미를 유발 할
수도 있다.
*각각의 색은 보는 이의 시선을 사로 잡고 볼드체로 된 제목을 돋보이게 한다.
32. 효과적인 LAYOUT 핵심 20KEYs
LAYOUT 쉽게 접근하기!
1. 주제에 맞는 폰트 고려
2. 컬러와 서체의 융화
3. 이미지의 크기
4. 각 컨텐츠 수가 많아지면 쾌선으로 분리한다.
5. 템플릿화하여 컨텐츠를 배열한다.
몇가지 사항으로 깔끔한 UX 문서를 작성하는 방법을 알아본다.
