ATIVIDADE 1 – ADSIS – IMERSÃO PROFISSIONAL PROJETO DE INTERFACE – 51_2026

Um wireframe é um diagrama visual que esboça a estrutura de uma tela de um site ou de aplicativo. Às vezes conhecido como protótipo de tela ou app, o wireframe demonstra como os elementos se relacionam entre si e como são estruturados. O Wireframing, ou seja, o ato de criar wireframes, é um processo que busca criar uma visão geral de uma tela. Designers de User Experience (UX) geralmente o utilizam para mapear o design e o layout de seu trabalho sem entrar em muitos detalhes. É a primeira etapa do processo de design antes de entrar em mais detalhes sobre cores, fontes, imagens etc.

Geralmente, os wireframes contêm os seguintes elementos:

Estrutura da página. 
Um wireframe delineia a estrutura de uma página ou aplicativo. Ela ajuda os designers a descobrir onde certos elementos devem ficar e ter uma ideia de como será o design.

Arquitetura da informação. 
Dentro da estrutura, os designers também precisam planejar onde os elementos da página ficarão. Os designers podem organizar onde esses elementos devem ir dentro da estrutura de uma página.

Fluxo do usuário (User Flow). 
Os designers de UX precisam considerar como os usuários navegarão na página. É aqui que a criação de wireframe pode ajudar. A criação de um wireframe te força a considerar o conteúdo da página a partir da perspectiva do usuário. Como resultado, é provável que eles criem uma página ou aplicativo que seja de fácil utilização.

Funcionalidade. 
Os desenvolvedores utilizam um wireframe para visualizar a funcionalidade de um aplicativo antes de passar para as fases de design técnico. Eles podem ver como querem que a página ou app funcione e que recursos precisam para fazer isso acontecer.
 

Pautando-se nas informações apresentadas, selecione um aplicativo instalado em seu celular e elabore o wireframe de duas telas, utilizando papel e caneta para representar a estrutura e os elementos principais da interface. O wireframe deve conter, no mínimo:

a) Cabeçalho (logo, menu ou navegação principal).
b) Área de conteúdo principal.
c) Elementos de interação (botões, links, campos de busca, formulários etc.).
d) Rodapé ou área de informações complementares.
e) Indicação textual dos elementos (exemplo: “Menu”, “Banner”, “Botão”, “Lista de Produtos”).

Importante: não utilizar cores, imagens detalhadas ou estilização visual. Use apenas formas simples (retângulos, linhas e textos curtos).

O estudante deverá anexar um arquivo contendo:

1) O Nome do Aplicativo.
2) Um print com as telas escolhidas.
3) Uma foto legível do wireframe criado.