포트폴리오 웹사이트는 작업을 골라 보여주고 그 맥락을 설명하는 웹사이트다. 자기소개 웹사이트와 겹칠 수 있지만, 여기서는 작업을 읽는 경로에 초점을 둔다.
- 작가 약력은 작업한 사람의 활동을, 작가의 말은 작업의 관심사와 방식을 소개한다. 개별 작업에는 제목, 시기, 맡은 역할, 이미지나 실행 링크, 짧은 설명을 둔다. 공동 작업에서는 ‘팀 프로젝트’만 적기보다 조사, 글쓰기, 디자인, 개발 가운데 자신이 맡은 부분과 함께한 사람을 밝힌다.
- 작업 선택의 기준은 보여주려는 일에 따라 달라진다. 예컨대 편집 디자인을 소개할 때는 표지뿐 아니라 펼친 면, 글과 이미지가 만나는 부분, 실제 제본을 보여줄 수 있다. 편집 디자인의 결과를 표지 한 장이 모두 대신하지는 않는다.
- 첫 작업은 가장 최근의 작업일 수도, 지금 하는 일을 잘 드러내는 작업일 수도 있다. 목록의 제목과 짧은 설명만 읽어도 무엇을 볼 수 있는지 알게 한다. 만든 순서와 읽히는 순서를 같게 둘 필요는 없다.
- 방문자가 목록에서 한 작업으로 들어갔다가 다른 작업으로 이동할 수 있게 한다. 보기 좋은 표지 뒤에 설명이 없으면 무엇을 했는지 추측하는 일이 방문자의 과제가 된다.
- 각 작업의 웹 페이지에는 완성 화면과 선택의 이유를 놓고, 자세한 과정은 작업 일지 웹사이트로 연결할 수 있다. 디자인 사례 연구처럼 조건과 바뀐 결정을 보여주되, 결과를 보기 전에 모든 과정을 읽어야 하게 만들지는 않는다.
- 전체 모습과 세부 이미지를 구분하고 표시 크기에 맞는 파일을 준비한다. 작은 썸네일마다 인쇄용 원본을 내려받게 할 필요는 없다. 해상도와 파일 용량은 다른 값이며, 이미지의 내용을 알 수 있는 대체 텍스트도 함께 마련한다.
- 패비콘은 여러 탭 사이에서 웹사이트를 찾는 표지가 되고, 오픈 그래프는 공유된 주소의 제목과 대표 이미지를 전달한다. 작업별 주소를 보냈을 때도 홈페이지의 로고만 보인다면 각 작업의 메타데이터를 따로 지정할 수 있다. 검색 엔진 최적화에서는 이 공유 카드와 별개로 작업 페이지에 도달할 수 있는 하이퍼링크, 내용을 설명하는 제목과 본문을 살핀다. (MDN: 웹 페이지 메타데이터)
- 외부 영상이나 프로젝트 주소가 작동하는지 살핀다. 공개해도 되는 자료를 고르고, 끝난 작업의 상태 표시로 현재 작동하는 것과 기록으로 남긴 것을 구분한다.
- 로럴 슐스트의 웹사이트는 글, 웹사이트, 교육, 강연 등의 갈래로 활동을 보여준다.
- 브렛 빅터의 웹사이트는 프로젝트와 강연, 글을 주제와 연도에 따라 연결한다. 결과물 하나와 그 주변의 설명을 함께 찾아가는 사례다.