정보 설계
상단 히어로로 시선을 먼저 고정한 뒤, 가로 배너로 중간 안내를 분리하고, STEP 1~9의 순차형 레이아웃으로 자연스럽게 아래로 읽히게 설계했다. 단계 라벨과 연결선, 강조 박스를 통해 ‘주목 → 이해 → 실행’의 흐름이 한 번에 인지된다.
PROJECT — 48 / 63
DETAIL PAGE DESIGN
경쾌한 색 대비로 완성한 모바일 절차형 상세페이지경쾌한 색 대비로 완성한 모바일 절차형 상세페이지
Playful Visual Flow for Mobile Step GuideSCROLL TO EXPLORE ↓
DESIGN POINTS
시각 표현
고채도 옐로우를 바탕으로 딥 퍼플과 레드 포인트를 교차 사용해 이벤트성 분위기와 강한 주목도를 동시에 만들었다. 둥근 타이포, 카툰형 캐릭터, 말풍선, 손가락 포인터, 기하 장식 요소가 결합되며 친근하고 활기 있는 인포그래픽 무드를 형성한다.
사용자 가독성
스마트폰 화면을 크게 크롭하고 클릭 지점을 직접 오버레이해 실제로 눌러야 할 위치를 즉시 파악할 수 있게 했다. 짧은 텍스트, 굵은 라벨, 반복되는 목업 형식이 복잡한 설명을 줄이고 스크롤 환경에서도 빠른 이해를 돕는다.
POINT COLORS
Point 1#F4DA18
Point 2#3F2A3E
Point 3#D93B2D
Point 4#FFFFFF
Point 5#1F1F2E
NEXT PROJECT — 49
DETAIL PAGE DESIGN