CASE 35LUMIERE

첫 화면의 무드로 고르는
프리미엄 뷰티 브랜드

컨셉 작업 — 가상 화장품 브랜드 LUMIERE를 설정해 만든 원페이지입니다.

업종: 화장품·뷰티 (온라인 브랜드)
형태: 컨셉 시안 · 원페이지
구성: 브랜드 스토리 · 서비스 3종 · 베스트셀러
수치 · 고객 후기 · CTA
기술 스택: 반응형 HTML/CSS · Vanilla JS · IntersectionObserver · Google Fonts

LUMIERE 데스크탑·모바일 화면 — PENNYPAGE WORKS · CASE 35

01과제

무엇을 받았고, 무엇을 했나

뷰티 브랜드 사이트는 첫 화면의 무드와 제품 신뢰가 구매를 좌우합니다. 그래서 다크 플럼·골드 톤에 Playfair Display 세리프 로고를 쓰고, 성분 분석·맞춤 추천·정기 배송 3가지 서비스와 베스트셀러를 스크롤 순서대로 배치했습니다.

브랜드 스토리·서비스·베스트셀러·수치 카운트업·고객 후기·CTA로 이어지는 원페이지로 구성했습니다.

핵심 — 무드와 신뢰다크 플럼·골드 톤과 세리프 로고로 분위기를 잡고, 서비스와 베스트셀러를 스크롤 순서대로 보여 줍니다.

02화면

히어로가 아니라 실제로 일하는 구간

서비스 3종 — 성분 분석·맞춤 추천·정기 배송 — 01서비스 3종 — 성분 분석·맞춤 추천·정기 배송

베스트셀러 제품 그리드 — 02베스트셀러 제품 그리드

브랜드 스토리 — 03브랜드 스토리

고객 후기 · 마무리 CTA — 04고객 후기 · 마무리 CTA

03구성

이 사이트에 들어간 것

01
스플릿 히어로좌측 카피 · 우측 제품 이미지
02
브랜드 스토리다크 플럼 배경 섹션
03
서비스 3종 카드성분 분석·맞춤 추천·정기 배송
04
베스트셀러 제품 그리드배지·가격 표기
05
수치 카운트업IntersectionObserver
06
스크롤 등장 애니메이션섹션별 순차 등장
07
고객 후기별점 카드
08
모바일 햄버거 메뉴Vanilla JS

LUMIERE 모바일 전체 화면

모바일 · 스크롤해서 보기

컨셉 작업입니다.

특정 고객 없이 업종 문법을 연구하려고 만든 시안입니다.

시안 보기 제작 문의