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