7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. Adobe XD

Como Criar um Protótipo de UI Usando Adobe XD

Read Time: 7 mins

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
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.