Imagine ou pense naquele cliente que vem até você e o comissiona para criar um site. Pode ser que você tenha que desenhar o tema que vai usar, e que seja a primeira impressão que vai deixar nos milhares ou milhões de pessoas que vão visitá-lo. Como você apresentaria para ele? Você faria capturas de tela de um site em que trabalhou no design e mostraria a eles? Não seria melhor usar um web mock up?
Esperando, Você não sabia que havia também um web mock up? Bem, então este tópico lhe interessa. E muito. Porque você pode dar uma melhor presença à sua apresentação e fazer o cliente sair muito mais feliz depois de ver imagens onde parece que o site já está operacional. E a verdade é que não lhe custará tanto fazê-lo.
O que é uma maquete de site
Antes de mais nada, vamos explicar um pouco o que é um maquete do site. Como você sabe, um mockup é na verdade uma representação de “imagem real” que mostra como seria o resultado final do seu trabalho.
No caso de um site, seria uma imagem do resultado dessa página web.
Este tipo de colagem eles são usados para dar mais realismo ao trabalho, pois muitas vezes, ao apresentá-lo, pode estar vazio ou não representar cem por cento do que você fez. Além disso, o cliente tem uma forma mais visual de ter uma ideia.
E você dirá, por que não mostrar a ele o site em que você trabalhou? Poderia ser feito, mas não como uma apresentação do trabalho, mas você teria que deixar o cliente navegar na web para ele conhecê-la a fundo e, muitas vezes, eles não têm tempo para isso, então você não garante que ele viu tudo.
Por outro lado, com uma maquete da web, você conseguiria porque destacaria tudo o que deseja ver nessas imagens.
Como são feitos
Agora, como são feitas essas maquetes da web? Existe um programa para criá-los? São colagens retiradas da Internet?
Na realidade existem várias ferramentas gratuitas que eles podem lhe dar uma mão para criá-los, e que eles podem lhe dar opções, não apenas com os exemplos que vamos dar a você um pouco mais tarde.
Com isso você pode até criar uma coleção deles para aquele cliente, colocando o desenho em diferentes sequências que fazem com que o resultado final fique muito melhor.
Essas ferramentas são:
Gliffy
Esta ferramenta é online e é grátis. Com ele você pode criar web mock up porque tem muitos esquemas e uma API com a qual você pode fazer o trabalho em questão de minutos.
Na verdade, é um dos mais usados e isso lhe dá muitas opções.
Cacoo
Neste caso, devemos avisá-lo que, embora nos concentremos no parte livre, ferramenta também é pago e isso significa será mais limitado no que você pode fazer.
Para se ter uma ideia, você só pode exportar em PNG (portanto, não é tão personalizável se você quiser usá-lo com outros clientes).
O bom é que, se você trabalha com uma equipe, pode trabalhar em conjunto ao mesmo tempo (ou seja, em tempo real).
wirificar
wirificar é uma das ferramentas pode transformar um site em um wireframe e, com isso, trabalhar com o cliente mostrando-lhe a web ao seu gosto. Mas claro, aqui seria necessário escolher uma foto de um computador, tablet ou celular para montar o resultado desse programa.
Como você deve ter adivinhado, todas as ferramentas fornecem uma imagem do web design, mas seria necessário realmente montá-lo em uma imagem real. Para isso, você tem que acessar fotos onde computadores, celulares, tablets são mostrados para inserir seu design em cima e obter uma foto que una os dois (e que fique bem).
Para fazer isso, você pode usar maquetes prontas ou criá-las você mesmo com um programa de edição de imagens.
Maquete da Web que você pode baixar
Se você não quer se sobrecarregar muito para apresentar o trabalho, aqui deixamos algumas exemplos de maquete do site que você pode baixar e usar. Você vai economizar tempo.
Maquete de site realista
Começamos com uma cena que qualquer um poderia ter. É uma mesa e uma tela de computador em cima (teclado e mouse abaixo). Ao fundo uma estante com livros. No entanto, esta estante é a preto e branco, assim como os elementos decorativos da secretária (mais livros e um candeeiro) e da parede, que é em tom cinzento.
Por quê? Para que o olhar fique focado na página exibida pelo monitor. no seu caso poderia ser a página inicial, ou peças representativas que você deseja mostrar ao cliente.
Você faz o download clique aqui.
Maquete de site simples
Uma representação mais simples, onde com um fundo cinza (embora possa ser personalizado) não mostra uma tela na qual teremos inserido a página web.
Destaca-se que, se você olhar para a tela, ela tem uma parte mais clara e uma parte mais escura, pois simula que a luz incide sobre ela.
Isso pode ser interessante para partes em que você deseja o cliente olha exclusivamente para eles.
Você faz o download clique aqui.
Maquete do Samsung Galaxy S5
Este em particular é um mockup do Samsung Galaxy S5, mas pode ser perfeito para você mostrar, na mesma imagem, três partes do web design que você fez para que o cliente aprecie como ficaria em um celular.
Lembre-se de que o Google agora capacita as empresas mais do que use um site responsivo, ou seja, que fica bem se você usa um computador, um tablet ou um celular. Portanto, não basta que fique bem no computador, é preciso ter certeza em todas as outras plataformas.
Você pode fazer o download clique aqui.
Maquete para tablet e celular
Nesse caso, você não poderá exibir 100% da web em um tablet, mas sim no celular. E é que se você quiser mostrar seu design nesses dois dispositivos também poderá fazê-lo, para que o cliente tenha uma ideia de como ficará.
Claro, tenha em mente que no tablet ele será exibido no formato paisagem enquanto o móvel vai ter isso vertical. É uma forma de ele ver seu design mudar para se adequar aos dois dispositivos.
O tem clique aqui.
Você tem alguns exemplos de web mock up? Você pode compartilhá-los nos comentários.