PROJECT — 17 / 63

DETAIL PAGE DESIGN

다크와 화이트를 교차시키는 단계형 상세 설계다크와 화이트를 교차시키는 단계형 상세 설계

Alternating Contrast, Guided Product NarrativeSCROLL TO EXPLORE ↓
FULL DETAIL VIEW · Alternating Contrast, Guided Product Narrative100%
다크와 화이트를 교차시키는 단계형 상세 설계 포트폴리오 디자인

DESIGN POINTS

01

정보 설계

도입부의 브랜드 히스토리형 인트로 이후 제품 히어로, 앱 기능 01~03, 감성형 기능 소개, 컬러·구성품, 스펙, FAQ로 이어지는 흐름이 명확합니다. 각 구간은 넘버링, 구분선, 배경 전환, 다음 섹션의 일부 노출을 활용해 긴 콘텐츠를 단계별로 인지하게 만듭니다.

02

시각 표현

블랙·차콜 배경에서는 3D 렌더, 로고, 음파·도트 그래픽, 밝은 케이스 이미지를 강하게 띄우고, 화이트 배경에서는 주황 포인트와 반투명 패널, 말풍선 카드, 치수선 같은 장치로 성격이 다른 정보들을 구별합니다. 특히 주황과 연한 블루는 기능 강조와 테크 무드를 나누는 보조 축으로 반복됩니다.

03

사용자 가독성

굵은 헤드라인, 짧은 행 길이, 중앙 정렬 구조, 동일 크기의 목업 반복으로 모바일에서도 스캔이 쉽습니다. 질문과 답변, 라벨과 값, 제목과 보조문구를 색상과 굵기 차이로 분리해 텍스트 밀도가 높은 후반부까지 읽기 위계를 유지합니다.

POINT COLORS

Point 1#111111
Point 2#FFFFFF
Point 3#FF6A00
Point 4#BFC8FF
Point 5#66B9D7

NEXT PROJECT — 18

DETAIL PAGE DESIGN

대비와 모듈로 정리한 테크 상세페이지

VIEW NEXT ↗