Movie 프로젝트 디자인

디자인을 해보자!

디자인에 관심이 많다. 아름다운 디자인을 보면 '우와'하고 발걸음을 멈춘다.

https://cash.app/

Cash App - Do more with your money

 

디자인을 경험하면 디자이너와의 소통에도 도움이 된다 생각한다.

"조금 더 디자이너의 마음을 이해할 수 있지 않을까?"
"디자이너와 순조롭게 얘기를 나누면서 협업할 수 있지 않을까"

 

Figma를 배워보고, 다양한 앱을 설치하고 디자인을 살펴보면서 어느 정도 구상했다.

 

디자인 과정에서의 마음가짐은 다음과 같았다.

1. 같은 유형의 컴포넌트는 최소한으로

  - ex). 같은 버튼이라도 다양한 디자인을 넣지말자.

  - 혼란을 야기하며 보기에도 지저분하다.

2. 구현을 생각하고 디자인하지 말자.

 

 

 

확정된 디자인은 아니다

Brand Color

기존 색상

1158E2

 

변경 후 색상

E21111

 

기존 색상의 이유는

1. 영화라는 주제에 갈색, 핑크색 등보단
초록색, 빨간색, 파란색이 조금 더 활발하고 역동적인 느낌을 줄 수 있을 것 같았다.

2. 파란색이 조금 더 UI 를 디자인하기 쉽고 다른 색상과 잘 어울린다고 생각했다.

 

변경의 이유는 단순했다.
1. 기존 UI 가 조금 밋밋한 느낌이 존재해서, 다른 색상을 입혀보다.
2. E21111 색상을 Primary 로 가져갔을 때 가장 눈에 확 들어오고 집중이 되었다.

 

 

브랜드 컬러를 이렇게 바꾸면 안된다고 생각한다.

브랜드 컬러에 맞춰서 UI 를 변경해야지, UI에 브랜드 컬러를 맞추다니,,,,주객이 전도되었다...

 

Icon

위 6개가 후보였다.

 

차이점

1. Font

2. 외부와 내부 색상의 대조.

 

2번(TopCenter)을 택했다.

 

- Font 

1 번째는 단조롭고 3번째는 가벼운? 느낌이 강했다.

프로젝트의 주제가 Movie 이기에 고지식한 느낌은 피하고 싶었지만, 또한 너무 가벼운 느낌도 피하고 싶었다.

 

- 색상 대조

브랜드 컬러와 하얀색의 대비가 커서 무엇을 택해도 M 은 강조가 될 것 같았다. 

주변인들의 의견을 반영했다.

 

Screen

 

Home

Home

위 화면은 두 개의 주된 항목로 나뉜다.

1. Main Movie

2. Category Movies

 

Main Movie 는 상단에 표시되는 영화이다.

  - Popular 카테고리에서 가져오는 영화 20개 중에 랜덤으로 하나를 표현

  - 상단 Grident 를 부여함으로 StatusBar 정보들을 전달성을 증가.

 

Category Movies 는 다양한 카테고리의 영화들을 Column 방식으로 배치할 예정이다.

  - 현재는 Popular 밖에 없지만 카테고리의 수가 늘어날 수로 Column 방식으로 배치.

 

 

Popular

Popular 영화들을 Grid 형식으로 배치.

 

영화의 상세 정보대신 Poster 만 존재

  - Poster 만으로 영화 정보를 유추 가능(제목, 분위기).

 

 

Detail

0.1.0 버전

 

선택한 영화의 상세 정보

  - Poster, 제목, 출시일, 별점, 장르, overview 가 표현.

  - 고정 height 크기에 모든 정보가 안 담길 수 있어 BottomSheet 로 두어 확장 가능하게 구성

 

---

0.2.0 버전

변경 이유

  - 대부분의 영상들의 가로 세로 비율을 맞추기 위해 포스터 사진 크기가 아닌, 배경 사진 크기로 맞췄다.

  - 사용자들의 편의를 위해 뒤로가기 버튼은 존재하는 게 맞다고 판단했다.

  - 영화의 CAST 정보를 보여주면서 사용자들이 자연스럽게 분리해서 보도록 OVERVIEW 와  CAST 의 표시를 나타냈다.