Adobe XD를 사용한 UI 계획 수립 ui-planning-adobe-xd
대부분의 경우, 새로운 웹 사이트에 대한 계획 수립은 목업 및 정적 디자인에서 시작됩니다. Adobe XD는 사용자 경험을 빌드하는 데 가장 적합한 디자인 도구입니다. Adobe에서는 Adobe XD나 다른 도구를 사용하여 UI 목업을 활용하여 사이트 구현을 계획할 것을 권장합니다.
사전 요구 사항 prerequisites
이 튜토리얼은 여러 부분으로 구성되어 있으며, 이전 챕터에 설명된 단계가 완료되었다고 가정합니다. 이 챕터는 단순히 시청하면서 학습하는 부분으로, 후속 챕터로 넘어가기 위해 취해야 하는 조치가 없습니다.
비디오를 재생하려면 Adobe XD가 설치되어 있어야 하며 무료 체험판이 제공됩니다.
목표
- 표준 사이트 템플릿 및 WKND 디자인 팀에서 제공하는 UI 키트를 검토합니다.
- UI 키트를 사용하여 AEM 사이트 구현을 매핑하고 계획하는 방법을 알아봅니다.
- 구현을 위해 Adobe XD에서 만든 UI 디자인을 프론트엔드 개발자에게 전달하는 방법을 알아봅니다.
빌드 결과물 what-you-will-build
이 챕터에서는 표준 사이트 템플릿 및 제안된 WKND 사이트 각각에 대한 두 개의 Adobe XD 파일을 검사합니다. 다음
표준 사이트 템플릿 UI 키트 standard-site-template-uikit
상위 수준 단계:
- 표준 사이트 템플릿 XD 파일을 다운로드합니다.
- Adobe XD에서 UI 키트를 검사합니다.
- 프론트엔드 개발자에게 디자인을 인계하는 과정을 시뮬레이션합니다.
WKND UI 키트 wknd-ui-kit
상위 수준 단계:
- WKND 문서 XD 파일을 다운로드합니다.
- WKND 문사 템플릿의 디자인을 살펴봅니다.
축하합니다! congratulations
축하합니다. 이제 Adobe XD UI 키트를 사용하여 AEM Sites 구현을 매핑하고 계획하는 방법을 알아보았습니다.
추가 UI 키트를 검사 및 다운로드할 수 있습니다.
다음 단계 next-steps
다음 챕터에서는 WKND 문서 디자인을 기반으로 새로운 페이지 템플릿을 만듭니다.
페이지 템플릿 생성 및 수정 방법을 알아봅니다. 페이지 템플릿과 페이지의 관계를 이해합니다. 콘텐츠에 대한 세부적인 거버넌스와 브랜드 일관성을 제공하도록 페이지 템플릿의 정책을 구성하는 방법을 알아봅니다. Adobe XD의 목업을 기반으로 잘 구성된 매거진 문서 템플릿이 생성되었습니다.
recommendation-more-help
b2a561c1-47c0-4182-b8c1-757a197484f9