[토이프로젝트] XD디자인 와이어프레임부터 출시까지 -1
본문 바로가기

React & React Native

[토이프로젝트] XD디자인 와이어프레임부터 출시까지 -1

728x90
반응형

🌷 개요

강남아이티아카데미학원에서 6월 19일부터 어도비 XD과정을 시작하면서 (매주 토요일, 총 5일)

개인 포트폴리오 작업으로 평소에 개발해보고 싶었던 self 보석 감정앱을 만들어보기로 했다.


어도비 XD 디자인 가이드 

웹 1920

  • 상단바에 유의하여 세로 975사이즈로 작업한다.

카카오페이지 : 모바일 사이즈 애플페이지 : 적응형 대부분 모바일 first 로 작업을 한다.

태블릿 1024

  • 1024 x 768 사이즈

🦄  UX 과정 

① 로그인 페이지는 원활한 메인 페이지 진입을 위해 없애기로 한다. 

 

② 재미를 느낄 수 있을만한 요소 (interactive 디자인 || 심리테스트)등 을 추가한다.

 

③ 아이콘은 직접 제작 (일러스트레이터가 이상적이지만 XD에서 기본 제공하는 선이 마음에 들어 그대로 진행한다.)

 

(2021-07-14 수정 ※ XD에서 펜툴 또는 선으로 작업할 때,

기본선의 미세한 색차이와 함께 그룹핑이나 merge시 원하는 결과가 나오지 않는 경우가 발생하여

일러스트레이터로 다시 작업하기로 했다.)

 


 

※ 사업목적이 아닌 정보 전달을 위한 앱임으로 귀여운 아이콘과 톡톡 튀는 애니메이션으로 개발을 진행할 예정

 

아래는 스플래시 화면 이후 앱의 얼굴이 될 메인화면인데, 디자인적으로는 아주 예쁘지만 실제 구현시 동작하게 하기 위해서 많은 디테일 작업들에 신경을 써야할 것 같다.

 

Press Me를 누르면 감정이 시작된다.

 

반응형