메뉴건너뛰고 본문 바로가기

카테고리별 웹디자인 벤치마킹 사전 디비딕

데스크탑 모바일앱

구조 & 배치

기본구조 (GNB기준)

기본구조 (GNB기준)

수평
수직
혼용

영역노출 - 화면(FHD)기준

영역노출 - 화면(FHD)기준

only Main영역
Main영역 ＞ CON영역
CON영역 ＞ Main영역
only CON영역
모든영역 화면노출
Main = CON (상호명확)
Main = CON (상호혼잡)

영역비중 - 페이지 기준

영역비중 - 페이지 기준

only Main영역
Main영역 ＞ CON영역
CON영역 ＞ Main영역
only CON영역
Main = CON

특징구조 - 역동중심

특징구조 - 역동중심

사선
랜덤한/불규칙
기하학/비정형적

특징구조 - 하드중심

특징구조 - 하드중심

블럭/다수박스
타일 - 스크린/와이드 분할
타일 - 박스/고정내 분할
표/테이블
수직
단수/개별적 박스

특징구조 - 소프트/곡선

특징구조 - 소프트/곡선

규칙성 곡선
불규칙성 곡선

영역간 나열구조

영역간 나열구조

영역간 나열순서

영역간 나열순서

일반적/순차적
변칙적/비순차적
생략나열 - GNB
생략나열 - VIS/MAIN
생략나열 - CON
생략/예속 나열 - Footer
추가영역 - 인트로외

영역간 구분,공유

영역간 구분,공유

영역간 구분명확
GNB, VIS 배경공유
VIS, CON 배경공유
CON, Footer 배경공유
GNB ~ CON 배경공유
영역간 부분적 공유
부분 겹침 VIS, CON
VIS, Footer 배경공유

와이드/확장 - 요소

와이드/확장 - 요소

GNB 영역
VIS 영역
CON 영역 - 전체
CON 영역 - 부분/일부/혼용
Footer - 전체/부분/혼용
활용없음

와이드/확장 - 배경,구분선

와이드/확장 - 배경,구분선

GNB 영역
VIS 영역
CON 영역 - 단일 전체
CON 영역 - 단별 전체
CON 영역 - 단별 부분/혼용
Footer - 전체/부분/혼용
활용없음
전체영역