Unidade 3 - Sistemas de Mockup e Wireframe (2)

Prévia do material em texto

CURSO: Tecnólogo em Análise e Desenvolvimento de Sistemas 
 
DISCIPLINA: Sistemas de Mockup e Wireframe 
 
PROFESSORA-AUTORA: Ma. Mirele de Oliveira Pacheco 
 
CARGA HORÁRIA: 40 horas 
 
UNIDADE: A arquitetura da Informação e a paisagem digital 
 
Unidade 3 – Princípios de arquitetura da informação e relações com a paisagem digital: 
panorama do design de informação, planejamento de interface, organização espacial e 
hierarquia visual – sitemap, sketch, wireframe, mockup, fluxo do usuário. 
 
TRILHA DE APRENDIZADO: Nesta unidade, vamos conhecer as perspectivas da 
arquitetura de informação relacionadas ao planejamento e estrutura da interface. Para 
tanto, vamos visualizar seus princípios a partir da compreensão de aspectos essenciais 
ao design de interface por meio dos elementos complementares do design. Serão 
abordadas a organização visual e a hierarquia da informação, como diagramas de mapa 
de site, sketch, wireframe, mockup e fluxo do usuário. 
 
OBJETIVOS ESPECÍFICOS DE APRENDIZAGEM DA UNIDADE 
 
Ao longo desta unidade, você irá: 
 
 
● Conhecer os princípios da arquitetura da informação; 
● Adquirir noções sobre sistemas de estruturação de mockups e wireframes e suas 
relações com arquitetura da informação, design digital e usabilidade; 
● Construir o planejamento de interface, a organização espacial e os princípios de 
hierarquização de elementos; 
● Compreender sitemap e sketch; 
 
 
 
● Desenvolver habilidades e competências para o trabalho com projetos de 
prototipação de interfaces digitais a partir da colaboração, criatividade e inovação. 
 
INTRODUÇÃO À UNIDADE 
 
Caro(a) estudante, 
 
Seja bem-vindo(a) à terceira Unidade de Sistemas de Mockup e Wireframe. Aqui, vamos 
aprender alguns fundamentos sobre o design de interface considerando noções de 
organização visual da informação. Neste sentido, nossos estudos estão relacionados a 
elementos e relações visuais e informacionais presentes nos projetos de prototipação 
para design de interface. A organização e a clareza dos elementos gráficos utilizados 
passam pelo entendimento do projetista em relação à arquitetura do sistema utilizado e 
suas necessidades. Além disso, a usabilidade é um aspecto sempre presente a fim de 
tornar possível ao usuário uma experiência satisfatória com o produto ou serviço digital. 
Os principais conceitos que você verá nesta etapa envolvem o conhecimento e a 
utilização de recursos de organização da informação para que seus projetos profissionais 
demonstrem alinhamento às melhores práticas projetuais em prototipagem. 
 
Bons estudos! 
 
SEÇÃO 1 | PRINCÍPIOS DE ARQUITETURA DA INFORMAÇÃO E RELAÇÕES COM 
A PAISAGEM DIGITAL NO DESIGN DE INFORMAÇÃO 
 
Criar e desenvolver soluções criativas para interfaces web e dispositivos móveis requer 
visão técnica, estética e capacidade de inovação. No entanto, ao iniciar seus projetos 
para desenvolvimento de protótipos de interface, o profissional irá se deparar com a 
necessidade de certos conhecimentos sobre requisitos gráficos e outros de ordem 
informacional, além do design. Neste caso, torna-se vital entender que no processo de 
prototipação com mockups de baixa ou alta fidelidade estão envolvidos aspectos que o 
antecedem, como, por exemplo, a elaboração de um planejamento arquitetural da 
estrutura da interface como um todo. 
 
 
 
Para especificar essas características, vale relembrar que a interface corresponde 
também ao que chamamos de design, por constituir a forma como você e seu usuário se 
comunicam e interagem. Este design requer que sejam utilizadas no desenvolvimento 
boas práticas de arquitetura da informação, ou seja, a forma como você organiza e 
categoriza os conteúdos que seu site ou aplicativo irá apresentar no produto final, 
conforme a Figura 1. 
 
 
Figura 1. Exemplo de organização visual dos conteúdos na interface de um notebook. Fonte: Pixabay. 
 
Para compreender melhor como tudo isso funciona, convido você a rever o conceito de 
usabilidade, que deverá cumprir com cinco funções básicas: 
1) Aprendizagem: seu usuário deve ser capaz de cumprir com tarefas básicas no 
seu site ou aplicativo assim que o acessar; 
2) Eficiência: após aprender a usar seu produto, o usuário deve fazer isso com maior 
rapidez; 
3) Memorabilidade: após passar algum tempo sem acessar, o usuário consegue 
lembrar como deve usar seu site ou aplicativo; 
 
 
4) Prevenção de erros: seu produto deve ser bom a ponto de evitar que seu usuário 
cometa erros ou então deve fornecer informações para desfazer facilmente algum 
erro; 
5) Satisfação: a sensação que seu usuário experimenta ao usar o site ou aplicativo 
e realizar o que precisa, ou seja, sente-se satisfeito porque conseguiu atingir seu 
objetivo. 
É assim que o usuário é capaz de obter um acesso intuitivo ao seu conteúdo, uma vez 
que o design estrutural do espaço da informação foi projetado considerando uma 
hierarquia visual (a arquitetura). Mas, como fazer isso? 
De forma geral, você deve iniciar por um desenho da estrutura do site ou aplicativo, como 
um esquema visual de fluxos de conteúdo. O design da informação representa a forma 
como desenhamos a apresentação da informação para que o usuário compreenda os 
passos que precisa seguir na interface. Para isso, temos os requisitos de conteúdo com 
a definição dos elementos do conteúdo necessários ao site, para que este possa ir de 
encontro às necessidades do usuário. 
Historicamente, a arquitetura está relacionada à técnica ou arte de projetar ambientes 
para habitação, como casas, edifícios e demais locais públicos. Essa organização de 
espaços físicos pode ser compreendida ao transpormos o conceito para o ambiente 
digital informatizado. Neste sentido, a arquitetura da informação surge para designar um 
ordenamento nos ambientes informacionais que lidam com estruturas 
predominantemente digitais. 
ATENÇÃO - A arquitetura da informação aplicada aos produtos digitais utiliza conceitos 
e modelos de organização da informação para projeção de sistemas complexos. Nas 
áreas de sistemas de informação ou tecnologia da informação, o projeto de design 
arquitetural deve apresentar uma estrutura esquematizada do ambiente compartilhado. 
Por volta de 1970, a expressão information architecture foi criada pelo arquiteto 
americano Richard Saul Wurman, que é também o idealizador do TED Talks, uma série 
de conferências sem fins lucrativos realizadas em diversos países para divulgar ideias e 
tendências de caráter transformador e inovador). Com essa expressão, Wurman 
pretendia abordar a maneira como poderíamos agrupar, organizar e apresentar 
 
 
determinadas informações para públicos diversificados. Contudo, o foco dessas questões 
para a web veio a ocorrer posteriormente devido ao maior desenvolvimento dos contextos 
de informação digital. 
MULTIMÍDIA - Conheça os melhores conferencistas explorando a biblioteca de vídeos 
do TEDx Talks. Acesse o repositório oficial em: https://www.ted.com/watch/tedx-talks 
Na prática, um modelo para arquitetura da informação obedece aos seguintes critérios: 
● Identificação e definição dos conteúdos e das funcionalidades do site ou aplicativo; 
● Organização, estrutura e nomenclatura dos conteúdos. 
Neste processo, inicialmente você poderá usar uma planilha para listar e hierarquizar 
todas as seções do site e a seguir nomear cada seção. A partir daí será possível criar o 
mapa do site e partir para o desenho de uma espécie de “planta baixa”, que vai ajudar a 
verificar como o conteúdo será agrupado e apresentado ao usuário. 
É exatamente por esse motivo que arquitetura e usabilidade andam juntas para que a 
disposição das informações faça sentido para o usuário. Caso contrário, correremos o 
risco de ele abandonar a página por sentir que a organização está ruim ou por não 
encontrar o que procura. 
MULTIMÍDIA- Para conhecer um pouco mais sobre este tema, acesse a tese de 
doutorado intitulada Discurso sobre fundamentos de Arquitetura da Informação, de 
Alfram Roberto Rodrigues de Albuquerque. 
Disponível em: https://repositorio.unb.br/handle/10482/7110 
Para definir a arquitetura da informação de um site, basta seguir essas etapas: 
• Faça um inventário de conteúdo com um levantamento para identificar todo o 
conteúdo do seu site; 
• Realize uma auditoria nesse conteúdo – ou seja, avalie se os conteúdos são 
realmente úteis, considerando o seu tom de voz e o perfil de usuário; 
• Agrupe as informações de forma lógica e coerente por similaridade ou relações 
entre os conteúdos; 
https://www.ted.com/watch/tedx-talks
https://repositorio.unb.br/handle/10482/7110
 
 
• Aplique a taxonomia, que é a nomenclatura para os agrupamentos de conteúdos 
que você criou; 
• Aplique informações descritivas definindo metadados úteis e eficientes para gerar 
listas dos conteúdos relacionados ou outros componentes de navegação. Isto 
ajuda os usuários a localizar o conteúdo de que precisam. 
Para visualizar um exemplo, você pode buscar um mapa de site ao final de algum portal 
de conteúdo ou site da empresa de sua preferência. Você verá que todo o conteúdo é 
dividido em categorias e subcategorias, de acordo com a taxonomia adotada para os 
usuários daquele determinado tipo de conteúdo. 
SEÇÃO 2 | PLANEJAMENTO DE INTERFACE, ORGANIZAÇÃO ESPACIAL E 
HIERARQUIA VISUAL 
 
O aspecto visual da interface é regido por um conjunto de fatores de ordem gráfica e de 
informação. Na realidade, o que observamos em diversas páginas e aplicativos pode ser 
um pouco diferente, uma vez que a sua estrutura não foi bem planejada. A partir de uma 
análise atenta e alguns indicadores, é possível perceber problemas na arquitetura de 
informação em diversos produtos. 
 
Sendo assim, se o objetivo é fazer um diagnóstico existem algumas métricas que você 
pode considerar, como: o baixo tráfego em determinada categoria, a baixa conversão, as 
altas taxas de rejeição, o baixo número de entradas e o alto volume de pesquisas. Com 
tais dados em mãos, aproveite para realizar os ajustes necessários em suas categorias, 
no menu do site e nas demais seções que tenham indicado problemas. 
 
Porém, é como diz o ditado: “é melhor prevenir do que remediar”. Por isso, para evitar o 
retrabalho ou a constante verificação das métricas porque seu site não atrai ou retém, 
procure dedicar-se à etapa de planejamento da interface considerando a organização e 
a hierarquia visual, conforme exposto na seção sobre arquitetura da informação. Entre 
as principais estratégias de conteúdo, destacamos que deve ser: 
 
● Usável e encontrável: fácil de encontrar, acessar e ler; 
● Claro e preciso: fácil de entender, coeso e correto; 
 
 
● Completo: atende a todas as necessidades do usuário; 
● Consistente: tem o estilo, a linguagem e a abordagem necessárias para o usuário 
conseguir alcançar seus objetivos; 
● Útil e relevante: alcança os objetivos dos usuários e também de negócios. 
 
Após essa etapa que envolve o desenho do mapa do site, você poderá iniciar a 
elaboração do protótipo de baixa fidelidade ou sketch, que é um rascunho simplificado 
do seu projeto de interface (Figura 2). 
 
 
Figura 2. Rascunhos em papel para futuros wireframes. Fonte: Pixabay. 
 
Para o desenvolvimento de sites e aplicativos com boa navegação, designers e 
desenvolvedores necessitam organizar, planejar e estruturar os conteúdos da interface. 
Para tanto, é fundamental considerar dois aspectos: a organização espacial e a 
hierarquia visual – aspectos relacionados diretamente à arquitetura da informação. 
 
A organização espacial refere-se à melhor organização e distribuição dos elementos no 
espaço da tela, assim como ocorre em uma obra de arte. Imagine, por exemplo, que você 
é um artista realizando um estudo prévio sobre o que vai colocar na tela em branco. Essa 
percepção está relacionada à espacialização de imagem e texto, botões, ícones, 
chamadas para ação, menus e todo o tipo de elemento visual que vai influenciar no 
conteúdo da interface. 
 
 
 
A hierarquia visual, por sua vez, diz respeito ao melhor fluxo dos elementos de acordo 
com sua ordem de importância, seja na perspectiva da arquitetura do site ou aplicativo 
ou dos elementos de navegação através dos quais o usuário interage com a interface. 
 
MULTIMÍDIA - No seu livro Design para quem não é designer, o autor Robin Williams 
comenta sobre os quatro princípios básicos de design que podem ajudar você a controlar 
a diagramação de uma página impressa, mas que também têm aplicação em páginas 
digitais. São eles: contraste, repetição, alinhamento e proximidade. Vale a pena você 
conferir esses conceitos! 
 
 
Para projetar esses esboços, você pode começar com um desenho simples em papel ou 
então contar com os recursos de alguns softwares para edição gráfica. Entre os 
principais, destacam-se: Adobe Photoshop, InVision, Lucidchart, Miro e Figma. Alguns 
destes oferecem uma conta gratuita com limitações de recursos ou planos de teste por 
tempo limitado, mas as empresas da área costumam adquirir com frequência planos de 
assinatura para viabilizar o trabalho da equipe. Os esboços podem conter diagramas, 
fluxogramas (Figura 3), wireframes e todo tipo de conteúdo visual que seja capaz de 
apresentar as principais ideias sobre o projeto. 
 
 
 
 
Figura 3. Exemplo de fluxograma. Fonte: Public Domain Vectors. 
 
Caso você seja um(a) profissional independente ou microempreendedor(a), vale a pena 
verificar o custo-benefício do investimento para o seu projeto. Lembre-se de que mais 
vale o seu conhecimento, habilidade e capacidade de apresentar um projeto claro e bem 
planejado para o seu cliente do que o manejo técnico de um software sofisticado para a 
criação das peças gráficas. Portanto, para dimensionar o planejamento da interface, você 
vai precisar contar com uma espécie de guia denominado style guide do projeto. Este 
recurso possibilita aos designers terem em mãos os detalhes sobre a identidade visual 
da marca ou empresa, como a paleta de cores, o estilo dos botões e demais componentes 
visuais. 
 
MULTIMÍDIA - Conheça a linguagem de design adotada pela IBM, disponível em: 
https://www.ibm.com/design/language/ 
 
https://www.ibm.com/design/language/
 
 
Então, como definir o que deve ser destacado e merecer relevância dentro do projeto de 
interface para refletir na melhor experiência do usuário? Como ocorre em todo projeto, 
existem alguns recursos para criar esses destaques nas informações de forma que o 
usuário veja primeiro o que é mais importante no conteúdo. Neste ponto, a hierarquia 
visual funciona como um método que determina em que ordem o usuário irá visualizar as 
informações, ou seja, o que verá em primeiro, segundo e terceiro lugar. Isso porque nossa 
tendência é escanear o que se apresenta à nossa frente, logo escolhemos o que lemos 
primeiro. Observe o esquema abaixo. 
 
 
Figura 4. Níveis de atenção. Fonte: Elaborada pela autora. 
 
Se a gente compreender tais níveis de atenção, é possível projetar uma interface mais 
eficiente e capaz de satisfazer – e até superar! – as expectativas do nosso usuário. Na 
obra Design para um mundo complexo, Rafael Cardoso elabora uma análise sobre a 
evolução da sinalização visual no ambiente físico para o contexto da informação na 
paisagem virtual. Ele comenta que antes contávamos com uma espécie de malha ou 
sistema distributivo de orientação aos usuários de um determinado sistema, como o 
transporte ferroviário, por exemplo, que era distribuído por ramais ou canais. 
 
Atualmente, nossa configuração de malha ocorre em redes que operam no cenário ou 
ambiente digital, gerando assim um ambiente ou paisagem que identificamos comodesign informacional ou arquitetura de informação. Assim, a hierarquia visual serve para 
informar o usuário, criar relações entre os conteúdos e criar a experiência, pois se o 
 
 
usuário fica satisfeito enquanto navega isto é sinal de que reduzimos o seu esforço ao 
seguirmos os caminhos corretos. 
 
SEÇÃO 3 | SITEMAP E SKETCH 
 
Da mesma forma que ocorre com os fluxogramas e diagramas, as informações visuais 
projetadas nos esboços de telas não servem somente como uma ferramenta de design 
para a organização ou apresentação do produto. Mais do que isso, a função da 
organização visual de conteúdo é situar o usuário dentro da malha de informações que 
ele busca. De acordo com Cardoso (2016): 
 
Para seus usuários, a porção legível da web é o ponto de entrada. A primeira 
interface visual é, em muitos sentidos, o mais decisivo. A maioria dos 
navegadores oferece a possibilidade de escolher uma página inicial, mas não é 
concebível navegar na rede sem entrar por página alguma e sem transitar de 
página em página, de site em site. Por mais que um especialista consiga acessar 
a internet por meio de linguagens de programação, sem nenhuma configuração 
visual mais elaborada, isso não reflete a prática comum, pois são relativamente 
poucas as pessoas que conhecem e dominam os códigos por trás da parte 
visível. (CARDOSO, 2016, p. 136) 
 
Essa afirmação vem refletir a necessidade da elaboração de uma interface visualmente 
organizada e estruturada para que o usuário possa encontrar as informações desejadas 
na página. Para tanto, podemos transpor aquela ideia de malha contida na informação 
digital para a ideia do grid, um recurso de divisão espacial gráfica que tem a finalidade 
de nos possibilitar o trânsito entre as partes das interfaces. 
 
Segundo os autores, a internet está no patamar em que se encontra devido ao nível de 
elaboração das interfaces gráficas que sustentam a world wide web. Isto representa para 
a visão dos usuários que a rede WWW é um sistema de documentos interligados, “o qual 
exige que cada documento tome alguma configuração visual e assuma uma aparência 
inteligível. Em suma, do ponto de vista de sua difusão social, a rede é um fenômeno tanto 
de design quanto de informática” (CARDOSO, 2016, p. 136). 
 
Considerando a necessidade de organização e hierarquia das informações, uma das 
práticas em design de sites e aplicativos é a representação denominada sitemap. Essa 
 
 
lista contém todas as páginas ou URL do site, e sua finalidade é indicar para os robôs do 
Google e de outros buscadores que páginas deverão ser indexadas e armazenadas para 
as buscas. Da mesma forma, servem para auxiliar o usuário na navegação para encontrar 
as páginas no site. 
 
GLOSSÁRIO - Sitemap é um termo em inglês que designa o mapa do site por meio de 
uma lista de arquivos usados para disponibilizar as informações sobre as páginas e a 
relação entre elas. 
 
 
Figura 5. Exemplo de mapa de site. Fonte: Pixabay. 
Assim, o objetivo do sitemap é mostrar uma visão geral de todo o site ou aplicativo com 
um direcionamento para o usuário. O buscador, então, poderá identificar as páginas 
apresentando-as como resultado da pesquisa. Para gerar um sitemap existem diversos 
formatos, como XML, TXT e, o mais conhecido e utilizado, XML. 
Você pode criar um sitemap utilizando um plug-in, caso dos blogs no WordPress ou 
através de outras ferramentas visuais. Existem diversos geradores de sitemap para 
auxiliar na visualização da hierarquia das páginas e assim apresentar a estrutura para o 
seu cliente. Alguns softwares para criar sitemaps possuem a função de arrastar e soltar, 
além da personalização de cores e imagens. Exemplos: XML Sitemaps, Google XML 
Sitemaps, Lucidchart, Creately, Miro. 
 
 
 
MULTIMÍDIA - Conheça o Miro, uma plataforma direcionada à criação de recursos visuais 
de diferentes tipos e formatos, além de oferecer uma conta gratuita com diversos 
recursos. Disponível em: https://miro.com/miroverse/ 
 
Quanto ao sketch, podemos definir sua utilização como o primeiro esboço do projeto, 
incluindo simples rascunhos de telas ou fluxos, além de storyboards e mapas de site, 
mas conservando a ideia de rascunho, que é peculiar desse formato. Apesar de não 
exibirem o nível de detalhes esperado de um protótipo de alta fidelidade, os sketches 
costumam auxiliar na representação das ideias básicas do projeto. Podem ser muito úteis 
no sentido de organizar visualmente tais informações para as primeiras reuniões com o 
cliente, enquanto você cria efetivamente o projeto. 
 
O sketch está inserido, portanto, na etapa de planejamento de projeto e processo de 
design, e os profissionais envolvidos nesta tarefa podem adotar o uso de softwares como 
Adobe Photoshop, Adobe XD, Figma, Sketch etc. Contudo, o mais importante é dar 
atenção a algumas boas práticas para a criação de interfaces amigáveis e eficazes. 
 
 
Figura 6. Exemplo de sketch. Fonte: Pixabay. 
 
Para construir esboços e protótipos, você pode observar algumas das boas práticas no 
processo de desenvolvimento projetual relacionadas na sequência: 
 
https://miro.com/miroverse/
 
 
● A interface precisa ser simples de navegar, por isso destaque os elementos mais 
relevantes em seções de fácil acesso e utilize termos e nomenclaturas conhecidos 
e frequentemente utilizados pelos usuários; 
● Os elementos de uma interface devem ter aparência e comportamento 
consistentes além de boa legibilidade, então procure usar guias de estilo ao 
projetar seu design; 
● Teste seus projetos em diversos tamanhos de tela, pois isso garantirá que seus 
usuários conseguirão ter acesso em diferentes dispositivos; 
● Adote padrões de design system no seu projeto, porque assim você garante 
identificação com a marca ou produto e não corre o risco de errar ao utilizar algum 
design ou elemento que não estaria de acordo com os critérios de design da marca 
ou empresa; 
● Utilize os princípios do design gráfico aplicados ao design digital para criar 
interfaces atraentes e intuitivas (cores, tipografia, fontes, contraste, alinhamento, 
simetria, proximidade etc.). 
 
Para finalizar, leve em conta que a organização da informação tem a função primordial 
de conduzir seus projetos alinhados aos fluxos mais adequados à experiência do usuário. 
Para a compreensão mais ampla dessas práticas, recomendamos que você observe com 
o olhar de designer os produtos e serviços que já utiliza. Este pode ser um exercício 
produtivo e que lhe ajudará no momento de esboçar um projeto de interface. 
 
SEÇÃO 4 | WIREFRAME E MOCKUP 
 
Nesta seção, vamos ampliar um pouco mais o estudo sobre protótipos no processo de 
design do produto. Para tanto, será necessário que você considere todos os 
conhecimentos adquiridos até o momento a respeito de como criar e desenvolver 
desenhos em projetos para interface. 
 
De um modo integrado, o que pretendemos ao criar um protótipo é oferecer ao cliente 
uma visualização do produto que estamos desenvolvendo, além de obter maior clareza 
sobre os caminhos que escolhemos ao projetá-lo. Embora essa tarefa seja um tanto 
complexa, existem os recursos de prototipação que frequentemente são aplicados ao 
design para organizar e agilizar a informação visual das interfaces. 
 
 
 
Neste sentido, os wireframes possuem a finalidade de apresentar um pouco mais de 
detalhes sobre o projeto. Para isso, aproveitamos todas as informações que recolhemos 
durante o processo de briefing, a coleta de informações sobre o usuário (a persona) e as 
diretrizes do design system e style guide. Passamos, então, ao desenho em software de 
prototipagem propriamente dito, com objetivo de criar o primeiro conjunto de telas que 
irão formar um wireflow, um fluxo de telas. Nestes wireframes, não utilizaremos cores 
nem texto, apenas os elementos gráficosindispensáveis para dar uma primeira visão 
geral do protótipo. 
 
Os wireframes podem ser clicáveis ou não clicáveis, dependendo de sua finalidade, pois 
você pode apenas apresentá-lo ao cliente ou ao gestor de projeto, ou, ainda, utilizá-lo 
junto a uma pesquisa preliminar com usuários. De qualquer maneira, seu formato não se 
altera; apenas são incluídos elementos interativos no caso de ser um protótipo clicável 
para a etapa inicial de pesquisa de usuário. 
 
Para a criação de wireframes também são adotados softwares gráficos de prototipação, 
a fim de facilitar o desenho e incluir os elementos interativos quando necessário. Os 
principais softwares de design comerciais são o Figma e o Adobe XD, que oferecem 
assinaturas e possibilidade de contas gratuitas com certas limitações de uso. Contudo, 
existem boas alternativas gratuitas, como o Miro, e até de código aberto, como é o caso 
do Penpot. 
 
MULTIMÍDIA - Conheça o Penpot, multiplataforma de design e prototipagem de código 
aberto e baseada na web. Não dependente de sistemas operacionais e é destinada a 
equipes de vários domínios. Disponível em: https://penpot.app/ 
 
A seguir uma relação com outras sugestões de softwares para prototipação: 
 
● Justinmind 
● InVision 
● Proto.io 
● Origami 
● Balsamiq 
https://penpot.app/
 
 
● Fluid 
● Axure RP 
● Sketch 
 
Da mesma forma que o wireframe, podemos compreender o mockup como um protótipo, 
mas, neste caso, de maior fidelidade. Assim, o mockup também serve para representar 
o produto final e inclui na sua forma os recursos de cor, tipografia, botões e demais 
elementos que serão utilizados pelo usuário. Podemos dizer que o mockup é uma espécie 
de maquete, em que todos os atributos do produto já estão adicionados e codados, ou 
seja, estão disponíveis para os testes reais com usuários. 
 
Além das ferramentas já citadas para prototipagem, existem algumas de uso específico 
para auxiliar designers na tarefa de comunicar o design com especificações para a equipe 
de desenvolvimento front-end. Exemplos: Zeplin, GitHub, Storybook (código aberto). 
 
Com relação às ferramentas, é recomendável que você analise que tipo de projeto tem 
em mãos, verificando se é da ordem do design gráfico, para web ou aplicativo. A partir 
dessa definição, você deverá analisar outros aspectos, como: necessidade de integração 
com demais plataformas ou softwares de design, prototipação, gerenciamento do projeto, 
construção do design system ou adoção de um já existente. 
 
Outros fatores importantes a considerar são as habilidades dos designers e o tamanho 
da equipe, suas necessidades de comunicação e colaboração. Além disso, é fundamental 
saber os recursos disponíveis na empresa sobre os softwares adotados e planos 
gratuitos, individuais ou para equipes. E por último, mas não menos importante, 
destacamos que este profissional deve ter conhecimento e clareza sobre a natureza do 
projeto, no sentido de ser algo inédito, um desdobramento ou uma atualização de projetos 
anteriores. 
 
Tendo em vista que projetos profissionais de design ou mesmo back-end e front-end são, 
na maioria dos casos, iniciativas desenvolvidas em equipes com mais de um integrante, 
é interessante adotar um sistema de gerenciamento do projeto. Para tanto, os 
colaboradores devem manter um ritmo de comunicação fluente e objetivo, a fim de que 
 
 
todos da equipe possam visualizar o andamento do trabalho e ter clareza de suas 
atribuições. 
 
Nessa perspectiva, é preciso ter em mente que qualquer omissão ou negligência neste 
sentido poderá acarretar danos para o projeto e para a equipe, resultando em ineficiência, 
retrabalho e prejuízos financeiros. Entre as principais ferramentas para gerenciamento 
de tarefas e projetos, podemos citar Trello, Slack, Jira e Asana. 
 
REFLEXÃO - Você já parou para pensar sobre o valor da comunicação e da colaboração, 
e na maneira como o desenvolvimento individual dessas importantes soft skills pode 
influenciar no bom desempenho do trabalho em equipe? Vale a pena você exercitar a 
boa capacidade de comunicação e colaboração, praticando-as sempre que tiver 
oportunidade de contribuir com algo positivamente, em benefício dos demais envolvidos 
no projeto. Essas são habilidades relevantes no século XXI, além de muito valorizadas 
pelos líderes de equipes. 
 
Como conclusão, acredito que a realização de um projeto de prototipagem abrange 
sempre diversas variáveis, como você deve ter percebido nas discussões até o momento. 
Com uma equipe habilidosa, ainda que pequena, e com um certo nível de domínio 
técnico, engajamento e protagonismo, é possível alcançar patamares de excelência no 
desenvolvimento de projetos de design. Apesar do porte da equipe ou do tipo de projeto, 
lembre-se de que: 
 
● O foco da prototipagem permanece centrado nas necessidades e experiências do 
usuário, além dos levantamentos coletados durante as pesquisas e nas medidas 
empíricas, ou seja, reais e quantificáveis sobre o produto; 
● A prototipagem não deve ser descartada em um bom projeto, uma vez que o 
desenho interativo ocorre somente pelo cumprimento das etapas, como design, 
teste, avaliação e redesenho; 
● A adoção de um design system consistente reflete no desenho do produto, 
resultando numa interface amigável e que cumpre o esperado pelo usuário. 
 
Dessa forma, é possível aprimorar a qualidade do design final e consequentemente 
alcançar a máxima satisfação e eficiência no projeto. 
 
 
 
SEÇÃO 5 | FLUXO DO USUÁRIO 
 
Quando falamos em fluxo, imediatamente imaginamos a representação de algo que flui 
em uma determinada direção, concorda? Com isso, podemos associar a ideia de fluxo a 
percurso ou caminho. Certamente seu significado tem a ver com essa ideia, uma vez que 
para algo fluir é necessário ter direcionamento e constância. 
 
Com o fluxo do usuário ou user flow não é diferente, visto que designa uma terminologia 
utilizada no design de interface como forma de representar os caminhos adotados pelo 
usuário. Mas como definir que ele efetivamente seguirá o fluxo? E que fluxo é esse, 
afinal? 
 
ATENÇÃO - No dia a dia, o profissional deve ficar atento à diferença entre os conceitos 
de fluxo do usuário e jornada do usuário. O fluxo do usuário consiste em um caminho 
percorrido pelo usuário na utilização de um produto digital, enquanto a jornada do usuário 
é o caminho seguido para atingir um objetivo quando ele usa o produto. Compreender os 
processos é fundamental no mapeamento da jornada para entender e construir a 
experiência do cliente. 
 
Bem, a essa altura você já deve ter notado que todo o processo ocorrido em uma tela ou 
várias telas não é fruto de escolhas aleatórias. Nessa combinação de elementos e 
aspectos, temos a ordem de navegação na interface como um ponto alto de atenção do 
projeto. Aqui é onde os conceitos de arquitetura da informação e design de informação 
começam a tomar forma propriamente dita no protótipo. 
 
Você lembra das estruturas de sitemap e wireframes? Pois bem, são os itens que 
garantirão ao nosso usuário uma jornada de satisfação que fará sentido para sua 
experiência ao utilizar a interface. Para fins didáticos, vamos considerar de uma forma 
resumida que a interface é a área que produz a interação gráfica com o usuário para 
atingir as funcionalidades do produto enquanto a experiência atua com os processos de 
estruturação do desempenho, usabilidade, acessibilidade e subjetividade pela percepção 
e nível de satisfação. 
 
 
 
Logo, é fácil concluir que essa integração só irá fazer sentido visualmente quando 
desenharmos o fluxo desse usuário na interface. E como desenvolver o fluxo? A resposta 
resulta da aplicação de todas as informações anteriores, principalmente relacionadas à 
persona, ao objetivo do produto e às interações desejadas nas telas. Se vocêparar para 
pensar no percurso realizado em um streaming de música, vai perceber que há uma 
lógica por trás daquilo que chamamos de uso “intuitivo” do site ou aplicativo, não é 
verdade? Então, esse caminho intuitivo foi projetado passo a passo para guiá-lo em suas 
decisões enquanto você se preocupa com o mais importante, que é a escolha do estilo 
musical, artista ou música favorita. Desde o momento em que você acessa o aplicativo 
clicando no ícone situado na sua área de trabalho ou digitando a URL na barra de 
navegação, você já é um usuário experimentando o fluxo da interface. 
 
Como exercício, coloque-se novamente no papel de designer ou desenvolvedor e procure 
perceber como é transitar do papel de usuário da interface para a função de projetista do 
fluxo da interface. Vê agora por que é tão importante mapear esse trajeto para desenhar 
e desenvolver uma interface eficiente, amigável e satisfatória às necessidades do cliente? 
Tal percepção pode dar a você a exata dimensão do que citamos frequentemente a 
respeito da consistência necessária entre design de experiência e design de interface. 
 
Apesar da compreensão dos aspectos teóricos aliados à nossa própria percepção como 
usuários, não é incomum no processo de design cairmos em erros que poderiam ter sido 
identificados ao aplicarmos corretamente o espelhamento entre user flow e wireflow. Sim, 
porque mapear adequadamente o fluxo de usuário não garantirá que a navegação ocorra 
sem problemas. Por esse motivo, precisamos mais uma vez dos protótipos, de 
preferência iniciando pelos sketches e passando gradativamente às melhorias com os 
wireframes e posteriormente os mockups. 
 
Para criar o design do fluxo, você pode utilizar recursos como diagramas e fluxogramas, 
por meio das mesmas ferramentas que apresentamos anteriormente para a elaboração 
dos protótipos. Ao iniciar a projeção de user flow, procure considerar que todo o processo 
do usuário envolve uma questão central – a tomada de decisões. Portanto, o início e o 
fim do fluxo do usuário são sempre delimitados e definidos por ações. 
 
 
 
MULTIMÍDIA - Para criar fluxogramas de processos e outros recursos visuais com 
diagramação para seu projeto, saiba mais sobre o aplicativo Lucidchart em 
https://www.lucidchart.com/pages/pt. 
 
Essa constatação possibilita que você crie com muito mais facilidade uma espécie de 
mapa do processo mental dos seus usuários. O diagrama de fluxo pode ser a estratégia 
adequada para você projetar os caminhos, mas antes certifique-se de ter entendido 
completamente a persona e as necessidades do cliente. Sem obter total clareza dessas 
informações e propósitos do produto ou serviço, ficará inviável projetar com foco nos 
resultados para este usuário. 
 
Assim, os diagramas de fluxo do usuário são utilizados pelas equipes de design de 
experiência e de produto, passando pelo design de interface. Seu objetivo é responder 
visualmente às questões citadas anteriormente através do diagrama, apontando as 
principais ações tomadas pelo usuário no seu site ou aplicativo. Você pode elaborar 
vários diagramas de acordo com o nível de complexidade das ações e os fluxos 
requeridos no projeto. 
 
Para complementar, considere que a função dos diagramas de fluxo não deve ser 
aplicada somente no início de um projeto novo, mas também para a compreensão e as 
melhorias de produtos e serviços já existentes. Tais recursos auxiliam você a visualizar 
qual poderia ser a experiência mais adequada para o seu usuário e a colocá-la em prática 
na interface. 
 
Tanto no aspecto técnico quanto no estético, o processo de construção de wireframes e 
mockups deve possibilitar a visualização das etapas de desenvolvimento do projeto, além 
de ser capaz de apresentar a complexidade da experiência projetada para o usuário. 
Dessa forma, e uma vez que seja bem desenhado, irá representar em menor ou maior 
escala de fidelidade o modelo de negócios pretendido pelo seu cliente. 
 
Agora é a sua vez 
Leia o texto a seguir. 
Consideramos o processo de prototipação como um sistema organizado para gerar a 
experiência por meio do design. Tal processo envolve a aplicação de conceitos e modelos 
https://www.lucidchart.com/pages/pt
 
 
de organização da informação para projeção de sistemas complexos. Nas áreas de 
sistemas de informação ou tecnologia da informação, o projeto de design arquitetural 
deve apresentar uma estrutura esquematizada do ambiente compartilhado. 
 
Considerando as informações apresentadas e o conteúdo estudado, o texto que você 
acaba de ler corresponde ao conceito de 
a) design de produto. 
b) interface de usuário. 
c) style guide. 
d) arquitetura da informação. 
e) design visual. 
 
Acertou? 
A alternativa correta é a letra D, pois representa a ideia de organização que utiliza os 
processos de design informacional estruturados para o melhor desempenho do conteúdo 
da interface. Tal sistema é criado com foco na experiência do usuário, utilizando os 
processos de design com objetivo de proporcionar interação e usabilidade. 
 
RECAPITULANDO 
 
Esta unidade apresentou a você alguns fundamentos sobre o contexto de organização 
dos sistemas de mockup e wireframe relacionados à experiência do usuário e à 
arquitetura da informação, com objetivo de desenvolver sistemas projetuais para 
interfaces. 
 
Aguardo você na próxima Unidade. Até! 
 
REFERÊNCIAS BIBLIOGRÁFICAS 
 
ALBUQUERQUE, Alfram Roberto Rodrigues de. Discurso sobre fundamentos de 
arquitetura da informação. 2010. 241 f. Tese (Doutorado em Ciência da Informação), 
Universidade de Brasília, Brasília, 2010. Disponível em: 
https://repositorio.unb.br/handle/10482/7110. Acesso em: 22 mai. 2023. 
 
https://repositorio.unb.br/handle/10482/7110
 
 
CARDOSO, Rafael. Design para um mundo complexo. São Paulo: Ubu, 2016. 
 
EWING, Chris; MAGNUSON, Erik; SCHANG, Steve. Information Architecture Proposed 
Curriculum. 2003. Disponível em: https://www.researchgate.net/profile/Chris-Ewing-
2/publication/265065684_Information_Architecture_Proposed_Curriculum/links/546f7cd
b0cf2d67fc031160f/Information-Architecture-Proposed-Curriculum.pdf. Acesso em: 22 
mai. 2023. 
 
LOWDERMILK, Travis. Design centrado no usuário. São Paulo: Novatec, 2019. 
 
MACEDO, Flávia Lacerda Oliveira de. Arquitetura da informação: aspectos 
epistemológicos, científicos e práticos. 2005. 190 f. Dissertação (Mestrado em Ciência da 
Informação), Universidade de Brasília, Brasília, 2005. Disponível em: 
https://repositorio.unb.br/handle/10482/35858. Acesso em: 22 mai. 2023. 
 
PAIVA, Rodrigo Oliveira de. Uma anatomia da arquitetura da informação. Múltiplos 
Olhares em Ciência da Informação, v. 2, n. 2, out. 2012. XXXV Encontro Nacional de 
Estudantes de Biblioteconomia, Documentação, Ciência da Informação e Gestão 
da Informação. Escola de Ciência da Informação, Universidade Federal de Minas 
Gerais, Belo Horizonte. Disponível em: 
https://periodicos.ufmg.br/index.php/moci/article/download/16959/13721/48064. Acesso 
em: 22 mai. 2023. 
 
WILLIAMS, Robin. Design para quem não é designer: noções básicas de planejamento 
visual. São Paulo: Callis, 1995. 
https://www.researchgate.net/profile/Chris-Ewing-2/publication/265065684_Information_Architecture_Proposed_Curriculum/links/546f7cdb0cf2d67fc031160f/Information-Architecture-Proposed-Curriculum.pdf
https://www.researchgate.net/profile/Chris-Ewing-2/publication/265065684_Information_Architecture_Proposed_Curriculum/links/546f7cdb0cf2d67fc031160f/Information-Architecture-Proposed-Curriculum.pdf
https://www.researchgate.net/profile/Chris-Ewing-2/publication/265065684_Information_Architecture_Proposed_Curriculum/links/546f7cdb0cf2d67fc031160f/Information-Architecture-Proposed-Curriculum.pdf
https://repositorio.unb.br/handle/10482/35858
https://periodicos.ufmg.br/index.php/moci/article/download/16959/13721/48064