Qual é a diferença entre um wireframe e um mockup?

Wireframe e mockup são fases diferentes do projeto visual da interface:

• Wireframe é uma representação esquemática e simplificada da estrutura de uma página ou tela. Mostra a disposição dos elementos principais, suas relações e blocos funcionais sem detalhar o design. O wireframe ajuda a rapidamente concordar a lógica e a estrutura.

• Mockup é uma imagem mais detalhada e visualmente próxima do design final. No mockup já são considerados cores, fontes, ícones e outros elementos de estilo. É um passo intermediário entre o wireframe e o protótipo.

Exemplo: primeiro criam um wireframe para determinar onde ficará o menu, os botões e o conteúdo, e depois fazem um mockup para mostrar como isso ficará do ponto de vista do design.