Balsamiq Mockups & Pencil Project Filippe Siqueira e Juliana   Serpes
Balsamiq
Balsamiq Mockups •  Ferramenta utilizada para fazer prot ó tipos de telas; •  Foi desenvolvida em  Flash  e funciona em mú...
•  Interface simples e direta -  basta arrastar e soltar os controles na página; •  Todos os componentes possuem uma caixa...
Balsamiq A interface
•  São 75 tipos de controles e 150 tipos de ícones previamente instalados. Balsamiq Os componentes
•  Atalhos facilitam a procura por controles; Balsamiq Características
•  Inspetores de propriedades sempre perto, mas nunca no caminho; Balsamiq Características
•  Possibilidades ilimitadas de desfazer (ctrl+Z) e refazer (ctrl+Y); •  Novos controles podem ser importados através de i...
Demonstração
Pencil Project
<ul><li>O Pencil é uma ferramenta utilizada no  desenvolvimento de Wireframes para interfaces  </li></ul><ul><li>Ele ofere...
<ul><li>É um Add-on (Plugin) gratuito do navegador Firefox, mas apesar disto pode ser utilizado em separado  </li></ul><ul...
Pencil Project
Pencil Project
<ul><li>Moldes padrão para diagramação e prototipação  </li></ul><ul><li>Múltiplas páginas com background  </li></ul><ul><...
<ul><li>Um Wireframe nada mais é do que um esqueleto base de uma interface </li></ul><ul><li>Sua função é estruturar o con...
<ul><li>Além de ser uma ferramenta gratuita, o Pencil Project é extremamente útil e muito fácil de usar  </li></ul><ul><li...
Pencil Project
<ul><li>Possui um grande alcance, pois o Firefox é o segundo Browser mais utilizado no mundo, com aproximadamente 24% de M...
Pencil Project Firefox: Ferramentas / Pencil Sketching
Demonstração
Próximos SlideShares
Carregando em…5
×

Balsamiq e Pencil - W

2.562 visualizações

Publicada em

0 comentários
4 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
2.562
No SlideShare
0
A partir de incorporações
0
Número de incorporações
219
Ações
Compartilhamentos
0
Downloads
23
Comentários
0
Gostaram
4
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Balsamiq e Pencil - W

  1. 1. Balsamiq Mockups & Pencil Project Filippe Siqueira e Juliana Serpes
  2. 2. Balsamiq
  3. 3. Balsamiq Mockups • Ferramenta utilizada para fazer prot ó tipos de telas; • Foi desenvolvida em Flash e funciona em múltiplas plataformas, quando comprada, e online , enquanto free ; • Substitui o esboço antes feito em papel. Balsamiq Apresentação
  4. 4. • Interface simples e direta - basta arrastar e soltar os controles na página; • Todos os componentes possuem uma caixa de propriedades que permite alterar fontes, cores, alinhamento; • A ferramenta permite exportar os mockups no formato PNG e ainda copiar e colar diretamente no Word ou Powerpoint ; • O modo Tela Cheia permite esconder as barras de ferramentas e focar exclusivamente no mockup ; • É possível importar novos controles. Balsamiq A ferramenta
  5. 5. Balsamiq A interface
  6. 6. • São 75 tipos de controles e 150 tipos de ícones previamente instalados. Balsamiq Os componentes
  7. 7. • Atalhos facilitam a procura por controles; Balsamiq Características
  8. 8. • Inspetores de propriedades sempre perto, mas nunca no caminho; Balsamiq Características
  9. 9. • Possibilidades ilimitadas de desfazer (ctrl+Z) e refazer (ctrl+Y); • Novos controles podem ser importados através de imagens, do site da comunidade - http://mockupstogo.net/ -, ou ainda é possível solicitar a inclusão aos criadores do aplicativo (apenas na versão paga); • O código é aberto. Ele é escrito em BMML, uma variável do XML. Balsamiq Características • A ferramenta só permite 1 página por arquivo;
  10. 10. Demonstração
  11. 11. Pencil Project
  12. 12. <ul><li>O Pencil é uma ferramenta utilizada no desenvolvimento de Wireframes para interfaces </li></ul><ul><li>Ele oferece uma “coleção de moldes&quot; permitindo a rápida produção do rascunho de um desenho, diagrama ou da estrutura uma página Web </li></ul>Apresentação Pencil Project
  13. 13. <ul><li>É um Add-on (Plugin) gratuito do navegador Firefox, mas apesar disto pode ser utilizado em separado </li></ul><ul><li>Foi escolhido um dos melhores Add-nos para Firefox no concurso “ Extend Firefox 3” realizado pela Mozilla </li></ul>Pencil Project Apresentação
  14. 14. Pencil Project
  15. 15. Pencil Project
  16. 16. <ul><li>Moldes padrão para diagramação e prototipação </li></ul><ul><li>Múltiplas páginas com background </li></ul><ul><li>Suporte a escrita Rich-text </li></ul><ul><li>Suporte PNG </li></ul><ul><li>Instalação de Moldes personalizados </li></ul><ul><li>Instalação de moldes criados por usuários </li></ul><ul><li>Operações padrões de pintura: alinhamento, ordem, rotação e redimensionamento </li></ul><ul><li>Inclusão de Objetos Externos </li></ul>Pencil Project Funcionalidades
  17. 17. <ul><li>Um Wireframe nada mais é do que um esqueleto base de uma interface </li></ul><ul><li>Sua função é estruturar o conteúdo de cada página, indicando a relevância de cada elemento do layout, e sua relação com os demais elementos existentes </li></ul>Pencil Project Wireframe
  18. 18. <ul><li>Além de ser uma ferramenta gratuita, o Pencil Project é extremamente útil e muito fácil de usar </li></ul><ul><li>Possui uma interface bastante amigável e intuitiva, permitindo fácil acesso às ferramentas como: caixas de diálogo, abas, caixas de seleção, painéis e etc. </li></ul>Pencil Project Porque escolher o Pencil ?
  19. 19. Pencil Project
  20. 20. <ul><li>Possui um grande alcance, pois o Firefox é o segundo Browser mais utilizado no mundo, com aproximadamente 24% de Market Share </li></ul><ul><li>É um programa bastante leve (pesa apenas 400 kb) </li></ul><ul><li>De fácil instalação e com diversas funcionalidades </li></ul>Pencil Project Porque escolher o Pencil ?
  21. 21. Pencil Project Firefox: Ferramentas / Pencil Sketching
  22. 22. Demonstração

×