Faculdade de Tecnologia de Sorocaba

Tecnologia em Análise e Desenvolvimento de Sistemas

INTERAÇÃO HUMANO-COMPUTADOR: FERRAMENTAS DE PROTOTIPAÇÃO

ATIVIDADE 10

Prof.º Sergio Moraes

Disciplina: Interação Humano-Computador

Gabriel Jorge Pereira 0030481913015

Gabriel Esnack Bergara da Silva 0030481913016
Felipe Brunetti Campos dos Santos 0030481913012

Sorocaba
Junho/2020
Sumário
1. Introdução 1
2. 10 principais ferramentas de prototipação 2
3. Referências Bibliográficas 17
1. Introdução

Protótipo é uma representação visual do produto que está sendo desenvolvido.

É construído geralmente com os mesmos materiais do produto final e já traz
os mecanismos necessários para o fazer funcionar. Toda a idéia que envolve
a prototipação está voltada para o tempo e o custo de desenvolver algo que
possa ser testado pelos usuários.

Nielsen (1993) define protótipos em duas classificações; Horizontal: Exibe a

interface do usuário sem ter o foco nas funcionalidades por trás dos botões,
demonstrando superficialmente toda a interface. Este tipo de protótipo permite
testar a interface como um todo. Vertical: Tem seu foco nas funcionalidades do
sistema. Possui poucas tarefas, mas funcionalmente aprofundadas. Este tipo
de protótipo permite testar uma pequena parte do sistema.

1
2. 10 principais ferramentas de prototipação
2.1.Adobe Fireworks CS6

O Adobe Fireworks CS6 (Figura 1) oferece, em sua mais recente atualização,

recursos aprimorados de criação de layouts não apenas a sites; agora, o
design e a funcionalidade de aplicativos para mobiles, por exemplo, poderá ser
também melhorado através do uso deste software.

Prototipagem para smartphones e tablets, criação de gráficos vetoriais e

imagens bitmap, mock-ups e a possibilidade de geração de traços em 3D são
as grandes novidades desta tradicional ferramenta dedicada às melhorias
estéticas e funcionais de interfaces digitais.

Figura 1- Disponível em <http://www.pcpro.co.uk/reviews/software/356935/adobe-fireworks-cs5>

Além dessas novas funcionalidades, um sistema dinâmico de extração de
códigos CSS está disponível; elementos como cor, fonte, gradiente e
proporção 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 criação de

2
extensões acessíveis a APIs são outras das propriedades de Adobe Fireworks
CS6.

2.2. Inkscape

O processo criativo pode começar com rabiscos num guardanapo, esboço de

um mapa mental, uma fotografia de um objeto memorável, ou um modelo inicial
num programa que não lhe permite completar o seu projeto. O Inkscape poderá
elevá-lo de um nível principiante a um design de formato profissional pronto
para publicação na Internet ou mesmo em formato físico.

Se é para ser novidade o processo de criação de gráficos vectoriais, este pode

parecer-lhe diferente, mas rapidamente ficará satisfeito com a flexibilidade e
poder que o Inkscape confere. Desenho vectorial é frequentemente preferível
para o desenho de logótipos, ilustrações e arte que requer elevada capacidade
de ser ampliada. A aplicação Inkscape é utilizada numa vasta gama de
indústrias (marketing/imagem de marca, engenharia/Desenho Assistido por
Computador, gráficos web e cartoons), bem como utilizações individuais.

2.2.1. Funcionalidades do Inkscape

2.2.1.1. Criação de Objectos
Desenhar: ferramenta de lápis (desenho à mão levantada com
linhas simples), ferramenta de caneta (criar curvas Bezier e linhas
retas), ferramenta caligráfica (desenho à mão levantada com
linhas com espessura representado traços caligráficos)
Ferramentas de forma: retângulos (podem ter cantos
arredondados), elipses (inclui círculos, arcos, segmentos),
estrelas/polígonos (podem ser arredondados ou aleatórios),
espirais
Ferramenta de texto (texto de múltiplas linhas, total
personalização diretamente no desenho)
Imagens embutidas (com um comando para criar e incluir imagens
de objetos selecionados)
Clones (cópias "vivas" ligadas de objetos), incluindo uma
ferramenta para criar padrões e disposições de clones
2.2.1.2. Manipulação de objetos

3
Transformações (mover, esticar/encolher, rodar, entortar),
tanto interativamente como com valores exatos
Operações de ordenamento em Z (elevar e rebaixar)
Agrupar objetos ("selecionar dentro de grupo" sem desagrupar,
ou "entrar no grupo" tornando-o numa camada temporária)
Camadas (bloquear e/ou esconder camadas individuais, reordená-
las etc.; as camadas podem formar uma árvore hierárquica)
2.2.1.3. Comandos de alinhamento e distribuição
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 múltiplos

pontos de controle
Preenchimento com padrões (mapas de bits/vectores)
Linhas tracejadas, com muitos tipos de linha pré-definidos

Marcadores de linha (marcadores de final e/ou princípio por

exemplo: setas)
2.2.1.4. Operações em linhas
Editor de nódulos: mover nódulos e controladores Bezier, alinhamento
e distribuição de nódulos, etc.
Converter em linha (para textos ou figuras), incluindo converter contorno
em linhas
2.2.1.5. Operações Booleanas
Simplificação de linha, com limite de precisão variável

Linhas paralelas interiores ou exteriores, incluindo objetos

paralelos ligados dinamicamente
Vetorização de mapas de bits (não só a cores como a preto e branco)
Suporte para texto
Texto de múltiplas linhas

Utilização de qualquer fonte de contorno incluindo escrita da direita

para a esquerda.
Sobreposição e afastamento entre caracteres, e ajuste de
espaçamento entre linhas

4
 Texto a longo de curva (o texto e a curva mantêm-se editáveis)
Texto dentro de polígonos (preenchimento segue linha)
Representação
Exibição totalmente suavizada

Suporte para transparências Alpha tanto para exibição como

para exportação de PNG
Completa representação de objetos "enquanto arrasta"
durante transformações interativas
2.3. iPLOTZ

O iPLOTZ é um serviço online para desenvolver protótipos em wireframe bem

como especificações para aplicações em páginas da internet. O programa
reúne diversas opções de forma a facilitar ao máximo o desenvolvimento deste
tipo de projeto. Esta é uma versão gratuita do programa e possui limitação de
inserção para apenas um projeto e até cinco páginas de wireframe.

Este programa requer uma conta de usuário para sua. Para este cadastro
somente é necessário inserir alguns poucos dados e enviar, o que o torna a
conclusão desta fase bem simples e rápida. A ideia de um wireframe para
página da internet ou aplicação, é que o protótipo fique o mais parecido
possível com o produto final, de forma que pareça uma imagem tirada dela já
pronta.

2.3.1. Funções 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 padrão e para
começar um novo projeto, basta clicar em “Create a New Project”.

Uma nova janela será aberta, solicitando informações sobre o projeto a ser
criado, como seu nome, estado (ativo/inativo), data inicial e final, descrição,
tags, se ele será público ou apenas para membros e, por último, é possível
adicionar pessoas ao grupo do projeto digitando seus e-mails e clicando no
botão para confirmar.

5
Feito isto basta acessar o ícone do projeto criado (ao lado da função para criá-
lo) e em seguida escolher a opção Wireframe. A interface que passa a ser
exibida a partir desta operação 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 opções para imprimir, salvar, importar,
colar, fazer anotações, entre outras.

Figura 2 - Disponível em <http://konigi.com/notebook/iplotz-wireframing-service>

No lado direito, há uma série de objetos para você adicionar por meio de “clica
e arrasta” como painéis dinâmicos, menus, painel de texto, imagem, hyperlink,
retângulo, botão, tabelas, campos de texto, áreas de texto, caixa de seleção,
listas verticais, linhas, molduras, entre outras. Há duas categorias para estas
ferramentas: iPhone e Web & Application.

Para inserir um texto dentro das opções cabíveis, 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
criação do wireframe com três estilos de esquema de cores: janela do
Windows, do Mac ou desenhado à mão.

2.4. iPLOTZ

6
Seja no desenvolvimento, apresentação ou documentação de um software,
sempre precisamos pensar em como o usuário trabalhará com ele. Assim
sendo, torna-se necessário 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 à disposição do desenvolvedor todas as ferramentas
necessárias, tais como caixasdrop-down, listas de combinação, botões e
demais elementos que geralmente compõem a tela de um software.

Figura 3 - Disponível em <http://www.telechargeplus.com/windows/mockupscreens/>

É interessante salientar que o programa pode não só salvar as telas em seu
formato proprietário, para edição posterior, mas também pode exportá-las nos
formatos PDF, XML ou HTML, permitindo assim que sejam utilizadas em
diversos projetos e aplicações.

2.5. Serena Prototype Composer

Serena Prototype Composer ajuda você com rapidez e precisão simular como
um aplicativo vai olhar e função sem escrever qualquer código (Figura 4).

Serena Prototype Composer Community Edition permite aos usuários

trabalhar com um projeto de amostra e um projeto definido pelo usuário.

7
Figura 4 - Disponível 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 são feitos planejamentos, que nada mais são do que
rascunhos de como deve ser um programa finalizado. Em resumo, o Pencil
Project é uma aplicação que funciona dentro do Firefox e permite montar
projetos de interfaces gráficas como mostrado abaixo (Figura 5).

8
Figura 5 - Disponível 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 começar um projeto, clique em "Document" e selecione "New
Document". O espaço de trabalho é aberto no lado direito da tela e se divide
em várias 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 divisão é bastante
simples e direta, com formas comuns, anotações e objetos para web.
Linguagens e sistemas também têm seus grupos com widgets, como é o caso
do GTK+ e Windows XP. Você deve encontrar também o "Sketchy GUI", que
dá um ar de rascunho para o projeto.

Usando os elementos e salvando o projeto (Figura 6)

9
Figura 6 - Disponível 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. É
possível utilizar as configurações no topo da tela para personalizar a fonte e o
modo de apresentação.

Ao selecionar um objeto, diversas opções do topo da tela podem auxiliá-lo a

organizar seu trabalho, pois você pode alinhar tudo de maneiras específicas,
assim como modificar o tamanho com a precisão de pixels. As cores também
podem ser modificadas pelos botões do canto superior direito. Além disso,
diversas configurações são obtidas quando se clica com o botão 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 criação de interfaces com o usuário por meio
da interação informal , como desenhar (Figura 7).

10
Figura 7 - Disponível em <http://dub.washington.edu:2007/denim/research/>

DENIM é uma consequência do projeto de seda original, uma ferramenta de

desenhar com caneta para desenhar interfaces de usuário. SILK combina
muitas das vantagens de em papel esboçar com ferramentas de prototipagem
eletrônicos existentes. Ele permite que os designers para esboçar rapidamente
uma interface usando um pad eletrônico e caneta. SILK preserva as
propriedades importantes de lápis e papel: um esboço pode ser produzido de
forma rápida e meio é flexível. No entanto, ao contrário de um esboço de papel,
este esboço eletrônico é interativo e pode facilmente ser anotados e
modificados usando edição de gestos. SILK permite que o designer para
estender a interatividade dos widgets (Figura 8) reconhecidos usando
storyboards (veja abaixo):

11
Figura 8 - Disponível em <http://dub.washington.edu:2007/denim/research/>

Através de um estudo da prática de web design do site, observamos que a

Web designers locais de design em diferentes níveis de refinamento - mapa do
site, storyboard, e página individual - e que esboço projetistas em todos os
níveis durante os estágios iniciais do projeto. No entanto, ferramentas de web
design existentes não suportam essas tarefas muito bem. Informado por estas
observações, criamos DENIM, um sistema que ajuda designers web site nos
estágios iniciais do projeto. DENIM suporta entrada de esboço, permite o
desenho em diferentes níveis de refinamento, e unifica os níveis através de
zoom. Foi realizada uma avaliação 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 móveis. É fácil de aprender
e usar, e vem com muitas opções.

12
FlairBuilder vem com muitos stencils (Figura 9). Mas você também pode
reutilizar componentes de outros projetos e simplesmente drag'n'drop-los
em seus novos projetos.

Figura 9 - Disponível em <http://flairbuilder.co/features>

Isto torna incrivelmente fácil de criar bibliotecas de componentes reutilizáveis.

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 esforço que eles permitem que os usuários para
testar a experiência do usuário e processos de negócio subjacentes no mesmo
espaço. 10Screens é um software desenvolvido pela Bizosys Technologies
Pvt. Ltd., criado para simplificar a comunicação em torno do desenvolvimento
de software. 10Screens está posicionado para criar requisitos de negócio
robustos muito mais cedo, quando as necessidades do negócio estão sendo
articuladas. Se a ideia do usuário é direcionada para aplicativos móveis,
10Screens pode simular o Windows Mobile, Android, iPhone, sem qualquer
instalação e se a ideia envolve um processo, então ele cria diagramas de fluxo
com formulários web relacionados e outras páginas que demonstram
aplicações web ricas. Uma característica importante é que 10screens não
requer habilidades especiais ou quaisquer instalações. 10Screens pode ser
usado por usuários não- técnicos, incluindo analista de negócios / gestores,
designers de experiência do usuário
13
e os dados de criadores de interface do usuário também seria muito seguro,
uma vez que está hospedado por um muito confiável centro de dados; o nível
de segurança é a par com que a Amazônia. Existem alguns esquemas de
preços, assim que incluem um plano básico, plano plus, um plano premium e
um plano profissional. Os preços variam de modestos US $ 11 por mês para
US $ 249 por mês 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 diário de
backup, sem aborrecimentos de manutenção do servidor, sem
provisionamento de servidores ou instalação, 10screens é um produto que veio
para ficar.

2.10. 10screens
O Microsoft Expression Studio (Figura 10) eleva o nível de suas possibilidades
criativas. As ferramentas de design profissionais e as tecnologias inovadoras
oferecem flexibilidade e liberdade para transformar suas idéias em realidade.
Os seguintes produtos estão incluídos: Expression Web, Expression Blend,
Expression Design, Expression Media e Codificador do Expression. Quer você
esteja criando sites baseados em padrões, produzindo experiências de usuário
sofisticadas de área de trabalho ou Silverlight ou gerenciando ativos e
conteúdos digitais, o Expression Studio tem o que você precisa.

14
Figura 10 - Disponível em <http://www.pcpro.co.uk/reviews/software/362068/microsoft-expression-studio-4-
ultimate>
15
Conclusão
No nosso caso, desenvolvedores de software, a Prototipação (ou modelo
Evolutivo) é classificada como um Modelo de Processo de Software. Ou seja,
ela determina a maneira precisa de como serão as atividades e dinâmicas de
criação do software. De acordo com o modelo, por exemplo, é necessário que
o desenvolvedor e o cliente tracem as regras no início.

Para o desenvolvedor com fome de codificar, parar para prototipar pode se

tornar uma ação tediosa, parecendo não haver utilidade, pois pra que
retrabalho onde poderia já iniciar com a programação, que é aquilo que sabe
e gosta de fazer?

Porém, considerando que cliente nunca sabe o que quer e nunca está errado,
o desenvolvimento de protótipo traz uma segurança de que o produto/sistema
será (ou deveria ser) da forma que foi documentada e avaliada por ambos.

16
3. Referências Bibliográficas

10Screens – PowerPoint for App Mobile, Disponível em

<http://www.10screens.com/>, acesso em 15 de junho de
2020

Adobe Firewors Download, Disponível em

<http://www.baixaki.com.br/download/adobe-fireworks-cs6.htm>, acesso em
15 de junho de 2020

Conheça o iPLOTZ FREE, Disponível em,

<http://www.baixaki.com.br/download/iplotz-free.htm>, acesso em 15 de
junho de 2020

DUB: DENIM and SILK, Disponível em

<http://dub.washington.edu:2007/denim/research/>, acesso em 15 de junho de
2020

FlairBuilder – Wireframes, Mockups and Prototypes, Disponível

em <http://flairbuilder.co/>, acesso em 15 de junho de 2020

Inkscape Funcionalidade e performance, Disponível em

<http://www.inkscape.org/pt/acerca-de/funcionalidades/>, acesso em 15
de junho de 2020

Microsoft Student – Expression Studio: aumente o nível da sua criatividade,

disponível em <http://www.microsoft.com/student/pt/br/learn/expression-
studio.aspx>, acesso em 15 de junho de 2020

Mockup Screens – Fatures and screenshots, Disponível em

<http://www.mockupscreens.com/index.php?page=Screen-Prototypes>,
acesso em 15 de junho de 2020

NIELSEN, JAKOB; Usability Engineering. Morgan Kaufmann; 1

edition (September 23, 1993), 362 p.

17