Hoje vamos revisar o conceito de protótipo e apresentar o conceito de wireframe que esta muito relacionado a protótipos.

Você sabe o que é um protótipo ?

De forma bem direta, a noção de protótipo deriva da língua grega. Este termo é usado para mencionar o primeiro dispositivo que se desenvolve/concebe de algo e que serve como modelo para fabricar os mesmos como amostra.

Na Engenharia de Software, protótipo é um sistema/modelo (um website ou outro software) sem funcionalidades inteligentes (acesso à banco de dados, por exemplo), podendo conter apenas funcionalidades gráficas. Utilizado para fins de ilustração e melhor entendimento, geralmente em reuniões entre a equipe de Análise de Sistemas e o contratante.

E Wireframe, o que é isso ?

Wireframing permite que você defina a hieraquia da informação no seu projeto ou design, fazendo com que seja mais fácil planejar o layout de acordo com a maneira na qual você espera que o usuário interaja com a interface.

Assim um wireframe de um projeto web ou mobile pode ser visto como um protótipo usado em design de interface para sugerir a estrutura da aplicação e os relacionamentos entre suas páginas/views.

Dessa forma ao projetar sua aplicação Xamarin ou Xamarin Forms, aplicar o wireframing ou fazer um protótipo da aplicação, ajuda muito no desenvolvimento do projeto.

Ferramentas usadas para Wireframe/Prototipagem

Existem muitas ferramentas que você pode usar para criar um protótipo da sua aplicação Xamarin, desde os gratuítos aos pagos, e, tudo vai depender do seu objetivo, da complexidade do seu projeto e de quanto você esta disposto ou pode gastar.

Vou citar 4 ferramentas muito boas para realizar a prototipagem :

1- Sketch - O Sketch é um conjunto de ferramentas de design criado para ajudá-lo a criar seu melhor trabalho - desde as suas primeiras ideias, até a arte final.

• Esta ferramenta parece ser a mais completa e possui uma versão de teste que você pode usar por 30 dias;
• Para usar esta ferramenta você precisa ter um Mac OS X El Capitan (version 10.11) ou superior;

2- Justinmind - É uma ferramenta que oferece uma versão grátis que pode ser usada por 30 dias e que depois você pode continuar a usar de forma gratuíta com algumas limitações.

• Pode ser usado tanto no Windows como no Mac e possui muitos recursos

3- FluidUI - Projeta suas aplicações usando bibliotecas abrangentes e integradas para Wireframe, Material Design, iOS e Web.

• Existe a versão para download e instalação para Mac e Linux;
• Possui a  vantagem de poder ser executada no Navegador (sem instalação);
• Permite criar links entre as telas do seu protótipo;
• A versão gratuita tem uma limitação de telas por projeto;

4- Pencil Project - Seu objetivo é fornecer uma ferramenta de prototipagem de GUI livre e de código aberto que as pessoas podem instalar e usar facilmente para criar maquetes em plataformas de desktop populares. É a única totalmente open-source

Neste artigo eu vou mostrar um protótipo feito na ferramenta FluidUI. Escolhi essa ferramenta pois ela pode ser usada no navegador bastando criar um conta informando email e senha. Assim não preciso fazer nenhuma instalação.

1- Protótipo de uma aplicação Android básica usando o FluidUI

A seguir temos uma imagem com um protótipo feito usando a ferramenta FluidUI:

Em outro exemplo usando essa ferramenta eu criei um protótipo da aplicação Rachar a Conta que pode ser vista aqui : Xamarin Forms - App Dividir a Conta

Basta criar uma conta de avaliação e você já poder criar seu protótipo. Abaixo temos uma visão da nossa app Rachar a Conta onde eu apenas defini duas visões da única página que a aplicação vai possuir :

1. Na primeira imagem temos a página inicial onde deverá ser informada se o valor da gorjeta vai ou não ser incluida na conta, o valor da conta e o número de participantes
2. Na segunda imagem temos o resultado sendo exibido ao se clicar no botão Calcular. Note que podemos realizar o arredondamento para mais ou para menos do valor do rateio.

Você pode criar links entre as páginas e criar um protótipo mais avançado. Eu vou me ater apenas a visão da página da app que é bem simples para ter uma idéia dos controles que iremos usar no projeto.

Na terceira imagem vemos a aplicação em funcionamento exibindo um resultado de uma operação.

Se você se interessar pela ferramenta pode consultar os recursos e documentação neste link : https://www.fluidui.com/

E bons protótipos...

"Mas nós não recebemos o espírito do mundo, mas o Espírito que provém de Deus, para que pudéssemos conhecer o que nos é dado gratuitamente por Deus. "
1 Coríntios 2:12