12. 종합 실전 예제 3. 이커머스 앱 UI 디자인

오픈소스 템플릿을 활용한 UI디자인 기초작업

 

-> IOS 고유의 요소들은 무료 템플릿 소스에서 가져온다.

=> 키워드는 주로 [IOS UI KIT] 또는 [WEBDISIGN UI KIT]

 

-> 인디케이터는 IOS 특유의 요소

=> 변경할 수 없는 요소이므로 템플릿에서 가져다쓰는 것이 훨씬 편하다. 

 

-> 하단 탭바도 가져와서 살짝만 변경을 해보자!

 

기본 디자인을 템플릿을 통해 가져올 때 장점

1. OS에서 기본적으로 제공하는 앱들에서 사용하는 패턴들을 사용한다. => 사용자 입장에서 익숙한 디자인 패턴이다.
2. 처음부터 제작할 필요가 없는 요소들은 굳이 직접 만들 필요가 없다. => 디자인의 효율성이 좋아진다.

-> 템플릿에서 가져온 요소는 컴포넌트이다.

=> 인스턴스로 만든 뒤 Detach Instance 기능을 활용하여 독립된 레이어로 변경해준다.

 

아이콘은 Feather Icons 라는 플러그인을 사용해서 가져와준다.

-> 직접 제작하는 방식을 채용해도 괜찮다.

 

=> 프로토타입에서 잘 적용이 됐는지 확인한다.

 

---

 

홈 화면으로 시안 작업하기

 

-> 전에 배운 기능들로 홈 화면을 만들어본다.

-> 여러 색상도 적용해본다.

 

---

 

디자인 시스템 만들기

 

-> 주로 사용되는 색상을 저장한다.

-> 투명도가 적용된 색상은 따로 저장하지 않는다. (해당 색상의 원래 색상만 적용한다.) 

 

-> 주로 사용되는 텍스트 스타일을 저장한다.

 

-> 자주 사용되는 요소들은 각각 그룹으로 묶는다.

-> 그룹을 컴포넌트화 시켜준다.

 

---

 

제품 상세 페이지 디자인

 

  

---

 

구매 확정 페이지 디자인

 

  

---

 

카테고리, 즐겨찾기 페이지 디자인