Como criar um wireframe usando o Draw.IO

O que é um Wireframe?

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

Como criar um Wireframe?

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 entanto, 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


como criar um esboço de um aplicativocomo criar um esboço de um sitecomo criar um wireframeo que é wireframe?wireframe gratuito