O documento descreve duas ferramentas para criação de protótipos de interfaces: Balsamiq Mockups e Pencil Project. Balsamiq Mockups permite criar mockups em diversas plataformas com uma interface simples. Já o Pencil Project é um plugin do Firefox que oferece moldes para wireframes e permite criar múltiplas páginas. Ambas as ferramentas facilitam a criação rápida de esboços de telas e layouts.

1. Balsamiq Mockups & Pencil Project Filippe Siqueira e Juliana Serpes

2. Balsamiq

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. • 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. Balsamiq A interface

6. • São 75 tipos de controles e 150 tipos de ícones previamente instalados. Balsamiq Os componentes

7. • Atalhos facilitam a procura por controles; Balsamiq Características

8. • Inspetores de propriedades sempre perto, mas nunca no caminho; Balsamiq Características

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. Demonstração

11. Pencil Project

12. O Pencil é uma ferramenta utilizada no desenvolvimento de Wireframes para interfaces Ele oferece uma “coleção de moldes" permitindo a rápida produção do rascunho de um desenho, diagrama ou da estrutura uma página Web Apresentação Pencil Project

13. É um Add-on (Plugin) gratuito do navegador Firefox, mas apesar disto pode ser utilizado em separado Foi escolhido um dos melhores Add-nos para Firefox no concurso “ Extend Firefox 3” realizado pela Mozilla Pencil Project Apresentação

14. Pencil Project

15. Pencil Project

16. Moldes padrão para diagramação e prototipação Múltiplas páginas com background Suporte a escrita Rich-text Suporte PNG Instalação de Moldes personalizados Instalação de moldes criados por usuários Operações padrões de pintura: alinhamento, ordem, rotação e redimensionamento Inclusão de Objetos Externos Pencil Project Funcionalidades

17. Um Wireframe nada mais é do que um esqueleto base de uma interface 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 Pencil Project Wireframe

18. Além de ser uma ferramenta gratuita, o Pencil Project é extremamente útil e muito fácil de usar 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. Pencil Project Porque escolher o Pencil ?

19. Pencil Project

20. Possui um grande alcance, pois o Firefox é o segundo Browser mais utilizado no mundo, com aproximadamente 24% de Market Share É um programa bastante leve (pesa apenas 400 kb) De fácil instalação e com diversas funcionalidades Pencil Project Porque escolher o Pencil ?

21. Pencil Project Firefox: Ferramentas / Pencil Sketching

22. Demonstração