O que é o mockup

Um mockup não é nada mais do que um modelo (em escala ou em tamanho real) de um projeto em desenvolvimento.

É um material expositivo de um site web, de uma gráfica, de uma embalagem ou de um novo conceito para uma campanha publicitária.

Resumindo, trata-se da réplica exata do projeto final com detalhes e embelezamentos destinados a enfatizar o resultado final.

É muito utilizado na comunicação de marca, tanto online quanto offline.

Diferenças entre mockup, wireframe e protótipo

O mockup è, portanto, uma espécie de modelo que descreve como será o produto final.

No mundo da web, usa-se o termo digital mockup para descrever aquele mockup específico que se concentra na gráfica de um site web, de uma landing page ou de um aplicativo.

Neste caso, o digital mockup è, basicamente, o modelo de um site web apresentado em diferentes dispositivos como smartphones, tablets e dispositivos vestíveis, ou a gráfica completa de um aplicativo.

Quem faz mockup, é definido mockup artist.

Antes mesmo do mockup, muitas vezes, usa-se utilizar o wireframe.

Essa tipologia de modelo é muito utilizada principalmente no digital e é um esquema visual em fase embrionária que permite ter uma ideia geral de como o produto final poderia ficar.

A evolução do clássico esboço a lápiz é extremamente utilizada para entender como preencher os espaços e desenvolver uma estrutura básica.

Após o wireframe, na fase de projeto, vem o mockup com uma realização completa e cuidadosa do projeto.

Em alguns casos é necessário também o uso de um protótipo. Em alguns setores, na maior parte industriais, não basta uma apresentação gráfica do produto, mas é preciso também um rascunho prático que examine e teste as funcionalidades concretas do projeto: esse é o protótipo.

Como fazer um mockup: ferramentas úteis grátis

Partindo da ideia de que um bom mockup pode ser realizado no Illustrator ou no Photoshop e que para os projetos mais importantes a suíte Adobe oferece Adobe Comp e, para os wireframes, Adobe XD, existem muitas ótimas ferramentas online, muitas vezes grátis (pagamento apenas se você quiser desbloquear algumas funções) realmente úteis e completas para realizar um bom mockup: 

• Moqups: um recurso completo, perfeito para o mockup digital como landing pages e aplicativos.
• Invision: uma das mais famosas recursos web para criar um mockup profissional e de sucesso garantido. Há uma versão gratuita com limitações e uma versão completa a preços bons.
• Marvel: com este programa é possível realizar híbridos entre mockups e protótipos, na verdade, Marvel também permite a realização das transições entre aba e aba.
• Wireframe.cc: este recurso è ótimo para criar wireframes profissionais. É uma espécie de lousa interativa evoluída para o desenvolvimento deste tipo de interface. 

Recapitulando, o mockup è a réplica do projeto final sem suas funções interativas. Tem ao seu favor as cores, a gráfica e a apresentação final, e è extremamente importante focar nos detalhes do projeto que podem realmente fazer a diferença entre um mockup e outro.