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últiplas plataformas, quando comprada, e online, enquanto free;

• Substitui o esboço antes feito em papel.

Balsamiq

Apresentação

• 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

Balsamiq

A interface

Balsamiq

Os componentes

• São 75 tipos de controles e 150 tipos de ícones previamente instalados.

• 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 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;

Demonstração

Pencil Project

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

É 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

Pencil Project

Pencil Project

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

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

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.

Pencil Project

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

Pencil Project

Firefox: Ferramentas / Pencil Sketching

Demonstração