As três palavras descrevem diferentes níveis de detalhe e diferentes questões. Um wireframe pergunta "o que vai para onde?" Uma maquete pergunta "como é?" Um protótipo pergunta “funciona para as pessoas?”
Wireframes usam formas simples e texto de espaço reservado para mostrar layout, hierarquia e conteúdo. Eles são rápidos de fazer e de jogar fora, e é exatamente por isso que são úteis: você pode explorar muitas estruturas antes de se comprometer com uma.
Os mockups adicionam o design visual real: cor, tipografia, imagens e componentes. Eles são bons para chegar a um acordo sobre a aparência com as partes interessadas e para a transferência, mas não podem mostrar como algo se comporta.
Protótipos adicionam interação. Um protótipo de baixa fidelidade pode vincular wireframes para testar um fluxo. Um protótipo de alta fidelidade parece e se comporta próximo ao produto final, com estados, transições e, às vezes, dados reais, para que você possa executar testes de usabilidade que revelam problemas reais.
A lacuna após o protótipo é a transferência: os desenvolvedores geralmente reconstroem o que o protótipo mostra. Para componentes interativos, o ExodeUI, que criamos, preenche essa lacuna tornando o próprio arquivo interativo aquilo que vem no aplicativo.