Adobe XD CC에서 랜딩 페이지를 디자인하고 Adobe Photoshop CC에서 만든 에셋을 활용하는 방법을 살펴봅니다. 먼저 XD에서 와이어프레임을 신속하게 만들고 Photoshop에서 만든 콘텐츠를 XD로 가져와 편집하는 방법을 살펴봅니다. 그런 다음 검토를 위한 준비가 되면 디자인을 간편하게 공유하여 피드백을 신속하게 받을 수 있습니다.

랜딩 페이지의 와이어프레임 만들기

학습한 내용:

  • XD는 와이어프레임 제작, 로우 피델리티 디자인, 하이 피델리티 디자인 등 UX 디자인 프로세스를 위해 특별히 고안되었습니다. XD의 빠르고 유연한 기능을 이용하여 와이어프레임을 만들 수 있습니다. 또한 무료 XD UI 키트를 사용하여 프로젝트를 시작할 수 있습니다.

목업을 와이어프레임에서 하이 피델리티 디자인으로 변환

학습한 내용:

  • Photoshop 디자인을 XD로 가져와 디자인을 빠르게 편집합니다.
  • CC Libraries를 사용하여 Photoshop 에셋을 XD에 결합합니다. Photoshop에서 변경한 내용은 XD 디자인에 적용됩니다.
  • 에셋 패널을 사용하여 문서 전체에서 색상과 심볼을 업데이트합니다.
  • 반복 그리드를 사용하여 원하는 만큼 사진과 같은 디자인 요소를 복제합니다.
  • 디자인을 스크롤해도 내비게이션 막대와 같은 요소가 제자리에 있도록 고정시켜 디자인 피델리티를 높입니다. XD에서 디자인을 미리 보면서 페이지 경험을 확인합니다.

프로토타입을 공유하여 빠르게 피드백 받기

학습한 내용:

  • XD에서 "반응형 크기 조정" 기능을 사용하여 다양한 크기에 맞게 디자인을 조정하는 방법을 살펴봅니다.
  • 프로토타입을 게시하고 이해 관계자와 공유하여 피드백을 신속하게 받을 수 있습니다. 한 곳에서 피드백을 수집하여 피드백을 해결하고 동일한 링크를 업데이트할 수 있습니다.
11/06/2018

발표자: Howard Pinsky

이 페이지가 도움이 되었습니까?