계층 구조는 중요도 순서대로 요소를 배열합니다. 이는 보는 사람에게 무엇을 먼저, 두 번째로, 세 번째로 봐야 하는지 알려줍니다. 제목은 본문보다 크고, 클릭 유도 버튼은 주변보다 밝으며, 섹션 제목은 아래 단락보다 굵습니다. 계층 구조는 디자인 전체를 통해 시선을 유도합니다. 계층 구조가 없다면 모든 요소가 관심을 끌려고 경쟁하고, 결국 아무것도 선택받지 못하게 됩니다. 보는 사람은 어디서부터 시작해야 할지 모르게 됩니다.

계층 구조는 대비를 통해 만들어집니다. 크기, 색상, 굵기, 위치, 간격은 모두 중요도를 나타냅니다. 큰 요소는 압도적인 존재감을 드러내고, 밝은 색상은 시선을 사로잡으며, 굵은 서체는 눈에 띕니다. 페이지 상단에 있는 요소는 먼저 눈에 띄고, 요소 주변의 여백은 그 요소를 더욱 강조합니다. 디자이너는 이러한 요소들을 조합하여 명확한 시각적 질서를 구축합니다. 계층 구조는 단순히 요소를 크게 만드는 것이 아니라, 중요한 요소를 크게 만드는 것입니다. 가장 중요한 요소는 가장 눈에 띄게 배치되어야 합니다. 모든 것을 강조하면 오히려 아무것도 강조되지 않습니다. 디자이너는 무엇이 가장 중요한지 결정하고 그에 맞춰 디자인해야 합니다. 계층 구조는 맥락에 따라 변화합니다. 모바일 화면은 데스크톱보다 공간이 부족하고, 포스터는 멀리서 보게 되며, 책은 가까이서 보게 됩니다. 따라서 계층 구조는 매체에 맞춰 조정됩니다. 하지만 목표는 동일합니다. 의도된 순서대로 사용자를 콘텐츠로 안내하는 것입니다.

계층 구조 도구

• 크기 — 큰 요소는 먼저 시선을 사로잡습니다.
• 색상 - 밝거나 대비되는 색상이 눈에 띕니다.
• 굵은 글씨는 더 눈에 띕니다.
• 위치 - 상단과 중앙이 먼저 보입니다.
• 공간 — 고립은 요소에 중요성을 부여합니다

위계는 중요도의 순서입니다. 시청자에게 어디를 어떤 순서로 봐야 하는지 알려줍니다.