Mockup
O que é um mockup?
O mockup é uma amostra prévia de como será o design de um site ou produto antes de ele ser finalmente projetado. Seu principal uso é mostrar ao cliente como será o produto final antes de ser concluído.
No web design, os mockups são usados na fase inicial do design para definir os conceitos e as ideias com base nos quais o site será projetado e incluem a estrutura de navegação e outros elementos que fazem parte do design, em detalhes.
Em geral, os mockups são criados com base em modelos e elementos predefinidos de programas de design gráfico, além de ferramentas específicas que permitem adicionar determinados elementos de controle e funções simples de navegação.
1. diferença entre wireframe e mockup
É muito comum confundir os dois termos, wireframe e mockup, por isso é interessante esclarecer cada um deles.
Um wireframe é um esboço de baixa qualidade. Trata-se de um conjunto de caixas cinzas e textos que são usados para, em um relance, ver como as informações estão organizadas na tela. Isso ajuda a ter uma ideia do que cada seção do site conterá e sua estrutura em um nível básico.
Por outro lado, um mockup oferece maior qualidade e detalhamento, o layout é muito mais detalhada com vários elementos gráficos, tipografias corretas e o uso de cores é aplicado. É um estágio avançado do design.
2. fases de elaboração de um mockup
O processo normalmente usado para criar um mockup de um site consiste em várias fases, que são:
- Definir o uso e os objetivos do site. Entenda quem será seu usuário alvo e como o site será usado.
- Observar empresas semelhantes. A concorrência é boa e nos faz melhorar, inclusive ao criar nosso site. Dê uma olhada em seus sites e tome nota deles para se inspirar.
- Crie a estrutura completa do site. Crie uma possível estrutura do site em que as seções, as páginas, as cores, as fontes a serem usadas etc. estejam claras.
- Elaborar o layout do conteúdo de cada página. Uma vez definida a estrutura, é hora de criar cada página e seção da maneira mais precisa e específica possível.
3. Aplicativos para criar mockups
Os aplicativos de design, de uso geral, que normalmentesão usados para criar mockups são:
Aplicativos específicos para a criação de mockups incluem:
- Balsamiq
- Invisionapp
- Mockflow
- Gomockingbird
- Hotgloo