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.
