|
|
|
|
|
|
|
|
|
|
|
|
|
|
이번에 소개할 작업은 메디스코 필리브 올인원크림의 화장품 상세페이지 디자인이에요.
크림 하나로 여러 단계를 대신하는 올인원 제품이라 제품 이미지와 사용방법을 함께 보여주는 구성에 중점을 두었어요.
제품 이미지를 살리기 위해 녹색을 메인 컬러로 정했어요
상세페이지 전체 컬러는 녹색을 메인으로 잡았어요.
제품 이미지와 어울리면서도 화장품 페이지에서 흔히 보이는 색감과는 조금 다른 인상을 주고 싶었거든요.
배경과 텍스트 컬러를 녹색 톤으로 맞추고, 제품 이미지는 원래 색감이 최대한 살도록 배치했어요.
화장품 상세페이지에서 사용전후 이미지가 중요한 이유
화장품은 발라보기 전까지 변화를 눈으로 확인하기 어려운 상품이에요.
그래서 사용전후 이미지를 함께 보여주는 구성이 자주 쓰입니다.
이번 상세페이지에서도 사용전후 이미지를 별도 영역으로 배치해서 고객이 제품을 바르기 전과 후를 순서대로 비교해볼 수 있도록 했어요.
성분표시와 상표등록증을 함께 안내한 이유
올인원크림처럼 여러 성분이 들어가는 화장품은 성분표시를 꼼꼼히 확인하려는 고객이 많아요.
제품의 장점을 설명하는 영역 바로 뒤에 성분표시를 배치한 것도 그런 이유예요.
상표등록증 안내도 함께 넣었는데, 제품에 대한 기본적인 신뢰 정보를 상세페이지 안에서 바로 확인할 수 있도록 하기 위해서였어요.
사용방법 안내와 추가 구매 제품을 함께 구성했어요
올인원크림은 사용방법이 간단해도 처음 접하는 고객에게는 순서를 안내하는 게 도움이 돼요.
그래서 사용방법 안내를 이미지와 함께 배치했어요.
이어서 괄사처럼 함께 사용할 수 있는 추가 구매 제품 영역을 넣었는데, 사용방법을 먼저 보여준 다음이라 자연스럽게 이어지는 흐름을 만들 수 있었어요.
후기 이벤트와 사용 영상으로 신뢰를 더했어요
인트로 다음에는 후기 이벤트 안내와 실제 사용 영상을 배치했어요.
글과 이미지만으로 설명하기 어려운 발림성이나 사용감은 영상으로 보여주는 편이 더 직관적이라고 판단했어요.
후기 이벤트는 구매를 고민하는 고객에게 참고가 될 수 있도록 눈에 잘 띄는 위치에 넣었어요.
굿파크에서는 화장품처럼 성분과 사용감이 중요한 상품일수록 정보 순서와 이미지 배치를 함께 고민하고 있어요.
메디스코 필리브 올인원크림도 제품의 특징과 신뢰 정보를 자연스럽게 확인할 수 있도록 구성했어요.