Você já deve ter ouvido falar destes termos. Todos estes são mecanismos utilizados pelos designers para construção de um projeto digital. A diferença entre eles é basicamente a complexidade de informações e a fidelidade em relação ao projeto final. Vamos entender isso melhor.

Projeto autoria própria

1. Wireframe

Os wireframes são layouts estruturais, geralmente, criados em P&B, mas isso depende da vontade do designer. O objetivo de um wireframe é a marcação da posição dos elementos, como links, imagens e conteúdo. Os wireframes são em sua maioria de baixa fidelidade e ao confeccioná-los, normalmente o designer não se preocupa com estilos tipográficos e substitui imagens por retângulos. Em alguns casos, podem ser aplicados tamanhos diferentes para fontes apenas para diferenciar títulos,subtítulos, etc

Apesar de alguns profissionais optarem por desenvolver wireframes de maior fidelidade, para mim esta não é uma realidade. Afinal, os wireframes são mais um guia de onde deve ir cada elemento, e que irá lhe orientar no momento de confeccionar o mockup. Sendo este segundo muito mais interessante para a apreciação do estilo do projeto.

2. Mockup

Já os mockups são layouts mais complexos, que englobam cores, tipografia personalizada, escolha de imagens, etc. O mockup pode ser considerado com o desenho do layout final. Este inclusive, é em muitos casos, o arquivo que será enviado ao desenvolvedor front-end para a confecção do projeto. O objetivo do mockup é possibilitar a apreciação do projeto e a previsão do resultado visual final. No entanto, estes layouts geralmente são estáticos (na maior parte dos casos são gerados JPEGs) e não possuem interatividade, mas para projetos mais simples, sem grandes “sacadinhas” interativas, como a grande massa de sites institucionais, são o suficiente para orientar os desenvolvedores front-end.

Projeto autoria própria

3. Protótipos

Os protótipos são a parte do processo mais próxima do projeto final. São interativos e podem já ser confeccionados com a linguagem de programação do projeto final.

Uma opção para evitar o tempo gasto na programação é criar protótipos em aplicativos de prototipagem, que permitem que o designer crie jpegs marcados com links, assim é possível simular as funções mais simples do site, como a navegação entre páginas.

Mas se o projeto já estiver mais adiantado e o cliente já tiver aprovado os jpegs, podemos optar por criar o site já com a equipe de programação. O porém é que essa opção demanda tempo e, dependendo do projeto, já deve ser criado pelo desenvolvedor front-end responsável, pois assim os códigos poderão ser aproveitados no projeto final.

InVision: Free Web & Mobile Prototyping (Web, iOS, Android) and UI

Entenderam a diferença entre cada um? Não necessariamente os três estarão presentes em todos os projetos digitais, mas geralmente são partes importante para que tudo ocorra bem durante o job.