ADOPE / Works

Collagen
Coffee

델라본 콜라겐 액상커피 '콜피'의 상세페이지입니다. 원료 비교와 섭취량처럼 따져 보게 되는 정보는 표와 대화 형식으로 정리하고, 마지막에 집에서 타 마시는 레시피 다섯 가지를 넣었습니다.A detail page for Della Born's COLLFFEE, a liquid coffee with collagen. Ingredient comparisons and dosage are set as a table and a chat, and the page ends with five ways to make it at home.

Detail page · Web
COLLFFEE detail page shown on phone mockups
01 — Flow

Page Flow

  1. 01
    Opening라벤더 배경에 제품명과 단상자, 주요 성분 두 가지를 올렸습니다.Name, box and two key ingredients on lavender.
  2. 02
    One stick a day원두 사이에 스틱을 꽂은 컷으로 하루 한 포를 보여줍니다.Sticks set in coffee beans, for one stick a day.
  3. 03
    Origin table콜라겐 세 종류를 원료·원산지·흡수율로 비교한 표입니다.A table comparing three kinds of collagen by source, origin and absorption.
  4. 04
    Q&A하루 섭취량 질문에 메신저 대화 형식으로 답했습니다.Daily intake, answered as a messenger chat.
  5. 05
    Who it's for추천 대상 여섯 가지를 번호 목록으로 정리했습니다.Six kinds of people it suits, as a numbered list.
  6. 06
    Reviews남색 원 위에 스틱을 든 손 컷과 후기를 배치했습니다.A hand holding the stick against a navy circle, with reviews.
  7. 07
    How to drink아이스·핫 아메리카노, 큐브라떼, 라떼, 아포가토 다섯 가지 레시피입니다.Iced and hot americano, cube latte, latte and affogato.
  8. 08
    Origin이탈리아·프랑스·영국산 원료 안내로 마무리합니다.Ends with where the ingredients come from: Italy, France and the UK.
COLLFFEE detail page
02 — Images

Mockups

상세페이지 목업과 제품 연출 컷입니다.Page mockups and product scenes.

Q&A and ingredient sections on mockups
COLLFFEE served on a table
COLLFFEE bottle
03 — Plate · Colour

Colour Palette

패키지 로고의 남색을 기준으로, 라벤더와 연한 회보라로 단계를 나눴습니다.Based on the navy of the package logo, with lavender and a pale grey-violet as lighter steps.

Navy#2A2A63
Indigo#5C5D9E
Lavender#AEADCC
Mist#EAEAF3
상세페이지 기획 · 디자인 — RIDA HADetail page planning · design — RIDA HA ← Works