ADOPE / Works
Detail Page · Web

여성청결제
상세페이지
Feminine Wash
Detail Page

델라본 여성청결제의 상세페이지를 기획하고 디자인했습니다. 제품 소개 다음에 성분과 시험 자료를 배치하고, 거품 이미지와 사용 안내로 이어지도록 구성했습니다. I planned and designed the detail page for Della Born's feminine wash. The page moves from a product introduction to ingredients and test information, then foam images and usage guidance.

Client Della Born Project 여성청결제 상세페이지Feminine Wash Detail Page Role 상세페이지 기획 · 그래픽 · 레이아웃Planning · Graphics · Layout
델라본 락토바실러스 여성 청결제 상세페이지 메인 비주얼
01 — Flow

상세페이지 구성Page flow

제품의 모습과 용도를 먼저 보여준 뒤, 성분·시험 자료·사용 안내를 순서대로 배치했습니다. The page introduces the product and its use before moving through ingredients, test information and usage guidance.

  1. 01
    제품 소개Product introduction 보틀 컷과 제품명을 첫 화면에 배치했습니다. The opening pairs a bottle image with the product name.
  2. 02
    사용 부위 안내Intended use 제품을 어디에 사용하는지 설명하는 구간을 따로 뒀습니다. A separate section explains where the product is used.
  3. 03
    사용 전 궁금한 점Questions before use 제품 설명에 앞서 사용자가 궁금해할 내용을 짧은 항목으로 정리했습니다. Short points introduce questions a shopper may have before the product details.
  4. 04
    약산성 설명Explaining pH pH 비교 그래픽으로 제품에 표기된 약산성 정보를 정리했습니다. A pH comparison graphic presents the product's stated acidity.
  5. 05
    시험 자료Test information 제공된 항균 시험 수치와 관련 자료를 같은 구간에 배치했습니다. The supplied antibacterial test figures appear alongside the related material.
  6. 06
    피부 자극 시험Skin irritation test 피부 자극 시험의 결과 수치를 본문에서 구분해 보여줬습니다. Skin irritation test figures are separated from the main copy.
  7. 07
    성분 안내Ingredient information 성분명과 관련 설명을 카드 형태로 묶었습니다. Ingredient names and descriptions are grouped into cards.
  8. 08
    후기와 패키지Reviews and packaging 후기와 패키지 정보를 페이지 뒤쪽에 모았습니다. Reviews and packaging information sit near the end of the page.
DETAIL PAGE
01 유산균 오프닝 02 전용 케어 필요성 03 고민 체크리스트 04 약산성 pH 설계 05 항균 99.9 및 버블 06 피부 무자극 임상 07 EWG 그린 성분 08 모녀 후기 및 패키지
02 — Architecture

시험 자료를 읽는 순서Reading the test information

pH, 시험 결과, 성분 등급처럼 서로 다른 정보를 구분했습니다. 숫자를 크게 쓰되 무엇에 대한 수치인지 바로 옆에서 읽을 수 있게 했습니다. I separated pH, test results and ingredient ratings. Large figures are paired with labels explaining what each number refers to.

pH 5.0 pH 안내pH information

제품에 표기된 pH 수치와 설명을 함께 배치했습니다.The stated pH value is paired with its explanation.

99.9% 항균 시험 자료Antibacterial test information

제공된 시험 결과를 관련 설명과 묶어 보여줬습니다.The supplied result is grouped with the relevant description.

0.00 피부 자극 시험 자료Skin irritation test information

시험 결과 수치를 별도 항목으로 구분했습니다.The test figure is presented as a separate item.

EWG 성분 등급 안내Ingredient ratings

제공된 성분 등급 정보를 성분 설명과 함께 정리했습니다.The supplied ratings appear with the ingredient descriptions.

03 — Art Direction

제품과 거품을 보여주는 이미지Product and foam images

보틀 전체 컷과 거품의 질감이 보이는 확대 컷을 나눠 배치했습니다. 제품의 모습과 제형을 각각 살펴볼 수 있도록 했습니다. Full bottle images and foam close-ups are shown separately so readers can see the packaging and texture.

풍부한 버블 제형 및 항균 99.9% 상세페이지 그래픽 연출
거품 확대 컷Foam close-up

거품의 결이 보이는 이미지를 크게 배치했습니다. 짧은 설명을 곁들여 제형 소개 구간으로 사용했습니다.A large foam image with a short caption forms the texture section.

클린뷰티 무드의 전용 케어 컨셉 연출
보틀 연출 컷Bottle scene

보틀과 주변 소품을 보여주는 컷은 제품 소개 구간에 배치했습니다.The bottle and props appear in the product introduction.

04 — Strategy

레이아웃 기준Layout choices

시험 자료, 제품 이미지, 사용 안내가 섞이지 않도록 각 구간의 역할을 나눴습니다. Each section has a distinct role, separating test information, product images and usage guidance.

Strategy 01 수치와 설명을 함께Figures with explanations

시험 수치만 크게 보이지 않도록 항목명과 설명을 가까이 배치했습니다.Labels and explanations sit close to the test figures.

Strategy 02 모바일에서 읽는 크기Type sizes for mobile

제목과 본문의 크기를 구분하고, 긴 설명은 짧은 문단으로 나눴습니다.Headings and body copy use distinct sizes, and longer explanations are split into short paragraphs.

Strategy 03 제품 이미지와 이어지는 색Colours drawn from the product

보틀 이미지와 어울리는 로즈 계열과 아이보리를 중심으로 화면을 정리했습니다.Rose tones and ivory connect the layout to the bottle images.

05 — Palette

컬러 팔레트Colour palette

로즈 계열과 아이보리를 바탕으로, 짙은 색을 제목과 본문에 사용했습니다. Rose tones and ivory form the base, with darker colours for headings and body copy.

Rose Terracotta#C87858
Lacto Cream#FBF6F0
Clean Sage#8CA898
Warm Dark Slate#2C221E

제품 이미지와 시험 자료를
구분해서 읽을 수 있게 구성했습니다.
Product images and test information,
arranged in distinct sections.

기획 · 상세페이지 디자인 · 비주얼 레이아웃 — RIDA HAPlanning · Detail Page Design · Visual Layout — RIDA HA ← Works