PoMoToDo(2) - 포모도로 타이머 + 투 두 리스트

 PoMoToDo 기획서 

---

디자인이 중요한 프로젝트라서 기획서를 만드는데 많은 시간을 투자했다

1. 최대한 깔끔하고 직관적인 디자인 (뉴모피즘, 글래스모피즘, 머티리얼디자인 사용)

2. 눈이 편안한 '컬러톤' 설정 및 '레이아웃배치'

3. 다른페이지와 통일감있는 '컬러톤', '레이아웃배치'

 

1. 그리드시스템을 이용한 배치

2. 뉴모피즘디자인을 이용한 레이아웃    

    뉴모피즘 디자인의 장점인 깔끔한 디자인을 이용해서 레이아웃을 만들었고 요소간 계층적인 부분을 표현했다 

    상호작용을 하는 버튼을 표현하거나, 많은 요소를 표현하기에 부적합한 단점을 없애기 위해

    상호작용을 하는 버튼은 최대한 줄이는식으로 디자인을 수정할 예정

3. 상호작용으로 인해 생성되는 TodoList나 Not TodoList는 머티리얼디자인으로 만들었고

4 레이아웃 외의 장소에 요소를 배치하기 싫어서 요소들의 위치를 수정했고 간격을 잘 유지한채 배치했다

5. 전체적인 컬러톤은 너무 쨍하거나 톤다운된 컬러는 피했고 파스텔톤을 이용해서 오른쪽으로 시선이 집중되지않도록했다

1. 전체적인 안정감을 위해서 왼쪽레이아웃과 오른쪽 레이아웃의 크기를 맞췄고 간격을 정중앙을 기준으로 조정했다

2. 시계의 설정을 바꿀 수 있는 버튼을 좀 더 직관적이고 컬러풀한 버튼들을 배치했다

3. 입체감을 주는  버튼과 레이아웃의 차별점을 두기 위해 버튼을 수정했다 그림자를 없애고 오직 레이아웃으로만 표시)

4.  아이콘은 구글에서 제공하는 아이콘만 사용해서 통일감을 줬다

 

1. 버튼을 누르면 그라데이션으로 그림자를 표현해 입체감을 줬다

2. 새 창이 필요한 경우 글래스모피즘 디자인을 이용해서 깔끔하고 어울리는 디자인을 만들었다

 

1. 상세기록 페이지는 가로로 통일된 레이아웃을 사용하도록했다

2. 아래에 있는 단순 기록만 보여주는 요소는 얇은 선을 테두리로 추가해서 시각적으로 식별가능하도록 했다

3. 우측상단의 아이콘 변화

 

앞으로 구현할 것 :
사이드페이지 디자인하기,
깊이감 통일하기,
폰트 교체하기,
레이아웃 간격 맞추기,
디자인 퀄리티 올리기,
X버튼 배치,
상세기록페이지 일자 위치? 고민해보기 / 폰트색깔고민해보기