Mockups são apresentações criativas, muitas vezes fotorrealistas, que mostram como um design pode parecer ou funcionar no mundo real. Em outras palavras, a implementação de qualquer uma dessas 4 técnicas profissionais de maquete fornece uma visão do futuro: um logotipo impresso em uma sacola carregada por compradores casuais, um aplicativo rolado por uma mão invisível ou até mesmo uma vitrine de loja totalmente marcada. Para torná-lo convincente, você precisa saber fazer layouts profissionais. Aqui vamos lhe dizer como fazer isso.

Embora sejam compostos de imagens, os layouts de design são mais eficazes quando contam uma história. O cuidado e os detalhes colocados na história determinarão se o público irá gostar ou colocá-la para dormir.

Existem dois elementos que tornam uma técnica de layout bem-sucedida: cenário criativo e inclusão realista do design. Anteriormente abordamos um tópico anterior com dicas que focavam na formulação de um conceito de layout e na escolha das imagens certas para contar uma história. Neste artigo, descreveremos brevemente os aspectos técnicos da criação de uma maquete do seu design usando os 4 métodos de maquete mais comuns.

Layout do livro. Requisitos para design de livro.

1. Crie seu próprio layout do zero. Maquetes
-

Um layout personalizado é um layout totalmente personalizado para um design específico. Se você deseja criar maquetes exclusivas, recomendamos esta técnica para conseguir melhores resultados. Dado que o objetivo de uma maquete é a apresentação e, em última análise, a persuasão (ou seja, vender um conceito de design), nem é preciso dizer que a maquete mais persuasiva é aquela projetada para um cliente específico.

Design e layout do logotipo da marca de bebidas.

Design e layout do logotipo da marca de bebidas

 

Mas é claro que criar maquetes do zero para cada projeto não é a abordagem mais prática. Isso requer muito esforço para algo que é essencialmente uma apresentação única ativo. Isso também só é útil se o conceito de layout for muito original - não faz sentido mexer com todo esse problema se o resultado for indistinguível do modelo. Em última análise, cabe a você decidir se é apaixonado o suficiente pelo projeto ou cliente para se esforçar mais para criar uma maquete única.

Criação de logotipo e apresentação de layout para marca de tecnologia.

Criação de logotipo e apresentação de layout para marca de tecnologia

Para um layout verdadeiramente personalizado, você precisará de fotos originais. Isso permite que você crie um layout de cena muito mais próximo da sua visão de design, enquanto as fotos de banco de imagens, por sua natureza, são projetadas para configurações e cenas gerais. Se você tiver equipamento, experiência e tempo, poderá tirar suas próprias fotos. Nesse caso, você deve fazer um brainstorming ou esboçar a cena com antecedência, da mesma forma que faria o storyboard de um filme.

O que é margem de vendas? e como calculá-lo

Você também pode contratar um fotógrafo profissional, mas é claro que essa é uma despesa que não será prática para todos os designers - isso é mais provável no âmbito de uma agência de design que trabalha com clientes corporativos. Uma ótima alternativa é utilizar fotos do cliente: por exemplo, o designer Top Level goopanic aplica sua marca da Academia de Artes em fotos reais da escola e de seus alunos. Mesmo que essas fotos não sejam assim alta qualidadeComo fotos profissionais, elas darão ao cliente uma ideia mais autêntica de como será seu design.

Depois de obter suas fotos, você precisará usar um software de edição de fotos para incorporar seu design à imagem. O software mais comum para essa finalidade é o Adobe Photoshop, mas o Affinity Photo e o Gimp são alternativas confiáveis. Esses programas fornecem muitas ferramentas e guias para alcançar resultados realistas e basicamente se resumem ao seguinte:

  • ferramentas de transformação para fazer o design combinar com a imagem
  • modos de mesclagem para incorporar a textura da foto original
  • camadas de ajuste para trabalhar com iluminação, cor e contraste

 

Se quiser trabalhar com animações personalizadas, use um software de animação como o After Effects: por exemplo, você pode usar máscaras de camada para criar animações de rolagem para aplicativos em uma foto de telefone.

Ferramentas Necessárias

  • Fotografia e/ou equipamento fotográfico
  • Software para edição de fotos (Photoshop, Foto Serif, Gimp)
  • *Opcional* Software de animação (Adobe After Effects)

Despesas

  • Moderado a alto

Prós

  • O resultado são maquetes mais específicas e fiéis à visão do designer.
  • Imagens de origem; sem marcas d'água ou necessidade de comprar licenças

Contras

2. Crie modelos de layout reutilizáveis. Maquetes.
-

Modelos de layout personalizados são layouts que os próprios designers criam, mas são genéricos o suficiente para serem usados ​​em vários projetos. Como apontamos na última seção, criar maquetes personalizadas para cada projeto pode ser impraticável e caro, mas esse método permite ao designer criar maquetes originais e reutilizáveis ​​a um custo menor.

Esta é também uma forma de o designer adicionar o seu próprio marca pessoal ou estilo repetitivo em suas apresentações aos clientes.

Maquete de design de aplicativo mostrando um homem em um café usando um iPhone. Maquetes

Maquete de design de aplicativo mostrando um homem em um café usando um iPhone

 

O processo de criação de modelos de maquete é essencialmente o mesmo da criação de maquetes personalizadas: você ainda precisa comprar uma foto e usar um programa de edição de fotos para incorporar o design. Uma diferença é a abordagem para fotografar seu layout: deve ser vago o suficiente para funcionar para vários clientes - por exemplo, em vez de usar qualquer cenário de identificação, os planos de fundo do layout da designer de primeira linha Daria V. concentram-se em detalhes ilustrados que podem ser alterados. com cada projeto.

Design ilustrado de maquete de embalagem de produto. Maquetes

Design ilustrado de maquete de embalagem de produto

Design ilustrado de maquete de embalagem de produto. Maquetes

Design ilustrado de maquete de embalagem de produto

Isso pode ajudar a agrupar clientes com base em temas comuns, como indústria (você pode ter um modelo de layout para todos os seus clientes proprietários de restaurantes, um para todos os seus clientes de varejo, etc.). Isso torna mais fácil selecionar imagens que funcionarão em contextos comuns.

Geradores de layout de livro: 5 ferramentas GRATUITAS

Para produtos físicos, alguns designers criam representações em branco do produto usando software 3D, como o Adobe Dimension, e isso tem o benefício adicional de permitir a criação de layouts animados e giratórios.

Para criar o layout do seu modelo no Photoshop, seu objetivo é basicamente configurar o documento para que o design possa ser facilmente substituído em projetos futuros, mantendo todos os seus manipulação. O Photoshop fornece dois para isso ferramentas úteis:

Objetos inteligentes do Photoshop. Maquetes.

Um Objeto Inteligente é essencialmente um contêiner que armazena uma imagem em um documento vinculado, permitindo fazer alterações drásticas em sua composição maior sem afetar a imagem original. Se você substituir uma imagem em um objeto inteligente, ela será atualizada na composição com todas as alterações aplicadas a ela.

Assim, com mockups, tudo o que você precisa fazer é converter a camada de design em um objeto inteligente no início do projeto (vá em Camada > Objetos Inteligentes > Converter em Objeto Inteligente). Depois disso, você pode simplesmente substituir o design dentro do objeto inteligente na próxima vez que precisar de um layout.

Ações do Photoshop. Maquetes.

As ações registram as alterações feitas em um documento do Photoshop para que você possa repetir essas etapas com o clique de um botão, eliminando tarefas repetitivas. Assim, com uma maquete, você pode usar uma ação para registrar todas as transformações e efeitos aplicados a um design para fazê-lo corresponder a uma foto e aplicar essas mesmas alterações a outro design no futuro, apenas clicando em um botão.

Ferramentas Necessárias

  • Fotografia e/ou equipamento fotográfico
  • Software de edição de fotos (Photoshop, Serif Photo, Gimp)
  • *Opcional* Software de modelagem de produtos 3D

Despesas

  • Moderado

Prós

  • O uso repetido faz com que valha a pena o esforço para criar layouts personalizados.
  • Imagens de origem; sem marcas d'água ou necessidade de comprar licenças

Contras

  • Requer conhecimento de software mais avançado
  • Pode ser uma perda de esforço se os resultados não forem suficientemente diferentes de um modelo de terceiros.

3. Use um site gerador de maquete.
-

Um site gerador de maquete é um serviço online que usa imagens de banco de imagens e software de IA para gerar automaticamente uma maquete a partir de um modelo de terceiros. Normalmente, tudo o que um designer precisa fazer é enviar seu design e o software cuidará de todos os problemas técnicos.

Captura de tela da página inicial do gerador de maquete de design Placeit. Maquetes

Captura de tela da página inicial do gerador de maquete de design Placeit

Este método é de longe a solução mais barata e fácil, mas tem algumas desvantagens. O layout resultante não será original e, como muitos designers usaram o mesmo serviço, não é incomum ver as mesmas imagens de layout aparecendo ad nauseum em todos os sites de portfólio. Ao mesmo tempo, pode ser útil em caso de emergência e, a menos que o cliente seja um fornecedor de maquetes de designer, ele provavelmente não se importará.

Na hora de escolher um serviço você deve considerar o seguinte: preço, qualidade e relevância. Em termos de preço, muitos geradores de maquete são de uso gratuito, embora você deva ter cuidado com inconvenientes ocultos, como adicionar marcas d’água ou uma seleção limitada de modelos. Caso contrário, o preço é geralmente baseado em modelos de assinatura, e a maioria dos serviços que analisei estão na faixa de US$ 10 a US$ 20 por mês.

Elaboração de layouts de design corporativo padrão. Maquetes

Elaboração de layouts de design corporativo padrão

A qualidade pode depender do gosto pessoal, mas você deve dedicar algum tempo estudando os layouts que outros designers e concorrentes estão usando para ter uma ideia do que é inteligente e do que é genérico. Você também pode usar serviços como o Trustpilot para encontrar avaliações de usuários que informam, além do material promocional, como o serviço funciona bem e quais são os resultados reais.

Captura de tela da página inicial do gerador de maquete de design do Artboard Studio. Maquetes

Captura de tela da página inicial do gerador de maquete de design do Artboard Studio

Captura de tela da página inicial do gerador de maquete de design Smartmockups

Captura de tela da página inicial do gerador de maquete de design Smartmockups

Por fim, alguns desses sites são especializados em determinados tipos de layout, e você precisará escolher um que seja relevante para seus projetos, principalmente se estiver adquirindo uma assinatura. Por exemplo, Artboard Studio e Mockup Mark são especializados em impressão e layouts roupas. Serviços como AppMockUp e Mockuuups Studio são especializados em maquetes de design digital. Enquanto isso, Smartmockups, renderforest e Placeit oferecem modelos de maquete comuns para impressão e digital.

Ferramentas Necessárias

  • Conexão de Internet confiável
  • *Opcional* Associação ao layout do site

Despesas

  • De grátis a baixo

Prós

  • De forma rápida e sem esforço; nenhum conhecimento de software necessário
  • Às vezes, a qualidade pode estar próxima do layout personalizado

Contras

  • Cria uma aparência comum com imagens que muitos designs usam online.
  • O modelo de assinatura só é útil se forem necessários vários layouts.

4. Use um plugin de software para criar layouts.
-

Plug-ins de maquete são integrações de terceiros que se conectam a software de design para criar maquetes. Essencialmente, esses aplicativos permitem que os designers projetem e criem layouts dentro de um único programa, com o benefício adicional de que o designer pode usar as ferramentas do programa para fazer alterações no layout após ele ter sido criado.

Captura de tela da página inicial do plugin de design Mokup Frames

Captura de tela da página inicial do plugin de design Mokup Frames

É o melhor dos dois mundos: um modelo personalizável, barato e de baixo esforço. Dito isso, esse método geralmente é destinado ao design digital, e a maioria dos plug-ins é voltada para software de prototipagem de aplicativos, como Esboço , Figma и Adobe XD .

Captura de tela da página inicial do plugin de layout de design Angle

Captura de tela da página inicial do plugin de layout de design Angle

Existem vários serviços populares que fornecem plug-ins para download, incluindo ângulo , Rotato и Molduras Mokup . Como este software pode ser baixado, geralmente requer um pagamento único. Esse preço geralmente é mais alto do que a maioria dos sites geradores de maquetes, mas é mais baixo no longo prazo, já que você não paga taxa de assinatura.

Você precisará seguir as instruções específicas do site para baixar e instalar o plugin em seu software. A partir daí, você terá a opção de aplicar o design do seu software ao layout. O processo é semelhante a usar um site com gerador de maquete: o plugin criará automaticamente sua maquete e você usará as ferramentas de personalização para refiná-la.

Ferramentas Necessárias

  • Software de design (Sketch, Figma, Adobe XD)
  • Download de licença e plugin

Despesas

  • baixo

Prós

  • De forma rápida e sem esforço; É necessário pouco conhecimento de software
  • Os modelos são criados em software de design como parte do processo de design.

Contras

  • Cria uma aparência comum com imagens que muitos designs usam online.
  • Os resultados não são muito diferentes dos geradores de maquetes online

É hora de criar maquetes exclusivas!
-

Os modelos de design são ferramentas de apresentação incrivelmente poderosas que não apenas vendem uma ideia de design, mas também oferecem ao visualizador uma janela para um futuro onde esse design já existe. Quando bem feito, o cliente será quase forçado a tornar esse futuro uma realidade.

Conforme afirmado neste artigo, existem muitos métodos para criar maquetes, e cada um deles tem seu próprio vantagens e desvantagens. Mas não importa como você cria seus layouts, os resultados dependerão, em última análise, do designer e de seu compromisso em renderizar de forma realista um layout que salte da tela.

 АЗБУКА

Como gerenciar projetos com sucesso em um negócio online