To Do!

모바일UI / UX디자인 실무

2018.09.18 ~ 2019.02.13

이다솜

목차

01 기획의도

02 페르소나

기획의도01

할 일은 많은데뭘 해야할 지 정리가 안될때

요즘 도대체내가 뭘 하면서살고 있나싶을 때

한 눈에 쏙 들어오는 편리한달력화면과

누구나할 수 있는 쉬운 일정관리로

나만의다이어리를작성해보세요!

기획의도01

기획의도01

귀여운스티커로 다이어리쓰는

재미는덤!!!

김취준나이 : 24세

성별 : 여자

직업 : 취업준비생

수입 : 용돈한달 50만원

태도:

어려서부터 일기나 일정을 관리하는

다이어리 쓰는 습관이 몸에 베여있다.

다이어리 꾸미기를 매우 좋아한다.

동기 시나리오 기능/콘텐츠 이용행태

항상 시간에쫒기기 때문에 간

단하게 일정을메모하고 싶고

한 눈에보기 쉽게 관리하고싶

다.

로그인 없이도간단하게 들어가서 바로

일정을 메모하고저장하여 리스트 형식

으로 보여진다.

별도의 다른메뉴없이 바로

+ 버튼을누르면 할 일작성 가능

하지만 리스트형식의 일정관리는 한

눈에 들어오지않기 때문에 달력형식으

로 화면구성을 한다면 사용자가한 눈

에 보기 쉽게 관리가가능할 것 같다.

또한, 여러일정을 항목별로 분류해주면

더 편하게일정을 관리할 수있을 것 같

다.

사용자 니즈

수첩으로 메모하는 습관은 너무 번거로워서어플로 바꾸는거니까 작

성하기 쉽고 간단했으면 좋겠어요. 그리고 여러가지 일정이 한 눈에

확 들어 올 수 있는 편리한 화면이면 좋겠네요! 그리고 다이어리만

큼은 아니어도아기자기한 어플을 사용하고싶어요!

Business Goal

요즘 처럼바쁜시대에는 빠르고 간편한이대세이듯 일정관리도

복잡하지 않고간단하게 메뉴를 구성해서사용자가 필요한 부분만

빠르게 사용할수 있도록 구성한다.또한, 여성을타겟으로 귀엽고

예쁜 다이어리꾸미기를 할 수있도록 스티커 등을마련한다.김취준씨는 대학교는

졸업했지만 취업을 위

해 어학공부며 자격증

이며 학원까지 다니고

있는 회사원보다 바쁜

취업준비생이다.

할 일은 너무 많기 때

문에 항상 메모하는 습

관을 가지고 있다.

하지만 다이어리는 번

거로워서 요즘은 어플

로 일정을 관리중이다.

페르소나02

목차

01 시각적콘셉트도출

02 마인드맵

03 키워드

04 키워드컨셉설명

05 무드보드

06 색상설정

07 폰트설정

08 동작버튼

09 플로우차트

인지적 콘셉트 도출

기존의 ‘To do’ 를 사용할 때, 바로 할일을 적을 수 있어서 간단해서 편리했지만 리스트

형식으로 되어 있다보니 내가 내일 뭘해야하는지 한 눈에 확 들어오지 않아서 불편했다.

그래서 보기 쉽게 만들어진 앱이 필요하다고 느꼈다.

감성적 콘셉트 도출

캘린더 형식의 메인화면은 오늘 해야할 일, 일주일 뒤에 해야할 일, 어제 했었던 일 등이

한 눈에 보기 쉽게 되어 있어서 무척 편했다. 일정들을 카테고리에 맞게

분류해서 관리하는 것도 너무 마음에 들었다.

신체적 콘셉트 도출

달력에 글씨만 있으면 단조로울 수 있는데 일기를 작성할 때 귀여운 스티커를

끌어다가 붙일 수 있어서 귀여운 나만의 다이어리가 되는 기분이어서

재밌고 꾸미는 맛이 있었다.

시각적 콘셉트 도출01

마인드 맵02

간단한아기자기한

보기 편한

키워드03

한 눈에 보기편하고 간단하면서도

아기자기한느낌을주기 위해

핑크색계열과 귀여운아이콘을사용하였다.

키워드 컨셉설명04

무드보드05

색상설정06

R 245G 173B 176

R 252G 121B 132

R 217G 217B 217

R 238G 0B 0

R 148G 202B 96

메인 컬러

보조 컬러

폰트설정07

Noto Sans KR Bold

Noto Sans KR Medium

Noto Sans KR Regular

타이틀 / 제목

부제목

본문

동작버튼: hover08

To Do!

입력

글쓰기(일기/일정)

일기

일기리스트

연/월별 모아보기

특별한 추억저장

그룹(카테고리)

일상

가족

여행

다이어트 등

* 로그인 회원가입

플로우차트09

* 메인화면에 있는 달력 셀을 눌러서 바로 일정 입력가능

목차

01 앱 런처아이콘스케치

02 스플래시/메인스케치

03 메인 와이어프레임

04 메인 와이어프레임+클릭시

05 와이어프레임세부사항

06 런처아이콘시안

07 스플래시시안

08 메인 디자인시안

09 메뉴 클릭시디자인

앱 런처 아이콘 스케치01

스플래시 스크린/ 메인 스케치02

스플래시 메인

메인 와이어프레임03

메인 와이어프레임 + 클릭시04

와이어프레임 세부사항05

Main Menu:hover

런처아이콘 시안06

심플하고 아기자기한 느낌을 주기 위해간단명료한 디자인과 핑크계열의 아이콘으로 디자인하였다.

런처아이콘 시안 결과물06

스플래시 시안07

메인 디자인 시안08

버튼 클릭시 디자인 시안09

목차

01 서브 스케치

02 서브 와이어프레임

03 서브 와이어프레임+클릭시

04 서브 와이어프레임세부사항

05 서브 디자인시안

06 버튼 클릭시디자인

07 코치마크

08 워크스루

서브 스케치01

서브 와이어프레임02

서브 와이어프레임 + 클릭시03

서브 와이어프레임 세부사항04

sub1 sub2

서브 디자인 시안05

버튼 클릭시 디자인 시안06

코치마크07

워크스루08