balsamiq e pencil - w
DESCRIPTION
TRANSCRIPT
![Page 1: Balsamiq e Pencil - W](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c3a0ae4a79596c758b458b/html5/thumbnails/1.jpg)
Balsamiq Mockups
&Pencil Project
Filippe Siqueira e Juliana Serpes
![Page 2: Balsamiq e Pencil - W](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c3a0ae4a79596c758b458b/html5/thumbnails/2.jpg)
Balsamiq
![Page 3: Balsamiq e Pencil - W](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c3a0ae4a79596c758b458b/html5/thumbnails/3.jpg)
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
![Page 4: Balsamiq e Pencil - W](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c3a0ae4a79596c758b458b/html5/thumbnails/4.jpg)
• 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
![Page 5: Balsamiq e Pencil - W](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c3a0ae4a79596c758b458b/html5/thumbnails/5.jpg)
Balsamiq
A interface
![Page 6: Balsamiq e Pencil - W](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c3a0ae4a79596c758b458b/html5/thumbnails/6.jpg)
Balsamiq
Os componentes
• São 75 tipos de controles e 150 tipos de ícones previamente instalados.
![Page 7: Balsamiq e Pencil - W](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c3a0ae4a79596c758b458b/html5/thumbnails/7.jpg)
• Atalhos facilitam a procura por controles;
Balsamiq
Características
![Page 8: Balsamiq e Pencil - W](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c3a0ae4a79596c758b458b/html5/thumbnails/8.jpg)
• Inspetores de propriedades sempre perto, mas nunca no caminho;
Balsamiq
Características
![Page 9: Balsamiq e Pencil - W](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c3a0ae4a79596c758b458b/html5/thumbnails/9.jpg)
• 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;
![Page 10: Balsamiq e Pencil - W](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c3a0ae4a79596c758b458b/html5/thumbnails/10.jpg)
Demonstração
![Page 11: Balsamiq e Pencil - W](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c3a0ae4a79596c758b458b/html5/thumbnails/11.jpg)
Pencil Project
![Page 12: Balsamiq e Pencil - W](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c3a0ae4a79596c758b458b/html5/thumbnails/12.jpg)
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
![Page 13: Balsamiq e Pencil - W](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c3a0ae4a79596c758b458b/html5/thumbnails/13.jpg)
É 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
![Page 14: Balsamiq e Pencil - W](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c3a0ae4a79596c758b458b/html5/thumbnails/14.jpg)
Pencil Project
![Page 15: Balsamiq e Pencil - W](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c3a0ae4a79596c758b458b/html5/thumbnails/15.jpg)
Pencil Project
![Page 16: Balsamiq e Pencil - W](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c3a0ae4a79596c758b458b/html5/thumbnails/16.jpg)
Pencil Project
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
Funcionalidades
![Page 17: Balsamiq e Pencil - W](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c3a0ae4a79596c758b458b/html5/thumbnails/17.jpg)
Pencil Project
Wireframe
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
![Page 18: Balsamiq e Pencil - W](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c3a0ae4a79596c758b458b/html5/thumbnails/18.jpg)
Pencil Project
Porque escolher o Pencil ?
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.
![Page 19: Balsamiq e Pencil - W](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c3a0ae4a79596c758b458b/html5/thumbnails/19.jpg)
Pencil Project
![Page 20: Balsamiq e Pencil - W](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c3a0ae4a79596c758b458b/html5/thumbnails/20.jpg)
Pencil Project
Porque escolher o Pencil ?
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
![Page 21: Balsamiq e Pencil - W](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c3a0ae4a79596c758b458b/html5/thumbnails/21.jpg)
Pencil Project
Firefox: Ferramentas / Pencil Sketching
![Page 22: Balsamiq e Pencil - W](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c3a0ae4a79596c758b458b/html5/thumbnails/22.jpg)
Demonstração