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

Podemos definir wireframe como um esqueleto, um protótipo ou uma versão bastante primitiva do visual de um projeto. Ele consiste na representação da diagramação e das estruturas macro do site, ou seja, apresentamos por meio de formas geométricas e linhas como pensamos a divisão da interface em seções. O wireframe não contém cores, identidade visual ou conteúdo e pode ser feito com lápis, caneta, régua e borracha, ou pode também ser feito com um software como o Adobe Photoshop, que produz uma imagem estática (e mais caprichada) de um wireframe. Ou, caso você esteja trabalhando em um projeto um pouco mais complexo, como o de um software, é interessante usar uma ferramenta como o Adobe XD, que é gratuito e pode entregar protótipos mais próximos da realidade, com interações e animações, mas ainda mantendo a característica de não ter cores, identidade visual ou conteúdo. Desta forma, os dois objetivos principais do wireframe são o auxílio ao designer na hora da diagramação dos conteúdos e na aplicação da identidade visual, e também ser a principal ferramenta em relação a um alinhamento inicial da expectativa do cliente quanto ao visual do projeto contratado.

Fonte: https://www.organicadigital.com/blog/o-que-sao-wireframes-e-por-que-os-utilizamos. Acesso em: 3 dez. 2024.

A partir disso, crie um wireframe básico para um aplicativo fictício de gestão de tarefas, seguindo as seguintes orientações:

1) Requisitos do Aplicativo:

Tela Principal:

Deve exibir uma lista de tarefas com um botão Editar, um Excluir e um Concluir na frente de cada tarefa. Deve ter um Filtro com as opções: “Todas”, “Pendentes” e “Concluídas”. Ao clicar na tarefa, deve ter um local para mostrar o conteúdo da mensagem. Deve-se ter um botão de Criar nova Tarefa.

Tela de Criação de Tarefa:

Deve permitir ao usuário adicionar uma nova tarefa com os campos: Título, Descrição e Data de Conclusão. Deve ter o botão: Salvar.

2) Ferramentas: Você pode utilizar ferramentas online como https://wireframe.cc, Lucidchart, Figma ou Canva, ou até mesmo papel e caneta para desenhar o wireframe. Caso faça em papel e caneta, envie a foto das telas. Para os demais, exporte como imagem ou tire print de cada tela.

3) Instruções:

Crie os layouts das duas telas (Inicial, Criação de Tarefa e Detalhes). Inclua botões, ícones e divisões visuais para organizar os elementos. Adicione rótulos indicando o propósito de cada elemento.