PROJECT — 10 / 63

DETAIL PAGE DESIGN

정제된 그리드와 레이어드 비주얼의 상세페이지정제된 그리드와 레이어드 비주얼의 상세페이지

Layered Editorial Grid for Structured Detail DesignSCROLL TO EXPLORE ↓
FULL DETAIL VIEW · Layered Editorial Grid for Structured Detail Design100%
정제된 그리드와 레이어드 비주얼의 상세페이지 포트폴리오 디자인

DESIGN POINTS

01

정보 설계

첫 화면의 4분할 원형 카드, 라인업 비교 섹션, 반복되는 좌우 2열 상세 블록, 포인트 카드, 공정 다이어그램, 표와 배송 흐름으로 이어지는 구성은 긴 내용을 성격별 모듈로 나눠 이해하게 합니다. 섹션마다 중앙 정렬형 소개부와 비교형·설명형 블록을 교차 배치해 스크롤 피로를 줄이고 읽는 순서를 자연스럽게 고정합니다.

02

시각 표현

화이트와 라이트그레이의 깨끗한 바탕 위에 골드, 머스터드 옐로우, 딥그린을 반복 포인트로 사용해 프리미엄하면서도 안정적인 인상을 만듭니다. 원형 카드, 캡슐 배지, 라운드 버튼, 선묘 잎맥 패턴, 희미한 대형 워드마크, 실사 음식 및 원물 컷아웃이 겹치며 평면 그리드에 입체감과 기억점을 더합니다.

03

사용자 가독성

굵은 산세리프 헤드라인과 작은 보조문, 번호 배지, 아이콘, 얇은 구분선, 표 헤더 색상 분리 등으로 위계를 분명히 만들어 빠른 스캔이 가능합니다. 사진 위에는 오버레이와 중앙 정렬 텍스트를 사용하고, 데이터 영역은 2열 배치와 표 구조로 분리해 감성 비주얼과 설명 정보가 서로 방해하지 않도록 설계했습니다.

POINT COLORS

Point 1#ffffff
Point 2#d8c8a0
Point 3#f0b400
Point 4#6e8b3d
Point 5#111111

NEXT PROJECT — 11

DETAIL PAGE DESIGN

네온 그라데이션 위의 프로모션형 UI 전개

VIEW NEXT ↗