Este artigo foi atualizado em 30/01/2021 . A versão mais recente do Presentator no momento desta edição é a 2.8.3.

Suponha que você terminou o design de uma interface e deseja apresentar para o seu cliente esse design com alguma interatividade como navegação através de cliques em links. Para esse tipo de situação o Presentator pode ser bastante útil.

Presentator é uma plataforma livre e de código aberto de colaboração e apresentação de design.

Para demonstrar a utilização do Presentator irei utilizar uma interface de um aplicativo web chamado O Guia do Mochileiro do Software Livre (ver imagem a seguir). Se você quiser reproduzir o tutorial apresentado, clique aqui para baixar os arquivos das telas exportadas.




O aplicativo possui a seguinte arquitetura da informação.





Exportei as diferentes seções do aplicativo e as numerei para facilitar o upload.





Acessando o Presentator

Para acessar o Presentator clique no link https://presentator.io/pt-br e será carregada a página inicial do Presentator (ver imagem a seguir).





Clique no botão começar e clique no link cadastre-se, que fica no rodapé do formulário (ver imagem a seguir). Crie uma nova conta. Você só vai precisar de um e-mail e de uma senha (ver imagem a seguir).





Confirme a criação da sua conta no e-mail recebido.

Fazendo upload das imagens da interface

Ao realizar o login você entrará na tela de boas vindas e estará pronto para criar seu primeiro projeto (ver imagem a seguir).





Ao clicar no botão de criação de um novo projeto uma janela de diálogo surgirá (ver imagem a seguir).





Preencha o título do projeto e escolha o tipo do projeto. Na nossa demonstração irei escolher o título Guia do Mochileiro do Software Livre e o tipo Desktop.

Com o projeto criado, é hora de fazer o upload das imagens da nossa interface. Arraste as imagens para a área central da tela (ver imagens a seguir).





Linkando as diferentes partes da interface

Depois da realização do upload das interfaces clique no ícone central que aparece ao colocar o cursor do mouse em cima da miniatura da primeira imagem (ver imagens a seguir).





Na parte inferior da tela que surge, você encontra 3 ícones:

  • Modo de pré-visualização
  • Modo de hotspot
  • Modo de comentários

Iremos explorar a seguir o modo de hotspot (ver imagem a seguir).





O modo de hotspot é o modo que permite criar links entre as diversas imagens das telas. Crie o primeiro hotspot no card do blender referente à página single clicando com o botão esquerdo do mouse, segurando e arrastando, criando uma área de seleção sobre o card e, depois de soltado o clique, escolhendo a respectiva tela correnspondente ao link (02-single) (ver imagem a seguir).





Crie o segundo hotspot no botão de login referente à página de login.





Ainda com a caixa de diálogo aberta, vamos fazer com que esse hotspot pertença a um template. Como o cabeçalho com os botões Login e Cadastre-se está presente em todas as imagens a opção de template nos poupará algum tempo.





Crie o terceiro hotspot no botão cadastre-se linkando com a página de registro. Associe-o com o template Guia do Mochileiro do SL (Ver imagem a seguir)





Vamos criar um quarto hotspot nas imagens do Gnu e do Tux linkando com a página index e colocando-o no template Guia do Mochileiro do SL.





Associe o template criado a todas as outras imagens com exceção da tela single-logado. Para passar para a próxima imagem clique na seta que fica no centro a direita na tela.





Para associar o template à imagem selecione o template no canto inferior direito (Ver imagem a seguir).





Na tela de login, insira um hotspot no botão "Esqueceu a senha?" linkando para sua respectiva tela (Ver imagem a seguir).





Ainda na tela de login, insira o hotspot de logar. Esse hotspot redirecionará para a página single-logado.



link-logado.png



Insira o hotspot no Gnu e no Tux para voltar pra a tela index como mostrado antes.

Pronto. Eis que é chegada a hora de apresentar nosso design para o seu cliente ou, no nosso caso, para o mundo.

Apresentando o seu design

Na barra latarel a esquerda da página que mostra as telas do projeto temos:





  1. Protótipos
  2. Guia de referência
  3. Links de projeto
  4. Administradores do projeto

A opção protótipos é onde estávamos trabalhando até agora. O guia de Referência é útil se você desejar definir logotipo e cores do projeto. Os links do projeto é a opção que vamos escolher. Ao clicar você verá essa caixa de diálogo. Clique em Novo link de projeto.





Para esse tutorial vou habilitar os comentários e o guia de referências na geração do link.





Já temos nosso link gerado. Basta compartilhar com seu cliente que ele terá acesso aos protótipos e guias de referências (se existir).





Na imagem anterior podemos visualizar o link:

Link: https://app.presentator.io/#/dGOQe81z 

Encerramento da apresentação

O objetivo desse artigo foi apresentar o Presentator. Se você cria design de interfaces tenho certeza que você tirará proveito dessa ótima ferramenta livre.

Este artigo foi escrito por Las em 30 jan 2021.

Las acredita que o compartilhamento do conhecimento e da informação é uma forma de tornar o mundo melhor.
1 curtida
Para curtir o artigo ou postar uma mensagem é necessário logar ou criar uma conta, caso não tenha uma.

Cadastrar

Outros artigos