Adobe XD을 통한 UI 계획 ui-planning-adobe-xd

대부분의 경우 새 웹 사이트에 대한 계획은 모형과 정적 디자인에서 시작됩니다. Adobe XD은(는) 사용자 경험을 빌드하기 위한 동급 최고의 디자인 도구입니다. Adobe은 Adobe XD 또는 기타 도구를 사용하여 UI mockup을 사용하여 사이트 구현을 계획하는 것을 권장합니다.

사전 요구 사항 prerequisites

이 자습서는 여러 부분으로 구성되어 있으며 이전 장에 설명된 단계가 완료된 것으로 간주됩니다. 이 챕터는 단순히 관찰 및 학습 부분이므로, 후속 챕터를 계속 진행하려면 별도의 작업이 필요하지 않습니다.

Adobe XD을(를) 설치해야 하는 비디오와 함께 팔로우하려면 무료 평가판을 사용할 수 있습니다.

목표

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

빌드할 내용 what-you-will-build

이 장에서는 두 개의 Adobe XD 파일을 검사합니다. 하나는 표준 사이트 템플릿에 대한 것이고 다른 하나는 제안된 WKND 사이트에 대한 것입니다. 다음

표준 사이트 템플릿 UI 키트 standard-site-template-uikit

높은 수준의 단계:

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

WKND UI 키트 wknd-ui-kit

높은 수준의 단계:

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

축하합니다! congratulations

축하합니다. Adobe XD UI Kit를 사용하여 AEM Sites 구현을 매핑하고 계획하는 방법을 배웠습니다.

검사하고 다운로드하는 데 UI 키트를 추가로 사용할 수 있습니다.

다음 단계 next-steps

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

페이지 템플릿을 만들고 수정하는 방법을 알아봅니다. 페이지 템플릿과 페이지 간의 관계를 이해합니다. 컨텐츠에 대한 세분화된 거버넌스 및 브랜드 일관성을 제공하기 위해 페이지 템플릿의 정책을 구성하는 방법에 대해 알아봅니다. 잘 구성된 매거진 문서 템플릿은 Adobe XD의 목차를 기반으로 만들어집니다.

recommendation-more-help
b2a561c1-47c0-4182-b8c1-757a197484f9