MAISON NOIR메종 누아르
프리미엄 아뜰리에밤의 색을 담은 프리미엄 아뜰리에
BrandingLanding PageResponsive
라이브 데모 열기 프리미엄 플라워샵 랜딩페이지
Dark / Editorial / Luxe
30~50대, 프로포즈·웨딩·기업 의전처럼 객단가가 높은 주문 고객
브랜드의 격을 먼저 보여주고, 예약 폼으로 상담을 받는 것
Main Visual
Desktop
스크린샷이 아니라 실제 페이지를 1440px 화면 그대로 띄운 미리보기입니다. 프레임을 누르면 페이지가 열립니다.
maisonnoir.kr
Responsive
Desktop · Tablet · Mobile
같은 페이지가 화면 크기에 따라 어떻게 접히는지 보여 줍니다. 손님 대부분은 휴대폰으로 보기 때문에, 모바일에서 먼저 확인하며 만듭니다.
Mobile
휴대폰에서 보는 주요 화면
Key Sections
페이지를 이루는 화면
각 항목을 누르면 데모의 해당 섹션으로 바로 이동합니다.
Design System
색 · 타이포 · 컴포넌트
섹션마다 색을 새로 고르지 않습니다. 다섯 개의 색과 두 개의 서체를 정해 두고 페이지 전체를 그 안에서 만듭니다.
Color
#131217미드나이트 잉크
#25232B차콜
#C6A469샴페인 골드
#E3C2C0더스티 로즈
#F3EDE8아이보리
Typography
Flower & 꽃
Cormorant Garamond Display가장 좋은 계절에, 가장 좋은 꽃으로 만듭니다.
Noto Sans KR Body라틴은 세리프로 격을 잡고, 한글은 자간을 넓힌 산세리프로 받아 어두운 배경에서도 읽히게 했습니다.
Keywords
DarkEditorialLuxeSerif
Components예약 문의하기둘러보기당일 배송웨딩
Signature Bouquet시그니처 꽃다발₩ 89,000
Notes
이렇게 설계했습니다
첫 화면에서 분위기를 고르게
히어로 사진을 세 가지 무드로 바꿔 볼 수 있습니다. 프로포즈·웨딩·기업 주문이 섞인 가게라면 손님이 자기 상황에 맞는 장면을 먼저 보게 됩니다.
예약 폼이 견적 통화를 줄입니다
용도와 예산 범위를 함께 받아, 첫 상담에서 물어볼 것이 이미 적혀 있게 했습니다.
어두운 화면일수록 사진이 중요
채도가 낮은 사진만 골라 배치해 골드 포인트가 혼자 튀지 않도록 맞췄습니다.
히어로 이미지 스위처스크롤 리빌예약 폼Cormorant Garamond × Noto Sans KR