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.
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:
- Protótipos
- Guia de referência
- Links de projeto
- 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.
Imagem de background do Card:
Este artigo foi escrito por Las em 30 jan 2021.