Projetos Gráficos

para Mídias Digitais

Desenvolver Aplicativo a partir do Fluxograma

Responsável pelo Conteúdo:

Prof. Me. Ivan Ordonha Cechinel

Revisão Textual:
Prof.ª Dr.ª Selma Aparecida Cesarin
 Desenvolver Aplicativo
a partir do Fluxograma

• Construção de APP a partir do Fluxograma;

• Planejamento Base para o Aplicativo;
• Tela Inicial;
• Aba do Menu;
• Modelo de Tela Interna.

OBJETIVO

DE APRENDIZADO
• Mostrar ao aluno o caminho da criação de aplicativo utilizando o Appinventor, com base no
planejamento feito a partir de um Wireframe.
UNIDADE Desenvolver Aplicativo a partir do Fluxograma

Construção de APP a partir do Fluxograma

Nesta Unidade, será mostrado como desenvolver o livro em formato aplicativo a
partir de Fluxograma, lembrando-se de que abordaremos o ponto de vista técnico do
desenvolvimento de aplicativos e, mais à frente, nesta Disciplina, que estudaremos a
fundo as Metodologias de design que nos guiam para analisarmos as necessidades do(a)
usuário(a) para desenvolver um produto digital que de fato solucione as necessidades
dos usuários(as).

Quem desenvolve trabalho na Área criativa, de modo geral, realiza Projetos para as
pessoas, para os(as) outros(as). Todo o trabalho gráfico visual presente nas interfaces
(elementos gráficos visuais que farão a ponte e estabelecerão o diálogo entre máquina e
pessoas) deve promover a interação de maneira a gerar uma experiência positiva para
as pessoas que utilizam o produto, seja digital (um aplicativo, um site, um sistema), seja
tangível (o painel de uma máquina, por exemplo).

Para alcançar esses objetivos, podemos traçar o que muitos chamam de “Métricas”
(a forma de medir se o Projeto está cumprindo seus objetivos e se realmente terá condi-
ções de auxiliar as pessoas, solucionando problemas reais).

Orquestrando os diferentes recursos gráficos visuais, desde a definição de cores, fluxo

de navegação, hierarquia de informações, localização de menus, indicação visual de que
algo é clicável, trabalhamos com os aspectos que devem ser considerados para contri-
buir com uma experiência positiva para as pessoas.

Segundo a especialista em UX Juliana do Vale, temos diversos aspectos a analisar

em um produto digital, em um site, aplicativo, sistema ou qualquer criação que possua
uma interface e, ao analisar esses aspectos, poderemos definir, de maneira mais coeren-
te, o caminho a seguir, centrando a criação no usuário.

As métricas, que no universo do Marketing são chamadas KPIs (Key Performance

Indicators), de modo geral, medem como e em que tempo o usuário consegue executar
determinada tarefa dentro do aplicativo.

Por exemplo: o preenchimento de um cadastro ou a busca de determinado conteúdo.

Surgem questões a serem respondidas: O cadastro foi concluído com sucesso? A busca
realmente retornou o que o usuário procurou?

Podemos fazer análises mais quantitativas, com número maior de participantes, por
meio de ferramentas como o Google Analytics.

De maneira qualitativa, são feitos Testes de Usabilidade com quantidade menor de

pessoas, amostragem que representa o perfil (persona) dos usuários aos quais o Projeto
se destina.

Assim, podemos seguir em um caminho mais preciso em relação aos direcionamentos

do Projeto e responder às reais necessidades do usuário.

É nesta etapa que o UX Design incorpora princípios de Arquitetura de Informação

a partir do momento em que são realizados Testes de Usabilidade, em que o usuário

8
literalmente usa o protótipo do aplicativo, que está em desenvolvimento, realizando ta-
refas orientadas por um mediador que, geralmente, é um profissional da Equipe.

Dessa forma, as métricas em UX podem ser definidas, principalmente, para men-

surar as taxas de sucesso que o usuário alcança ao tentar realizar determinada tarefa,
através de uma interface, seja em um site, aplicativo, seja em qualquer outro sistema.

Assim é medido também o tempo para as realizar, além de se mensurar a taxa de

erro que ocorre quando uma tarefa é interrompida, quando não há êxito do usuário
ao tentar executá-la, por um determinado motivo, que deve ser analisado a fim de se
verificar se está relacionado a problemas de compreensão da interface ou, por exemplo,
relacionado a incoerências no fluxo de navegação.

Portanto, os Kis mais importantes relacionam-se à usabilidade, na qual se mede a

facilidade de realização de uma tarefa orientada por um mediador (profissional da Equi-
pe) e envolve questões de design que dizem respeito a aspectos como compreensão de
símbolos e ícones, hierarquia de informação e navegabilidade.

Planejamento Base para o Aplicativo

A seguir, temos o wireframes (armação de arame, na tradução literal, e aqui, além de
demonstrar o fluxo entre as telas, apresenta a estrutura básica de menus e conteúdos),
que constituem as “linhas” que representam a estrutura principal da interface.

Apresentam representação mais detalhada prevendo posições de menus, botões,

imagens, texto, ícones, mapas e formulários, entre outros elementos gráficos.

Nos wireframes, não há a representação de cores e imagens, apenas linhas estrutu-

rais e alguns detalhes, como ícones por exemplo.

Figura 1 – Fluxograma produzido na ferramenta on-line moqups

Fonte: Acervo do conteudista

9
9
UNIDADE Desenvolver Aplicativo a partir do Fluxograma

Tela Inicial
Para desenvolver o aplicativo, utilizar as imagens e os textos fornecidos nesta Unidade.

A seguir, imagem da tela inicial do aplicativo já pronto, no Appinventor.

Figura 2 – Tela inicial do aplicativo, produzida no Appinventor

Fonte: Acervo do conteudista

Aba do Menu
A seguir, imagem da tela inicial com a aba do menu aberta.

Figura 3 – Tela inicial com a aba do menu aberta

Fonte: Acervo do conteudista

10
Modelo de Tela Interna
Para o desenvolvimento de um aplicativo, diferentes profissionais participam do Projeto.

Existem profissionais que trabalham apenas na etapa de UX e outros fazem a função

de UI e desenvolvem a interface, porém abrirá mais portas no Mercado de Trabalho o
profissional que dominar as duas vertentes.

Figura 4 – Tela interna do aplicativo produzida no Appinventor

Fonte: Acervo do conteudista

Nas próximas Unidades desta Disciplina, veremos que, após etapa de UX e de UI,
entram em cena Linguagens de Programação utilizadas por desenvolvedores que con-
cretizam o que foi previsto pelos designers, tanto para IOS como Android, e os dois
sistemas possuem variantes consideradas por esses profissionais.

Analisaremos, também, os princípios do chamado Design Thinking, essenciais para

desenvolver um projeto relevante, que de fato traga soluções para as pessoas.

11
11
UNIDADE Desenvolver Aplicativo a partir do Fluxograma

Material Complementar
Indicações para saber mais sobre os assuntos abordados nesta Unidade:

 Sites
Moqups
Ferramenta online para construção de fluxogramas.
https://bit.ly/3czRc0K
Sketchapp
Ferramenta utilizada para obstrução de wireframes/protótipos de aplicativos.
https://bit.ly/36x0arW
Adobe XD
Ferramenta oficial da Adobe para planejamento de app.
https://adobe.ly/36yxRJF

 Leitura
Métricas de UX, o que são e como definir
https://bit.ly/2NTf7xL
O que é UX Design
https://bit.ly/2RvZn2i

12
Referências
FERREIRA, A. R. Comunicação e aprendizagem: mecanismos, ferramentas e comu-
nidades digitais. São Paulo: Erica, 2014. (e-book)

SOUZA, A. C. de; GÓMEZ, L. A. Criando Aplicativos Android no Mit App Inventor.

São Paulo: Visual, 2014.

WHITE, A. Mídias digitais e Sociedade (Digital media and society). São Paulo: Saraiva,
2017. (e-book)

13
13