() translation by (you can also view the original English article)
No meu último tutorial, vimos como o Adobe XD pode ser usado para criar wireframes de uma aplicação móvel. Desta vez, vou partilhar convosco como ele pode ser usado para desenhar um mockup visual e criar um protótipo.
O Adobe XD pode ser usado tanto no design web como mobile, dispondo de uma área de trabalho que permite projetar a experiência de navegação, ao mesmo tempo que se estabelece uma interatividade simples entre páginas e ecrãs. Os mockups interativos podem depois ser enviados para o desenvolvedor ou apresentados a um cliente.
Neste caso, vamos estar a desenhar um website para um simples loja de roupa e acessório; uma marca fictícia chamada "Lo-Key", que vende uma linha de roupa básica, com inspiração citadina. Acompanhe passo a passo para aprender, e sinta-se à vontade para modificar e experimentar, caso esteja a usar este tutorial para criar a sua própria loja.
1. Estude os seus utilizadores
Este tutorial assume que você já fez o seu trabalho de casa. Se você tem um negócio, isso significa que vocês já conhece quem é o seu consumidor e que tipo de experiência web será a mais adequada para ele. Como designer, você terá feito o seu estudo do consumidor, desenhado e estabelecido a identidade da marca, e passado algum tempo a criar e rever wireframes.
Claro que se você só quiser experimentar o Adobe XD e usar este tutorial para isso, você também o pode fazer. Não deve, todavia, assumir que o processo aqui mencionado remete para a totalidade do processo de design UX!
Assim que estiver pronto para começar a desenvolver um mockup visual e interativo, poderá avançar para o próximo passo.
2. Escolher a Dimensão do Ecrã
A primeira coisa que o Adobe XD pede é que escolha a dimensão do ecrã. O tamanho padrão para web é o Web 1920 (1920 X 1080 px) mas você também pode escolher outras opções (Web 1280 ou Web 1366), ou escolher um tamanho customizado.
Uma vez que tenha feito esta seleção, receberá as boas-vindas à área de trabalho do XD, na visualização de Design por padrão, e terá acesso a um canvas ("artboard") vazio da dimensão de ecrã que escolheu.
3. Duplicar o Seu Artboard
Nós vamos criar os mockups de quatro páginas padrão para uma loja online:
- uma home page
- uma página de categoria ("Shirts")
- o carrinho (mostrando items que os clientes adicionaram para checkout)
- a página de Sobre (que contém um pouco de informação sobre a marca)
Também precisaremos de artboards para o menu drop-down, assim como uma popup que mostra mais detalhes sobre os produtos selecionados (efeito "lightbox"), mas estes elementos serão criados mais tarde.
Por agora, crie mais três artboards, escolhendo a função de artboard no painel e clicando em qualquer lugar perto do seu primeiro artboard.
Em alternativa, você pode também clicar no primeiro artboard para selecioná-lo e escolher Edit > Duplicate. Renomeie cada um dos artboards ao clicar duas vezes nos títulos predefinidos (visíveis no canto superior esquerdo de cada artboard).
4. Colocar Imagens e Adicionar Textos
Para a nossa homepage, vamos fazer algo que é bastante popular em websites de moda e retalho. Vamos colocar uma imagem grande que servirá de fundo.
Dica: Pode dar a indicação ao Adobe XD que uma artboard é a sua homepage, selecionando toda a artboard e clicando na tag cinzenta que aparece no canto superior esquerdo. O artboard tornar-se-á azul para mostrar que esta é a landing page ou página inicial da sua experiência.
Assim que decidir que imagem que usar, selecione File > Import (ou em alternativa, pressione Cmd + Shift + I) para localizar a imagem no seu disco e importá-la para o canvas. Se a sua imagem for maior do que o seu artboard, pressione, redimensione e mova até colocar a imagem fique na posição mais indicada.
Continuando o com o nosso visual minimalista, vamos manter o texto curto e simples - basta o nome da marca (ou o logo), a tagline e a barra de navegação.
Selecione a ferramenta de texto (Text) no painel à esquerda e clique one quiser para começar a escrever. Para o texto do nosso logótipo, estou a começar no meio mas você poderá mover como quiser, clicando e arrastando. Claro que também poderá importar a imagem do logo da mesma forma que importou a imagem de fundo.
Debaixo do texto do logo, você pode usar a ferramenta de texto (Text) para escrever a tagline da sua marca.
O Adobe XD oferece várias formatações padrão para o seu texto. Poderá selecionar qualquer bloco de texto e mudar o seu tipo de letra, estilo, cor, tamanho e outros atributos. A captura de ecrã abaixo mostra a formatação para o texto de navegação da homepage.
Os tipos de letra neste exemplo seguem uma escala harmoniosa de 1:2, sobre a qual você poderá aprender neste guia sobre tipografia eficaz para a web:
Use o que aprendeu nesta secção para adicionar os títulos das restantes quatro páginas e colocar as imagens e o corpo de texto para o Carrinho e página de Sobre.
5. Faça um Símbolo
Voltemo-nos para a página de Sobre.
Encontre um ícone de navegação de que goste (como os que encontra neste conjunto) e coloque-o ao lado do logo, no canto superior esquerdo, na página de Sobre (ou em qualquer outra das duas páginas, além da homepage)
Como também vai precisar do ícone e do logo para as restantes páginas, pode transformá-los num símbolo. Clique no botão direito do rato e selecione Make Symbol (ou pressione Cmd + K) Pode aceder a qualquer dos símbolos que tenha feito ao clicar no ícone de Assets na página esquerda. A partir daí, poderá arrastar e largar o símbolo para qualquer um dos seus artboards. Desta forma, não terá de estar sempre a copiar e a colar.
Pode fazer o link do seu símbolo Lo-Key para a homepage usando o método que deixamos no passo seguinte.
6. Criar o seu Primeiro Link
Mude para o modo Prototype na barra do topo. Faça zoom no seu primeiro artboard (Home) e selecione o texto de Sobre. Uma seta azul aparecerá junto a ele. Pressione e arraste. Uma ligação azul seguirá obedientemente onde quer que o cursor vá...
Arraste-a para o segundo artboard (Sobre) e deixe-a lá. Você acabou de criar um link entre duas páginas e, garantindo que a tab de transição (Transition) é selecionada, você poderá escolher o tipo de transição e facilitar usando o pop-up que aparece quando a larga a ligação. Por agora, você poderá manter a transição como none porque queremos que a página de Sobre substitua imediatamente a homepage assim que o botão de Sobre é pressionado.
Pode repetir este método para adicionar links para qualquer outra página.
7. Usar Sobreposições para Adicionar um Menu Drop-Down e uma Lightbox
Vamos agora adicionar o nosso menu de navegação drop-down.
Criar um novo artboard, intitulado Nav, e modique as suas dimensões de acordo com as suas necessidades, usando os controles de largura e altura mostrados no painel direito. A artboard de Nav mostrada abaixo é 210px X 275px.
Use a ferramenta de texto (Text), e opcionalmente, a ferramenta de Linha (Line) do painel esquerdo, desenhe o seu menu drop-down. Este menu vai aparecer quando o utilizador clica no ícone hambúrguer.
De regresso ao modo Prototype, arraste a ligação do menu hambúrguer para o artboard Nav. Na caixa que aparece, mude para Overlay tab. Uma caixa verde aparecerá e mostrará onde a sobreposição irá aparecer. Arraste e mova até que esteja debaixo do menu hambúrguer. Escola None tendo em conta que esta é a sua definição de transição (ou experimente outras opções).
Agora clique em no ícone de Play no canto superior direito da janela. A sua homepage aparecerá na janela de preview. Clique no botão de Sobre para ir para a página de Sobre. Agora, clique no ícone do hambúrguer. Aparecerá o seu meu drop-down. Clique nele outra vez e desaparece.
Pode ligar os títulos dos itens/páginas no drop-down às suas respetivas páginas usando o mesmo método do Passo 6. Isto irá tornar funcional a navegação para todas as páginas no seu protótipo.
8. Usar a opção "Repeat Grid" para criar linhas e colunas de objetos
Para a nossa página Shirts, precisamos de múltiplas linhas de produtos.
Para isso, iremos usar uma opção chamada Repeat Grid. Se o seu design envolve repetir elementos ou conteúdo de listas, a opção Repeat Grid permite que faça tudo isso ao mesmo tempo que pode facilmente fazer mudanças que serão atualizadas e aplicadas ao conjunto de forma automática.
Use a ferramenta Rectangle do painel da esquerda para desenhar um retângulo com 450px x 300px e depois use a ferramenta Fill do painel da direita, para colori-lo de cinzento claro de forma a indicar que é um placeholder de uma imagem.
Agora selecione o retângulo e clique em Repeat Grid no painel direito (ou Object > Repeat Grid). Um outline e sliders verdes aparecerão à volta da sua seleção, permitindo que estenda o conteúdo da sua lista em qualquer direção ( tanto na vertical como na horizontal no seu caso). Por agora, clique e arraste o suficiente para fazer duas linhas e três colunas de cada.
Selecione a sua grelha e depois passe por cima dos espaços brancos entre os seus retângulos. Eles tornar-se-ão cor de rosa, pode arrastar para cima e para baixo para mudar a distância entre as células.
Para preencher a sua grelha com imagens de produtos, arraste as imagens dos produtos de um único ficheiro para a sua grelha no XD. Eles irão preencher a grelha automaticamente.
Pode usar o mesmo método de overlay do Passo 7para criar a lightbox do produto que aparece quando clica numa camisola/produto.
9. Passo Opcional: Partilhar!
O Adobe XD permite que possa facilmente e rapidamente partilhar qualquer coisa em que esteve a trabalhar com colegas e outros stakeholders.
Se está a trabalhar numa app ou website para um cliente, pode partilhar o link do seu projecto de design com eles selecionando File > Share > Publish Prototype.
Pode também publicar Design Specs que permitem aos developers (ou a qualquer outra pessoa) ver a formatação e outros settings para o seu protótipo num browser. Podem também fazer download que qualquer assets, como imagens ou gráficos, que assinale para exportação (vá a View > Layers. Pode optar por selecionar qualquer item e clicar no ícone próximo dele, ou, clicar com o lado direito em qualquer item da lista e selecionar Mark for Batch Export).
Conclusão
E acabamos! Com estes passos você acabou de desenhar um protótipo para uma loja online simples. Este poderá ser partilhado com os stakeholders, ou enviado aos desenvolvedores. Consulte os links abaixo para aprender mais sobre o Adobe XD!
