ADOPE / Works
Detail Page · Web

남성청결제
상세페이지
Men’s Wash
Detail Page

델라본 남성청결제의 상세페이지를 기획하고 디자인했습니다. 어두운 배경에 제품과 주요 수치를 배치하고, 성분·시험 자료·사용법을 차례로 읽을 수 있게 구성했습니다. I planned and designed the detail page for Della Born's men's wash. Product images and key figures sit against a dark background, followed by ingredients, test information and usage guidance.

Client Della Born Project 남성청결제 상세페이지Men’s Wash Detail Page Role 상세페이지 기획 · 그래픽 · 레이아웃Planning · Graphics · Layout
델라본 블랙마카 남성 청결제 상세페이지 메인 비주얼
01 — Flow

상세페이지 구성Page flow

제품 소개에서 시작해 사용 부위, 성분과 시험 자료, 제형, 후기 순서로 이어집니다. The page moves from the product introduction to intended use, ingredients and tests, texture, and reviews.

  1. 01
    제품과 주요 수치Product and key figures 보틀 컷과 자료에 표기된 블랙마카 함량을 첫 화면에 배치했습니다. The opening pairs the bottle with the black maca content stated in the supplied material.
  2. 02
    사용 부위 안내Intended use 사용 부위에 대한 설명을 제품 소개 다음에 배치했습니다. Information about the intended area of use follows the introduction.
  3. 03
    사용자가 궁금한 점Questions before use 체취와 세정에 관한 설명을 짧은 문단과 그림으로 나눴습니다. Copy about odour and cleansing is divided into short paragraphs and illustrations.
  4. 04
    원료 소개Ingredient introduction 원료명과 관련 설명을 그래픽 안에서 함께 읽을 수 있게 했습니다. Ingredient names and descriptions appear together in the graphics.
  5. 05
    거품 제형Foam texture 거품 이미지를 크게 배치해 제형을 보여줬습니다. Large foam images show the texture.
  6. 06
    피부 자극 시험Skin irritation test 제공된 피부 자극 시험 결과를 별도 카드로 정리했습니다. The supplied skin irritation test result appears in its own card.
  7. 07
    성분 안내Ingredient information 성분명과 제공된 등급 정보를 같은 구간에 모았습니다. Ingredient names and supplied ratings are grouped into one section.
  8. 08
    후기와 패키지Reviews and packaging 후기와 패키지 정보를 뒤쪽에 배치해 페이지를 마무리했습니다. Reviews and packaging information close the page.
DETAIL PAGE
01 블랙마카 오프닝 02 남성 생리 특성 03 체취 원인 분석 04 특허 BSASM 성분 05 쿨링 포밍 거품 06 피부 저자극 임상 07 EWG 안전 등급 08 실구매자 후기 및 패키지
02 — Architecture

주요 정보를 구분하는 카드Cards for key information

함량, 원료명, 시험 결과, 사용감 설명을 각각 다른 항목으로 구분했습니다. 숫자와 짧은 제목을 먼저 보고 관련 설명을 이어 읽도록 배치했습니다. Content percentage, ingredient names, test results and texture descriptions are presented as separate items. Figures and short headings lead into the related copy.

26.5% 함량 표기Content percentage

제공된 자료의 함량 수치를 크게 쓰고 원료명을 함께 표기했습니다.The supplied percentage is paired with the ingredient name.

BSASM 원료명 안내Ingredient name

원료명과 관련 설명을 한 카드에 묶었습니다.The ingredient name and its description share one card.

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

시험 수치와 항목명을 함께 배치했습니다.The test figure appears alongside its label.

Cooling 사용감 소개Texture description

사용감에 대한 설명은 시험 수치와 구분해 보여줬습니다.Texture descriptions are separated from test results.

03 — Art Direction

어두운 배경과 거품 이미지Dark backgrounds and foam images

어두운 배경 위에 보틀과 밝은 거품 이미지를 배치했습니다. 제품의 윤곽과 거품의 질감이 배경에 묻히지 않도록 대비를 줬습니다. The bottle and pale foam images sit against dark backgrounds, keeping their shape and texture visible.

페루산 마카 26.5% 함유 상세페이지 비주얼 연출
제품이 보이는 대비Contrast around the product

배경과 제품 이미지의 밝기를 구분해 보틀의 형태가 보이도록 했습니다.Brightness contrast helps define the bottle's shape.

특허 BSASM 및 쿨링 거품 특장점 상세페이지 그래픽
거품 확대 컷Foam close-up

거품 확대 이미지를 제형 설명과 함께 배치했습니다.Foam close-ups accompany the texture description.

04 — Strategy

레이아웃 기준Layout choices

첫 화면에는 제품 소개를, 아래에는 성분과 시험 자료를 나눠 배치했습니다. The opening introduces the product, with ingredients and test information in the sections below.

Strategy 01 짧은 제목과 큰 이미지Short headings and large images

첫 화면의 제목을 짧게 두고 보틀 이미지를 크게 보여줬습니다.The opening uses a short heading and a large bottle image.

Strategy 02 설명이 이어지는 순서Ordering the information

사용 부위 설명 다음에 성분과 시험 자료를 배치했습니다.Ingredients and test information follow the intended-use section.

Strategy 03 밝기 차이로 구간 나누기Sections defined by contrast

차콜 배경과 밝은 글자, 블루 포인트로 각 구간을 구분했습니다.Charcoal backgrounds, pale type and blue accents distinguish the sections.

05 — Palette

컬러 팔레트Colour palette

차콜과 블랙을 바탕으로, 밝은 거품 이미지와 블루 계열을 대비시켰습니다. Charcoal and black contrast with pale foam images and blue accents.

Charcoal Slate#1A1E24
Deep Grooming#2B333E
Ice Cooling#5C89A6
Foam White#E5E8EC

제품과 주요 정보를
차례로 살펴볼 수 있게 구성했습니다.
Product images and key information,
arranged in a clear sequence.

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