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

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

사전 요구 사항 prerequisites

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

필요한 비디오와 함께 팔로우하십시오. Adobe XD 설치됨, a 무료 체험판이 제공됩니다..

목표

  1. 에서 제공한 UI 키트 검토 표준 사이트 템플릿 WKND 디자인 팀의 도움을 받을 수 있습니다.
  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