큐레이션 · 오픈 · 무료

Ryanstephen

깔끔한 사진 그리드를 통해 디지털, 공간적, 유체 인터페이스 디자인을 선보이는 포트폴리오입니다.

01

디자인 DNA

실험적인 인터페이스 작업을 위한 깔끔한 디지털 갤러리

02

컬러

프로젝트 이미지가 주도하게 하는 엄격한 중립 팔레트

03

타이포그래피

humanist-sans

• body12px · 400
• body-large16px · 400

04

여백

풍부한 여백이 자기소개와 이미지 그리드를 분리합니다

05

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

none

06

레이아웃

자기소개용 고정 왼쪽 열, 이미지 그리드용 스크롤되는 오른쪽 열

07

모션과 인터랙션

transition: all 0.2s ease

이미지와 링크에 포인터 커서 · 표준 링크 동작

08

컴포넌트

• button 간단한 텍스트 링크 (이메일, Twitter, LinkedIn)
• card 밀집된 그리드 내의 둥근 사진 썸네일
• hero 자기소개 텍스트 블록

09

보이스와 금지 목록

• 톤 전문적이고 직접적이며 절제된
• 헤드라인 간단한 자기소개 진술
• CTA 일반 텍스트 링크

• 복잡한 레이아웃을 사용하지 마세요 — 스크린샷은 간단한 고정 사이드바 + 스크롤 그리드를 보여줍니다
• 장식용 그림자를 추가하지 마세요 — 스크린샷은 드롭 그림자가 없는 이미지를 보여줍니다
• 컨테이너에 드롭 그adows을 사용하지 마세요 — 스크린샷은 평면적인 이미지 카드를 보여줍니다
• 화려한 강조색을 사용하지 마세요 — 스크린샷은 순수한 중립 블랙/화이트/그레이 팔레트를 보여줍니다
• 장식용 테두리를 사용하지 마세요 — 스크린샷은 테두리 없는 요소를 보여줍니다
• 복잡한 타이포그래피를 사용하지 마세요 — 스크린샷은 두 가지 크기의 간단한 sans-serif 글꼴을 보여줍니다
• 무거운 배경색을 사용하지 마세요 — 스크린샷은 순백 (#ffffff) 배경을 보여줍니다
• 피하기: 마케팅 용어
• 피하기: 유행어
• 피하기: 이모지

10

팩 안의 실제 스크린샷

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

11

System Prompt

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