Faculdade de Tecnologia de Sorocaba

Tecnologia em Anlise e Desenvolvimento de Sistemas

INTERAO HUMANO-COMPUTADOR: FERRAMENTAS DE
PROTOTIPAO

ATIVIDADE 10





Prof. Sergio Moraes
Disciplina: Interao Humano-Computador

JEREMIAS PEREIRA 0030481311023




Sorocaba
Maio/2014
Sumrio
1. Introduo .......................................................................................................................... 1
2. 10 principais ferramentas de prototipao ............................................................... 2
3. Referncias Bibliogrficas ........................................................................................... 17


1

1. Introduo
Prottipo uma representao visual do produto que est sendo desenvolvido.
construdo geralmente com os mesmos materiais do produto final e j traz os
mecanismos necessrios para o fazer funcionar. Toda a idia que envolve a
prototipao est voltada para o tempo e o custo de desenvolver algo que
possa ser testado pelos usurios.
Nielsen (1993) define prottipos em duas classificaes; Horizontal: Exibe a
interface do usurio sem ter o foco nas funcionalidades por trs dos botes,
demonstrando superficialmente toda a interface. Este tipo de prottipo permite
testar a interface como um todo. Vertical: Tem seu foco nas funcionalidades do
sistema. Possui poucas tarefas, mas funcionalmente aprofundadas. Este tipo
de prottipo permite testar uma pequena parte do sistema.


2

2. 10 principais ferramentas de prototipao
2.1. Adobe Fireworks CS6
O Adobe Fireworks CS6 (Figura 1) oferece, em sua mais recente atualizao,
recursos aprimorados de criao de layouts no apenas a sites; agora, o
design e a funcionalidade de aplicativos para mobiles, por exemplo, poder ser
tambm melhorado atravs do uso deste software.
Prototipagem para smartphones e tablets, criao de grficos vetoriais e
imagens bitmap, mock-ups e a possibilidade de gerao de traos em 3D so
as grandes novidades desta tradicional ferramenta dedicada s melhorias
estticas e funcionais de interfaces digitais.
Figura 1- Disponvel em <http://www.pcpro.co.uk/reviews/software/356935/adobe-fireworks-cs5>
Alm dessas novas funcionalidades, um sistema dinmico de extrao de
cdigos CSS est disponvel; elementos como cor, fonte, gradiente e proporo
podem ser agora copiados diretamente planilha de trabalho de editores
HTML (como o Adobe Dreamweaver CS6). Uma nova jQuery Mobile,
performance otimizada de uso de ferramentas e a possibilidade de criao de
3

extenses acessveis a APIs so outras das propriedades de Adobe Fireworks
CS6.
2.2. Inkscape
O processo criativo pode comear com rabiscos num guardanapo, esboo de
um mapa mental, uma fotografia de um objeto memorvel, ou um modelo inicial
num programa que no lhe permite completar o seu projeto. O Inkscape poder
elev-lo de um nvel principiante a um design de formato profissional pronto
para publicao na Internet ou mesmo em formato fsico.
Se para ser novidade o processo de criao de grficos vectoriais, este pode
parecer-lhe diferente, mas rapidamente ficar satisfeito com a flexibilidade e
poder que o Inkscape confere. Desenho vectorial frequentemente prefervel
para o desenho de logtipos, ilustraes e arte que requer elevada capacidade
de ser ampliada. A aplicao Inkscape utilizada numa vasta gama de
indstrias (marketing/imagem de marca, engenharia/Desenho Assistido por
Computador, grficos web e cartoons), bem como utilizaes individuais.
2.2.1. Funcionalidades do Inkscape
2.2.1.1. Criao de Objectos
Desenhar: ferramenta de lpis (desenho mo levantada com linhas
simples), ferramenta de caneta (criar curvas Bezier e linhas retas),
ferramenta caligrfica (desenho mo levantada com linhas com
espessura representado traos caligrficos)
Ferramentas de forma: retngulos (podem ter cantos arredondados),
elipses (inclui crculos, arcos, segmentos), estrelas/polgonos (podem
ser arredondados ou aleatrios), espirais
Ferramenta de texto (texto de mltiplas linhas, total personalizao
diretamente no desenho)
Imagens embutidas (com um comando para criar e incluir imagens de
objetos selecionados)
Clones (cpias "vivas" ligadas de objetos), incluindo uma ferramenta
para criar padres e disposies de clones
2.2.1.2. Manipulao de objetos
4

Transformaes (mover, esticar/encolher, rodar, entortar), tanto
interativamente como com valores exatos
Operaes de ordenamento em Z (elevar e rebaixar)
Agrupar objetos ("selecionar dentro de grupo" sem desagrupar, ou
"entrar no grupo" tornando-o numa camada temporria)
Camadas (bloquear e/ou esconder camadas individuais, reorden-las
etc.; as camadas podem formar uma rvore hierrquica)
2.2.1.3. Comandos de alinhamento e distribuio
Preenchimento e Contorno
Seletor de cor (RGB, HSL, roda de cores)
Ferramenta de indicador de cores
Copiar/Colar estilo
Um editor de gradientes capaz de criar gradientes com mltiplos pontos
de controle
Preenchimento com padres (mapas de bits/vectores)
Linhas tracejadas, com muitos tipos de linha pr-definidos
Marcadores de linha (marcadores de final e/ou princpio por exemplo:
setas)
2.2.1.4. Operaes em linhas
Editor de ndulos: mover ndulos e controladores Bezier, alinhamento e
distribuio de ndulos, etc.
Converter em linha (para textos ou figuras), incluindo converter contorno
em linhas
2.2.1.5. Operaes Booleanas
Simplificao de linha, com limite de preciso varivel
Linhas paralelas interiores ou exteriores, incluindo objetos paralelos
ligados dinamicamente
Vetorizao de mapas de bits (no s a cores como a preto e branco)
Suporte para texto
Texto de mltiplas linhas
Utilizao de qualquer fonte de contorno incluindo escrita da direita para
a esquerda.
Sobreposio e afastamento entre caracteres, e ajuste de espaamento
entre linhas
5

Texto a longo de curva (o texto e a curva mantm-se editveis)
Texto dentro de polgonos (preenchimento segue linha)
Representao
Exibio totalmente suavizada
Suporte para transparncias Alpha tanto para exibio como para
exportao de PNG
Completa representao de objetos "enquanto arrasta" durante
transformaes interativas
2.3. iPLOTZ
O iPLOTZ um servio online para desenvolver prottipos em wireframe bem
como especificaes para aplicaes em pginas da internet. O programa
rene diversas opes de forma a facilitar ao mximo o desenvolvimento deste
tipo de projeto. Esta uma verso gratuita do programa e possui limitao de
insero para apenas um projeto e at cinco pginas de wireframe.
Este programa requer uma conta de usurio para sua. Para este cadastro
somente necessrio inserir alguns poucos dados e enviar, o que o torna a
concluso desta fase bem simples e rpida. A ideia de um wireframe para
pgina da internet ou aplicao, que o prottipo fique o mais parecido
possvel com o produto final, de forma que parea uma imagem tirada dela j
pronta.
2.3.1. Funes do programa
A interface do programa relativamente simples, especialmente se voc j fez
uso de ferramentas para criar projetos do tipo clica e arrasta. O programa
opera a partir de uma janela de seu navegador de internet padro e para
comear um novo projeto, basta clicar em Create a New Project.
Uma nova janela ser aberta, solicitando informaes sobre o projeto a ser
criado, como seu nome, estado (ativo/inativo), data inicial e final, descrio,
tags, se ele ser pblico ou apenas para membros e, por ltimo, possvel
adicionar pessoas ao grupo do projeto digitando seus e-mails e clicando no
boto para confirmar.
6

Feito isto basta acessar o cone do projeto criado (ao lado da funo para cri-
lo) e em seguida escolher a opo Wireframe. A interface que passa a ser
exibida a partir desta operao est bem dividida (Figura 2), sendo exibido no
centro um painel para que voc monte seus projetos. Acima dele existe uma
pequena barra de ferramentas com opes para imprimir, salvar, importar,
colar, fazer anotaes, entre outras.
Figura 2 - Disponvel em <http://konigi.com/notebook/iplotz-wireframing-service>

No lado direito, h uma srie de objetos para voc adicionar por meio de clica
e arrasta como painis dinmicos, menus, painel de texto, imagem, hyperlink,
retngulo, boto, tabelas, campos de texto, reas de texto, caixa de seleo,
listas verticais, linhas, molduras, entre outras. H duas categorias para estas
ferramentas: iPhone e Web & Application.
Para inserir um texto dentro das opes cabveis, basta um duplo clique do
mouse sobre o objeto. Se voc necessitar excluir alguma das figuras criadas
s clicar sobre ela e utilizar a tecla delete do teclado. O iPLOTZ permite a
criao do wireframe com trs estilos de esquema de cores: janela do
Windows, do Mac ou desenhado mo.
2.4. iPLOTZ
7

Seja no desenvolvimento, apresentao ou documentao de um software,
sempre precisamos pensar em como o usurio trabalhar com ele. Assim
sendo, torna-se necessrio desenhar as telas dos programas para facilitar o
seu uso e apresentar adequadamente suas funcionalidades.
O Mockup Screens um software projetado para desenhar telas completas
(Figura 3), deixando disposio do desenvolvedor todas as ferramentas
necessrias, tais como caixasdrop-down, listas de combinao, botes e
demais elementos que geralmente compem a tela de um software.
Figura 3 - Disponvel em <http://www.telechargeplus.com/windows/mockupscreens/>

interessante salientar que o programa pode no s salvar as telas em seu
formato proprietrio, para edio posterior, mas tambm pode export-las nos
formatos PDF, XML ou HTML, permitindo assim que sejam utilizadas em
diversos projetos e aplicaes.
2.5. Serena Prototype Composer
Serena Prototype Composer ajuda voc com rapidez e preciso simular como
um aplicativo vai olhar e funo sem escrever qualquer cdigo (Figura 4).
Serena Prototype Composer Community Edition permite aos usurios trabalhar
com um projeto de amostra e um projeto definido pelo usurio.
8

Figura 4 - Disponvel em <http://serena-prototype-composer-2008.software.informer.com/screenshot/196746/>


2.6. Pencil Project
Uma coisa mais do que um fato: nem todo programador obrigado a
entender o que os designers fazem e vice-versa. por isso que comum
acontecerem diversos problemas na hora de desenvolver o produto final de um
aplicativo, pois aliar funcionalidade ao visual extremamente importante.
por isso que antes so feitos planejamentos, que nada mais so do que
rascunhos de como deve ser um programa finalizado. Em resumo, o Pencil
Project uma aplicao que funciona dentro do Firefox e permite montar
projetos de interfaces grficas como mostrado abaixo (Figura 5).
9

Figura 5 - Disponvel em <http://www.baixaki.com.br/download/pencil-project.htm>

Monte sua interface
O programa pode ser acessado no Mozilla Firefox em Ferramentas > Pencil
Sketching. Para comear um projeto, clique em "Document" e selecione "New
Document". O espao de trabalho aberto no lado direito da tela e se divide
em vrias abas (localizadas no topo). Voc pode renomear e modificar
atributos, como tamanho e cor de fundo, ao dar um duplo clique sobre a aba.
No lado esquerdo, voc encontra um menu chamado "Collections", com todos
os elementos que podem ajud-lo a montar a interface. A diviso bastante
simples e direta, com formas comuns, anotaes e objetos para web.
Linguagens e sistemas tambm tm seus grupos com widgets, como o caso
do GTK+ e Windows XP. Voc deve encontrar tambm o "Sketchy GUI", que
d um ar de rascunho para o projeto.
Usando os elementos e salvando o projeto (Figura 6)
10

Figura 6 - Disponvel em <http://www.baixaki.com.br/download/pencil-project.htm>

Voc pode arrastar qualquer elemento para dentro do projeto de maneira livre.
A maioria dos recursos permite modificar seu tamanho e rotacion-lo. No caso
de um objeto ter qualquer tipo de texto, basta um duplo clique para edit-lo.
possvel utilizar as configuraes no topo da tela para personalizar a fonte e o
modo de apresentao.
Ao selecionar um objeto, diversas opes do topo da tela podem auxili-lo a
organizar seu trabalho, pois voc pode alinhar tudo de maneiras especficas,
assim como modificar o tamanho com a preciso de pixels. As cores tambm
podem ser modificadas pelos botes do canto superior direito. Alm disso,
diversas configuraes so obtidas quando se clica com o boto direito do
mouse sobre qualquer coisa no projeto.
2.7. DENIM
O Projeto DENIM, liderada pelo professor James Landay , est focada na
pesquisa de ferramentas para a criao de interfaces com o usurio por meio
da interao informal , como desenhar (Figura 7).
11

Figura 7 - Disponvel em <http://dub.washington.edu:2007/denim/research/>

DENIM uma consequncia do projeto de seda original, uma ferramenta de
desenhar com caneta para desenhar interfaces de usurio. SILK combina
muitas das vantagens de em papel esboar com ferramentas de prototipagem
eletrnicos existentes. Ele permite que os designers para esboar rapidamente
uma interface usando um pad eletrnico e caneta. SILK preserva as
propriedades importantes de lpis e papel: um esboo pode ser produzido de
forma rpida e meio flexvel. No entanto, ao contrrio de um esboo de papel,
este esboo eletrnico interativo e pode facilmente ser anotados e
modificados usando edio de gestos. SILK permite que o designer para
estender a interatividade dos widgets (Figura 8) reconhecidos usando
storyboards (veja abaixo):
12

Figura 8 - Disponvel em <http://dub.washington.edu:2007/denim/research/>

Atravs de um estudo da prtica de web design do site, observamos que a
Web designers locais de design em diferentes nveis de refinamento - mapa do
site, storyboard, e pgina individual - e que esboo projetistas em todos os
nveis durante os estgios iniciais do projeto. No entanto, ferramentas de web
design existentes no suportam essas tarefas muito bem. Informado por estas
observaes, criamos DENIM, um sistema que ajuda designers web site nos
estgios iniciais do projeto. DENIM suporta entrada de esboo, permite o
desenho em diferentes nveis de refinamento, e unifica os nveis atravs de
zoom. Foi realizada uma avaliao informal com sete designers profissionais e
descobriu que eles reagiram positivamente ao conceito e estavam interessados
em usar esse sistema em seu trabalho.
2.8. FlairBuilder
FlairBuilder uma ferramenta de prototipagem que permite criar wireframes
interativos para sites e aplicativos mveis. fcil de aprender e usar, e vem
com muitas opes.
13

FlairBuilder vem com muitos stencils (Figura 9). Mas voc tambm pode
reutilizar componentes de outros projetos e simplesmente drag'n'drop-los em
seus novos projetos.
Figura 9 - Disponvel em <http://flairbuilder.co/features>

Isto torna incrivelmente fcil de criar bibliotecas de componentes reutilizveis.
Manter um conjunto de componentes e estilos de toda a empresa e convidar a
todos para contribuir.
2.9. 10screens
Muitos desenvolver produtos que pretendem dar uma resposta a uma das
perguntas, mas muito poucos conseguem resistir ao teste do tempo e
sustentar. 10screens um tal esforo que eles permitem que os usurios para
testar a experincia do usurio e processos de negcio subjacentes no mesmo
espao. 10Screens um software desenvolvido pela Bizosys Technologies Pvt.
Ltd., criado para simplificar a comunicao em torno do desenvolvimento de
software. 10Screens est posicionado para criar requisitos de negcio robustos
muito mais cedo, quando as necessidades do negcio esto sendo articuladas.
Se a ideia do usurio direcionada para aplicativos mveis, 10Screens pode
simular o Windows Mobile, Android, iPhone, sem qualquer instalao e se a
ideia envolve um processo, ento ele cria diagramas de fluxo com formulrios
web relacionados e outras pginas que demonstram aplicaes web ricas. Uma
caracterstica importante que 10screens no requer habilidades especiais ou
quaisquer instalaes. 10Screens pode ser usado por usurios no- tcnicos,
incluindo analista de negcios / gestores, designers de experincia do usurio
14

e os dados de criadores de interface do usurio tambm seria muito seguro,
uma vez que est hospedado por um muito confivel centro de dados; o nvel
de segurana a par com que a Amaznia. Existem alguns esquemas de
preos, assim que incluem um plano bsico, plano plus, um plano premium e
um plano profissional. Os preos variam de modestos US $ 11 por ms para
US $ 249 por ms com um teste gratuito de 30 dias com cada plan.10screens
parece ser um produto muito conveniente e isso que tem possibilitado o
produto para sustentar e crescer. Com recursos como mecanismo dirio de
backup, sem aborrecimentos de manuteno do servidor, sem provisionamento
de servidores ou instalao, 10screens um produto que veio para ficar.
2.10. 10screens
O Microsoft Expression Studio (Figura 10) eleva o nvel de suas possibilidades
criativas. As ferramentas de design profissionais e as tecnologias inovadoras
oferecem flexibilidade e liberdade para transformar suas idias em realidade.
Os seguintes produtos esto includos: Expression Web, Expression Blend,
Expression Design, Expression Media e Codificador do Expression. Quer voc
esteja criando sites baseados em padres, produzindo experincias de usurio
sofisticadas de rea de trabalho ou Silverlight ou gerenciando ativos e
contedos digitais, o Expression Studio tem o que voc precisa.
15

Figura 10 - Disponvel em <http://www.pcpro.co.uk/reviews/software/362068/microsoft-expression-studio-4-
ultimate>

16

Concluso
No nosso caso, desenvolvedores de software, a Prototipao (ou modelo
Evolutivo) classificada como um Modelo de Processo de Software. Ou seja,
ela determina a maneira precisa de como sero as atividades e dinmicas de
criao do software. De acordo com o modelo, por exemplo, necessrio que
o desenvolvedor e o cliente tracem as regras no incio.
Para o desenvolvedor com fome de codificar, parar para prototipar pode se
tornar uma ao tediosa, parecendo no haver utilidade, pois pra que
retrabalho onde poderia j iniciar com a programao, que aquilo que sabe e
gosta de fazer?
Porm, considerando que cliente nunca sabe o que quer e nunca est errado, o
desenvolvimento de prottipo traz uma segurana de que o produto/sistema
ser (ou deveria ser) da forma que foi documentada e avaliada por ambos.
17

3. Referncias Bibliogrficas

10Screens PowerPoint for App Mobile, Disponvel em
<http://www.10screens.com/>, acesso em 19 de maio de 2014
Adobe Firewors Download, Disponvel em
<http://www.baixaki.com.br/download/adobe-fireworks-cs6.htm>, acesso em 15
de maio de 2014
Conhea o iPLOTZ FREE, Disponvel em,
<http://www.baixaki.com.br/download/iplotz-free.htm>, acesso em 15 de maio
de 2014
DUB: DENIM and SILK, Disponvel em
<http://dub.washington.edu:2007/denim/research/>, acesso em 15 de maio de
2014
FlairBuilder Wireframes, Mockups and Prototypes, Disponvel em
<http://flairbuilder.co/>, acesso em 19 de maio de 2014
Inkscape Funcionalidade e performance, Disponvel em
<http://www.inkscape.org/pt/acerca-de/funcionalidades/>, acesso em 15 de
maio de 2014
Microsoft Student Expression Studio: aumente o nvel da sua criatividade,
disponvel em <http://www.microsoft.com/student/pt/br/learn/expression-
studio.aspx>, acesso em 19 de maio de 2014
Mockup Screens Fatures and screenshots, Disponvel em
<http://www.mockupscreens.com/index.php?page=Screen-Prototypes>, acesso
em 18 de maio de 2014
NIELSEN, JAKOB; Usability Engineering. Morgan Kaufmann; 1 edition
(September 23, 1993), 362 p.