Introducing
Your new presentation assistant.
Refine, enhance, and tailor your content, source relevant images, and edit visuals quicker than ever before.
Trending searches
40
Wireframes
Grupo 7
Nomes:
RA:
INTEGRANTES
ÍNDICE
Alexsander da Silva Lima
Álef Pinheiro de Sena
Carlos Eduardo Neres da Silva
Christian Neves Real de Araujo
Christian Pereira de Godoi
Diego Jesus Melo
Eduardo de Araújo Costa
Italo Henrique dos Santos Quelé
2219110063
2219106888
2219108435
2219109908
418103343
2219109243
2218202316
2219108492
Índice
Introdução......................................................................01
Tipos..............................................................................02
Características...............................................................03
Ferramenta....................................................................04
Referências Bibliográficas.............................................05
Conclusão......................................................................06
Conceito de Wireframe
O Wireframe é um corpo ou um protótipo da página de um site ou aplicativo.
Isso significa que antes da criação ou elaboração do layout é criado uma espécie de rascunho. Dessa forma, conseguimos enxergar como o produto vai ficar. Caso seja verificado que há algo errado, é possível ajustar o esboço quantas vezes for necessário.
O Wireframe se torna um guia para o auxilio do diagrama da página. Apesar de ser muito usado no início de cada novo projeto, ele também pode ser de grande utilidade quando for necessário fazer alguma alteração, como a implementação de uma nova ferramenta no app da empresa.
INTRODUÇÃO
Wireframe em um Projeto
Imagine que você tem uma empresa que desenvolve sites e acaba de fechar negócios com um cliente. Você e executa o projeto de acordo com o que foi passado na reunião. Chega na hora da entrega, e seu cliente diz que não gostou do resultado do site entregue e pede para refazer do zero.
IMPORTÂNCIA
Esse tipo de situação é bastante incômodo, mas acontece com frequência. Ao elabora o projeto em Wireframe antes de entregar o projeto finalizado, você evita esse tipo de transtorno que gera gastos e atrasos e assim também você coloca o cliente no projeto deixando-o mais tranquilo e fazendo ele participar da criação do mesmo. Até porque é mais fácil altera o esboço do site em vez dele já estar pronto.
Tipos de Wireframes
BAIXA
FIDELIDADE
Os Wireframes se consistem em três tipos de protótipo, sendo eles: Baixa Fidelidade, Média Fidelidade (Anotado) e Alta Fidelidade. E o quanto um protótipo se parecerá com a versão final de uma aplicação é o que chamamos de "Finalidade".
MÉDIA
FIDELIDADE
TIPOS
ALTA
FIDELIDADE
Baixa Fidelidade
Faz uso manual e simples do esboço utilizando, geralmente, papel, lápis e caneta para um levantamento rápido de requisitos que são chamados de sketches, breves rascunhos antes da próxima etapa no desenvolvimento do site.
Exemplo:
Média Fidelidade
São protótipos já desenvolvidos diretamente no sistema utilizando programas como Balsamiq, Mockflow e Draw.io onde já definimos uma forma básica sobre layout com imagens e podendo criar simulações de navegação e uso de botões.
Exemplos:
Alta Fidelidade
Nesse protótipo já é utilizado ferramentas mais precisas em questão de gráfico e designer da interface para que chegue o mais próximo possível do produto, para que cliente já tenha ideia de como ficará o produto, com uso das ferramentas, botões e navegação.
Exemplo:
Características de Wireframe
As características do Wireframe são:
- Simples de ser feito, pois pode ser feito em uma folha de papel.
- Baixo custo de produção, por não ser necessário o uso de um software profissional, mesmo sendo o recomendado.
- E rápido, pois o uso do Wireframe é ideal para agilizar o desenvolvimento do projeto.
CARACTERÍSTICAS
Axure
O software Axure é uma ferramenta rápida que disponibiliza protótipos e Wireframe com diagramas de fluxos, formulários e elementos dinâmicos que podem ser editados de forma personalizada.
Toda a Experiência do Usuário pode ser testada em grupo, já que os dados de um projeto são
passíveis de compartilhamento.
FERRAMENTA
Os colaboradores envolvidos sempre terão acesso às últimas modificações no protótipo. Mais do que isso: o grupo de desenvolvedores pode dividir também as percepções que cada um vai notando ao longo desses experimentos, o que facilita bastante o trabalho em equipe.
REFERÊNCIAS BIBLIOGRÁFICAS
DE OLIVEIRA NEVES, Rodrigo. Fidelidade de protótipos: baixas, médias ou alta, conheça os tipos. Vitaminaweb, São Paulo, 19 fev. 2017. Disponível em: <https://www.vitaminaweb.com.br/fidelidade-de-prototipos-baixa-media-ou-alta/>. Acesso em: 08 abr. 2020.
FRANCISCO, Tatiane. Baixa, média e alta fidelidade? Conheça as diferenças entre os tipos de protótipos. Dextra, São Paulo, 05 abr. 2019. Disponível em: <https://dextra.com.br/pt/baixa-media-ou-alta-fidelidade-conheca-as-diferencas-entre-os-tipos-de-prototipos/>. Acesso em: 10 abr. 2020.
ROCHA, Hugo. Wireframe: A etapa indispensável para criar uma página de sucesso. Klickpages, 2013. Disponível em: <https://klickpages.com.br/blog/wireframe/>. Acesso em: 12 abr. 2020.
ROCK CONTENT, Redator. Wireframe: quais os tipos e as principais ferramentas de criação. RockContent, 26 fev. 2019. Disponível em: <https://rockcontent.com/blog/wireframes/>. Acesso em: 12 abr 2020.
Descubra 8 ferramentas para criar protótipos e wireframes. IMPACTA, São Paulo, 2018. Disponível em: <https://www.impacta.com.br/blog/2018/04/13/descubra-8-ferramentas-para-criar-prototipos-e-wireframes/>. Acesso em: 15 abr. 2020.
BRENNER, Wagner. 27 Wireframes de designers famosos para inspirar você. Updateordie, São Paulo, 04 maio 2017. Disponível em: <https://www.updateordie.com/2017/05/04/27-wireframes-de-designers-famosos-para-inspirar-voce/>. Acesso em: 18 abr. 2020
24 Top UX Prototyping Tools with Downloadable Comparison Table. Keepitusable, 2016. Disponível em: <https://www.keepitusable.com/blog/top-ux-prototyping-tools/>. Acesso em: 24 abr. 2020.
PALMER, Taylor. 2019 Design Tools Survey. Uxtools.co, dez. 2019. Disponível em: <https://uxtools.co/survey-2019/#prototyping>. Acesso em: 24 abr. 2020.
REFERÊNCIAS
BIBLIOGRÁFICAS
CONCLUSÃO
A vantagem de utilizar o Wireframe está na criação das telas, e assim ter uma ideia do que precisa ser alterado no layout da página minimizando as chances de alterações ou interrupções de etapas futuras do sistema.
Dessa forma, temos os principais softwares gratuitos para prototipação (Wireframes) e os softwares que os designers mais utilizaram em 2019: