큐레이션 · 오픈 · 무료

Robin Noguier

대담한 타이포그래피와 역동적인 이미지 레이아웃으로 크리에이티브 프로젝트를 선보이는 정교한 포트폴리오.

01

디자인 DNA

크리에이티브 작업의 큐레이션된 갤러리

02

컬러

세련된 무톤 블루 팔레트는 고대비 화이트 텍스트와 생생한 사진 콘텐츠를 위한 차분한 배경을 제공합니다.

03

타이포그래피

didone-serif · geometric-sans

• display135px · 400
• body16px · 400
• label14px · 700

네비게이션과 액션 레이블에는 대문자와 넓은 자간을 사용합니다 · 고대비 디스플레이 세리프와 깔끔한 기하학적 산스세리프를 페어링합니다 · 본문 텍스트는 다크 배경 대비로 가볍고 읽기 쉽게 유지합니다

04

여백

일관된 4px 기본 단위로 수직 및 수평 리듬을 이끌며, 콘텐츠 주위에 넉넉한 패딩을 적용합니다.

05

표면 (라운드 / 그림자 / 경계선)

이미지 요소에 미묘한 화이트 보더

0 4px 24px rgba(0, 0, 0, 0.15)

06

레이아웃

한쪽은 큰 타이포그래피, 다른 쪽은 역동적인 이미지를 배치한 비대칭 분할 레이아웃을 사용하며, 모바일에서는 스택 레이아웃으로 전환됩니다.

07

모션과 인터랙션

패럴랙스 효과를 위한 부드러운 스크롤 기반 변환 · 인터랙티브 요소의 미묘한 호버 전환

인터랙티브 요소의 미묘한 커서 변화와 잠재적인 투명도 변화 · 케이스 스터디 상세 내용으로 직접 네비게이션

08

컴포넌트

• button 넉넉한 수평 패딩과 오른쪽 화살표 아이콘이 있는 대문자 텍스트 버튼
• card 약간의 회전과 화이트 보더가 적용된 역동적인 이미지 카드
• hero 대담한 타이포그래피 인트로와 회전된 역동적인 이미지의 조합

09

보이스와 금지 목록

• 톤 자신감 있는, 미니멀한, 전문적인
• 헤드라인 임팩트에 중점을 둔 크고 우아한 세리프 타이포그래피
• CTA 명확한, 대문자, 액션 중심의

• 메인 컨테이너에 둥근 모서리를 사용하지 마세요 — 스크린샷은 사각 이미지 프레임을 보여줍니다
• 많은 거터가 있는 복잡한 그리드를 사용하지 마세요 — 스크린샷은 깔끔하고 유연한 레이아웃을 보여줍니다
• 밝고 채도 높은 포인트 색상을 사용하지 마세요 — 스크린샷은 화이트와 무톤 블루에 의존합니다
• 네비게이션에 소문자를 사용하지 마세요 — 스크린샷은 'ABOUT'에 대문자를 사용합니다
• 모든 요소에 무거운 드롭 섀도우를 사용하지 마세요 — 스크린샷은 미니멀하고 부드러운 섀도우를 보여줍니다
• 장난스럽고 둥근 산스세리프를 사용하지 마세요 — 스크린샷은 구조화된 기하학적 산스를 사용합니다
• 피하기: 지저분한 레이아웃
• 피하기: 지나치게 복잡한 색상 체계
• 피하기: 밀도 높은 텍스트 블록

10

팩 안의 실제 스크린샷

실제 페이지에서 캡처 · 실 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko