Design para Dispositivos Móveis apostila 3

Prévia do material em texto

Ariel da Silva Dias
E-book 1E-book 3
DESIGN PARA 
DISPOSITIVOS 
MÓVEIS
Neste E-Book:
INTRODUÇÃO ����������������������������������������������������������� 3
DESENVOLVIMENTO MOBILE �����������������������������4
Plataformas de desenvolvimento mobile ���������������������������� 4
Ambiente de Desenvolvimento Integrado (IDE) ����������������������8
Criação de protótipos funcionais �������������������������������������������18
PhoneGap ��������������������������������������������������������������������������30
CONSIDERAÇÕES FINAIS ����������������������������������� 33
REFERÊNCIAS BIBLIOGRÁFICAS & 
CONSULTADAS ������������������������������������������������������� 35
2
INTRODUÇÃO
As principais plataformas móveis que precisam de 
suporte são três: Android, iOS e HTML5. O desafio é 
o fato de que essas plataformas são muito diferen-
tes em sua entrega� Desse modo, precisamos, antes 
de desenvolver nosso aplicativo, compreender se 
vamos desenvolver para uma plataforma específica 
(aplicativos nativos) ou vamos desenvolver simulta-
neamente para todas as plataformas (aplicativos de 
plataformas cruzadas ou híbridos)�
Há anos tem havido um número crescente de empre-
sas de software em busca de uma solução mágica 
que forneça a uma equipe de entrega as ferramen-
tas necessárias para se construir aplicativos para 
qualquer plataforma em um ambiente de desenvol-
vimento integrado, ou IDE�
Neste e-book conheceremos os conceitos de pla-
taformas nativas, cruzadas e plataformas web� 
Também conheceremos os ambientes de desen-
volvimento, os protótipos funcionais de baixa e alta 
fidelidade e como aplicá-los em nosso projeto.
3
DESENVOLVIMENTO 
MOBILE
Ano após ano, um número crescente de empresas 
está começando a perceber que, ao se orientar com 
as necessidades de seus clientes, podem aproveitar 
mais oportunidades, para seu próprio ganho� Uma 
dessas oportunidades é a demanda por aplicativos 
móveis com informações sobre sua empresa, sejam 
detalhes operacionais da empresa ou até mesmo a 
criação de lojas virtuais.
O crescimento por desenvolvimento de aplicativos 
para dispositivos móveis está acelerado e muitas em-
presas estão adotando pelo menos uma plataforma 
de desenvolvimento de aplicativos móveis para sua 
estratégia de transformação de negócios digitais.
Com o surgimento de dispositivos como smartpho-
nes, tablets e wearables – como smartwatches e pul-
seiras –, muitas empresas começaram a desenvolver 
aplicativos móveis a fim de aumentar a facilidade 
de acesso às suas informações e/ou serviços para 
seus clientes�
Plataformas de 
desenvolvimento mobile
As plataformas de desenvolvimento mobile são 
softwares desenvolvidos para auxiliar a criação de 
aplicativos móveis� Isso pode ser feito de várias 
maneiras, por exemplo, existem ferramentas de de-
4
senvolvimento de aplicativos móveis nativos, mas 
também ferramentas de desenvolvimento móvel de 
plataforma cruzada ou híbrida. Além desses, também 
temos os aplicativos web�
Aplicativos móveis nativos
As ferramentas nativas de desenvolvimento móvel 
podem ajudá-lo a criar aplicativos especializados 
que operam com facilidade e alta qualidade e po-
dem aproveitar todos os recursos de sua plataforma 
designada�
Uma ferramenta de desenvolvimento nativa é um 
software que permite aos desenvolvedores criar apli-
cativos para uso em uma única família de sistema, 
plataforma ou dispositivo específico, como Android, 
iOS ou Windows. Um aplicativo nativo é feito e co-
dificado especialmente para uma plataforma móvel 
específica em sua linguagem de programação nativa, 
sendo:
 ● iOS (Objective-C ou Swift)
 ● Android (Java ou Kotlin)
 ● Windows Phone (C#)
Existem diferentes diretrizes para cada uma dessas 
plataformas e os desenvolvedores precisam segui-
-las, pois diferem em tipografia, estilos gráficos, ges-
tos, efeitos visuais, entrada de dados e muito mais�
5
Aplicativos web
Enquanto os aplicativos móveis nativos são desenvol-
vidos para uma plataforma específica, os aplicativos 
da web, por outro lado, são acessados por meio do 
navegador da internet e se adaptam a qualquer dis-
positivo em que você os esteja visualizando. Eles não 
são nativos de um sistema específico e não precisam 
ser baixados ou instalados� Devido à sua natureza 
responsiva, eles realmente se parecem e funcionam 
muito como aplicativos móveis�
Os aplicativos da web precisam de uma conexão ati-
va com a internet para serem executados, enquanto 
os aplicativos móveis, em sua maioria, podem funcio-
nar off-line� Os aplicativos móveis têm a vantagem de 
serem mais rápidos e eficientes, mas exigem que o 
usuário baixe atualizações regularmente� Os aplicati-
vos da web, por outro lado, atualizam-se no servidor�
Aplicativos móveis multiplataformas
O desenvolvimento de aplicativos móveis de plata-
forma cruzada é o processo de construção de aplica-
tivos híbridos ou nativos que podem ser executados 
em vários sistemas operacionais� Uma ferramenta 
de plataforma cruzada gera automaticamente um 
código para o sistema operacional de destino e os 
desenvolvedores podem criar uma única base de 
código a partir disso�
Com o desenvolvimento móvel de plataforma cruza-
da, os programadores em uma plataforma podem de-
senvolver aplicativos para uma ou mais plataformas 
6
ou sistemas operacionais móveis simultaneamente, 
o que pode permitir que os desenvolvedores usem 
essencialmente a mesma base de código para plata-
formas diferentes. O que significa que esses aplica-
tivos genéricos podem ser publicados e usados em 
um smartphone Android ou iPhone� Isso reduz muito 
o tempo e os custos necessários para se criar um 
aplicativo; mas também existem lados negativos. Por 
serem a mesma base de código, esses aplicativos 
genéricos tendem a ter mais problemas específicos 
das plataformas e uma qualidade inferior (relaciona-
da à interface do usuário e desempenho) do que um 
aplicativo nativo� É claro que isso varia de acordo 
com o aplicativo, sistema e plataforma usada�
Essa categoria de desenvolvimento de aplicativos 
pode ser também dividida em três plataformas:
 ● Plataformas de codificação: fornecem controle 
total sobre todo o seu processo de desenvolvimento� 
A desvantagem é que requer conhecimento sobre 
a linguagem de codificação escolhida. Mas essa 
compensação sem dúvida vale a pena se você puder 
otimizar seu aplicativo com perfeição e ter controle 
perfeito sobre ele�
 ● Plataformas de pouco código: Se o objetivo de seu 
negócio é tornar o processo de desenvolvimento me-
nos demorado, essas plataformas de pouco código 
podem ser o que você está procurando� Essas plata-
formas são capazes de simplificar com eficiência seu 
processo de desenvolvimento, limitando a quantidade 
de codificação necessária. Em vez disso, a própria 
plataforma o ajudará com programas de construção 
7
especializados, ainda permitindo a personalização 
com codificação.
 ● Plataformas sem codificação: Mesmo que você 
não tenha nenhum conhecimento prévio de codifica-
ção, hoje em dia, você ainda pode criar um aplicativo 
perfeitamente adequado para sua empresa. Isso é 
possível através do uso de plataformas sem codifica-
ção, que fornecem serviços, como uma interface de 
arrastar e soltar, permitindo a criação de um aplicati-
vo sem digitar uma linha de código. A desvantagem é 
que, por ser simples e eficiente, remove uma grande 
quantidade de personalização e flexibilidade que vêm 
com a codificação.
Agora que você conhece a diferença entre aplica-
tivos nativos e aplicativos híbridos, cruzados ou 
multiplataformas, vamos conhecer os ambientes 
de desenvolvimentos�
Ambiente de Desenvolvimento 
Integrado (IDE)
Um ambiente de desenvolvimento integrado (IDE 
– em inglês: integrated development environment) 
é um conjunto complexo de todas as ferramentas 
necessárias para se escrever e testar softwares� Os 
desenvolvedores usam várias ferramentas ao longo 
de seu ciclo de desenvolvimento, que incluem prin-
cipalmente editores de texto, bibliotecas de código, 
compiladorese plataformas de teste� Agora imagi-
ne ter que selecionar, implantar, integrar e gerenciar 
8
todas essas ferramentas separadamente� É agitado, 
demorado e francamente frustrante�
É aí que os IDEs entram e trazem muitas das ferra-
mentas de desenvolvimento em uma única estru-
tura, aplicativo ou serviço, tornando a codificação, 
localização e remoção de bugs uma tarefa simples�
Um IDE pode ser de código aberto ou oferecido co-
mercialmente a um preço. Além disso, pode funcionar 
como um aplicativo independente ou como parte de 
um pacote extenso�
A seguir, conheceremos os principais ambientes de 
desenvolvimento, seja para aplicações nativas, web 
ou hibridas�
Ferramentas para desenvolvimento de 
aplicações nativas
A primeira ferramenta nativa que veremos é o Xcode, 
da Apple, uma maneira de projetar e construir sof-
tware que vem crescendo em utilização� A linguagem 
de programação utilizada é a Swift, considerada por 
muitos como inovadora, devido às funcionalidades 
disponíveis�
O Xcode inclui tudo o que os desenvolvedores pre-
cisam para criar aplicativos para Mac, iPhone, iPad, 
Apple TV e Apple Watch� O Xcode fornece aos de-
senvolvedores um fluxo de trabalho unificado para 
design, codificação, teste e depuração da interface 
do usuário�
9
Na mesma linha de IDEs com recursos poderosos e 
de grande utilização no mercado temos o Android 
Studio�
O Android Studio é um software de desenvolvimen-
to Android desenvolvido pela Google� Seu editor de 
implementação é muito útil para desenvolvedores 
dessa plataforma� O Android Studio fornece atalhos 
para codificação e design, e seu designer de layout 
o torna muito fácil de se usar, o que ajuda a redu-
zir o tempo gasto na codificação. O Android Studio 
também oferece recursos de arrastar e soltar para 
projetar o layout de seus projetos.
Trata-se de um ambiente de desenvolvimento com-
pleto, com uma máquina virtual (AVD – Android vir-
tual device) que simula um dispositivo móvel real� A 
linguagem de programação utilizada pode ser Java 
ou Kotlin�
Outra IDE de aplicativos nativos é o AppCode, para 
desenvolvimento iOS/macOS. Além de trabalhar com 
as linguagens de programação Objective-C, Swift e 
C/C++, suporta tecnologias da web como JavaScript, 
HTML (HyperText Markup Language – Linguagem de 
marcação de Hipertexto), XML (Extensible Markup 
Language – Linguagem de marcação extensiva), 
CSS (Cascading Style Sheets – folha de estilo em 
cascata) e muito mais� Ele fornece uma variedade 
de integrações valiosas, incluindo, entre outros, o 
gerenciador de dependências CocoaPods e o suporte 
interno do Reveal�
10
Além dos benefícios que o AppCode oferece aos 
desenvolvedores (como economizar tempo na auto-
mação de tarefas de rotina, localizar e corrigir erros, 
aproveitar o suporte inteligente do IDE e aumentar a 
produtividade geral), pode ser um recurso igualmente 
valioso para o seu o negócio�
Ferramentas para desenvolvimento de 
aplicações multiplataformas
Como vimos, existem algumas IDEs onde podemos 
desenvolver, ao mesmo tempo, aplicativos para duas 
ou mais plataformas (aplicativos híbridos), vamos 
conhecer alguns destes ambientes�
Começaremos com o Xamarin, certamente a ferra-
menta de desenvolvimento de aplicações multipla-
taformas mais conhecida, sendo classificada como 
plataforma de codificação.
Xamarin é uma plataforma de desenvolvimento de 
aplicativo móvel que ajuda designers e desenvolve-
dores a construir aplicativos iOS, Android e Windows 
nativos usando uma única base de código �NET com-
partilhada� Como ambiente de desenvolvimento in-
tegrado (IDE), o Xamarin utiliza as ferramentas do 
Visual Studio para criar aplicativos móveis nativos� A 
plataforma oferece uma série de recursos, incluindo 
edição de código, refatoração, depuração, teste e 
publicação na nuvem�
Outra plataforma de codificação de aplicativos hí-
bridos é o Appcelerator, que é uma ferramenta de 
desenvolvimento móvel que acelera o tempo de lan-
11
çamento no mercado com desenvolvimento e teste 
de plataforma cruzada e acesso simplificado por 
meio de APIs otimizadas�
A análise do aplicativo móvel em tempo real está 
disponível na plataforma, ajudando a aumentar o 
engajamento do usuário e medir os resultados. 
O Appcelerator usa uma única base de código 
JavaScript para aplicativos móveis nativos ricos e 
aplicativos móveis conectados à nuvem�
Continuando nas ferramentas de desenvolvimento hí-
brido, podemos destacar o Ionic, que é um framework 
fácil de usar e aprender e que permite a prototipagem 
rápida� A integração com o Angular cria um ambiente 
agradável onde se pode codificar.
Construído com base em tecnologia da web padrão, 
o Ionic ajuda as equipes a criar e enviar belos apli-
cativos híbridos e progressivos para várias plata-
formas, com facilidade. O Ionic Framework é um kit 
de ferramentas de interface do usuário (UI – user 
interface) móvel gratuito e de código aberto para o 
desenvolvimento de aplicativos de plataforma cruza-
da de alta qualidade para iOS nativo, Android e web, 
tudo a partir de uma única base de código�
Outra ferramenta que tem crescido em popularidade 
e uso é o React Native� Trata-se de um framework 
multiplataforma, desenvolvido pela comunidade do 
Facebook e baseada na tecnologia JavaScript�
O React Native permite que os desenvolvedores criem 
aplicativos aprimorados e nativos usando uma única 
12
base de código. O objetivo desse framework é cons-
truir experiências de aplicativos nativos de primeira 
linha usando JavaScript e React� Essa tecnologia 
JavaScript exclusiva torna possível desenvolver um 
aplicativo móvel de plataforma cruzada que parece 
nativo, mas é codificado por uma única equipe de en-
genheiros simplesmente usando React e JavaScript�
O NativeScript é uma ferramenta muito parecida com 
as anteriores e permite que você crie aplicativos nati-
vos iOS e Android, com uma base de código, usando 
as habilidades da web que você já possui (JavaScript 
e CSS) e as bibliotecas que você já está habituado 
a trabalhar. NativeScript é um framework de código 
aberto que constrói aplicativos nativos usando outros 
frameworks, como Vue.js ou Angular, e linguagens 
como Typescript ou Javascript.
Todas essas ferramentas que analisamos até aqui 
exigem muito conhecimento de codificação por par-
te do programador, por isso são consideradas pla-
taformas de codificação. A seguir, conheceremos 
alguns exemplos de ferramentas de pouca ou baixa 
programação�
A primeira plataforma que estudaremos é a 
OutSystem, uma plataforma de desenvolvimento 
de aplicativos de pouco código que permite aos usu-
ários construir, implantar, gerenciar e alterar aplica-
tivos móveis e web de nível empresarial com mais 
rapidez�
A ferramenta inclui mais de 140 padrões e modelos 
de interface de usuário prontos para acelerar o desen-
13
volvimento da UI. A OutSystems oferece vários tipos 
de suporte para ajudar seus usuários a maximizar 
o uso do software� Isso inclui suporte ilimitado por 
e-mail, recursos de base de conhecimento, treina-
mento e tutoriais on-line, webinars exclusivos e um 
programa de integração do cliente�
TrackVia é uma alternativa de baixo código para pla-
nilhas, bancos de dados legados e sistemas corpo-
rativos complicados� Rastreie, gerencie e automatize 
processos críticos de negócios ou fluxos de traba-
lho operacionais com maior eficiência, velocidade e 
facilidade�
O TrackVia faz isso ao facilitar a coleta de dados com 
precisão, a análise desses dados em tempo real e a 
ação imediata por meio de tarefas automatizadas, 
alertas ou até mesmo e-mails. Permite, também, que 
você mantenha o controle das necessidades do seu 
aplicativo, mesmo sem um histórico de programação�
Por fim, conheceremos as plataformas de desenvol-
vimento sem codificação, que permitem desenvolver 
aplicativos com interface de arrastar e soltar, sem 
digitar códigos�
Uma das principais ferramentas com essa caracterís-
tica é o AppSheet� Ele permite que qualquer pessoa 
crie aplicativos móveis poderosospara sistemas ope-
racionais iOS e Android, diretamente de suas próprias 
fontes de dados� Os dados podem ser extraídos de 
várias fontes, incluindo Dropbox, OneDrive, Google 
Drive e Smartsheet�
14
Depois que um aplicativo é criado, os usuários podem 
personalizar a marca e os recursos oferecidos com 
um emulador totalmente interativo para visualizar o 
aplicativo� O AppSheet oferece um editor básico e um 
editor avançado para personalizações de aplicativos� 
O editor básico cobre os recursos e funções mais im-
portantes do aplicativo, como logotipo, controles de 
visualização, nome, nível de segurança e requisitos 
de login e funcionalidade off-line, além de permitir 
que os usuários editem diretamente os dados da 
planilha e reorganizem sua estrutura� Com o editor 
avançado você tem acesso aos demais recursos�
A plataforma Alpha é um ambiente unificado de de-
senvolvimento e implantação de aplicativos móveis 
e da web, com componentes distintos “sem código” e 
“pouco código”� Usando o produto Alpha TransForm 
sem código, os usuários de negócios e desenvol-
vedores podem aproveitar todas as vantagens de 
todos os recursos do smartphone para transformar 
qualquer forma em um aplicativo móvel em minutos, 
e os usuários avançados podem adicionar funciona-
lidade avançada de aplicativo com a programação 
integrada do Alpha TransForm�
Os desenvolvedores que conhecem a programação 
por código podem usar o ambiente de pouco código 
Alpha Anywhere para desenvolver aplicativos de ne-
gócios móveis ou web complexos do zero, integrar 
dados com sistemas existentes de registro e fluxos 
de trabalho (incluindo dados coletados via Alpha 
TransForm) e adicionar requisitos adicionais de se-
15
gurança ou autenticação para proteger a empresa 
e os dados�
Vantagens e desvantagens dos aplicativos para 
dispositivos móveis e web
Agora que sabemos as diferenças fundamentais en-
tre aplicativos para celular e web, podemos analisar 
as vantagens e desvantagens de cada um�
Aplicativos móveis nativos
 ● Vantagens:
 ○ Mais rápidos do que os aplicativos da web;
 ○ Maior funcionalidade porque têm acesso aos re-
cursos do sistema;
 ○ Pode trabalhar off-line;
 ○ Seguro e protegido – os aplicativos nativos devem 
primeiro ser aprovados pela app store;
 ○ Mais fáceis de construir devido à disponibilidade 
de ferramentas de desenvolvedor, elementos de in-
terface e SDKs�
 ● Contras:
 ○ Mais caros de construir do que aplicativos da web;
 ○ Compatibilidade com plataformas diferentes (ou 
seja, iOS e Android) geralmente significa projetar e 
construir o aplicativo do zero;
 ○ Caros para manter e atualizar;
 ○ Pode ser difícil conseguir que um aplicativo nativo 
seja aprovado pela app store�
16
Aplicativos web
 ● Vantagens:
 ○ Não precisam ser baixados ou instalados – os 
aplicativos da web funcionam no navegador;
 ○ Fácil manutenção – eles têm uma base de código 
comum, independentemente da plataforma móvel;
 ○ São atualizados sem a interferência do usuário;
 ○ Mais rápidos e fáceis de construir do que aplica-
tivos móveis;
 ○ Não requerem aprovação da app store, portanto, 
pode ser iniciado rapidamente�
 ● Desvantagens:
 ○ Não trabalha off-line;
 ○ Mais lento que os aplicativos móveis e menos 
avançado em termos de recursos;
 ○ Pode não ser tão detectável quanto os aplicativos 
móveis, pois não estão listados em um banco de 
dados específico, como a loja de aplicativos;
 ○ Qualidade e segurança nem sempre são garanti-
das – aplicativos da web não precisam ser aprovados 
pela app store�
Agora você sabe a diferença entre aplicativos móveis 
nativos, híbridos e aplicativos da web� O próximo pas-
so é entender o conceito de prototipação funcional e 
os tipos de protótipos que podemos criar para esses 
três tipos de aplicativos�
17
Criação de protótipos funcionais
A prototipagem é usada para permitir que os usuários 
avaliem as propostas do desenvolvedor e as testem 
antes da implementação. Também ajuda a entender 
os requisitos específicos do usuário e que podem não 
ter sido considerados pelo desenvolvedor durante o 
design do produto�
O modelo de prototipagem de software funciona me-
lhor em cenários em que os requisitos do projeto 
não são conhecidos� Desse modo, a prototipagem 
está se tornando muito popular como modelo de 
desenvolvimento de software, pois permite enten-
der os requisitos do cliente em um estágio inicial de 
desenvolvimento. Ajuda a obter feedback valioso do 
cliente e ajuda os designers e desenvolvedores de 
software a entenderem exatamente o que é esperado 
do produto em desenvolvimento�
A seguir, temos uma abordagem passo a passo para 
se projetar um protótipo de software:
1. Coleta e análise de requisitos: um modelo de 
prototipagem começa com a análise de requisitos� 
Nessa etapa, os requisitos do sistema são defini-
dos em detalhes� Durante o processo, os usuários 
do sistema são entrevistados para saber qual é a 
expectativa do sistema;
2. Design rápido: a segunda etapa é um design preli-
minar ou um design rápido. Nessa fase, é criado um 
design simples do sistema, um design incompleto� Dá 
18
uma breve ideia do sistema para o usuário� O design 
rápido ajuda no desenvolvimento do protótipo;
3. Criar o protótipo: nessa etapa, um protótipo real 
é projetado com base nas informações coletadas do 
design rápido� É um pequeno modelo de trabalho do 
sistema necessário�
4. Avaliação inicial do usuário: aqui o sistema pro-
posto é apresentado ao cliente para uma avaliação 
inicial. Ajuda a descobrir a força e a fraqueza do mo-
delo de trabalho� Comentários e sugestões são cole-
tados com o cliente e fornecidos ao desenvolvedor�
5. Refinando o protótipo: se o usuário não estiver 
satisfeito com o protótipo atual, será necessário re-
finar o protótipo de acordo com os seus comentá-
rios e sugestões. Essa fase não terminará até que 
todos os requisitos especificados pelo usuário sejam 
atendidos� Quando o usuário estiver satisfeito com 
o protótipo desenvolvido, um sistema final será de-
senvolvido com base no protótipo final aprovado.
6. Implementar o produto: Depois que o sistema 
final é desenvolvido com base no protótipo final, ele 
é exaustivamente testado e implantado na produ-
ção� O sistema passa por manutenção de rotina para 
minimizar o tempo de inatividade e evitar falhas em 
grande escala�
A Figura 1 traz essas seis etapas de prototipação�
19
Requisitos
Design Rápido
Criar um protótipo
Avaliação inicial do usuário
Refinando o projeto
Implementar o produto
Figura 1: Etapas da prototipação� Fonte: Elaborado pelo 
autor�
Os protótipos não se parecem necessariamente com 
produtos finais, eles podem ter fidelidades diferentes. 
A fidelidade de um protótipo refere-se a como ele 
transmite a aparência do produto final (basicamente, 
seu nível de detalhe e realismo)�
A fidelidade pode variar nas áreas de:
 ● Design visual;
 ● Conteúdo;
 ● Interatividade�
Existem muitos tipos de protótipos, variando entre es-
ses dois extremos: baixa fidelidade e alta fidelidade.
As equipes de produtos escolhem a fidelidade com 
base nos objetivos de criação de protótipos, inte-
gridade do design e recursos disponíveis� Veremos 
estes conceitos a seguir�
20
Protótipos de baixa fidelidade (Lo-Fi)
Um protótipo de baixa fidelidade é uma representa-
ção tangível rápida e fácil de um conceito, um fluxo 
de uso ou uma estrutura de informações criada para 
se obter feedback rápido e melhorar o produto� Esses 
protótipos geralmente são caracterizados pela im-
plementação de baixa tecnologia e podem usar uma 
grande variedade de materiais, incluindo folhas de 
papel, papelão, cola, canudos e blocos de lego, entre 
outros�
A prototipagem de baixa fidelidade geralmente é usa-
da pelas equipes de design para enfatizar interações 
e pensamentos� Como exemplo, podemos citar os 
protótipos de papel�
Sim, isso mesmo, em meio a toda alta tecnologia 
do design digital, com grandes ferramentas de de-
sign e desenvolvimento, às vezes o melhor método 
ainda é papel e caneta.Até hoje, os protótipos de 
papel continuam não apenas viáveis, mas também 
amplamente utilizados�
Os protótipos de papel mais básicos são esboços de 
cada tela� Em um teste de demonstração ou usabili-
dade, os esboços são alternados de acordo com as 
ações do usuário� Por exemplo, a interface possui 
um botão que, ao ser pressionado, abre uma nova 
janela. Desse modo, no papel haverá o desenho de 
uma interface com um botão� Durante a interação, 
o usuário faz a ação de “clicar” no botão do papel� 
Nesse instante, a equipe de teste substitui o papel 
21
anterior por outro papel, representando a interface� 
Um exemplo pode ser visto na Figura 2�
Figura 2: Modelo de prototipagem em papel� Fonte: Blog 
Adobe�
Devido à popularidade da prototipagem no papel, 
várias ferramentas avançadas estão disponíveis para 
facilitar o processo� Você pode usar estênceis para 
recriar botões e ícones com rapidez e precisão, e 
até capas de telefone falsas para retratar melhor a 
aparência do formulário do produto�
Os kits de prototipagem de papel custam significati-
vamente menos que os softwares de design� Esse kit 
inclui folhas, modelos e ferramentas pré-fabricadas 
para facilitar ainda mais a criação de protótipos de 
papel e aumentar um pouco o realismo�
Mas, é claro, a prototipagem de papel não substitui 
completamente a prototipagem digital� Entretanto, 
possui algumas vantagens que não são encontradas 
22
https://theblog.adobe.com/prototyping-difference-low-fidelity-high-fidelity-prototypes-use/
https://theblog.adobe.com/prototyping-difference-low-fidelity-high-fidelity-prototypes-use/
em outras técnicas. Deste modo, vamos ver algumas 
vantagens e desvantagens�
Vantagens
 ● Iteração rápida: ninguém quer simplesmente ex-
cluir um protótipo digital que levou horas para ser 
produzido, porém, poucos lamentam jogar fora um 
esboço que levou 5 minutos para ser desenhado no 
papel� A criação de protótipos em papel permite criar 
– e jogar fora – várias versões sem perda de tempo;
 ● Barato: é claro que o papel é barato, além, é claro, 
de não necessitar de ferramentas e kits adicionais�
 ● Maior criatividade: a liberdade de lápis e papel 
facilita mais a experimentação e novas ideias do 
que o software, limitado por seus recursos e pela 
familiaridade do designer�
 ● Menor curva de aprendizado: por falar em curva 
de aprendizado, todos podem esboçar ideias, o que 
torna a prototipagem em papel uma ótima maneira 
de envolver outros departamentos� Com o software 
de design, primeiramente o usuário necessita saber 
lidar com ele, para depois criar o protótipo�
 ● Documentação automática: os protótipos de papel 
são, por eles próprios, um documento tangível� As 
anotações podem ser escritas diretamente neles 
para futuras iterações e podem ser deixadas à vista 
como lembrete do que ensinaram�
Desvantagens
 ● Sem reações desagradáveis: grande parte do 
design do UX vem das reações desagradáveis do 
23
usuário ao usar o produto� No entanto, não há como 
replicar a experiência do uso de um produto digital 
no papel, não importa quão detalhado seja.
 ● Feedback impreciso: os protótipos de papel exi-
gem muita imaginação e há muito a perder ao imagi-
nar como será um produto� O que os usuários estão 
pensando pode ser diferente do que você está pen-
sando, mas o feedback não reflete isso.
Com suas desvantagens, é possível entender as limi-
tações dos protótipos de papel ao testar gráficos de 
alta fidelidade, usabilidade e reações desagradáveis. 
Até elementos como navegação e arquitetura da in-
formação parecem estar fora dos limites�
Dito isso, a prototipagem em papel é perfeita para a 
concepção inicial� Sua velocidade, facilidade e simpli-
cidade, sem mencionar a documentação automática, 
o tornam muito mais adequado para experimentar no-
vas ideias do que protótipos digitais mais complexos�
Os protótipos de papel são ideais para reuniões e 
sessões de brainstorming, além de testes leves de 
usabilidade desde o início� Caso então opte por outra 
abordagem de baixa fidelidade que não seja o papel, 
considere a prototipagem rápida�
Essa técnica oferece um método útil para se explorar 
ideias e se obter feedback do cliente para cada uma 
delas. Nesse método, um protótipo desenvolvido 
não precisa necessariamente fazer parte do protó-
tipo finalmente aceito. O feedback do cliente ajuda a 
24
evitar falhas desnecessárias no projeto e, portanto, o 
protótipo final desenvolvido é de melhor qualidade.
Apesar do nome (prototipagem rápida), resista ao 
impulso de fazê-la ser rápida� Pode ser tentador abrir 
uma ferramenta de prototipagem e elaborar os deta-
lhes na tela o mais rápido possível e apresentar ao 
usuário, mas reserve um tempo para definir o pro-
blema e refletir com antecedência sobre o design.
Protótipos de alta fidelidade (Hi-Fi)
Um protótipo de alta fidelidade (hi-fi) é normalmente 
montado usando-se software� Ao contrário do pro-
tótipo de papel, que pode ser mais adequado para 
o design colaborativo, esse método geralmente é 
montado por um designer de UX da equipe�
Os protótipos de alta fidelidade são bons quando 
você termina as sessões iniciais de teste do usuário 
e deseja explorar interações e animações mais ricas. 
Além disso, você pode compartilhar uma visão com 
as partes interessadas sobre a aparência do produto 
final. Como exemplo é possível destacarmos os pro-
tótipos do tipo cenário, storyboards e prototipagem 
evolucionária�
De acordo com Sobral (2019), um protótipo do tipo 
cenário é desenvolvido para representar, analisar e 
planejar como um sistema pode impactar as ativi-
dades e as experiências do usuário� Apesar de na 
maioria dos casos ser apresentada como narrativa, 
um protótipo de cenários também pode ser repre-
25
sentado como storyboards, cartoons, maquetes e 
protótipos em script (SOBRAL, 2019)�
Sobral (2019) apresenta 5 pontos necessários para 
elaborar cenários:
 ● Nome: deve ser significativo e específico;
 ● Descrição: costuma ser um texto narrativo, ilus-
trando uma situação específica;
 ● Lógica essencial:
 ● Usuário: representações e ações que devem es-
tar disponíveis ao usuário, independentemente de 
aspectos relacionados à implementação;
 ● Sistema: informações necessárias para que o sis-
tema funcione como necessário�
 ● Passos genéricos: sequência de passos que o 
usuário realizaria, independentemente dos aspectos 
de implementação�
 ● Passos específicos: sequência de ações dos usuá-
rios, seguidas de feedback do sistema, considerando-
-se a possibilidade de ações erradas do usuário�
Outro tipo de prototipagem de alta fidelidade é a evo-
lucionária. Nesse método, o protótipo desenvolvido 
inicialmente é aprimorado de forma incremental com 
base no feedback do cliente até que finalmente seja 
aceito� Em comparação com a prototipagem rápi-
da, oferece uma abordagem melhor pois economiza 
tempo e esforço� Isso ocorre porque o desenvolvi-
mento de um protótipo do zero para cada iteração 
do processo às vezes pode ser muito frustrante para 
os desenvolvedores�
26
Temos também os protótipos em storyboards� Esse 
tipo de protótipo (assim como os de cenário) pode 
representar uma alta fidelidade ou baixa fidelidade 
do produto final.
Um storyboard é uma representação visual de como 
um usuário irá interagir com um aplicativo ou interfa-
ce. Um storyboard também é usado para demonstrar 
o processo pelo qual o usuário passará ao usar um 
produto� Os storyboards podem ser úteis para deter-
minar os requisitos do usuário de um produto e são 
exibidos de forma narrativa e cronológica, assim, o 
melhor momento para usar um storyboard é quando 
você tem uma ideia para se comunicar�
Um storyboard pode ser benéfico nos testes de usa-
bilidade� Antes dos testes de usabilidade, os espe-
cialistas costumam prever como eles acreditam que 
os usuários reagirão e interagirão com um aplicativo 
de software� Um storyboard também pode ser criado 
para ajudar a planejar as diferentes etapas do tes-
te de usabilidade� Após a realização dos testesde 
usabilidade, os resultados podem ser comparados 
com as previsões mostradas no storyboard original� 
Muitas vezes, são feitas alterações no produto ou 
protótipo que foi testado para melhorar a usabilidade 
e a experiência dos usuários�
Os storyboards são criados por meio de slides em 
papel ou virtuais, que exibem as diferentes etapas da 
interação pretendida entre um usuário e um produto� 
Por exemplo, a primeira imagem pode exibir uma 
pessoa acessando o computador e a segunda pode 
27
mostrar a abertura do navegador e a digitação do URL 
do site� O terceiro pode mostrá-la clicando em um 
botão de ajuda à ação e a história continua até que 
todo o processo seja exibido. Em seguida, um grupo 
focal pode ser formado para analisar essas ideias e 
apontar possíveis problemas no design�
O storyboard deve ser modificável e a duração ne-
cessária depende de quão complexo e detalhado é 
o sistema�
Para encerrarmos os exemplos de protótipos de alta 
fidelidade, cabe destacarmos o Wizard of Oz (WOZ), 
uma metodologia de design usada no desenvolvi-
mento ágil de produtos para melhorar a UX�
De acordo com Sobral (2019), o método WOZ:
Permite avaliar a reação do usuário diante de tecno-
logias ainda desconhecidas. Um usuário é convidado 
a interagir com uma interface, porém, quem emite o 
feedback em tempo real das ações do usuário é uma 
pessoa e não a interface. Esta pessoa fica em outro 
ambiente (oculto) e, com a ajuda de uma câmera e 
outros elementos, analisa a reação do usuário durante 
a interação.
SAIBA MAIS
O termo “protótipo Wizard of Oz” é creditado ao 
especialista em usabilidade Dr. Jeff Kelley, que foi 
inspirado na cena do filme O Mágico de Oz em que 
Toto, o cachorrinho de Dorothy, puxa uma cortina 
para revelar que o mago, na verdade, tratava-se 
28
do Mágico de Oz escondido sacudindo a cabeça 
por meio de interruptores e alavancas de tração� 
Saiba mais sobre essa técnica de prototipagem e 
veja exemplos neste link: Corais�
Diferenças entre as fidelidades dos protótipos
Protótipos de baixa fidelidade são conceitos simples 
e de baixa tecnologia, possuindo vantagens como:
 ● Você pode se concentrar mais em design e ideias, 
tudo isso com menos esforço;
 ● Você pode refazer rapidamente parte do design 
com base nos comentários dos clientes em tempo 
real;
 ● É acessível a todos�
Os protótipos de alta fidelidade são altamente funcio-
nais e interativos� Eles são frequentemente usados 
nos estágios posteriores para testar a usabilidade 
e identificar problemas no fluxo de trabalho. Seus 
pontos fortes são:
 ● É mais familiar para os usuários;
 ● Você pode mergulhar fundo em um componente 
específico (como fluxo, recursos visuais, engajamen-
to ou navegação) durante o teste do usuário;
 ● Você pode definir expectativas claras com os de-
senvolvedores nos estágios iniciais de quanto tempo 
será necessário para criar seu protótipo e obter um 
produto final.
29
https://www.corais.org/node/136
Todo designer possui sua ferramenta de prototi-
pagem favorita, a qual utiliza repetidamente� Mas 
surgem problemas quando você cria protótipos no 
nível de fidelidade padrão que a ferramenta fornece 
sem reavaliar o nível de fidelidade apropriado para 
a situação� Por exemplo, em vez de criar um protó-
tipo digital altamente interativo, talvez seja melhor 
esboçar no papel para obter um feedback rápido dos 
conceitos de design�
Desse modo, a coisa mais importante a lembrar é que 
você não deve usar o mesmo nível de fidelidade ao 
fazer a prototipagem� Depende sempre do estágio de 
desenvolvimento/design e dos recursos e objetivos 
do produto�
PhoneGap
O Adobe PhoneGap permite que você trabalhe com 
uma base de código, mas com um conjunto diferente 
de tecnologias. PhoneGap é uma ferramenta de plata-
forma cruzada de código aberto que cria aplicativos 
com HTML, CSS, JavaScript e APIs da Web�
Essencialmente, um aplicativo PhoneGap representa 
uma coleção de páginas HTML envolvidas em um 
shell de aplicativo nativo, que são então enviadas 
para plataformas nativas por meio de APIs�
Com o PhoneGap, os desenvolvedores criam arqui-
vos em HTML, CSS e JavaScript, da mesma forma 
que fariam ao criar um site� Esses arquivos são ar-
mazenados em um diretório local ou na nuvem e, 
30
quando são executados em um dispositivo, acessam 
os recursos do dispositivo por meio de plug-ins� Isso 
torna os aplicativos PhoneGap mais leves e altamen-
te reutilizáveis�
A qualidade da UI vai depender mais do mecanismo 
WebView do sistema operacional que a renderiza do 
que propriamente da aplicação em si�
PhoneGap é uma distribuição do Apache Cordova. 
Isso significa que é alimentado por Apache Cordova, 
mas tem algumas coisas extras (ou seja, ferramentas 
adicionais) da equipe da Adobe�
Cordova é um framework de desenvolvimento de 
aplicativo móvel destinado principalmente a desen-
volvedores da web� Ele permite que os desenvolve-
dores usem tecnologias da web, como HTML, CSS e 
JavaScript, para criar aplicativos móveis� Uma ana-
logia comum usada pelos desenvolvedores é que 
Cordova está para o PhoneGap assim como o WebKit 
está para o Safari� Em outras palavras, o PhoneGap 
é uma distribuição do Cordova mantida pela Adobe.
Na prática, PhoneGap e Cordova são basicamente os 
mesmos� Você pode escolher PhoneGap ou Cordova 
ao iniciar um projeto. A única diferença é a Command 
Line Interface (CLI)� A CLI do PhoneGap se integra ao 
Adobe PhoneGap Build� Esse serviço permite que os 
desenvolvedores compilem seus aplicativos para a 
plataforma de sua escolha, enviando-os para o site 
PhoneGap Build�
31
As ferramentas básicas são de uso gratuito, mas 
a Adobe oferece mais serviços, como o PhoneGap 
Build Service, que ajuda a preparar aplicativos para 
serem publicados na App Store e Google Play Store 
sem manter SDKs nativos� O serviço PhoneGap Build 
da Adobe faz esse trabalho compilando aplicativos 
na nuvem (tenha em mente que esse serviço não é 
gratuito)�
FIQUE ATENTO
Apesar de ser uma excelente ferramenta de desen-
volvimento, o projeto do Adobe PhoneGap que se 
iniciou em 2008 foi descontinuado em 1 de outubro 
de 2020� De acordo com a Adobe, o principal mo-
tivo de não continuar investindo nessa ferramenta 
é porque a empresa “está se concentrando em for-
necer uma plataforma que permite aos desenvol-
vedores construir, estender, personalizar e integrar 
com produtos Adobe”� Desse modo, aguarde, pois 
a Adobe promete novidades! Fonte: Blog Phonegap�
32
https://blog.phonegap.com/update-for-customers-using-phonegap-and-phonegap-build-cc701c77502c
CONSIDERAÇÕES FINAIS
Neste e-book você começou a conhecer o desenvol-
vimento mobile� Primeiro aprendendo que um apli-
cativo mobile pode ser classificado como aplicativo 
nativo, aplicativo web e aplicativos chamados de 
híbridos ou de plataformas cruzadas�
Analisamos que os aplicativos nativos são espe-
cializados para serem executados em uma única 
plataforma� Desse modo, se desenvolvermos um 
aplicativo nativo para o Android, este aplicativo só 
será executado no Android�
O conceito e crescimento de aplicativos híbridos ou 
de plataformas cruzadas tem aumentado durante os 
anos� Com o desenvolvimento de aplicativos híbridos, 
o desenvolvedor pode desenvolver um aplicativo para 
uma ou mais plataformas simultaneamente� Desse 
modo são criados aplicativos genéricos, por exemplo, 
um aplicativo híbrido pode ser executado tanto em 
Android quanto em iOS�
Também estudamos os aplicativos web, que são 
desenvolvidos para serem executados em um nave-
gador� Desse modo, eles não são considerados nem 
híbridos e nem nativos, pois não dependem direta-
mente do sistema operacional do dispositivo para 
ser executado�
Em seguida, conhecemos o conceito de ambiente de 
desenvolvimento (IDE) e conhecemos os principais 
33
IDEs que podemos utilizar para desenvolver nossos 
aplicativos�
Você conheceu também um pouco mais sobre pro-
tótipos e as etapas para desenvolvimento de um 
protótipo funcional� Compreendeu o conceito de 
protótiposde baixa fidelidade e de alta fidelidade e 
como aplicá-los em seus projetos.
Por fim, você foi apresentado ao PhoneGap, um am-
biente de desenvolvimento semelhante, por exemplo, 
ao Ionic, e que possui recursos de desenvolvimen-
to de aplicações web. Porém, a Adobe, detentora 
do produto PhoneGap, decidiu em outubro de 2020 
descontinuar o suporte para essa ferramenta, com 
o objetivo de trazer um novo ambiente de desenvol-
vimento, semelhante, mas com mais recursos�
34
Referências Bibliográficas 
& Consultadas
CHAK, A� Como criar sites persuasivos: clique 
aqui� São Paulo: Pearson Education do Brasil, 2004� 
[Biblioteca Virtual]�
CSS Tutorial� W3Schools� Disponível em: http://www.
w3schools.com/css/default.asp� Acesso em: 16 fev� 
2020�
FLANAGAN, D� JavaScript: o guia definitivo. 6. ed. 
Porto Alegre: Bookman, 2013� [Minha Biblioteca]�
JavaScript Tutorial� W3Schools� Disponível em: http://
w3schools.com/js/default.asp� Acesso em: 16 fev� 
2020�
MACDONALD, M�; DORIA, A� Criação de sites: o ma-
nual que faltava� São Paulo: Digerati Comunicação 
e Tecnologia, 2010�
NORMAN, D�; DRAPER, S� User Centered System 
Design. Hillsdale (NJ): Lawrence Erlbaum, 1986�
SILVA, D� Desenvolvimento para dispositivos mó-
veis� São Paulo: Pearson Education do Brasil, 2016� 
[Biblioteca Virtual]�
SIMAS, V� L� et al� Desenvolvimento para dispositi-
vos móveis� v� 2� Porto Alegre: SAGAH, 2019� [Minha 
Biblioteca]�
SOBRAL, W� Design de Interfaces: introdução� São 
Paulo: Érica� 2019�
TERUEL, E� C� HTML5: guia prático� 2� ed� São Paulo: 
Érica, 2014� [Minha Biblioteca]�
	_GoBack
	Introdução
	Desenvolvimento mobile
	Plataformas de desenvolvimento mobile
	Ambiente de Desenvolvimento Integrado (IDE)
	Criação de protótipos funcionais
	PhoneGap
	Considerações finais
	Referências Bibliográficas & Consultadas