Qual é a diferença entre wireframing, mockup e prototipagem?

São termos e conceitos muito usados, mas que na prática são difíceis de diferenciar quando precisamos explicar, e acabam confundindo quando são usados de forma misturada. O texto explica isso muito bem.

• Wireframe

É um guia visual para um site, web app ou app mobile que compõe o layout. Wireframe geralmente é a primeira coisa feita quando se quer conceituar ou comunicar uma ideia de produto. É a forma de comunicação mais comum. Ou seja, mostra a estrutura geral de para onde vai o conteúdo do meu app.

• Mockup

Uma exibição estática de como o produto final deve parecer visualmente na prática.

• Prototipagem

Adicionar interação à exibição estática, ou seja, às telas estáticas criadas como mockup.