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

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

아이폰 11 기준 프레임 설정

community에 ios ui kit 또는 android ui kit 또는 web design ui kit으로 검색

 

필요한 컴포넌트를 복사 붙여넣기로 가져온다.

 

기본 아이콘은 Father Icons 라는 플러그인 사용

Alt 키를 눌러 가운데 정렬을 편하게 한다.

 

 

위와 같은 방식으로 중간 점검 가능

 

 

홈화면으로 시안 작업하기

기본적으로 대표 프레임을 하나 선택한 후 완성하고 다른 프레임 화면들을 구성

백그라운드 컬러를 약간 아주 약간 회색으로 두고 탭bar를 완전 흰색 으로 입력폼에 그림자를 입히면 가시성이 좋다.

 

텍스트와 도형을 그룹화 하려면 cmd+ g

 

 

디자인 시스템 만들기

제품 상세 페이지 디자인

상단 인디케이터 위치 고정

 

 

구매 확정 페이지 디자인

 

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