한국 도자의 빛과 이야기를 세계에 잇는 도자 큐레이션 웹사이트
Design Concept
도자에 담은 빛과 기쁨
한국 도자를 처음 접하는 해외 바이어도 브랜드의 철학과 작가의 개성을 빠르게 이해할 수 있도록, 화려한 장식을 덜고 도자 사진이 중심이 되는 구조를 택했습니다.
청자빛을 닮은 세이지 그린과 오프화이트를 기본 팔레트로 삼고, 세리프 영문 서체로 갤러리 도록 같은 차분한 분위기를 만들었습니다.
브랜드 소개에서 작가별 제품, 소식, 구매처, 문의로 이어지는 흐름을 통일된 규칙으로 정리해 B2B 상담까지 자연스럽게 이어지도록 설계했습니다.
Design Elements
-
01
작가별 제품 소개 구조
각 작가를 이니셜과 작품 세계를 담은 제목, 네 줄의 설명으로 정리해 한눈에 비교할 수 있도록 했습니다.
작가의 이야기가 곧 제품의 가치로 읽히도록 구성했습니다. -
02
브랜드 철학과 정체성 섹션
HUI에 담긴 Light, Joy, Hope의 의미와 “그릇 이상의 이야기”라는 메시지를 큰 문장으로 전달합니다.
이름의 뜻을 시각적으로 풀어 브랜드 기억도를 높였습니다. -
03
전시·새 작가 소식 구성
전시 안내와 신규 디자이너 소식을 날짜와 분류가 있는 카드로 정리했습니다.
해외 전시 참가 정보처럼 파트너가 확인해야 할 내용을 한곳에서 볼 수 있습니다.
Responsive
디바이스 대응
PC · 태블릿 · 모바일 전 환경에서 정보의 순서와 사용성이 동일하게 유지되도록 반응형으로 설계했습니다.
Desktop
1920 × 1080
데스크톱
Tablet
768 × 1024
태블릿
Mobile
375 × 812
모바일
Design System
컬러 팔레트와 타이포그래피를 시스템으로 정의해 화면 전반에 일관된 규칙을 적용했습니다.
Colors
- Point Color#D8D6CF
- Sage Green#A8C2BD
- Deep Sage#6E7F7A
- Mist Green#8FA7A1
- Off White#F5F5F2
- Charcoal#2E2E2E
- White#FFFFFF
Typography
Aa 가나다 Pretendard
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Aa 가나다 Playfair Display
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Aa 가나다 Mukta
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Main Page
메인 페이지
첫 화면에서 브랜드와 핵심 서비스를 먼저 보여주고,
스크롤 흐름에 따라 필요한 정보로 자연스럽게 이어지도록 구성했습니다.
스크롤하여 전체 보기 ↓
Sub Page
서브 페이지
주요 서브 페이지를 같은 규칙으로 설계했습니다.
02 Pages
Note
About, Business, Our Product, What's New, Where To Buy를 같은 규칙으로 확장할 수 있게 설계했습니다.
서브 페이지는 영문 대제목과 짧은 설명으로 시작하고, 이후 카드나 본문 블록이 이어지는 같은 구조를 따릅니다.
국문과 영문 페이지를 함께 운영해 언어 전환 후에도 정보를 찾기 쉽도록 했습니다.
- Grid
- 작가와 소식 콘텐츠를 동일한 카드 규격으로 정렬했습니다.
- Header
- 5개 메뉴와 Contact, KR/EN 전환을 한 줄에 정리했습니다.
- CTA
- Contact 버튼과 푸터의 WhatsApp, Line, LinkedIn, Facebook 링크로 상담 경로를 열어두었습니다.
Mobile
모바일 환경에서 자주 쓰는 기능을 손이 닿는 곳에 배치했습니다.
Bottom Bar
Optimization
-
Menu
PCMenu · 상단 가로 메뉴와 KR/EN 전환
MOMenu · 햄버거 메뉴로 전환
-
Layout
PCLayout · 작가별 제품을 넓게 배치한 섹션
MOLayout · 한 컬럼 카드 흐름으로 재배열
-
Typography
PCTypography · 세리프 영문 제목과 고딕 본문
MOTypography · 제목 크기 축소와 줄 간격 조정
-
Image
PCImage · 도자 작품 중심의 넓은 이미지
MOImage · 작품이 잘리지 않도록 비율 유지
