Qual é a diferença entre wireframes e mockups?

Gostaria de saber a diferença entre Wireframes e Mockups. Espero obter uma compreensão simples da diferença ou saber definitivamente que ambas são iguais.

Eu pesquisei no Google, mas não conseguia entender qual é exatamente a diferença, eu apreciaria se alguém pudesse me explicar de forma concisa.

Um wireframe é sobre funcionalidade. Pode ser um esboço realmente simples que demonstra que tipo de coisas você pode fazer no seu design. Por exemplo, uma estrutura de arame de um site mostrará a navegação, os botões principais, as colunas e a colocação de diferentes elementos. Você pode pensar nisso como um modelo para um site.

Uma maquete é uma representação realista da aparência do produto, neste caso: um site. O resultado final pode parecer exatamente com a maquete ou ser uma variação dela após as revisões da versão. Enquanto algumas pessoas preferem desenhar os modelos usando o software gráfico, outras o fazem diretamente em HTML / CSS.

Eu uso o Balsamiq para wireframes e o Photoshop / Illustrator ou HTML + CSS (dependendo da complexidade) para maquetes.

Um exemplo de uma estrutura de arame:

Os wireframes são formas ou linhas rudimentares usadas para designar somente a posição e / ou tamanho. O objetivo de qualquer estrutura de arame é "encaixar" os elementos em um layout, não indica como os elementos podem realmente aparecer em um design final, apenas onde eles estarão localizados.

Os modelos são construídos sobre quadros de arame e vão além para mostrar aspectos gerais da aparência de um design, incluindo opções de tipo, cores, etc. O objetivo de uma simulação é mostrar, o mais próximo possível, como todas as aparências finais serão renderizadas.

Apoio a resposta detalhada de @Yisela, também para adicionar esta visão exposta na seguinte apresentação

Aqui está um breve resumo de um artigo de Marcin Treder :

Wireframe

Um wireframe é uma representação de baixa fidelidade de um design. Deve mostrar claramente:

1. • Os principais grupos de conteúdo (o quê?)

2. • A estrutura da informação (onde?)

3. • Uma descrição e visualização básica da interação da interface do usuário (como?)

4. Considere-os como a espinha dorsal do seu design e lembre-se de que os wireframes devem conter uma representação de cada peça importante do produto final.

Brincar

1. Uma maquete é uma representação estática de design de fidelidade média a alta. Muitas vezes, uma maquete é um rascunho de design visual
2. Representa a estrutura da informação, visualiza o conteúdo e demonstra as funcionalidades básicas de maneira estática
3. Incentiva as pessoas a revisar o lado visual do projeto

Os wireframes são usados ​​para definir a estrutura, a hierarquia de informações, demonstrar o fluxo de trabalho, fornecer detalhes sobre o que está na tela e uma descrição de como um componente funciona (anotação). Dependendo da complexidade do aplicativo ou site, os wireframes devem ser construídos com base em outro requisito a ser entregue; modelos de processo. Os wireframes podem ser usados ​​para obter requisitos de um cliente e, eventualmente, confirmar os requisitos com um cliente. Os wireframes são um modelo visual da estrutura de um site ou aplicativo. Eles não definem a fonte que será usada, o preenchimento, a cor, o estilo etc. Eles não estão em escala e não têm tons ou gradientes. Tudo isso precisa ser comunicado ao cliente para que ele entenda o processo e o contexto da entrega de estrutura de arame, em conjunto com outras entregas de requisitos.

Uma maquete é normalmente criada no Photoshop e, embora seja baseada na estrutura ou estrutura da entrega confirmada de wireframe, é uma entrega distinta, com um cronograma e processo de aprovação distintos. Maquetes ou composições, definem o estilo visual ou o tom da interface. Uma vez aceitos, os modelos se traduzem em vários requisitos ou produtos de trabalho adicionais, como código CSS, guias de estilo, ativos gráficos etc.

Os wireframes nunca devem ser modelos. Os mock-ups podem ser usados ​​como wireframes, mas isso tem implicações para quaisquer revisões que possam ser necessárias e afetam significativamente seu orçamento.

Fonte: 15 anos como designer de comunicações, UX Lead, analista de negócios em um ambiente corporativo, desenvolvendo sites e aplicativos. E o amado BABOK

Ainda não tenho reputação de comentar a resposta de Dave Kaye, por isso tive que responder diretamente. Vale a pena notar sua resposta em comparação com a brilhante resposta de Rachuru.

Em uma interpretação de frases modernas, a explicação do leigo poderia / deveria ser;

1. Os wireframes são "o design"
2. Maquetes são "demos renderizados"

A terminologia real é originária dos anos 80. Naquela época, você não tinha o poder de computação para produzir imagens em tempo real, mas era possível assistir a "quadros de arames" de gráficos flutuando na tela em tempo real. Uma "demo" adequada precisava ser renderizada durante a noite etc.

Nestes tempos, um "wireframe" representa um "design" esqueleto e, com um bom processo de design iterativo, as pessoas deveriam estar gerando maquetes a partir do wireframe, obtendo feedback e devolvendo-o para melhorar o design do wireframe.

Infelizmente, atualmente, há muitos softwares disponíveis para os clientes que lhes permitem projetar modelos que não estão usando nada que seja diretamente utilizável pelos programadores. Freqüentemente, seus projetos são construídos por outras pessoas, para que a maquete seja aumentada em particular, em vez de ser levada de volta aos programadores para levar em consideração os grandes projetos.

Eu acho que é efetivamente o que Dave estava sendo um pouco mais educado em mencionar :-)

Keith

Para simplificar:

Wireframes : esqueleto / estrutura

Maquetes : aspecto visual / da pele

Como algumas pessoas observaram, hoje em dia os wireframes estão ganhando mais importância, enquanto os maquetes se fundem em protótipos.

É preciso acrescentar um ponto que as pessoas não fizeram ... essas respostas fornecem descrições técnicas decentes, mas em um ambiente de trabalho as diferenças nem sempre são tão claras. Algumas empresas podem adicionar funcionalidade a uma maquete e outras podem colocar requisitos de design de alto nível em uma estrutura de arame. Eu seria cuidadoso em ficar muito preso a uma resposta sobre o que as coisas "deveriam" ser, pois a primeira empresa em que você vai pode fazer algo que não é uma dessas!

De acordo com o meu conhecimento, as telas de maquete são a representação final da interface do usuário, aparência e comportamento. Qual será o fluxo normal e qual será o fluxo alternativo. Eu acho que esse pode ser o tipo de protótipo da Web criado principalmente em HTML e CSS. Fazemos então principalmente durante a fase HLD para mostrar e ter aceitação do cliente.

Os wireframes comparados concentram-se mais como um diagrama de fluxo, onde há uma descrição geral. Se não representar poucas descrições de detalhes, como o que acontece ao clicar em um evento, altere evento e coisas semelhantes. Eles são feitos principalmente pela SA / BA e a maquete é feita por designers / desenvolvedores. Mais ainda, algumas pessoas anexam especificações técnicas a wireframes como o DB envolvido nessa interface do usuário específica.

Mas, novamente, depende do projeto para o projeto. No nosso caso, os wireframes representam a fonte da verdade.

Isto é o que eu entendo como diferença neles

Um wireframe pode ser uma maquete. Uma maquete pode ser considerada uma estrutura de arame. Enquanto às vezes são coisas separadas (como outros já declararam), elas também não são coisas separadas.

Ao mesmo tempo, é possível considerar os wireframes que o Visio criaria. E os modelos seriam o que o PhotoShop criaria.

Hoje, porém, com a variedade de ferramentas que temos, elas geralmente são o mesmo documento real. No começo, eles podem começar como wireframes (puramente layout e função), mas com o tempo se tornam cada vez mais detalhados, a ponto de serem considerados uma maquete. E se estiver usando uma ferramenta interativa como o Axure, em um determinado momento, pode-se considerar o protótipo.

Portanto, é um espectro com muita sobreposição.

Wireframes

Quando você planeja criar um aplicativo móvel ou web, primeiro precisará de um esboço de como cada página será exibida. Somente com base nos conceitos de negócios, um designer pode definir o fluxo do aplicativo e um primeiro rascunho de design, com um esboço de como será sua aparência, quais botões existirão, quais campos existirão etc. Isso é o que é a estrutura de arame destinado a.

Maquetes

Maquetes são imagens mais vivas. Eles são visualmente mais atraentes, possuem cores, fontes, temas, botões, logotipo, etc. Nesse estágio, os rótulos dos campos, notas, tipos de fonte, menu de navegação etc. são especificados no design. É uma representação exata da aparência do aplicativo para dispositivos móveis ou da aparência das páginas da web.

Você pode encontrar uma comparação detalhada entre Wireframes e Maquetes neste artigo informativo: A diferença entre estrutura de arame, maquete e protótipo