Adobe XD을 사용한 UI 계획

대부분의 경우, 새 웹 사이트를 계획하는 것은 모집단 및 정적 디자인부터 시작합니다. Adobe XD 는 사용자 경험을 구축하기 위한 최상의 디자인 도구입니다. Adobe은 Adobe XD 또는 기타 도구를 사용하여 UI 조회 사용을 통해 사이트 구현을 계획하는 것을 권장합니다.

전제 조건

이 작업은 여러 부분으로 구성된 자습서이며 이전 장에 설명된 단계가 완료되었다고 가정합니다. 이 장은 단순히 보기 및 학습 부분일 뿐이며, 이후 장을 진행할 수 있는 조치를 취할 필요가 없습니다.

비디오를 따라 진행하려면 다음과 같은 작업이 필요합니다 Adobe XD 설치, 무료 평가판 사용 가능.

목표

  1. 에서 제공하는 UI 키트 검토 표준 사이트 템플릿 그리고 WKND 디자인 팀에 의해
  2. AEM Sites 구현을 매핑하고 계획하는 데 UI 키트를 사용하는 방법을 이해합니다.
  3. 구현을 위해 Adobe XD에서 만든 UI 디자인을 프런트 엔드 개발자에게 제공하는 방법을 알아봅니다.

빌드할 내용

이 장에서는 두 개의 Adobe XD 파일을 검사하고, 하나는에서 검사할 것입니다 표준 사이트 템플릿 및 를 사용할 수 있습니다. The

표준 사이트 템플릿 UI 키트

높은 수준 단계:

  1. 다운로드 표준 사이트 템플릿 XD 파일.
  2. Adobe XD의 UI 키트 Inspect.
  3. 프런트 엔드 개발자에게 디자인 전달을 시뮬레이션합니다.

WKND UI 키트

높은 수준 단계:

  1. 다운로드 WKND 문서 XD 파일.
  2. Inspect은 WKND 문서 템플릿에 대한 디자인을 보여줍니다.

축하합니다!

축하합니다. Adobe XD UI 키트를 사용하여 AEM Sites 구현을 매핑하고 계획하는 방법을 알아보았습니다.

추가 UI 키트 을 사용할 수 있습니다 검사 및 다운로드.

다음 단계

다음 장에서는 WKND 문서 디자인을 기반으로 새 페이지 템플릿을 만듭니다.

만들기 및 수정 방법을 알아봅니다 페이지 템플릿. 페이지 템플릿과 페이지 간의 관계를 이해합니다. 컨텐츠에 대한 세부적인 거버넌스 및 브랜드 일관성을 제공하기 위해 페이지 템플릿의 정책을 구성하는 방법을 알아봅니다. 잘 구성된 잡지 기사 템플릿은 Adobe XD의 모집단 을 기반으로 만들어집니다.

이 페이지에서는