Adobe XD에서 로우 피델리티 디자인을 만들어 앱 또는 웹 사이트의 전체 구조를 정의하는 방법을 살펴본 다음 디자인을 세밀하게 조정하여 하이 피델리티 프로토타입으로 변환합니다.

로우 피델리티 디자인 시작하기

디자인을 세부적으로 조정하기 전에 앱의 구조와 흐름에 집중할 수 있습니다. 아트보드, 자리 표시자 텍스트 및 기본 모양을 추가하여 디자인을 매핑합니다. 반복 그리드를 사용하여 텍스트 및 오브젝트 사본을 행과 열에 배치합니다. 심볼을 디자인 전체에서 반복될 항목에 대한 자리 표시자로 설정합니다. XD에서 제공되는 와이어프레임 키트의 템플릿과 디자인 요소를 활용하면 프로젝트를 빠르게 시작할 수 있습니다.

앱의 흐름 계획

아트보드를 업데이트하기 전에 캔버스를 사용하여 다양한 디자인 콘셉트를 실험해보는 방법을 살펴봅니다. 다양한 방식으로 반복 그리드를 사용하여 디자인 프로세스를 단축할 수 있습니다. 반복 그리드에서 디자인 요소를 수정하여 다른 셀에 있는 요소도 동시에 업데이트할 수 있고 UI 키트와 와이어프레임 키트를 열어 디자인 요소를 복사한 다음 문서에 붙여넣을 수 있습니다. 색상 및 문자 스타일을 비롯한 문서 에셋은 에셋 패널에서 간편하게 관리할 수 있습니다.

아이콘 그리기 및 그래픽 사용

사각형, 타원, 선 및 펜 툴을 사용하여 간단한 모양을 그릴 수 있습니다. 불린 연산자를 사용하여 모양을 추가하거나 빼고 교차하거나 오버랩을 제외시켜 앱의 그래픽을 세밀하게 조정할 수 있습니다. Adobe Photoshop CC 및 Illustrator CC에서 만든 아이콘과 일러스트레이션을 가져올 수 있습니다. 디자인을 발전시켜 나가는 과정에서 심볼과 반복 그리드를 다양하게 적용할 수 있습니다.

하이 피델리티 디자인 만들기

아트보드와 반복 그리드에 최종 이미지와 텍스트를 추가하여 앱 또는 웹 사이트의 디자인을 세부적으로 조정할 수 있습니다. 심볼을 추가하거나 덮어쓰고 Creative Cloud Libraries 및 에셋 패널에서 이미지, 색상 및 문자 스타일을 사용할 수 있습니다.

 

이전 튜토리얼: Adobe XD 살펴보기 | 다음 튜토리얼: 인터랙티브한 프로토타입 제작 및 미리 보기

 

09/10/2018
이 페이지가 도움이 되었습니까?