Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Adobe XD
Webdesign

Como Criar um Protótipo de UI Usando Adobe XD

by
Difficulty:BeginnerLength:MediumLanguages:

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

Historicamente, a Adobe Creative Cloud não tem um ferramenta para designer prototiparem layouts rapidamente e eficientemente, ou obter feedback antes de criar o design final da UI. Esse vazio foi preenchido recentemente pelo Adobe Experience Design CC (Adobe XD) A aplicação, apresentada como "Project Comet" durante Adobe MAX 2015, está disponível para download em beta na Adobre Creative Cloud. É um app desktop que permite designers prototiparem interfaces para web, mobile e tablets. Vejamos o que ele pode fazer!

Adobe XD homepage
Página inicial do Adobe XD

Apresentando Adobe XD

Adobe XD usa uma interface eficiente simples e marcante, herdada das aplicações irmãs do pacote Creative Cloud. Ela provê ferramentas para prototipar para plataformas diferentes, incluindo web, mobile, tablets e outras.

Ao ser iniciada, a tela de boas vindas provê-nos uma variedade modelos de tamanhos de tela e a habilidade de adicionar tamanhos de documentos customizados. Adicionalmente, a tela inclui acesso a ativos que podem ser usados como base para aprender mais sobre a aplicação; elementos de design UI para aparelhos mobile diferentes como iOS e Android; e acesso a recursos online como tutoriais e mais.

Adobe XD Welcome screen
Tela de boas vindas do Adobe XD

O espaço de trabalho do Adobe XD é dividido em duas visões: Design e Protótipo, que podem ser acessadas no canto direito superior da aplicação. Em Design, podemos várias ferramentas e recursos para criar estruturas de design, adicionar pranchetas usadas para representar a estrutura de páginas e ativos de outras aplicações, como Adobe Illustrator e Adobe Photoshop.

Dica: Designers podem copiar elementos de design diretamente desses apps e colá-los na prancheta selecionada como gráficos vetorizados. Isso permite a modificação da arte importada ao alterar a cor ou mesmo o pontos de ancoragem do caminho delas.

A segunda visão, Protótipo, permite designers ligarem pranchetas (páginas) e definir relações entre elas através de interações. Uma vez pronto o projeto, designers podem pré-visualizados clicando no ícone pré-visualizar no canto direito superior, ou compartilhá-lo com a equipe através de um link. Designers também podem salvar telas diferentes como imagens ou vetores.

Tutorial do Adobe XD

Após explorar a anatomia básica da interface, o exemplo a seguir mostra o passo-a-passo de um processo de criação de nosso primeiro protótipo de UI no Adobe XD. Construiremos algo para o tamanho do iPhone 6. Podemos baixar os arquivos da prática visitando o repositório desse tutorial no Github. Ou podemos baixar as imagens direto da Pixapay:

A primeira parte desse tutorial focará na criação de um layout na visão Design do Adobe XD.

1. Criando o Projeto do Protótipo

Quando Adobe XD é aberto, a janela de boas vindas aparece e nos permite escolher o tipo de projeto. Selecionemos iPhone 6 (375 x 667px). Cliquemos no ícone do iPhone para criar o projeto. Do iOS da Apple, temos acesso aos elementos de UI do iPhone que podemos usar nos protótipos. Assim que a prancheta for criada, clicaremos duas vezes no nome dela e mudaremos para "Home".

Figure 1 Adobe XD Welcome screen
Tela de boas vindas do Adobe XD

2. Criando o Plano de Fundo do Protótipo

Cliquemos na prancheta para ver as propriedades no painel de Propriedades no lado direito da aplicação, e cliquemos na cor de Preenchimento para abrir a caixa de seleção de Cores. Usemos um cinza escuro e fechemos a caixa de seleção.

Figure 2 Set the artboard background to dark gray animated GIF
Configurando o plano de fundo da prancheta para cinza escuro

3. Configurando Cabeçalho da Tela

Vamos em Arquivo > Importar. No navegador, busquemos a imagem do cabeçalho e Importemo-na. Usemos os controles ao redor da imagem para dimensioná-la para caber no cabeçalho da tela. Podemos também dar dois cliques para recortar a imagem.

Usemos Texto do painel Ferramentas, cliquemos no cabeçalho e digitemos "Nature". Cliquemos 2x no texto e selecionemos "Helvetica", "bold" e "32" para tamanho no painel Propriedades. Na cor de Preenchimento, usemos um fundo "cinza escuro".

4. Contruindo o Plano de Fundo da Área de Conteúdo

Selecionemos o Retângulo do painel Ferramentas do lado direito e criemos um retângulo abaixo do cabeçalho. No painel Propriedades à direita, use um cinza escuro na cor de Preenchimeto e desmarque a opção Borda para removê-la.

Create the content area background
Criando o plano de fundo da área de conteúdo

5. Adicionando o Conteúdo

Importemos a miniatura e adicionemos o texto como no passo 3. Configuremos a miniatura para tomar o plano de fundo do conteúdo e, ao lado direito, adicione texto como visto abaixo. Para cortar a miniatura em uma área específica, podemos clicar duas vezes nela e usar os quatro cantos.

Adding content below the header area
Adicionando o conteúdo abaixo da área do cabeçalho

6. Criando a Grade do Conteúdo

Uma ferramenta útil do Adobe XD é poder criar uma grade a partir de conteúdo existente, sem duplicá-los manualmente. Apertemos Shift e selecionemos a miniatura, conteúdo de plano de fundo e texto. Daí, cliquemos o botão Repetir Grade no painel Propriedades. Isso transforma o conteúdo criado em uma grade.

Arraste o ícone verde de baixo para criar uma grade vertical de conteúdo. Para modificar o conteúdo, basta clicar duas vezes. Por fim, selecionemos o conteúdo e escolhamos Desagrupar Grade para quebrar o elo entre eles.

7. Criando Página Nova (Prancheta)

Para criar uma nova página de layout, cliquemos em Prancheta no painel de Ferramentas à esquerda. Então, selecionemos o modelo iPhone 6 da direita para criar uma nova página.

Create a new Artboard
Criando nova Prancheta

8. Criando Mais Páginas

Repitamos os passos acima para criar mais páginas e adicionemos conteúdo a elas. O visual final para o layout deveria ser algo parecido com isso:

The final prototype of the UI design layout
O protóripo final do novo layout do projeto de UI

O layout estando completo, iremos para a visão Protótipo para construir o link entre as páginas.

9. Configurando a Página Inicial do Projeto

Antes de criar os links entre as páginas, precisamos atribuir a página inicial do projeto. Ela pode ser qualquer uma das páginas criadas. Nesse exemplo, atribuiremos o primeiro layout criado, clicando no ícone Home que aparece no canto esquerdo superior da prancheta.

Assign a homepage to the project
Atribuindo uma página inicial ao projeto

10. Contruindo Elos Entre s Páginas

Para criar um elo entre as páginas, selecionemos a página inicial e cliquemos na seta embaçada ao lado direito. O menu suspenso Alvo aparecerá: selecionemos a próxima página e o tipo de transição (por exemplo "Dissolve"). Repitamos o passo para criar o elo entre as outras páginas.

Link between pages
Elo entre as páginas

11. Criando Interação

Nesse protótipo, o primeiro bloco de conteúdo na página inicial deveria levar para a primeira prancheta de conteúdo; o segundo bloco para a segunda prancheta, e por aí vai. Então, selecionemos o primeio bloco, cliquemos a seta azul para configurar o alvo, como fizemos no passo 10. Repitamos o passo com o segundo bloco.

Add interaction to content
Adicionando interação ao conteúdo

Após criar o protótipo, há dois métodos de pré-visualização. O primeiro é o recurso Pré-Visualização dentro do Adobe XD em si e o outro é através de um link web que pode ser compartilhado com outros membros da equipe.

12. Pré-Visualizando o Protótipo

Cloquemos no ícone Pré-Visualizar no canto direito superior. Isso mostrará uma tela de pré-visualização que nos permite visualizar e navegar as diferentes páginas. Também há um botão de Gravação que nos permite gravar o fluxo entre as páginas e salvá-lo como formato do Quicktime (MOV).

Previewing the prototype in Adobe XD
Pré-visualizando o protótipo no Adobe XD

13. Compartilhando o Protótipo

E pronto! Agora, só precisamos compartilhar o documento com outros membros da equipe ou clientes, que não precisam usar o XD. Cliquemos no ícone de Compartilhar no canto direito superior e um menu suspenso aparecerá com a URL que podemos compartilhar com os outros:

The prototype web URL
A URL do protótipo

Concluindo

Como vimos, a versão beta atual do Adobe XD provê uma ferramenta simples, porém efetiva para profissionais de UX visualizarem suas pesquisas em aparelhos web, mobile e tablet. Permite-nos integrar ativos de outras aplicações Adobe, como Illustrator e, ao mesmo tempo, manter o formato vetorial editável.

Para as próximas versões, foram prometidas mais funcionalidades, como cores aprimoradas, camadas, compartilhamento aprimorado, rolagem e adição de mais elementos interativos na visão Protótipo. Se já tentou o Adobe XD, gostaríamos de saber suas primeiras impressões. Com seu comentário agora, pode ajudar a moldar lançamentos futuros.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.