← OpenDesign 큐레이션 · 오픈 · 무료
Smilingwolf
대규모 사진과 깔끔한 타이포그래피를 사용한 프리미엄 브랜드 및 디지털 에이전시 포트폴리오.
Agency Photographic Clean Premium Case Study
01
디자인 DNA
에이전시 포트폴리오 사진적 미니멀 정제된
고급 사진 갤러리와 스위스 디자인 스튜디오의 만남
02
컬러
#131713Ink
rgba(19,23,19,0.5)Ink soft
#F7F3F0BG
rgba(19,23,19,0.15)Line
따뜻한 오프 화이트 배경과 거의 검정에 가까운 잉크를 사용하며, 색상은 오로지 사진에 의존합니다.
03
타이포그래피
transitional-serif · geometric-sans · monospaced
display 59px · 520body 12px · 400caption 10px · 400mono 10px · 400내비게이션 및 태그에는 모노스페이스 대문자를 사용합니다. · 디스플레이 제목은 타이트한 자간과 세리프 서체를 사용합니다. · 본문 복사는 기하학적 산세리프가 주요 서체입니다.
04
여백
4px
8px
10px
12px
16px
20px
24px
48px
60px
타이트한 10-20px 거터와 넉넉한 60px 스페이서를 혼합하여 주요 콘텐츠 블록 사이에 충분한 호흡 공간을 만듭니다.
05
표면 (라운드 / 그림자 / 경계선)
sm · 4px
md · 0px
lg · 0px
pill · 0px
rgba(19,23,19,0.15)의 얇은 1px 라인이 구분선 및 미묘한 태그 윤곽선으로 절제되게 사용됩니다.
06
레이아웃
1280 container
12 columns
20px gutter
768 / 1024 breakpoints
전체 너비 이미지와 넉넉한 수직 간격을 사용한 메인 포트폴리오 목록을 위한 깔끔한 단일 열 레이아웃입니다.
07
모션과 인터랙션
220ms micro
400ms small
800ms medium
cubic-bezier(0.25, 0.1, 0.25, 1) easing
인터랙티브 요소의 미묘한 hover 상태 · 페이지 내비게이션 및 hover 효과를 위한 부드러운 전환
링크와 태그에서 미묘한 색상 변화 또는 밑줄 표시가 나타납니다. · 표준 포인터 커서 인터랙션입니다.
08
컴포넌트
button 얇은 1px 테두리와 대문자 모노스페이스 텍스트를 사용한 인라인 텍스트 링크입니다. card 포트폴리오 항목은 대규모 이미지, 대문자 모노스페이스 태그, 큰 세리프 제목, 그리고 산세리프 부제로 구성됩니다. chip 얇은 1px 테두리와 4px 반경을 가진 작은 대문자 모노스페이스 태그입니다. input 제공된 스크린샷에는 보이지 않습니다. hero 텍스트 오버레이 없는 전체 너비 사진 배경 이미지 다음에 에이전시 이름과 내비게이션이 옵니다. 09
보이스와 금지 목록
톤 세련되고, 자신감 있으며, 절제된 어조입니다. 헤드라인 직설적이고 간결하며, 종종 인상적인大型 세리프 또는 산세리프 서체로 제시됩니다. CTA 간결한 대문자 모노스페이스 텍스트로, 종종 화살표나 얇은 테두리와 함께 사용됩니다. 밝고 인위적인 악센트 색상을 사용하지 마세요. 스크린샷은 이미지가 모든 색감을 제공하는 뉴트럴 팔레트를 보여줍니다. 주요 컨테이너에 둥근 모서리를 사용하지 마세요. 스크린샷은 날카로운 4px 또는 0px 모서리를 보여줍니다. 카드나 컨테이너에 드롭 섀도우를 사용하지 마세요. 스크린샷은 완전히 평평한 표면을 보여줍니다. 모든 텍스트에 산세리프를 사용하지 마세요. 스크린샷은大型 제목에는 세리프를, UI에는 모노스페이스를 혼합 사용하는 것을 보여줍니다. 레이아웃에 밀집된 정보로 채우지 마세요. 스크린샷은 넉넉한 여백과 단일 열 흐름을 보여줍니다. 두꺼운 테두리 두께를 사용하지 마세요. 스크린샷은 매우 얇고 미묘한 구분선 및 윤곽선을 보여줍니다. 피하기: 과도한 느낌표 사용 피하기: 지나치게 기술적인 전문 용어 피하기: 공격적인 마케팅 언어 피하기: 화려한 UI 요소 피하기: 주요 컨테이너의 둥근 모서리 피하기: 컨테이너의 드롭 섀도우 10
팩 안의 실제 스크린샷
桌面首屏（hero） 桌面滚动分段（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
프리미엄 브랜드 및 디지털 에이전시 포트폴리오 사이트. 디자인 DNA는 따뜻한 오프 화이트 배경(#F7F3F0)과 거의 검정에 가까운 텍스트(#131713)로 정의되며, 시각적 흥미를 위해 오로지 대규모 고품질 사진에 의존합니다. 타이포그래피 시스템은 디스플레이 제목용 세기 전환기 세리프, 본문 복사용 기하학적 산세리프, 그리고 내비게이션 및 태그용 모노스페이스 대문자 스타일을 혼합하여 사용합니다. 주요 색상은 따뜻한 오프 홀(#F7F3F0)과 거의 검정(#131713)입니다. 주요 디자인 제약 조건은 다음과 같습니다: 인위적인 악센트 색상을 피하고 색감 변화를 위해 사진에 의존; 평평하고 건축적인 느낌을 유지하기 위해 컨테이너의 둥근 모서리나 드롭 섀도우를 피하고; 밀집되고 지저분한 레이아웃을 피하고 대신 넉넉한 여백과 엄격한 단일 열 그리드를 사용하여 작업이 호흡할 수 있도록 합니다. 전체적인 미학은 절제되고, 세련되며, 매우 정제되어 있어, 포트폴리오 프로젝트 자체의 시각적 임팩트를 우선시합니다.
더 보기 en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
왜 수록: 이 사이트는 절제, 넉넉한 여백, 그리고 정제된 타이포그래피 계층을 활용하여 작업이 스스로 말하게 하는 고급 사진 중심 포트폴리오의 완벽한 예시입니다.
