[Cinema Library] 2. Figma 제작

디자인 과정

papaer prototype 완성한 것을 바탕으로 figma 를 이용하여 디자인을 하였다.

사진에 나와있는 desktop-6 은 페이지를 열었을 때 제일 먼저 나오는 페이지 이다. 홈페이지 이름과 검색창을 넣어 깔끔하게 디자인 하였다.

배우 '공유'를 검색 하는 것을 가정하고 홈페이지를 제작하였다.

위 페이지는 배우 이름을 검색했을 때 나오는 페이지 이다.
먼저 페이지 상단에는 페이지 이름과 검색칸을 만들어 언제든 초기 페이지로 이동하고 검색할 수 있도록 했다.
그 밑에는 배우의 사진과 이름이 나오고 배우가 출연한 작품들의 포스터들을 보이게해 이용자들이 찾고자 하는 작품을 쉽게 찾을 수 있게 했다.

또한 영화, 드라마 분류를 하여 작품을 검색하는데 편리하게 디자인 하였다.

여러 작품 중 영화 '김종욱 찾기'를 예로 들어 디자인을 하였다.

위의 사진은 영화 '김종욱 찾기'의 상세 페이지 이다.
페이지의 왼쪽에는 영화의 타이틀이 나오고 가운데 부분에는 영화의 간략한 줄거리를 보이게 하였다. 그리고 페이지의 오른쪽 부분은 영화의 스틸컷을 나오게 하였다.

타이틀의 밑 부분에는 작품이 있는 OTT 사이트를 나타내는 부분이다.
왓챠에서 작품을 볼 수 있어 왓챠의 로고를 넣었다.
줄거이 밑 부분에는 영화의 상세정보를 볼 수 있는 상세정보 버튼과 영화 예고편 사이트로 이동할 수 있는 예고편 버튼을 배치하였다.

페이지의 하단 부분은 작품과 비슷한 작품들을 추천하여 보여주게 디자인 하였다. 해당 영화의 스틸컷, 제목 그리고 간략한 줄거리를 보이게 디자인 하였다.
사진 부분에 커서를 올리면 줄거리가 나오게 prototype을 설정하였다.

prototype

위의 사진은 porototype을 설정한 모습이다.
아래의 영상은 설정한 prototype들을 실행한 모습이다.