preloder

Ferramenta gratuita para criar wireframes

Fonte: Blogson – O blog do professor Anderson

Wireframe é um protótipo usado em design de interface para sugerir a estrutura de um site, aplicativo ou sistema de informação. Um wireframe é uma ilustração semelhante ao layout e elementos fundamentais da interface.

Normalmente, wireframes são concluídos antes que qualquer trabalho artístico seja desenvolvido, tendo como principal objetivo a navegação e disposição do conteúdo, assim como demonstrar as preferências de um cliente quanto aos requisitos funcionais de um sistema. Saiba mais sobre requisitos no Blog do Prof. Sergio

Estes protótipos podem ser criados no próprio Power Point por exemplo, mas nesta aula irei apresentar uma ferramenta mais eficiente e totalmente gratuita específica para criar diagramas e wireframes.

  1. Acesse o site do Drawn.IO em https://www.draw.io/
  2. Na tela seguinte, selecione a opção DEVICE
  3. No passo seguinte, seleciona a opção CREATE A NEW DIAGRAM
  4. No passo seguinte mantenha a opção BLANK DIAGRAMA selecionada e clique em CREATE

Preparando o ambiente para criar um wireframe de um site

O Draw.IO tem algumas opções muito legais, se quisermos criar um wireframe para um site podemos usar alguns modelos de componentes do Bootstrap e ícones da Web. Para ativar estes recursos localize no canto inferior esquerdo o botão + More Shapes


Na tela seguinte você deverá informar quais shapes (formas) você deseja utilizar, para criar um wireframe deixe marcado apenas os seguintes shapes;

  • General
  • Bootstrap
  • Moockups
  • Web Icons
  • Signs

Após escolher estes shapes, clique em Apply e divirta-se;

Preparando o ambiente para criar um wireframe de um aplicativo

Os shapes para criar um wireframe de um aplicativo são estes;

  • General
  • Android
  • IOS
  • Web Icons
  • Signs

Dicas

Eis alguns atalhos úteis;


+

Aumenta o Zoom da área de edição


+

Diminui o Zoom da área de edição


+

Oferecem mais precisão na hora de posicionar os shapes na área de edição


+

Redimensiona um shape de forma mais precisa do que com o mouse.

Salvando seus projetos

O Draw.IO permite salvar os projetos, porém ele não é um serviço de nuvem, você deverá fazer o download do projeto e quando quiser editá-lo novamente você poderá abrir o arquivo salvo. Ambas as opções ficam disponíveis no menu File.

Exportando seu Wireframe para PNG ou PDF

O legal de exportar para PDF é que o arquivo criado é totalmente editável no Photoshop, bastando abrir o arquivo PDF normalmente no Photoshop como se fosse um PSD.

No entando, caso queira enviar uma prévia do wireframe para o seu cliente é mais seguro enviar no formato PNG, ambos os formatos estão disponíveis no menu File > Export As

Fechar Menu
1
Olá! Sou Anderson, responsável comercial da AppWinner. Posso ajudá-lo?
Powered by

Escolha um modelo de loja virtual.

Oferecemos estes 2 modelos para testes, porém, temos vários outros modelos de lojas virtuais. Entre em contato conosco para maiores informações.


O 1º Encontro Enfermagem é um evento regional realizado para profissionais da enfermagem. A AppWinner foi contratada para criar o site do evento, o sistema de inscrições e criar o sistema de emissão de certificados aos participantes.

Visite o site do 1º Encontro Enfermagem em
https://www.encontroenfermagem.com.br/


Além do site institucional da WTL Consultoria & Representação a AppWinner também criou um hotsite como estratégia de marketing digital para a campanha de regularização de CNH suspensa.

Visite o hotsite WTL Consultoria & Representação
https://wtlcnhsuspensa.com.br/

 

A WTL Consultoria & Representação é pioneira na regularização de CNH suspensa na cidade de São Paulo. O prestígio adquirido ao longo dos anos, fez com que a WTL Consultoria & Representação se tornasse também uma referência neste tipo de serviço no Brasil.

A AppWinner teve como desafio explorar a força da marca WLT e expandir ainda mais a visibilidade dos serviços e produtos oferecidos para mais pessoas que estão com a CNH Suspensa. Para isso, foi criado um site mais adequado as necessidades da empresa e um longo trabalho de otimização no Google foi realizado dentro e fora do site. Logo, em poucos meses a WTL já ocupava as primeiras posições do Google.

Visite o site da WTL Consultoria & Representação em
https://www.wtlconsultoriacnhlimpa.com.br/


A PERT Sistemas é referência no desenvolvimento de softwares de gestão empresarial na região de Jundiaí, se destacando principalmente pelo seu principal produto, o FLOW ERP.

A PERT Sistemas tem como premissa modernizar e otimizar as operações de controle interno das empresas.

Partindo deste princípio, a AppWinner ficou incumbida de criar uma atmosfera moderna e organizada para o site da PERT.

Visite o site da PERT Sistemas em
http://pertsistemas.com.br/


A Etec Prof. Carmine Biagio Tundisi é uma escola técnica do Centro Paula Souza, sediada em Atibaia. A AppWinner recebeu como missão criar o site institucional da escola, organizando por cursos e departamentos.

Visite o site da Etec Carmine de Atibaia
https://www.etecarmine.com.br/

Blogson  é o blog do professor e escritor Anderson Oliveira, um blog com conteúdos de informática, focado em cursos técnicos. O Blogson é um site com mais de 200 artigos publicados e com mais de 30 mil visualizações mensais.

Criar um site com estrutura de conteúdo e performance que ao mesmo tempo fosse simples e intuitivo foi o desafio da AppWinner, além disso, temos a missão de indexar todo o conteúdo do blog, que é gratuito, no Google para que mais pessoas possam aprender com as publicações do Prof. Anderson.

Visite o Blogson
https://www.blogson.com.br/

WTL Certificado Digital

A WTL Certificado Digital oferece serviços e produtos para certificação de NF-e, E-CPF, e-CNPJ, SSL e Conectividade Social. A AppWinner desenvolveu o site apresentando o catálogo de produtos fornecidos pela WTL Certificado Digital e otimizou o site para resultados do Google.

Visite o site da WTL Certificado Digital em
https://www.wtlcertificadodigital.com.br/

MERGIE Business Integrity & Mentoring Consultoria em Negócios

Assessoria Especializada MERGIE é um produto de outsourcing corporativo que une o design de processos com modelo de negócios e possui mais de 20 anos de experiência, qualificada e capacitada pelas melhores instituições do País. A AppWinner desenvolveu o site institucional da MERGIE otimizado para resultados do Google.

Visite o site da MERGIE Business Integrity & Mentoring Consultoria em Negócios em
https://www.mergie.com.br/

Foxer Alto Falantes

A Foxer Alto Falantes é conhecida na indústria automobilística por fabricar os kits originais de alto falantes para diversos modelos de veículos. Se você tem um carro com o som original, existe uma grande probabilidade de seus alto falantes terem sido fabricados pela Foxer.

A Foxer necessitava de uma solução simples, mas eficiente, para facilitar o pedido de vendas de seus representantes comerciais e revendedores, a AppWinner então criou um sistema de e-commerce B2B baseado em WordPress + WooCommerce aonde apenas pessoas autorizadas possam realizar compras diretamente com a fábrica.

Visite o site da Foxer em:
http://revenda.foxer.com.br/loja

Produtos Tupperware – Consultora Marcia Schmidt

A Produtos Tupperware é uma revenda autorizada que fornece produtos para o Brasil inteiro. Através de integrações com redes sociais e Mercado Livre, a loja virtual desenvolvida pela AppWinner rapidamente começou a dar resultados. A loja foi criada no sistema WordPress + WooCommerce e possui integrações com Facebook, Instagram, Correios, Mercado Livre e gateway de pagamento Mercado Pago.

Visite o site da Produtos Tupperware em
https://www.produtostupperware.com.br/

Atibaia Piscinas

A Atibaia Piscinas é uma empresa de arquitetura e engenharia de Atibaia especializada na construção de piscinas, o principal diferencial da Atibaia Piscinas são seus projetos arrojados de construção de piscinas de alto padrão. A desafio da AppWinner foi desenvolver um site de impacto visual que remetesse o visitante ao luxo dos projetos da Atibaia Piscinas. As interações visuais, imagens de alta qualidade e a disposição do conteúdo foram importantes para chegarmos no resultado esperado pelo nosso cliente.

Visite o site da Atibaia Piscinas em
https://www.atibaiapiscinas.com.br/