HYEON ROASTERS현 로스터스
스페셜티 로스터리매일 아침 여섯 시, 오늘 볶은 원두
BrandingLanding PageResponsive
라이브 데모 열기 스페셜티 로스터리 랜딩페이지
Dark / Technical / Warm
홈카페를 즐기는 20~40대, 원두를 정기적으로 사는 사람
원두 정기 구독 신청과 매장 방문
Main Visual
Desktop
스크린샷이 아니라 실제 페이지를 1440px 화면 그대로 띄운 미리보기입니다. 프레임을 누르면 페이지가 열립니다.
hyeonroasters.kr
Responsive
Desktop · Tablet · Mobile
같은 페이지가 화면 크기에 따라 어떻게 접히는지 보여 줍니다. 손님 대부분은 휴대폰으로 보기 때문에, 모바일에서 먼저 확인하며 만듭니다.
Mobile
휴대폰에서 보는 주요 화면
Key Sections
페이지를 이루는 화면
각 항목을 누르면 데모의 해당 섹션으로 바로 이동합니다.
Design System
색 · 타이포 · 컴포넌트
섹션마다 색을 새로 고르지 않습니다. 다섯 개의 색과 두 개의 서체를 정해 두고 페이지 전체를 그 안에서 만듭니다.
Color
#14100D로스트 블랙
#241B14다크 코코아
#C98A3F카라멜
#D9CDBC오트밀
#F4EFE7크림
Typography
Flower & 꽃
Plus Jakarta Sans Display가장 좋은 계절에, 가장 좋은 꽃으로 만듭니다.
Noto Sans KR Body세리프 대신 자간을 넓힌 산세리프로 갔습니다. 원두 정보를 표로 읽히게 하려면 장식보다 정렬이 중요합니다.
Keywords
DarkSpecialtyTechnicalWarm
Components예약 문의하기둘러보기당일 배송웨딩
Signature Bouquet시그니처 꽃다발₩ 89,000
Notes
이렇게 설계했습니다
원두를 표로 보여 줍니다
산지 · 가공 · 로스팅 단계 · 컵 노트를 한 줄로 정리했습니다. 원두를 고르는 사람은 사진보다 이 표를 먼저 봅니다.
로스팅 레벨을 눈금으로
라이트에서 다크까지 위치를 눈금으로 표시해, 취향이 확실한 손님이 설명 없이 고를 수 있게 했습니다.
구독은 세 가지만 고르면 끝
용량 · 주기 · 분쇄 여부. 선택지를 늘리면 신청이 줄어듭니다.
원두 스펙 테이블로스팅 레벨 게이지구독 신청 폼Plus Jakarta Sans × Noto Sans KR