PART_2_15. 인터페이스 디자인 (INTERFACE DESIGN)

PART_2. 인터페이스 디자인 (INTERFACE DESIGN)

*** 강력한 그룹핑 (Strong Grouping) ***

- 정보구조의 그룹핑에 따라 카테고리와 페이지가 만들어지고 화면구조의 그룹핑에 따라 헤더(header), 본문(contents), 푸터(footer)가 만들어지면서 분문구조의 그룹핑에 따라 그리드(컬럼)이 만들어짐

- 본문의 그룹핑은 주로 여백, 라인, 색상, 음영, 패널 들을 이용하는데 이중 가장 강력한 그룹핑은 패널(penel)을 이용하는것
- 패널은 여백, 라인, 색상,음영 기법이 결합되었지 때문에 그룹핑 효과가 클수 밖에 없음

- 패널의 가장 큰 특징은 시각적 명료성
- 이질적인 구성요소가 많은 페이지는 콘텐츠 성격에 따라 유목화(categorization)가 필요한데 이경우 제목바를 적절히 활용할 수 있는 패널기법이 그룹핑에 적합
- 대표적인 예는 포털 사이트의 포틀릿

- 패널의 특징은 모듈성(modularity)
- 목적에 따라 페널의 사이즈를 조절해도 전체 디자인에 미치는 영향이 작음
- 패널에 담긴 콘텐츠는 패널내의 컨트롤을 이용해 제어할수 있는데 이것은 컨트롤을 페이지 내에 적절히 분산시키고 해당 콘텐츠와 인접되어 배치되어있어 컺트롤의 속성을 보다 쉽게 이해시키는 효과가 있음

- 시각적 그룹핑이 명료할수록 시선은 분절적으로 움직이는 단점
- 시각적 통일성(unity)을 이루지 못할 경우 더 복잡해 질수 있음





벤치마킹

http://www.last.fm/

http://serversidewiki.com/

- 본문영역을 필요에 따라 생성, 삭제할 수 있는 기능을 제공
- 영역의 생성 및 삭제를 쉽게 감지할 수 있게 하려면 영역구분이 명료해야하기 때문에 패널 기법을 사용하고있음





관련이론

그리드(Grid)

- 화면요소를 배치하기 위한 수평선과 수직성의 패턴을 의미하며
- 화면요소에 시각적 순서를 부여하기위한 일종의 가이드라인 역할 수행
- 화면을 몇개의 기초단위로 나누고 중요한 요소들을 일관되게 배치하며, 화면요소를 일정한 패턴으로 묶음으로서 시각적 조직화(visual organization)와 시각적 규칙성(visual repetition)을 통한 학습용이성을 달성할 수 있게됨









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