Criando Protótipos de Aplicativos e Sistemas com o Pencil: Um Exemplo para Pizzarias

On quinta-feira, 8 de maio de 2025

Criando Protótipos de Aplicativos e Sistemas com o Pencil: Um Exemplo para Pizzarias

O Pencil é uma ferramenta gratuita e de código aberto que permite criar protótipos navegáveis de interfaces gráficas, tanto para aplicativos móveis quanto para sistemas web. Ele é leve, multiplataforma (Windows, Linux e macOS) e muito útil para validar ideias e planejar interfaces de forma visual e rápida.

Neste artigo, você vai aprender:

  • Como adicionar novos modelos (stencils) no Pencil;

  • Como criar um protótipo de aplicativo mobile de pizzaria com dois sabores;

  • Como criar um protótipo de sistema web de controle da pizzaria, com cadastro de clientes, pizzas e pedidos.

1. Instalando o Pencil

Acesse o site oficial https://pencil.evolus.vn/ e baixe a versão para seu sistema operacional. Após a instalação, abra o programa para começar.

2. Adicionando modelos (stencils)

Os stencils são conjuntos de componentes visuais, como botões, campos, menus e ícones, organizados por tema (Android, iOS, Web, etc.).

Como adicionar novos stencils:

  1. Vá em Tools > Manage Collections.

  2. Clique em Get More Collections.

  3. O Pencil abrirá uma página com coleções adicionais. Baixe a desejada.

  4. No Pencil, clique em Install Collection e selecione o arquivo .epz baixado.

Para este tutorial, recomendamos instalar:

  • Android GUI (para o app mobile)

  • Web UI ou Desktop GUI (para o sistema web)

3. Protótipo mobile: Pedido de pizza

Objetivo:

Criar um app onde o cliente pode escolher entre dois sabores: calabresa e muçarela.

Telas necessárias:

a. Tela inicial

  • Título: “Bem-vindo à Pizzaria da Vila”

  • Botão: “Fazer Pedido”

b. Tela de seleção de pizza

  • Texto: “Escolha o sabor”

  • Duas opções (como botões ou imagens):

    • 🍕 Calabresa

    • 🧀 Muçarela

  • Botão: “Confirmar Pedido”

c. Tela de confirmação

  • Texto: “Seu pedido de pizza de [sabor] foi enviado!”

  • Botão: “Voltar ao Início”



Como tornar navegável:

  1. Selecione um botão, clique com o direito e vá em Link to → [tela de destino].

  2. Faça isso para todos os botões de navegação.

💡 Use imagens ou ícones de pizza nos botões para deixar o protótipo mais visual.

4. Protótipo web: Sistema de controle da pizzaria

Objetivo:

Simular um sistema administrativo com as seguintes funcionalidades:

  • Cadastro de pizzas

  • Cadastro de clientes

  • Visualização e recebimento de pedidos

Telas sugeridas:

a. Tela de login

  • Campo de usuário

  • Campo de senha

  • Botão “Entrar”

b. Dashboard

  • Menu lateral com opções:

    • “Pizzas”

    • “Clientes”

    • “Pedidos”

  • Área principal com resumo de pedidos do dia

c. Tela de cadastro de pizzas

  • Campos:

    • Nome da pizza

    • Ingredientes

    • Preço

  • Botões: “Salvar” e “Cancelar”

d. Tela de cadastro de clientes

  • Campos:

    • Nome

    • Telefone

    • Endereço

  • Botões: “Salvar” e “Cancelar”

e. Tela de pedidos

  • Lista com pedidos pendentes

  • Botão “Marcar como entregue”



Dicas:

  • Use os stencils da coleção Web UI.

  • Organize a tela com grids ou painéis.

  • Use links entre botões e páginas para simular navegação.

5. Exportando e compartilhando

Após terminar seu protótipo:

  1. Vá em File > Export Document.

  2. Escolha o formato:

    • PNG ou PDF: ideal para apresentações.

    • HTML: cria um protótipo navegável em navegador.

  3. Para compartilhar, envie os arquivos por e-mail, Google Drive ou publique em um site.

Conclusão

O Pencil é uma excelente ferramenta para criar protótipos de apps e sistemas sem codificação, ideal para validar ideias com clientes, colegas ou investidores. Com poucos cliques, é possível simular desde um pedido de pizza até o controle completo de uma pizzaria.