← OpenDesign
큐레이션 · 오픈 · 무료
Barbican
대담한 기관 브랜딩과 몰입감 있는 이벤트 이미지를 결합한 세계적 수준의 예술 센터 웹사이트입니다.
culture art
01
디자인 DNA
예술 문화 공연장 공연 기획
음악, 연극, 영화의 다양한 프로그램을 선보이는 명성 높은 대도시 예술 센터입니다.
02
컬러
#D14900Accent
#1A1A1AInk
#333333Ink soft
#FFFFFFBG
#F5F5F5BG quiet
#595959Muted
rgba(26, 26, 26, 0.2)Line
강렬한 고해상도 사진을 강조하도록 설계된, 활기찬 시그니처 오렌지와 깊은 블랙을 기반으로 한 대담한 기관용 팔레트입니다.
03
타이포그래피
grotesque-sans
display 56px · 700h2 40px · 700body 19px · 400caption 14px · 700헤드라인은 타이트한 자간의 무거운 굵기를 사용합니다. · 본문 텍스트는 평균보다 약간 큰 기본 크기로 높은 가독성을 유지합니다. · 구조용 태그에 대문자 사용은 절제합니다.
04
여백
4px
8px
16px
24px
32px
48px
64px
96px
콘텐츠는 넉넉한 수직 간격으로 흐르며, 대형 이미지에 숨 쉴 공간을 제공합니다.
05
표면 (라운드 / 그림자 / 경계선)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid rgba(26, 26, 26, 0.2)
rgba(0, 0, 0, 0.1) 0px 0px 10px 0px · rgba(0, 0, 0, 0.05) 0px 0px 20px 0px inset
06
레이아웃
1280 container
12 columns
24px gutter
768 / 1024 breakpoints
드라마틱한 효과를 위해 그리드를 벗어나는 전체 블리드 이미지를 가진 강한 중앙 컬럼입니다.
07
모션과 인터랙션
220ms micro
400ms small
800ms medium
cubic-bezier(0.25, 0.1, 0.25, 1) easing
버튼 및 hover 상태와 같은 대화형 요소에 적용되는 미묘한 트랜지션. · 콘텐츠 섹션이 뷰포트에 진입할 때의 부드러운 페이드 또는 슬라이드.
버튼과 링크의 불투명도 또는 배경색에 대한 미묘한 변화입니다. · 즉각적인 시각적 피드백으로, 종종 약간의 스케일 축소 또는 색상 변화를 동반합니다.
08
컴포넌트
button 날카롭거나 약간 둥근 모서리가 있는 채워지거나 테두리가 있는 형태이며, 주요 액션에는 시그니처 오렌지를 사용합니다. card 최소한의 테두리를 두고 눈에 띄는 이미지를 특징으로 하는 콘텐츠 중심 카드로, 정의를 위해 시각적 콘텐츠에 의존합니다. chip '시네마'와 같은 카테고리를 나타내는 단색, 대문자 태그로, 고대비 색상(오렌지, 그린)을 사용합니다. input 테두리가 있거나 미묘한 하단 테두리가 있는, 최소한의 스타일링이 적용된 단순한 텍스트 필드입니다. hero 전체 너비 또는 거의 전체 너비의 몰입감 있는 이미지와 강렬한 오버레이 텍스트 및 주요 CTA를 가진 영역입니다.
09
보이스와 금지 목록
톤 권위 있고, 따뜻하며, 문화적으로 풍부합니다. 헤드라인 직접적이고 매력적이며, 종종 예술 콘텐츠를 묘사합니다. CTA 행동을 유도하고 명확하여 사용자를 특정 이벤트나 정보로 안내합니다. 무채색이나 파스텔 팔레트를 사용하지 마세요 — 스크린샷은 고대비, 활기찬 오렌지와 블랙 테마를 보여줍니다. 모든 요소에 무거운 drop shadow를 적용하지 마세요 — 스크린샷은 절제를 보여주며, 깊이를 위해 필요한 곳에만 미묘한 그림자를 사용합니다. 모든 텍스트를 중앙 정렬하지 마세요 — 스크린샷은 왼쪽 정렬된 텍스트 블록을 강하게 선호합니다. 장식용이나 스크립트 글꼴을 사용하지 마세요 — 스크린샷은 엄격하고 깔끔한 기관용 sans-serif 타이포그래피를 보여줍니다. 지나치게 둥근 UI 요소를 사용하지 마세요 — 스크린샷은 주로 직사각형 또는 약간 둥근 컴포넌트를 보여줍니다. 데스크톱에서 복잡한 mega-menu 뒤에 탐색을 숨기지 마세요 — 스크린샷은 드롭다운 표시기가 있는 명확한 주요 탐색 바를 보여줍니다. 피하기: 장소의 명성을 훼손할 수 있는 지나치게 캐주얼하거나 트렌디한 언어를 피합니다. 피하기: 복잡한 메시지를 피합니다. 이미지가 많은 부분을 전달하도록 합니다.
10
팩 안의 실제 스크린샷
桌面首屏(hero) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 移动首屏 실제 페이지에서 캡처 · 실 computed styles
11
System Prompt
이것은 대담하고 기관적인 문화 예술 센터 웹사이트입니다. 음악, 연극, 영화를 위한 최고의 목적지로 위치하며, 깊은 블랙(#1A1A1A)과 깨끗한 화이트(#FFFFFF) 위에 활기찬 시그니처 오렌지(#D14900)를 사용합니다. 타이포그래피는 강렬하고 깔끔한 grotesque sans-serif(Supreme)이며, 임팩트 있는 헤드라인을 위해 무거운 굵기를 사용합니다. 주요 특징으로는 전체 블리드 사진 히어로 섹션, 대문자 카테고리 태그(칩), 그리고 명확하고 접근 가능한 탐색 구조가 포함됩니다. 중요한 주의사항: 파스텔 색상 사용 지양, drop shadow 과용 지양, 중앙 정렬 텍스트 블록 지양, 장식용 글꼴 지양, 지나치게 둥근 UI 모서리 지양, 그리고 주요 탐색 숨기기 지양.
더 보기
en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
왜 수록: 이 사이트는 강력한 브랜드 아이덴티티와 콘텐츠가 풍부하고 사용자 친화적인 경험을 성공적으로 균형 잡은 프리미엄 기관 디자인의 대표적인 예입니다.