디자인 아이디어
- 크리에이티브 포트폴리오프로젝트와 실천 방식을 통해 작업 전체를 설명합니다.
- 독립 디자이너 웹사이트자신이 만드는 것과 브리프에 접근하는 방식을 연결합니다.
- 스튜디오 소개 페이지잠재적 협업자에게 구체적인 출발점을 제공합니다.
포트폴리오 하이라이트
- 다섯 가지 프로젝트 아이디어각 카드는 프로젝트 이름과 간단한 목적을 결합합니다.
- 3단계 실천 방식리서치, 프로토타이핑, 재사용 가능한 시스템이 접근 방식을 설명합니다.
- 완성된 작업 옆의 노트현장 노트와 열린 질문이 실천에 대한 또 다른 시각을 더합니다.
크리에이티브 포트폴리오 웹사이트 디자인 미리보기
1 / 5
프로젝트 이상을 설명하는 포트폴리오
Maya Rowan의 포트폴리오는 구체적인 트레이드오프를 선택합니다. 많은 포트폴리오가 스크린샷에 부여하는 시각적 비중을 프로젝트 이름에 줍니다. "아이디어를 눈에 보이게 만든다"는 서두의 문장은 기기 목업 벽이 아닌 타이포그래피 프로젝트 카드 그리드로 이어집니다. 따라서 이 페이지는 실제 작업이 무엇인지 설명하기 위해 설명 문구에 의존합니다.
동일한 편집 구조가 세 가지 규모에서 반복됩니다. 번호가 매겨진 섹션이 페이지를 구성하고, 큰 이름이 프로젝트를 구분하며, 작은 레이블이 작업 노트를 식별합니다. 이는 가상의 페르소나를 교체하기 전에도 이 사이트를 크리에이티브 포트폴리오 디자인 참고자료로 유용하게 만듭니다. 중요한 것은 특정 빨간색이나 파란색이 아니라 그 수준들이 함께 작동하는 방식입니다.
| 섹션 | 표시 내용 | 답하는 질문 |
|---|---|---|
| 작업 | 간단한 설명이 달린 다섯 개의 명명된 프로젝트. | 이 디자이너는 어떤 종류의 것을 만드는가? |
| 실천 | 신호 찾기, 배우기 위해 만들기, 시스템 남기기. | 디자이너는 불확실한 브리프에 어떻게 접근하는가? |
| 노트 | 현장 노트, 프로토타입 로그, 열린 질문. | 디자이너는 프로젝트 사이에 무엇을 생각하는가? |
| 연락처 | 대화를 시작하는 마무리 초대. | 잠재적 협업자는 어떻게 다음 단계를 밟는가? |
프로젝트 카드가 포스터처럼 읽히는 이유
데스크톱 프로젝트 그리드는 의도적으로 불균등합니다. 열은 1.2:0.8 비율을 사용하므로 왼쪽 카드가 사용 가능한 너비의 약 60%를 차지합니다. 각 카드의 높이는 최소 420px입니다. 이는 상단에 촘촘하게 감싸인 제목과 하단 근처에 별도의 설명 문장을 배치할 공간을 만듭니다.
8자 제목 너비가 리듬을 바꾼다
소스는 프로젝트 제목을 8ch로 제한하고 줄 높이 0.92를 사용합니다. "더 나은 도시를 위한 현장 노트"는 한 줄이 아닌 높은 블록이 됩니다. 좁은 폭이 제목에 포스터 같은 리듬을 부여하며, 이는 작은 스크린샷으로 인한 우연한 줄 바꿈이 아닙니다.
설명이 구체적인 의미를 전달한다
첫 번째 카드는 참여형 지도를 명명하고 작은 관찰이 시민적 신호가 된다고 설명합니다. 이는 "혁신적인 매핑 경험"보다 실질적으로 더 많은 정보를 제공합니다. 설명은 하단 가장자리에서 24px 위에 위치하여 다양한 색상의 카드 전반에 걸쳐 독자에게 일관된 설명 위치를 제공합니다.
선정된 작업에서 반복 가능한 실천으로
실천 섹션은 프로젝트 그리드의 강조점을 역전시킵니다. 큰 인용문이 작은 열을 차지하고, 세 개의 번호가 매겨진 설명이 넓은 열을 차지합니다. 각 설명에는 자체 상단 규칙과 고정된 숫자 열이 있습니다. 효과는 개별 아이디어를 탐색하는 것에서 일련의 행동을 읽는 것으로의 전환입니다.
신호 찾기는 입력값을 명명한다
첫 번째 행은 사람, 제약, 언어, 행동을 명시적으로 나열합니다. 도시에 대한 관찰을 주제로 하는 현장 노트와 비교하면, 프로젝트 설명은 재료를 명명하는 반면 실천 행은 디자이너가 그 재료에서 무엇을 찾을지 설명합니다. 페이지는 이 관계를 암시하지만, 완성된 연구 결과를 문서화하지는 않습니다.
배우기 위해 만들기는 프로토타입의 이유를 명명한다
두 번째 행은 작동하는 프로토타입을 질문에 답하는 방법으로 위치시킵니다. 이는 완성된 최종 인터페이스를 만드는 것과는 다른 주장입니다. 행동을 탐색하는 것이 디자인 질문의 일부인 주변 AI, 편집 시스템, 그룹 의사결정 도구의 혼합에 잘 맞습니다.
시스템 남기기는 인계를 명명한다
마지막 행은 "출시"로 끝나는 대신 컴포넌트, 토큰, 가이던스를 명명합니다. 이는 제안된 결과물을 더 구체적으로 만듭니다. 다른 사람이 그 결정들로부터 계속할 수 있어야 합니다. 실제 사례 연구라면 이 지점에서 컴포넌트 예시나 짧은 사용 규칙이 이 진술을 뒷받침할 것입니다.
해커톤 프로젝트를 위한 포트폴리오 참고자료
OpenDesign은 이 가상 포트폴리오를 공식 해커톤 예시로 만들었습니다. 참가자 자신의 출품작에서 가장 재사용 가능한 아이디어는 프로젝트의 목적, 그 배경의 결정, 그리고 여전히 열린 것 사이의 분리입니다. 프로젝트 카드가 출품작을 소개하는 동안 연결된 계정이 실제 증거를 제공할 수 있습니다.
포트폴리오 개념이 끝나는 곳
소스는 760px 미만에서 프로젝트 그리드와 실천 섹션을 한 열로 전환하지만 내비게이션 링크도 숨깁니다. 이는 실제 포트폴리오에서 해결해야 할 특정 제한 사항입니다. 방문자가 연락처에 도달하기 위해 모든 프로젝트를 스크롤해야 하는 대신 간결한 섹션 메뉴를 유지하세요.
가상 프로젝트는 문서화된 클라이언트 참여가 아닙니다. 노트는 채워진 출판 시스템이 아닌 제목이며, 연락처는 [email protected]을 가리킵니다. 실제 포트폴리오를 공유하기 전에 해당 플레이스홀더를 교체하고 목적지를 확인하세요.
OpenDesign에서 크리에이티브 포트폴리오 웹사이트 디자인을 만드는 방법
색상을 선택하기 전에 프로젝트를 설명하라
각 프로젝트 이름마다 대상과 목적을 설명하는 한 문장을 준비하세요. 알고 있는 경우 자신의 역할을 추가하세요. 이는 OpenDesign이 외관뿐 아니라 내용에서도 다른 카드를 만들기에 충분한 재료를 제공합니다.
제안된 프롬프트소개, 다섯 개의 선정된 작업 카드, 3단계 실천 방식, 작업 노트, 연락처가 포함된 크리에이티브 포트폴리오 웹사이트 디자인을 만드세요. 큰 편집 타이포그래피, 따뜻한 중립 배경, 몇 가지 대비되는 카드 색상을 사용하세요. 각 프로젝트에는 이름, 목적, 제 역할이 필요합니다. 정보가 없는 곳에는 레이블이 붙은 플레이스홀더를 사용하세요. 클라이언트나 결과를 임의로 만들지 마세요. 작은 화면에서 작업, 실천, 노트, 연락처 내비게이션이 사용 가능하도록 유지하세요.
한 프로젝트를 실천 섹션에 연결하라
OpenDesign에게 실제 프로젝트 하나가 질문에서 프로토타입과 결과물로 어떻게 이동했는지 보여달라고 요청하세요. 광범위한 서비스 언어를 그 예시로 교체하세요. 나머지 실천 설명은 작업보다 압도하지 않고 뒷받침할 수 있을 만큼 짧게 유지하세요.
연락처와 읽기 경로를 테스트하라
색상을 보지 않고 카드를 읽으세요. 각각은 여전히 뚜렷한 아이디어를 설명해야 합니다. 그런 다음 섹션 내비게이션과 실제 연락처 링크를 테스트하세요. 모바일에서 과대한 제목이 설명을 숨기지 않고 줄 바꿈되는지 확인하세요.
내보내기 및 공유 링크 받기
완성된 디자인을 내보낸 다음, OpenDesign의 공유 기능을 사용하여 공유 링크를 받으세요. 별도의 브라우저 창에서 링크를 열고 의도한 버전과 해당 자산이 전송 전에 이용 가능한지 확인하세요.
채용 웹사이트 디자인
여덟 개의 달 장면으로 구성된 Kimi 채용 사례 연구로, 스크롤 연동 전환과 일러스트 지원 프로세스를 포함합니다.
웹사이트
이력서 웹사이트 디자인
가상 인물 Tom Goodman의 이력서는 경력 내용에 역량 차트와 선별된 결과물을 결합합니다. 2단 읽기 구조와 간결한 경력 카드를 살펴보고, 화면용 구성과 별도의 인쇄용 레이아웃을 비교해 보세요.
웹사이트
개인 대시보드 디자인
Life System은 주간 점수, 신체 지도 지표, 일일 리듬, 5개의 실험을 하나의 데스크톱 대시보드에 담았습니다. 레이아웃을 자세히 살펴보세요.
데스크톱 앱
제품 프레젠테이션 디자인
3슬라이드로 구성한 에이전트 네이티브 워크스페이스 피치.
슬라이드