dermal metric 온라인 스토어 웹 디자인
dermal metric E-Commerce Web Design
dermal metric은 콜롬비아·엘살바도르 시장을 겨냥한 클리니컬 스킨케어 브랜드로, "투명한 과학이 곧 숭고함(Transparent science is the sublime)"이라는 브랜드 철학 위에 세워졌다. 본 프로젝트는 브랜드 아이덴티티 구축에 이어 진행된 이커머스 웹 디자인으로, 랜딩·제품 상세·카탈로그·카트·체크아웃·주문 완료·회원 인증에 이르는 전체 구매 여정을 설계했다. DM Ink와 DM White 두 값만으로 구동되는 크롬 위에, 8개 카테고리 컬러 패밀리(Field·Mid·Deep)가 데이터 요소에만 절제되어 개입하는 브랜드 컬러 원칙을 웹 환경에 그대로 이식했다.
측정 도구를 은유하는 직각의 그리드, Hanken Grotesk와 Monoplex KR Wide의 역할 분리(인간 가독 텍스트와 데이터의 이원 체계), 제품 라벨의 위계를 그대로 옮긴 제품 카드 설계가 화면 전반을 지배한다. 개발자·클라이언트와의 3자 협업 속에서 WCAG 가독성 기준과 브랜드의 저대비 위계를 조율하고, 콜롬비아 결제 환경(ePayco·PSE·현금 결제)과 전자 세금계산서(DIAN) 체계를 반영한 6단계 체크아웃 플로우를 완성했다.
dermal metric is a clinical skincare brand for the Colombian and Salvadoran markets, built on the philosophy that "transparent science is the sublime." Following the brand identity work, this project designed the complete purchase journey of its e-commerce platform — landing, product detail, catalog, cart, checkout, order confirmation, and account authentication. The brand's color principle — a chrome driven by only two values, DM Ink and DM White, with eight category color families (Field·Mid·Deep) intervening solely on data elements — was transplanted intact into the web environment.
Right-angle grids evoking measuring instruments, the role separation between Hanken Grotesk and Monoplex KR Wide (a dual system of human-readable text and data), and product cards structured after the hierarchy of the physical labels govern every screen. Through a three-way collaboration with the developer and client, the project balanced WCAG readability standards against the brand's intentional low-contrast hierarchy, and completed a six-step checkout flow reflecting Colombia's payment landscape (ePayco·PSE·cash) and electronic invoicing system (DIAN).
Category: E-Commerce Web Design, UI Design
Key Subjects: Clinical Skincare, Purchase Journey, Design System
Visual Elements: Two-Value Chrome (Ink·White), Category Color Spectrum, Label-Structured Product Card, Right-Angle Grid
Key Subjects: Clinical Skincare, Purchase Journey, Design System
Visual Elements: Two-Value Chrome (Ink·White), Category Color Spectrum, Label-Structured Product Card, Right-Angle Grid
