Um recurso muito utilizado nos dias de hoje e que pode evitar muita dor de cabeça e desperdício de dinheiro é a utilização de Wireframe, Mockup e Protótipos, antes de começar a codificar, isso alinha o entendimento das partes envolvidas, evita retrabalho e dependendo da necessidade do projeto você pode usar um deles ou os três em conjunto, cada um com características específicas, veja a seguir.
Wireframes mostram apenas um ideia geral de como deverá ser o que está sendo projetado, são muito simples e tem um custo baixo, tem baixa fidelidade e neste ponto ainda não estamos pensando como será viabilizado tecnicamente, neste ponto queremos fechar a estrutura e layout básicos.
Mockups são imagens estáticas de como a versão final do produto irá se parecer, é importante no apoio da definição de coisas como tipografia, estilo, representação visual, cores e etc. É um design representando o que foi desenhado na forma de wireframe (que é o passo anterior) porém com uma fidelidade maior especificando mais detalhes, esse tipo de artefato tipicamente é produzido por designers.
Protótipos nos permitem explorar a interface do usuário procurando possíveis problemas no fluxo além de deixar mais clarificado (já que é possível interagir) o que deve ser feito facilitando também melhorias no que foi planejado até então. Esse artefato é fundamental para realização de pesquisa de usabilidade, também fica mais fácil pra vender caso precise convencer alguém que o que está fazendo é uma boa ideia.
Cada artefato tem o seu papel e valor no passo em que o design da aplicação está, são interrelacionados e vão aumentando a fidelidade conforme o avanço no processo, para resumir:
- Wireframe trata a estrutura; (Baixa fidelidade)
- Mockup a parte visual; (Média fidelidade)
- Protótipos são para interação e usabilidade; (Alta fidelidade)
Para me conhecer melhor acesse meu site e meu perfil no LinkedIn, fique a vontade para entrar em contato, vamos conversar !!!