Minari_story

​

UI Design

SSG pay review

160420

Intro

#Color : white / red /  Dark Blue

*자칫 무거워 보일 수 있는 색상이였는데, 

white 와  dark blue red point color 색상이 균형있어 보인다.

​_

USAGE GUIDE

#BG

*처음디자인에서는 bg 대신 img blur로 작업되어 있었는데, 

이렇게 solid 된  BG 가 더 사용성을 돕는다고 생각. 

https://mir-s3-cdn-cf.behance.net/project_modules/1400/30bd4735508707.57036f694b20f.png

page indicaor

page indicator의 line처리 방식이 재미있었다.

_

HOME

#Marketing area #List #Expand btn #indicator

* 상단배너를 전부 white 처리하고 상품이미지만 간결하게 보여주어 시원해보인다. 

key color 를 리스트로 표현하다니. 귀엽다.

​#menu icon #notification icon

우측 상단 icon select시 알림패널이 뜨는데, 

자주쓰는 메타포가 아니라서 낯설게 느껴졌던 부분.

알고 보니 notification pannel 로 진입하기 위한..

​

 #Expand btn  #no item

normal 상태일때는 out line type

open 시 Filled type 이다.

​

​

​

_

# Roding img

roding 화면에 icon이 계속 바뀌는 모습인데, 앱이 작동 하고 있음을 보여주기에는 좋다. 

그러나, 로딩이 길면 앱이 문제인 것 같다고 사용자들은 판단하니,

5초이상 의 로딩이 예상된다면 조심 해야 할 것 같다는 생각.

_

​충전하기

#Text Input Filed

​네이버의 검색창이 연상되는 Bold 한 Box 타입인거다. 

_

본인인증 화면

#indicator

3가지 단계중 현상태를 확인할 수 있는 상단 인디케이터

#textinput #key pad #BTN

​

#​popup

​

_

카드 인증 전, 인증후

#menu pannel

SSG PAY의 타입과, 

icon line의 볼륨감을 보라. 

자세히 보면, icon 사이 언더라인이 약하게, 정렬을 돕는다. 

​

​

​

_

# keypad

보안 키패드는 Dark BG로 처리했는데, 

어떤 의도였는지 궁금. 

서브문구의 아래의 텍스트 컬러가 다른 것이 거슬린다.

​

#barcod #input field

여기서도 detail 문구 표현컬러의 통일성은 아쉬운 부분.

BTN 텍스트 크기도 .. 

#list #subtitle bar #tab

정말 light 한  tab스타일. 

​

​

​_

#list  #master on/off switch  #Radio button

​

​

​

​#Terms and condition

_


전체적으로, 

소비를 하는데 뭔가 세련되게 하고 있다는 느낌이 들게 하는 디자인 인거다. 

실제 디자인한것과 개발상 구현되는것이 일치하기도

많이 힘들 텐데, behance 에서 본 디자인이 거의 반영되어 보인다. 

https://www.behance.net/gallery/35508707/SSG-PAY-Easy-Payment-Mobile-App

직접 behance 에 가서 보면 더 도움이 될듯하다.

GOOD

GOOD

그럼 이만, 총총