/

Uma visão sobre a ferramenta Pencil para Design de Interfaces

Rafael de Souza Queiroz – 09/0012569 – 03/04/2012

Interação Humano Computador - Ferramenta Pencil - Rafael Queiroz - 09/0012569

2

O que é?• Ferramenta para projeto de interfaces

gerais para usuários;• Protótipos, diagramas;• Livre e de código aberto (Javascript, XUL e

SVG);• Intuitiva, simples e leve;

Interação Humano Computador - Ferramenta Pencil - Rafael Queiroz - 09/0012569

3

Plataformas• Inicialmente projetada com plugin para

o browser Mozilla Firefox;• Versão standalone disponível para

Linux e Windows e MacOS X;• Versão Portátil experimental pelo site

PortableApps.com;Desenvolvido utilizando a engine do

Firefox;Complemento de 1.8 Mb

Interação Humano Computador - Ferramenta Pencil - Rafael Queiroz - 09/0012569

4

Tela Inicial

Interação Humano Computador - Ferramenta Pencil - Rafael Queiroz - 09/0012569

5

Tela Inicial (Firefox)

Interação Humano Computador - Ferramenta Pencil - Rafael Queiroz - 09/0012569

6

Características• Interconexão entre protótipos de tela;• Editor de texto;• Exportação para HTML, Microsoft Word,

OpenOffice, PNG e PDF;• Instalações de stencils, e modelos

definidos pelo usuário;• Coleção pessoal, Objetos externos,

ClipArt;

Interação Humano Computador - Ferramenta Pencil - Rafael Queiroz - 09/0012569

7

Características• Tutoriais no site do fabricante

http://pencil.evolus.vn/en-US/UserGuides.aspx

• Uso “Drag & Drop”;

• Elementos Comuns, Web, Simplificados para protótipo, Linux, Windows e Nativos da ferramenta.

Interação Humano Computador - Ferramenta Pencil - Rafael Queiroz - 09/0012569

8

Interação Humano Computador - Ferramenta Pencil - Rafael Queiroz - 09/0012569

9

Interação Humano Computador - Ferramenta Pencil - Rafael Queiroz - 09/0012569

10

Interação Humano Computador - Ferramenta Pencil - Rafael Queiroz - 09/0012569

11

Interação Humano Computador - Ferramenta Pencil - Rafael Queiroz - 09/0012569

12

Interação Humano Computador - Ferramenta Pencil - Rafael Queiroz - 09/0012569

13

Exemplo PráticoObrigado