본문 바로가기

UX/웹 2.0 기획과 디자인

PART_4_6. 그래픽 디자인 (GRAPHIC DESIGN)

PART_4. 그래픽 디자인 (GRAPHIC DESIGN)

*** 분리된 헤더 (Separate Header) ***


- 헤더는 브랜드 아이텐티티, 메뉴 들이 있는 화면 상단을 말함
- 방문한 사이트의 정체성, 네비게이션을 돕는 기능영역임

- 웹사이트에서 사용자의 목적은 본문을 통해 달성
- 헤더와 푸터는 분문 이용을 위한 지원기능을 담당하기에 본문과는 다른성격을 가지며 시각적으로도 다르게 표현되어야 함

- 메인페이지가 아닌경우 헤더와 푸터는 기능 영역(function area), 본문은 보기 영역(viewing area)으로 간주
- 무언가 조작해야하는 영역과 단순히 읽고 보는 영역은 다른 특성을 가짐
- 따라서 기능 영역과 보기영역을 명료하게 구분해야화면을 보다 신속히 이해시킬수 있음

- 같은 속성을 지닌 요소들을 묶어야 하는 디자인의 기본 원칙을 따라 헤더와 본문은 분리되어야함

- 최근 단순함한 디자인을 추구하고 본문을 강조하기위한 방편으로 분리된 헤더 디자인이 증가하는 추세

- 사용자는 세부적인 것을 먼저보는 것이 아니라 전체를 먼저 본 후 세부적인 것을 관찰
- 화면전체를 본후 화면요소를 보려하므로 헤더와 본문의 구분이 명확하면 그만큼 화면의 사용성은 향상됨





벤치마킹

http://sidejobtrack.com/index_old.php

- 본문과의 색상 대비를 통해 헤더와 푸터를 명료하게 분라하고 있음

http://stikipad.com/

- 헤더와 본문사이에 특성화 영역(featured section)을 강조함으로써 헤더를 자연스럽게 분리하고있음





관련이론

시선이 집중되는 영역(Eye-Catching Location)

- 페이지 상단
- 밝은 영역
- 상대적으로 대비가 큰영역
- 시각적 무게감이 높은 영역
- 자극적인 내용물을 담고 있는 영역










출처: 웹2.0기획과 디자인(노주환)