HANKO한코
뜨개 · 자수 공방한 코부터 시작합니다
BrandingLanding PageInteractionResponsive
라이브 데모 열기 뜨개 · 자수 아틀리에 랜딩페이지
Bright / Vivid / Hands-on
취미 클래스를 찾는 20~50대, 선물용 키트를 사려는 사람
이번 주 수업 신청과 DIY 키트 구매
Main Visual
Desktop
스크린샷이 아니라 실제 페이지를 1440px 화면 그대로 띄운 미리보기입니다. 프레임을 누르면 페이지가 열립니다.
hanko.kr
Responsive
Desktop · Tablet · Mobile
같은 페이지가 화면 크기에 따라 어떻게 접히는지 보여 줍니다. 손님 대부분은 휴대폰으로 보기 때문에, 모바일에서 먼저 확인하며 만듭니다.
Mobile
휴대폰에서 보는 주요 화면
Key Sections
페이지를 이루는 화면
각 항목을 누르면 데모의 해당 섹션으로 바로 이동합니다.
Design System
색 · 타이포 · 컴포넌트
섹션마다 색을 새로 고르지 않습니다. 다섯 개의 색과 두 개의 서체를 정해 두고 페이지 전체를 그 안에서 만듭니다.
Color
#FFFDF7크림
#0F8A7E티일
#E2542F코럴
#E8A72C머스터드
#232B2A잉크
Typography
Flower & 꽃
Plus Jakarta Sans Display가장 좋은 계절에, 가장 좋은 꽃으로 만듭니다.
Noto Sans KR Body공방 중 유일하게 굵은 산세리프 대문자를 씁니다. 명조로 조용하게 가면 다른 세 개와 또 겹칩니다.
Keywords
BrightVividWeeklyBeginner
Components예약 문의하기둘러보기당일 배송웨딩
Signature Bouquet시그니처 꽃다발₩ 89,000
Notes
이렇게 설계했습니다
첫 화면에 사진을 안 썼습니다
공방 사진은 어디나 비슷합니다. 대신 이 공방이 실제로 쓰는 실 색을 띠로 깔았습니다. 스크롤하기 전에 분위기가 먼저 전해집니다.
시간표가 히어로 바로 다음
클래스로 먹고사는 공방에서 손님의 첫 질문은 "언제 하세요"입니다. 소개보다 요일 · 시간 격자를 먼저 두고, 칸을 누르면 그 수업 상세가 아래에 펼쳐집니다.
왕초보를 위한 자리
"저 진짜 처음인데요"가 이 업종 문의의 대부분입니다. 난이도를 3단계 띠로 그리고 각 단계에서 무엇을 완성하는지 적었습니다.
키트 상자를 열어서 보여 줍니다
무엇이 들었는지 모르면 안 삽니다. 사진 한 장에 번호를 붙이고 옆에 부품 목록을 세웠습니다. 설명서 삽화 같은 배치입니다.
주간 시간표실 색상 고르기키트 구성 분해도Plus Jakarta Sans × Noto Sans KR