면접관이 '민동규'님에 대해 궁금해할 만한 것들을 생각하여 브레인스토밍을 진행하였습니다.
.png)
브레인스토밍을 통해 대표적인 3가지 키워드를 도출하여
기본 정보, 스킬/능력, 성격을 카테고리화하여 정리하였습니다.
해외 웹사이트 2곳을 참고하여 포트폴리오의 전반적인 프로세스를
레퍼런스를 활용하여 아이디어 스케치와 함께 구성하였습니다.
메인페이지는 제목(슬로건)을 중앙에 배치하여 제목 주변에 마우스 호버 효과를
적용해 사용자의 흥미와 호기심을 유발하였습니다. 마우스를 제목 위에 올리면
제목 주변에 부드럽게 사진이 나타나도록 설계하여 메인페이지가 단순히 정적인
것이 아니라 동적이고 생동감 있는 느낌을 주도록 하였습니다.
이전에 브레인스토밍에서 도출한 대표적인 성격 키워드를 5가지 골라
사용자의 스크롤 액션에 따라 화면에 성격 키워드가 순차적으로 나타나도록
하였습니다. 이를 통해 웹페이지에 생동감과 역동성을 더할 수 있습니다.
About 페이지는 중앙에 성격 슬로건을 중심으로 저와 관련된 여러장의 사진들이
중앙에서 양쪽으로 퍼지도록 하였습니다. 사진들의 크기와 위치를 점진적으로 변회시켜
시각적 흥미를 유발할 수 있습니다. 이를 통해 사용자의 관심을 끌고 궁금증을 유발하여 하단에
있는 상세페이지 버튼을 통하여 보다 깊이 있는 정보 탐색으로 이어질 수 있도록 하였습니다.
Process 페이지에 가로 스크롤을 적용하여 사용자 경험을 강화했습니다.
스크롤 방향에 맞춰 사진이 자연스럽게 이동하도록 설계해 시각적 흥미를
유발하도록 하였습니다. 이러한 점진적인 사진 이동은 사용자에게 직관적이고
몰입감 있는 경험을 제공하여 웹페이지 탐색을 더욱 원활하게 만듭니다.
‘Design is everthing’ 이라는 문구와 함께 제 일상 속 디자인 여정을 동영상으로
담아냈습니다. 일상적인 풍경부터 영감을 얻는 순간, 스케치와 아이디어 구체화 과정까지
디자인이 제 삶에 깊이 스며들어 있음을 보여드리고자 했습니다. 이를 통해 디자인이
단순한 취미가 아닌 제 삶의 일부라는 점을 전달하고자 합니다.
메인페이지 하단과 마지막 부분에 브레인스토밍에서 도출한
핵심 키워드가 지나가도록 하였습니다.
마지막 문구(슬로건) 메인페이지와 동일한 슬로건
포트폴리오의 전반적인 틀을 구상하기 위해 정보구조도를 작성하였습니다.
home,about,works,portfolio,contact 5개의 큰 인덱스로 구성했습니다.
index페이지 하단에 about 상세페이지 버튼을 누르면 프로필이 나옵니다. 사진을 중심으로
‘민동규’님에 대한 정보를 상세하게 넣어 포트폴리오를 보는 것만으로도 자신에 대한 정보를 알 수
있도록 하였으며, 하단에는 skill bar를 배치해 직무에 필요한 능력을 보여주고자 하였습니다.
‘민동규’님의 모습을 형상화한 캐릭터를 활용하여 로고를 디자인하였습니다.
캐릭터는 자신이 좋아하는 컬러인 초록색으로 디자인 해보았고, 로고는 포트폴리오와 어울리는
컬러로 디자인하여 키워드바와 동영상 제목상단 등 다양한 곳에 배치하였습니다.
깔끔한 인터페이스 구현을 위해 화이트 배경을 활용하였으며,
블루 컬러를 포인트 컬러로 적용하여 프레쉬한 분위기를 연출하였습니다.
깔끔함 인터페이스 구현을 위해 프리텐다드 폰트를 사용하였습니다.
아이디어 스케치에 이어, 다음 단계로 포트폴리오 스토리보드를 구성하였습니다.
스토리보드 작성을 통해 사용자 관점에서 디자인 솔루션을 바라볼 수 있었고,
각 기능들의 흐름과 상호 관계를 파악할 수 있도록 하였습니다.
