Mockup

Representação visual estática e fiel do design, mostrando layout, cor, tipografia e marca antes de codar.

Hard

O que é

Mockup é a representação estática e de alta fidelidade de um design. Ele mostra como o produto vai parecer, com layout, cor, tipografia, imagem e marca, justamente pra você visualizar a aparência antes de partir pro desenvolvimento.

Ele ocupa um lugar entre o wireframe e o protótipo, porque o wireframe foca em estrutura e função, o mockup mostra o visual quase final, e o protótipo adiciona interação pra testar fluxo. Ou seja, o mockup é o passo de alinhar a direção visual com o time.

Na prática, ele vira um artefato concreto de discussão, porque, em vez de descrever em palavras, o time vê como cor, tipo e layout conversam, e pega cedo um problema de leitura ou de identidade, antes de gastar dev com isso.

Em uma frase

Vou fechar o mockup de alta fidelidade pra a gente bater a direção visual antes de partir pro protótipo.

A pergunta que ele responde

Como eu alinho cor, tipografia e layout com o time antes de gastar dev codando?

Quando usar

Use quando o time precisa alinhar a direção visual de uma tela antes de investir em interação ou código.

Como não usar

O cuidado é não polir mockup infinito quando a dúvida real é de fluxo, que pede protótipo, ou de estrutura, que pede wireframe.

Na prática

Pense num time que, antes de codar, apresenta o mockup de alta fidelidade pra alinhar cor e tipografia com quem decide. Com isso, evita retrabalho lá na frente.

Não confunda com

Vale separar mockup de protótipo. O mockup é estático e mostra o visual, como a tela vai parecer, enquanto o protótipo tem interação e testa o fluxo, como a tela vai se comportar. E vale separar também do wireframe, que é a estrutura ainda sem acabamento. Cada um responde uma pergunta diferente.

Design

Em inglês

Mockup

Pronúncia

mó-cap

Também chamado de

mockup, layout de alta fidelidade

Origem

n/a

Fonte

Saiba mais

Interaction Design Foundation, material sobre wireframe, mockup e protótipo e quando usar cada um