← OpenDesign
큐레이션 · 오픈 · 무료
Majacerar
하이엔드 제품 및 브랜드 디자인 작업을 선보이는 정제된 디자인 포트폴리오
Portfolio Editorial Clean Refinement Typography
01
디자인 DNA
미니멀 에디토리얼 프로페셔널 클린
레이아웃과 네거티브 스페이스에 중점을 둔 정교한 갤러리 포트폴리오
02
컬러
#111111Ink
#ffffffBG
#bb1111Muted
rgba(17, 17, 17, 0.1)Line
전략적으로 무채색 톤을 사용한 고대비 단색 팔레트
03
타이포그래피
geometric-sans
display 56px · 400body 19px · 400
04
여백
4px
8px
16px
24px
32px
48px
64px
96px
주요 섹션 간 48px 간격을 기반으로 한 수직 리듬
05
표면 (라운드 / 그림자 / 경계선)
sm · 4px
md · 8px
lg · 64px
pill · 999px
수평 구분선용 1px solid rgba(17, 17, 17, 0.1)
06
레이아웃
1280 container
12 columns
24px gutter
768 / 1024 breakpoints
여유로운 여백을 가진 3열 헤더 레이아웃과 단일 열 프로젝트 섹션
07
모션과 인터랙션
220ms micro
400ms small
900ms medium
cubic-bezier(0.25, 0.1, 0.25, 1) easing
뷰포트에 진입하는 요소들을 위한 0.9초 ease-out 전환 효과
인터랙티브 요소에 적용되는 섬세한 커서 포인터 · 부드러운 전환과 함께 즉각적인 응답
08
컴포넌트
button 호버 전환 효과가 적용된 미니멀한 텍스트 기반 내비게이션 card 대형 이미지와 미니멀한 텍스트 오버레이가 적용된 프로젝트 쇼케이스 카드 hero 프로젝트 분류와 자기소개 텍스트를 포함한 넉넉한 헤더
09
보이스와 금지 목록
톤 프로페셔널하고 정제되며 절제된 헤드라인 장식 없이 깔끔하고 직접적인 정보 전달형 CTA 전통적인 버튼 스타일링 없이 미니멀한 텍스트 링크 채도 높은 색상 사용 금지 — 스크린샷은 흰 배경의 단색 팔레트를 보여줍니다 드롭 그림자 추가 금지 — 스크린샷은 완전히 플랫한 디자인을 보여줍니다 굵은 폰트 웨이트 사용 금지 — 스크린샷은 전체적으로 400 웨이트를 일관되게 사용합니다 빽빽한 레이아웃 구성 금지 — 스크린샷은 요소 간 여유로운 간격을 보여줍니다 주요 요소에 둥근 모서리 사용 금지 — 스크린샷은 특정 요소에만 64px 반경을 적용합니다 여러 강조색 사용 금지 — 스크린샷은 주요 강조색이 없습니다 피하기: 화려한 색상 피하기: 복잡한 애니메이션 피하기: 장식적 요소 피하기: 과적재된 레이아웃
10
팩 안의 실제 스크린샷
桌面首屏(hero) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 移动首屏 실제 페이지에서 캡처 · 실 computed styles
11
System Prompt
이것은 샌프란시스코 기반 디자이너 Maja Cerar를 위한 정제된 디자인 포트폴리오로, 브랜드 아이덴티티와 디지털 제품 디자인을 전문으로 합니다. #ffffff 배경과 #111111 텍스트의 단색 팔레트를 사용하며, 본문 크기 19.2px의 기하학적 sans-serif 서체와 400 웨이트를 사용합니다. 주요 특징으로는 풍부한 여백, 자간이 좁은 56px 크기의 디스플레이 타이포그래피, 그리고 미니멀한 시각 요소가 있습니다. 레이아웃은 3열 헤더 구조와 수평 구분선을 사용한 단일 열 프로젝트 섹션으로 구성됩니다. 핵심 디자인 규칙으로는 채도 높은 색상 사용 금지, 모든 웨이트 400 유지, 섹션 간 대규모 간격(48px) 유지, 전통적인 버튼 컴포넌트 없이 텍스트 기반 내비게이션 사용이 포함됩니다. 전체적인 미학은 부드러운 0.9초 전환 효과를 사용한 클린하고 프로페셔널하며 갤러리 같은 느낌입니다.
더 보기
en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
왜 수록: 풍부한 여백과 타이포그래피 계층을 통해 작업이 스스로 말하게 하는 절제된 포트폴리오 디자인의 탁월한 예시입니다