Daily UI :: 002 "Credit Card Checkout" UI 디자인하기

두 번째 Design 주제
Credit Card Checkout

Design 힌트
Design a credit card checkout form or page. Don't forget the important elements such as the numbers, dates, security numbers, etc.

 

---

002 신용카드결제

002 스타일가이드

 

디자인은 Adobe XD로 750 X 1624 사이즈로 디자인했습니다.

요즘 카드를 등록해놓고 결제를 많이 하기에 이런 디자인을 한 번쯤은 해보고 싶었다.

상품을 선택하고 결제하기를 누르면 나오는 화면을 디자인을 했습니다.

맨 위에는 상품은 구매하고자 하는 상품의 사진을 배치

등록된 카드가 나오고, 카드 정보가 나오고 맨 아래에는 결제내역이 나온다

카드 정보는 접고 피고 가능하도록 디자인을 했습니다.

 

카드 같은 경우는 일러스트로 직접 디자인을 한 카드입니다.

그라데이션을 이용하여 제작한 신용카드

 

아이폰에 목업을 하여서 좀 더 실감 나게 해 보았습니다.

해당 목업은 아래의 URL에서 다운로드하였습니다. 

https://www.mockupworld.co/

Mockup World | The best free Mockups from the Web

---

두 번째 과제를 마무리하며..

아직까지는 디테일하게 디자인을 하지 않아서 어제보다는 빠른 시간 안에 디자인이 되었다.

아직 이틀밖에 안됐지만 진짜 꾸준히 도전하고 싶은 과제입니다.

이렇게라도 조금씩 디자인을 직접 해보고 피드백도 받고 많은 디자인도 찾아보다 보면

저도 많이 발전하고 성장하지 않을까요?

화이팅!!

 

 

https://dribbble.com/shots/15848672-Second-Daily-UI-Design-002

Second Daily UI Design #002