[기초 탄탄 UX/UI 디자인을 위한 Adobe XD] CHAPTER 3-2

💡 맥 이용자는 Alt > Option , Ctrl > Command 로 바꿔서 생각하기

Chapter3 실무 웹/앱 UI 디자인 분석과 실습

쇼핑 커머스 앱 UI 디자인

쇼핑에서 검색은 매우 중요하며 원하는 상품을 그대로 찾아주는 것과 실제 사용자가 만족할 수 있는 상품 결과는 구매애 80% 이상의 영향을 미침

1. 상단 메뉴에 깊이감을 주고 배경과 구분하기 위해 하단에 배경 깔기
2. 메인 메뉴에 나타나는 슬라이드 이미지인 카드 섹션 UI 그리기
3. 카드 섹션안에 쇼핑 정보 값과 이미지를 배치
4. 화면 하단에는 추가로 다른 상품을 탐색하는 칸을 배치

 

1. 화면 상단에 메인 컬러로 둥근 사각형을 배치
2. 상품 이미지를 화면에 배치
3. 하단에 리스트 콘텐츠를 그려주기 (가격 정보와 구매 버튼)
4. [반복 그리드] 버튼을 이용하여 여러 콘텐츠 구성
5. 하단 메뉴 아이콘 배치 (모든 페이지에 사용하므로 편리하게 구성 요소로 만들어주기)

 

영화 감상 앱 UI 디자인

영화 엔터테이먼트 콘텐츠 UI는 보통 어두운 톤이며 이미지가 전체를 차지하는 인터페이스를 갖고 있음

확대된 이미지나 템플릿 요소가 나열된 형태를 지님

 

*나의 최애 영화 : 위대한 쇼맨*

1. 배경 전체에 사각형과 그 위에 흰 사각형 그리기
2. 메인/서브 카피를 작성
3. 영화 속 주인공 이미지를 PNG 파일로 적절하게 배치
4. 흰 상자 안에 영화 정보 만들어 주기 (화면 이미지와 텍스트 버튼, 아이콘 블릿 조합)
5. 카테고리 메뉴 버튼은 동일한 패턴으로 이루어지므로 반복 그리드 이용
6. 화면 하단에 시놉시스 색션을 만들어서 글을 넣어주기
7. 하단 전체 메뉴 바를 넣고 아이콘을 같은 크기로 정렬

 

1. 배경 이미지를 업로드하거나 드래그하여 배경화면에 적절하게 레이아웃에 맞게 배치
2. 서브 텍스트를 작성
3. 아래 링크 버튼 생성

 

식품 정보 앱 UI 디자인

1(메인) 페이지 : 식품 카테고리를 나타내는 버튼과 이미지, 세부 정보로 이어지는 해시태그와 버튼

2 페이지 : 서브 콘텐츠를 나열

3 페이지 : 커뮤니티 사용자의 메시지를 나열

4 페이지 : 식품의 상세 정보 텍스트와 가로로 나열되는 이미지를 표현

 

인테리어 가구 앱 UI 디자인

제품 이미지 위주로 구성, 배경 흐림 효과를 이용해 이미지와 도형 요소가 조화를 이루고 녹색 위주의 톤 앤 매너를강조하면서도 텍스트를 역시 도드라지게 나타낼 수 있음

<메인 페이지>

1. 배경 전체에 사각형 삽입
2. 조명 이미지를 무료 사진 사이트에서 검색하여 삽입
3. 사각형을 그리고 [배경 흐림 효과]를 적용해 공간감을 더함
4. 서브 텍스트와 아이콘을 넣어 타이틀을 완성
5. 정보 콘텐츠를 입력하고 세부 정보로 이동할 수 있는 하이퍼링크 버튼 또한 삽입
6. 상단에 구매 및 전화 아이콘을 배치

 

<서브 페이지>

1. 타이틀 텍스트를 넣고 하단 탭 UI를 그리기
2. 왼쪽 정렬로 오른쪽 메뉴가 나타나도록 열거
3. 하단 부분에 콘텐츠 삽입 (상품 이미지와 상세 정보)