← OpenDesign
큐레이션 · 오픈 · 무료
Aliciamoore
극도의 절제와 풀블리드 이미지를 사용하여 몰입형 갤러리 쇼핑 경험을 만드는 프리미얼 패션 브랜드 웹사이트.
Editorial Premium Restraint Photographic Consumer
01
디자인 DNA
미니멀리스트 하이엔드 패션 분위기
제품이 유일한 초점이 되는 조용하고 조명이 은은한 럭셔리 쇼룸.
02
컬러
#F1F0ECInk
#000000BG
#222A37BG quiet
#999999Muted
rgba(241, 240, 236, 0.15)Line
사진에 의존하여 따뜻함을 더하는, 보조 딥 네이비 상태를 가진 고대비 단색 팔레트.
03
타이포그래피
grotesque-sans
display 32px · 400body-small 12px · 300body 14px · 400Founders Grotesk를 기본 서체로 사용 · 탐색 링크는 가벼운 굵기(300)와 넓은 자간 사용 · 타이포그래피 요소 주위에 넉넉한 여백 유지
04
여백
4px
8px
12px
16px
24px
32px
36px
48px
64px
96px
108px
넉넉한 패딩(36px)이 가장자리를 감싸고, 히어로에는 108px의 수직 여백.
05
표면 (라운드 / 그림자 / 경계선)
sm · 0px
md · 0px
lg · 0px
pill · 0px
분리를 위해 ink 색상의 미세한 1px 테두리를 절제적으로 사용.
06
레이아웃
1280 container
12 columns
24px gutter
768 / 1024 breakpoints
코너 정렬된 탐색 및 브랜드 요소로 지탱되는, 지배적인 중앙 비주얼을 가진 전체 화면 캔버스.
07
모션과 인터랙션
220ms micro
400ms small
800ms medium
cubic-bezier(0.32, 0.94, 0.6, 1) easing
UI 요소를 위한 매끄러운 투명도 페이드 · 텍스트와 이미지를 위한 단계적 입장 애니메이션
인터랙티브 텍스트 링크에서 미세한 투명도 감소. · 매끄러운 전환으로 즉각적인 시각적 피드백.
08
컴포넌트
button 배경 없이 텍스트만으로 구성된 링크로, hover 투명도 전환에 의존. card 주요 인터랙티브 표면으로 기능하는 대형 풀블리드 이미지 블록. hero 단일 대형 이미지가 지배하는 전체 뷰포트 섹션으로, 왼쪽에 브랜드명, 오른쪽에 호출-to-액션.
09
보이스와 금지 목록
톤 미니멀하고 세련되며 절제된. 헤드라인 대문자, 넓은 자간, 그리고 가벼운 굵기. CTA 주변에 배치된 간결한 소문자 텍스트 프롬프트. 드롭 그림자 사용 금지 — 스크린샷은 평면 이미지와 텍스트를 보여줌 둥근 모서리 사용 금지 — 스크린샷은 완벽히 사각형 모서리를 보여줌 장식 테두리 추가 금지 — 스크린샷은 테두리 없는 엣지-투-엣지 레이아웃을 보여줌 여러 악센트 색상 사용 금지 — 스크린샷은 엄격히 단색 팔레트를 보여줌 굵은 폰트 웨이트 사용 금지 — 스크린샷은 가벼운(300)과 일반(400) 웨이트만 보여줌 텍스트 중앙 정렬 금지 — 스크린샷은 왼쪽 정렬 및 오른쪽 정렬된 주변 텍스트를 보여줌 피하기: 지나친 형용사 피하기: 거친 호출-to-액션 피하기: 혼잡한 레이아웃 피하기: 화려한 색상
10
팩 안의 실제 스크린샷
桌面首屏(hero) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 移动首屏 실제 페이지에서 캡처 · 실 computed styles
11
System Prompt
갤러리 느낌의 프리미얼 미니멀 패션 이커머스 인터페이스를 디자인하세요. 최대 대비를 위해 깊은 검정(#000000) 배경과 오프화이트(#F1F0EC) 텍스트를 사용하세요. 타이포그래피는 넉넉한 자간을 가진 가볍고 일반 웨이트의 깔끔한 grotesque-sans이어야 합니다. 주요 비주얼 요소로 고품질 대형 사진을 우선시하고 UI 요소는 주변으로 밀어내세요. 매끄럽고 우아한 모션을 위해 cubic-bezier(0.32, 0.94, 0.6, 1)를 사용하세요. 그림자, 둥근 모서리 또는 화려한 색상과 같은 장식 요소를 피하고 절대적인 절제를 유지하세요. 탐색은 절제적이고 텍스트만으로 이루어져야 합니다.
더 보기
en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
왜 수록: 이 사이트는 럭셔리 이커머스 디자인의 교과서로, 극도의 절제와 공간 구성을 통해 제품을 고조시킵니다.