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 uma pequena loja para o público feminino chamada Coisas da Darlene (ver imagem a seguir). Se você quiser reproduzir o tutorial apresentado, clique aqui para baixar os arquivos das telas exportadas.



A loja possui a seguinte arquitetura da informação.



Exportei as diferentes seções da loja 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 na aba registrar. 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 Coisas da Darlene e o tipo Desktop.

Com o projeto criado, é hora de fazer o upload das imagens da nossa interface. Clique no card Adicionar telas e arraste as imagens para a área que surge em seguida (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 superior da tela, você encontra 3 ícones:

  • Modo de hotspot
  • Modo de comentários
  • Configurações da tela

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 coração referente à página novidades clicando com o botão esquerdo do mouse, segurando e arrastando, criando uma área de seleção sobre o coração e, depois de soltado o clique, escolhendo a respectiva tela correnspondente ao link (ver imagem a seguir).



Crie o segundo hotspot no coração referente à página de contato.


Crie o terceiro hotspot no produto sapato alto linkando para a página de produto com o mouse sobre o produto.



Após repetir o processo para todas as telas onde a marcação com link for necessária eis que é chegada a hora de apresentar nosso design para o seu cliente ou, no nosso caso, para o mundo.

Apresentando o seu design

No canto superior esquerdo da página que mostra as telas do projeto temos, na parte superior, três botões, são eles, da esquerda para a direita:

  1. Gerencia administradores
  2. Links
  3. Compartilhar

Como sou o único responsável pelo projeto-exemplo eu serei o único administrador. Deixo para você explorar o item Gerencia administradores do Presentator caso tenha mais de um Designer na sua equipe (ver imagem a seguir).



Clicando no botão 2 – links será carregada uma janela de diálogo (ver imagem a seguir).



Na imagem anterior podemos visualizar dois links:

Apenas visualizar:  https://app.presentator.io/pt-br/6FAqnaZk 
Visualizar e comentar:  https://app.presentator.io/pt-br/4cAEqQz1.

Dependendo da pessoa que irá acessar o projeto você pode escolher entre permitir que o usuário só visualize ou permitir que ele também comente na interface.

Além da opção de link, também existe a opção de compartilhamento via e-mail. Talvez essa seja a melhor forma de enviar o projeto para seu cliente (ver imagem a seguir).



Criando novas versões do design

Depois de avaliada talvez a interface necessite de alguma modificação. Para essa situação você pode querer criar versões diferentes da interface. Para criar uma nova versão do design basta clicar no botão Nova versão na tela de visualização do projeto (ver imagem a seguir).



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.

Lacaster

Este artigo foi escrito por Lacaster em 02 out 2017.

Lacaster acredita que o compartilhamento do conhecimento e da informação é uma forma de tornar o mundo melhor.
1 curtida

Comentários

Libre Designers - Apresentando o presentator

Responder essa discussão

Você deve estar logado antes que possa publicar uma resposta ou curtir a postagem.

Cadastrar