Planejamento de interface do usuário com Adobe XD

Na maioria dos casos, o planejamento de um novo site começa com modelos e designs estáticos. Adobe XD O é a melhor ferramenta de design do setor para criar experiências de usuário. O Adobe recomenda o planejamento da implementação de Sites por meio dos modelos de UI de uso usando o Adobe XD ou outra ferramenta.

Pré-requisitos

Este é um tutorial de várias partes e presume-se que as etapas descritas no capítulo anterior foram concluídas. Este capítulo é simplesmente uma parte de monitoramento e aprendizado, nenhuma ação é necessária para poder prosseguir com os capítulos subsequentes.

Para acompanhar os vídeos, você precisará Adobe XD instalado, um avaliação gratuita disponível.

Objetivo

  1. Revise o kit de interface do usuário fornecido pelo Modelo de site padrão e pela equipe de design da WKND.
  2. Entenda como os kits da interface do usuário podem ser usados para mapear e planejar uma implementação do AEM Sites.
  3. Saiba como transferir designs de interface do usuário criados no Adobe XD para um desenvolvedor de front-end para implementação.

O que você vai criar

Neste capítulo, dois arquivos Adobe XD serão inspecionados, um para a variável Modelo de site padrão e outra para o site WKND proposto. As ações

Kit da interface do usuário do modelo de site padrão

Etapas de alto nível:

  1. Baixe o Arquivo de XD do modelo de site padrão.
  2. Inspect o kit de interface do usuário no Adobe XD.
  3. Simule o envio dos designs para um desenvolvedor front-end.

Kit da interface do usuário do WKND

Etapas de alto nível:

  1. Baixe o Arquivo de XD do artigo WKND.
  2. Inspect os designs para o modelo de Artigo da WKND.

Parabéns!

Parabéns, você aprendeu como os Kits da interface do usuário do Adobe XD podem ser usados para mapear e planejar uma implementação do AEM Sites.

Adicional Kits da interface do usuário disponíveis para inspecionar e baixar.

Próximas etapas

No próximo capítulo, um novo modelo de página será criado com base no design do artigo WKND.

Saiba como criar e modificar Modelos de página. Entenda a relação entre um modelo de página e uma página. Saiba como configurar as políticas de um modelo de página para fornecer governança granular e consistência da marca para o conteúdo. Um modelo bem estruturado de artigo de revista será criado com base em um modelo do Adobe XD.

Nesta página