dbdic 웹디자인 벤치마킹 사전

기본구조

기본구조

수평상속 (=GNB)
수직상속 (=GNB)
수평전환 (≠GNB)
수직전환 (≠GNB)
etc - 영역없음/타영역 귀속

구조특징

구조특징

자립구조
타영역 예속구조
걸침/점거 구조(일부포함)
분할 오목/가림

상위/이전 영역간 구분

상위/이전 영역간 구분

오픈
구분선
배경 - 색
배경 - 투명색
배경 - 패턴,이미지
자체 박스구분
닫힘 클리어화이트
트임 오픈/클리어화이트

내부 분할 섹션수

내부 분할 섹션수

단일섹션 (여백분할포함)
다단분할 - 2섹션
다단분할 - 3섹션
다단분할 - 4섹션
다단분할 - 5섹션 이상

다단분할 - 섹션구분

다단분할 - 섹션구분

구분선
배경
박스
self 클리어화이트

와이드/확장 - 상대적적용

와이드/확장 - 상대적적용

요소
배경
구분선
외형박스
없음
일부/부분 요소

1섹션 - 요소 찾기

1섹션 - 요소 찾기

logo
util 메뉴 단수/다수나열
site/com info
ⓒ카피라이트
카테고리형 메뉴그룹
배너/로고/고유 외부이동
SNS/RSS
관련/훼밀리사이트
외국어/글로벌
빠른메뉴단수
빠른메뉴그룹 - 1단 레이블
빠른메뉴그룹 - 2단 레이블
고객/연락/컨택- 고유영역
#기타 정적정보 요소
#기타 DB/연결 요소
# UI 요소

1섹션 - 요소간 그룹핑

1섹션 - 요소간 그룹핑

좌측 쏠림 그룹핑
중심 밀집/대치 그룹핑
우측 쏠림 그룹핑
좌우 사이드 그룹핑
좌우 근접/대치 그룹핑
우중간 그룹핑
좌중간 그룹핑
좌중우 균형 그룹핑
좌중우 리듬 그룹핑
전체 채움 그룹핑 (단수/다수)
개별요소/선 정4분할
단일색션내 혼용그룹핑

2섹션 - 요소 조합

2섹션 - 요소 조합

logo
util 메뉴 단수/다수나열
site/com info
ⓒ카피라이트
카테고리형 메뉴그룹
배너/로고/고유 외부이동
SNS/RSS
관련/훼밀리사이트
외국어/글로벌
빠른메뉴단수
빠른메뉴그룹 - 1단 레이블
빠른메뉴그룹 - 2단 레이블
고객/연락/컨택- 고유영역
#기타 정적정보 요소
#기타 DB/연결 요소
#UI 요소

2섹션 - 요소/그룹핑간 배치

2섹션 - 요소/그룹핑간 배치

좌측 쏠림 그룹핑
중심 밀집/대치 그룹핑
우측 쏠림 그룹핑
좌우 사이드 그룹핑
좌우 근접/대치 그룹핑
우중간 그룹핑
좌중간 그룹핑
좌중우 균형 그룹핑
좌중우 리듬 그룹핑
개별요소/선 4분할
전체 채움 그룹핑 (단수/다수)
단일색션내 혼용그룹핑

3섹션 - 요소 찾기

3섹션 - 요소 찾기

logo
util 메뉴 단수/다수나열
site/com info
ⓒ카피라이트
카테고리형 메뉴그룹
배너/로고/고유 외부이동
SNS/RSS
관련/훼밀리사이트
외국어/글로벌
빠른메뉴단수
빠른메뉴그룹 - 1단 레이블
빠른메뉴그룹 - 2단 레이블
고객/연락/컨택- 고유영역
#기타 정적정보 요소
#기타 DB/연결 요소
#UI 요소

3섹션 - 요소/그룹핑간 배치

3섹션 - 요소/그룹핑간 배치

좌측 쏠림 그룹핑
중심 밀집/대치 그룹핑
우측 쏠림 그룹핑
좌우 사이드 그룹핑
좌우 근접/대치 그룹핑
우중간 그룹핑
좌중간 그룹핑
좌중우 균형 그룹핑
좌중우 리듬 그룹핑
개별요소/선 4분할
전체 채움 그룹핑 (단수/다수)
단일색션내 혼용그룹핑

4섹션 - 요소 조합

4섹션 - 요소 조합

logo
util 메뉴 단수/다수나열
site/com info
ⓒ카피라이트
카테고리형 메뉴그룹
배너/로고/고유 외부이동
SNS/RSS
관련/훼밀리사이트
외국어/글로벌
빠른메뉴단수
빠른메뉴그룹 - 1단 레이블
빠른메뉴그룹 - 2단 레이블
고객/연락/컨택- 고유영역
#기타 정적정보 요소
#기타 DB/연결 요소
#UI 요소

4섹션 - 요소/그룹핑간 배치

4섹션 - 요소/그룹핑간 배치

좌측 쏠림 그룹핑
중심 밀집/대치 그룹핑
우측 쏠림 그룹핑
좌우 사이드 그룹핑
좌우 근접/대치 그룹핑
우중간 그룹핑
좌중간 그룹핑
좌중우 균형 그룹핑
좌중우 리듬 그룹핑
개별요소/선 4분할
전체 채움 그룹핑 (단수/다수)
단일색션내 혼용그룹핑

# 기타 정적정보 요소

# 기타 정적정보 요소

배너/팝업 유형
인증/보증/준수/수상 관련
모바일 관련 정보
주의/명시/정책 txt
그외 숫자중심 컨텐츠
그외 txt중심 컨텐츠
logo 대체/보완 txt
그외 img중심 컨텐츠

# 기타 DB/연동 요소

# 기타 DB/연동 요소

알림/뉴스/공지
카운터/넘버링
SNS 연동 컨텐츠
정보 다운로드
그외 숫자중심 컨텐츠
그외 txt중심 컨텐츠
입력 컨텐츠 (뉴스레터)

# UI/form 요소 적용

# UI/form 요소 적용

드롭메뉴
드롭메뉴 + btn
입력폼
링크/연결 btn
토글/화면내event
컨트롤 ○●○
컨트롤 ◀▷
◀컨텐츠▷
탭 - 메뉴
play/stop UI
새창표시
접근성/시스템 UI
상태표시 (new,hot,숫자…)
TOP/위로/상단메인
html form
More / 더보기 / +
Go / 가기 / →
전체보기
기능/브라우저 연동
태그 UI

추가요소 확장 적용

추가요소 확장 적용

자사 로고 - 이미지 추가 확장
util menu - 이미지 확장
util menu - 수직 확장
site/com info - 혼합/확장
카테고리형 - 3뎁스 확장
SNS - 편집 확장
관련/훼밀리사이트 - 반복 확장
외국어/글로벌 - 이미지/반복 확장
빠른메뉴 - 이미지 확장
고객/연락/컨택 - 반복/UI 확장
비주얼얼형 이미지/배경

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

Contents