Dr. VITA

비타민 화장품 전문 브랜드

닥터비타

피부타입별 고민을 해결하는 닥터비타 만의 맞춤 비타민 과학을 컨셉으로 전국 4,000여개 약국에서 판매중인, 약사 선호도 1위 화장품 브랜드 ‘닥터비타’를 위한 코스메틱 브랜드 웹사이트 제작.
메인 페이지에서 비타민 화장품 ‘닥터비타’의 피부타입별 맞춤 솔루션을 구현하기위해 독창적인 큐레이션 기능을 기획/제작하고, 세가지 스타일(제품 타입별, 비타민 종류별, 피부 고민별)의 제품 페이지도 구현하였습니다. 또한, 약국 화장품이라는 컨셉을 반영하여 메인 페이지에서 약국 진열대를 모티브로하는 유니크한 디자인을 시도했습니다.

– Full Screen Banner & Parallax Scrolling –

메인 페이지를 비롯한 모든 페이지들의 상단에는 패럴렉스 (Parallax) 효과가 가미된 풀 스크린(Full Screen) 배너를 적용하였으며, 페이지의 중간 중간에도 패럴렉스 (Parallax) 효과를 가미하여 트렌드를 반영했습니다. 또한, 패럴랙스가 적용된 오브젝트를 이용하여 ‘탈 그리드’ 효과를 구현, 조금 더 특색있는 디자인을 시도 하였습니다. 각 페이지의 상단 배너는 컨셉 기획에 따른 카피라이팅 작업과 이미지 선별/적용 후 시안디자인 작업 과정을 거쳐 제작되었습니다.

– Design Concept & Curation Function –

대표적인 약국 화장품을 표방하는 닥터비타(Dr.VITA) 브랜드 웹사이트의 디자인 컨셉은 약국과 약국 진열대를 모티브로 하여 제작되었습니다.
특히, 메인 페이지에서는 메인 배너에 약사의 데스크가 표현되고, 하단으로 내려가면서 ‘추천 프리미엄 제품’과 ‘비타민 종류별 제품’, ‘피부 고민별 제품’ 큐레이션을 3단의 약국 진열대로 표현하여 ‘약국 화장품’이라는 브랜드 에센스와 ‘약사의 큐레이션’이라는 컨셉을 담아내고자 했습니다.
또한, 이러한 디자인 컨셉은 기능적으로도 이어져, 실제로 메인 페이지에서 방문고객들에게 다양한 제품 큐레이션이 가능하도록 구현되었습니다.

– Product Pages –

닥터비타(Dr.VITA) 브랜드 웹사이트의 제품 카테고리는 ‘프로덕트 타입(Product Type)’, ‘비타민 타입(Vitamin Type)’, ‘피부 고민 타입(Skin Distress Type)’의 세가지 방식으로 제품을 분류하는 각각의 제품 페이지들을 제작하였습니다. 또한, 세가지 타입별로 제품을 분류하는 각각의 제품 페이지에는 세분화된 카테고리별로 제품을 정렬시키는 기능이 구현되어 있습니다.
제품들의 썸네일 디자인은 닥터비타(Dr.VITA) 브랜드 컨셉을 반영하면서 모던하고 깔끔하게 제품들이 구성될 수 있도록 고려하여 제작하였습니다.