Sites de maquete, também conhecidos como editores gráficos online ou ferramentas de design, permitem aos usuários criar vários designs gráficos, ilustrações, banners, logotipos, apresentações e muito mais diretamente de seu navegador, sem a necessidade de instalar software especializado em seu computador. Essas ferramentas online geralmente oferecem uma variedade de recursos e modelos que facilitam o processo de criação do design.

Ao contrário dos protótipos, que deveriam realmente funcionar, os mockups são elementos visuais estáticos destinados a mostrar layouts de design, atmosfera, cores e estética geral. Alguns designers preferem criar cada botão e ícone do zero, mas se você quiser avançar ou brincar em busca de inspiração, os layouts e softwares de sites vêm pré-carregados com esses elementos e podem ser mais fáceis de usar do que software de design gráfico.

Os sites abaixo irão ajudá-lo a criar modelos de tela de sites, modelos de tela de aplicativos, modelos de produtos e muito mais. A maioria vem com modelos de layout de site ou kits de UI que permitem projetar usando elementos pré-construídos, como botões. Eles economizam muito tempo se você estiver em apuros e precisar entregar um layout rapidamente. Para cada um analisaremos o preço, prós e contras, bem como a quem são recomendados.

1. Adobe XD. Sites para criação de layouts

Adobe XD é a resposta da família Adobe ao software de design digital. Tem todos os detalhes e nuances que você esperaria da empresa por trás Photoshop e Ilustrador, mas também oferece um preço igualmente alto.

No entanto, se você está procurando layouts de nível profissional com todos os detalhes, o Adobe XD tem o que você precisa. Ele cuida de todo o processo de design, incluindo protótipos interativos, e ainda se integra a outros softwares Adobe se você deseja criar ou personalizar elementos no Photoshop ou Illustrator.

Também é bastante sofisticado em seus recursos, com efeitos 3D, animações e a capacidade de criar uma biblioteca de componentes, um local para armazenar todos os seus elementos como botões e ícones para que sua equipe possa usá-los novamente em outro projeto (isso ajuda a repetir clientes se eles veem os mesmos controles no novo produto). Existem também recursos especiais, como Repeat Grid, que economiza tempo quando você precisa copiar e colar um padrão repetidamente, e Padding, que protege tamanhos de pixel ao editar diferentes camadas dos mesmos elementos.

Custo:

  • US$ 9,99/mês
  • $ 99,99 por ano (pré-pago)

Prós: Sites para criação de layouts

  • Adequado para todo o processo de design, incluindo protótipos interativos
  • recursos sofisticados: efeitos 3D, animação e biblioteca de componentes
  • Recursos convenientes que economizam tempo: recuo, repetição de padrões e edição fácil
  • Integra-se com outros softwares Adobe

Contras:

  • um exagero se você quer apenas um layout simples e rápido

Recomendado para…

  • pessoas que levam o design digital a sério o suficiente para querer software de primeira linha
  • desenho normal - não para projetos únicos ou individuais

2. UI fluida. Sites para criação de layouts

Embora tecnicamente para prototipagem, UI fluida é robusto o suficiente para criar modelos impressionantes que podem posteriormente ser convertidos em protótipos interativos. Esta é uma excelente escolha para designers experientes e equipes de design que trabalham em todo o escopo de um projeto.

A interface de usuário flexível não é tão fácil de usar quanto outros sites de layout populares, o que pode não agradar aos iniciantes. No entanto, ele possui todos os recursos de nível profissional necessários para o design da Web e de aplicativos, incluindo wireframes e uma biblioteca de componentes e ícones de UI pré-construídos. Um de seus benefícios são as ferramentas de colaboração, que permitem aos usuários visualizar, comentar e editar os mesmos arquivos de qualquer lugar do mundo.

Custo:

  • Plano gratuito (1 projeto)
  • US$ 8,25/mês (cobrado anualmente) [Solo]
  • US$ 19,08 por mês (cobrado anualmente) [Pro]
  • US$ 41,58 por mês (cobrado anualmente) [Equipe]

Prós: Sites para criação de layouts

  • recursos avançados adequados para profissionais
  • um pouco mais barato do que sites de maquete semelhantes
  • cooperação de primeira classe
  • grande biblioteca de componentes integrada
  • aplicativos móveis e troca de dispositivos facilitar a criação de layouts para dispositivos móveis

Contras:

  • curva de aprendizado

Recomendado para…

  • pessoas que desejam uma ferramenta de design completa, mas também estão preocupadas com seu orçamento

3. InVisão. Sites para criação de layouts

InVision é um concorrente direto do Adobe XD e é outra ferramenta completa de maquete e prototipagem, também com uma assinatura mensal cara. O InVision compartilha muitos dos recursos sofisticados do Adobe XD, incluindo ferramentas de animação precisas para prototipagem, mas é um pouco menos amigável quando se trata de eficiência e simplificação de tarefas.

Também é importante notar que o InVision é principalmente uma ferramenta de prototipagem, portanto, muitos de seus recursos são focados em interatividade e efeitos, em vez de imagens estáticas. No entanto, tem tudo que você precisa para criar ótimos layouts pixel perfeito, incluindo integração com Photoshop e Sketch, e com o complemento gratuito Inspect você pode transformar facilmente qualquer design em código de desenvolvedor. E ainda por cima, há uma versão gratuita para sempre.

Custo:

  • Versão gratuita
  • $ 7,95 por mês (cobrado anualmente)

Prós: Sites para criação de layouts

  • Adequado para todo o processo de design, incluindo protótipos interativos
  • recursos avançados, como animação e efeitos interativos
  • integra-se com Photoshop e Sketch
  • versão gratuita

Contras:

  • a usabilidade é um pouco mais complexa que o Adobe XD

Recomendado para…

  • pessoas que precisam principalmente de uma ferramenta de prototipagem, mas com recursos de maquete

4. Modificador de mídia. Sites para criação de layouts

Vamos nos afastar dos layouts de sites de nível profissional... longe do hotel. Modificador de mídia está do outro lado do espectro: muito limitado em recursos e profundidade, mas extremamente conveniente. Você pode baixar maquetes grátis diretamente do site, mas para remover a marca d'água e obter versões de alta qualidade você terá que pagar.

Mediamodifier é semelhante a um editor de fotos online, mas com modelos de aplicativos e layouts de sites pré-carregados. Eles também têm milhares de modelos para mais do que apenas designs digitais: camisetas, canecas, Capas de livro etc. Tudo que você precisa fazer é encontrar um modelo que você goste, adicionar sua própria imagem e... bem, isso é tudo que você pode fazer, na verdade. Este é um site simples com layouts para quando você precisar de algo rápido e fácil, mas não para quando precisar impressionar alguém com gráficos de alta qualidade.

Custo:

  • Plano gratuito
  • $ 9 por mês (cobrado anualmente)

Prós: Sites para criação de layouts

  • fácil de usar
  • pode criar layouts em segundos
  • muitos modelos para escolher

Contras:

  • recursos básicos
  • você tem que pagar por uma resolução de alta qualidade
  • preciso pagar para remover marcas d’água

Recomendado para…

  • quando você só precisa de algo simples e rápido
  • você já criou uma imagem, mas precisa colocá-la no plano de fundo do seu telefone/desktop
  • boa seleção de fundos

5. Fluxo simulado

Quando falamos sobre maquetes de sites que são adequados para todo o processo de design, na verdade não mencionamos maquetes. Fluxo simulado é uma das ferramentas de design verdadeiramente versáteis que o levará desde wireframes, passando por maquetes e até protótipos.

Além dos recursos de wireframing, o MockFlow também oferece maior flexibilidade com complementos adicionais no MockStore. Lá você pode encontrar “acessórios”, como pacotes de UI adicionais, modelos adicionais de layout de site e recursos especiais, como personas de usuário, sistemas de design ou tradutores. O MockFlow também é conhecido por sua facilidade de colaboração e compartilhamento, o que o torna uma ótima solução para equipes. Sites para criação de layouts

Custo: Sites para criação de layouts

  • Plano gratuito
  • US$ 14/mês (cobrado anualmente) [Premium]
  • US$ 30/mês (cobrado anualmente) [TeamPack com 3 usuários]

Prós:

  • excelentes recursos de modelagem de wireframe
  • MockStore fornece recursos adicionais
  • Ampla seleção de pacotes e modelos de UI via MockStore

Contras:

  • O plano premium custa mais do que outro software de layout, mas custa menos

Recomendado para…

  • pessoas que precisam de ferramentas adicionais, como sistemas de design ou storyboards
  • grandes equipes que precisam de recursos avançados de colaboração
  • projetos simples e únicos que podem se beneficiar do plano gratuito

6. Sabiá. Sites para criação de layouts

Mockingbird é um bom meio-termo entre recursos extensos e usabilidade simplificada (embora seja classificada como uma ferramenta de última geração). O recurso mais atraente é o editor WYSIWYG simples, onde você simplesmente arrasta e solta os elementos no local desejado. Outros sites de maquete importantes têm editores de arrastar e soltar, mas a interface de usuário do Mockingbird é tão simples e direta que é claramente voltada para iniciantes e novatos.

Porém, o preço não é tão conveniente. Com um preço mínimo de US$ 11 por mês, é um dos sites de layout mais caros, apesar de não oferecer nada. Por outro lado, é o mesmo preço para qualquer número de funcionários, portanto, se você tiver uma equipe grande o suficiente, poderá justificar o custo. Sites para criação de layouts

Custo:

  • US$ 11/mês (cobrado anualmente): 3 projetos
  • US$ 17 // mensal (cobrado anualmente): 10 projetos
  • US$ 32/mês (cobrado anualmente): 25 projetos
  • US$ 68 // mensal (cobrado anualmente): projetos ilimitados

Prós:

  • extremamente confortável
  • Interface WYSIWYG
  • teste gratuito on-line

Contras: Sites para criação de layouts

  • caro
  • O conjunto de recursos não é tão robusto quanto outros sites de layout populares

Recomendado para…

  • iniciantes que se sentem intimidados por interfaces mais complexas
  • grandes equipes que não podem pagar a adesão individual a outros sites de maquete

7. Jarra de maquetes. Sites para criação de layouts

Jarra de maquetes é o mesmo site de layout gratuito do Mediamodifier: você escolhe seu modelo e sobrepõe sua própria imagem nele. Assim como o Mediamodifier, eles oferecem uma seleção de fotos, de laptops a canecas e camisetas, mas, em отличие от Mediamodifier, você pode baixar a versão de alta qualidade gratuitamente. Sites para criação de layouts

MockupsJar pode não ter tantos modelos de maquete de site quanto o Mediamodifier, mas a capacidade de fazer upload de uma imagem de alta qualidade sem pagar compensa isso. No entanto, você só pode fazer upload de 20 imagens em alta resolução; depois disso você terá que pagar ou baixá-lo em baixa resolução. A versão gratuita também tem anúncios, mas no geral não é tão ruim para um site de maquete gratuito.

Custo: Sites para criação de layouts

  • Plano gratuito
  • 5€/mês (pago mensalmente)

Prós:

  • fácil apenas
  • plano gratuito oferece 20 imagens em alta resolução
  • sem marcas d'água

Contras:

  • recursos básicos
  • precisa criar imagens em outro lugar

Recomendado para…

  • pessoas que gostam da plataforma Mediamodifier mas não querem pagar para remover as marcas d'água

8.Moqups. Sites para criação de layouts

moqups é outro designer digital versátil para maquetes, protótipos e, claro, maquetes. Seu editor é uma ótima combinação de recursos avançados e controles WYSIWYG, adequado tanto para iniciantes quanto para designers experientes. No entanto, eles têm apenas dois planos de preços, dependendo de quantos usuários você tem, então equipes com mais de três terão que pagar a mais. Sites para criação de layouts

Os usuários elogiam a capacidade do Moqups de criar fluxogramas, o que não é exatamente útil para layouts, mas é bom para todo o processo de design. Embora alguma usabilidade possa ser estranha, no geral é uma alternativa viável a outros sites de layout genérico, especialmente se você estiver igualmente interessado em wireframes e protótipos.

Custo:

  • US$ 16/mês (cobrado anualmente) [Pro - 3 editores]
  • US$ 49/mês (cobrado anualmente) [Ilimitado - Editores Ilimitados]

Prós: Sites para criação de layouts

  • ferramenta bem balanceada para projetar wireframes, protótipos e maquetes
  • Fácil de usar o suficiente para iniciantes, avançado o suficiente para especialistas
  • Ótimos recursos de planejamento, como fluxogramas, mapas de sites e storyboards

Contras:

  • do lado mais caro

Recomendado para…

  • pessoas que priorizam maquetes e protótipos no mesmo nível que maquetes

9. Maquetes inteligentes. Sites para criação de layouts

maquetes inteligentes está na mesma categoria que Mediamodifier e MockupsJar, mas com melhor integração. Isso é importante se você fez uma captura de tela de alta resolução da visualização no aplicativo Marvel e deseja apenas colocá-la em um exemplo de plano de fundo da área de trabalho. Smartmockups também possui mais recursos de personalização do que outros sites gratuitos com maquetes, como alterar cores, mas esse recurso só está disponível em um plano pago. Sites para criação de layouts

Tal como acontece com outros sites de maquete gratuitos, não espere muito além de ter sua imagem sobreposta no plano de fundo do modelo. A versão paga tem acesso a mais de 6000 modelos de imagens para diversos fundos, incluindo camisetas, cartões de visita e dispositivos digitais. O plano gratuito ainda oferece cerca de 800 modelos de layout, mas você terá que lidar com marcas d’água.

Custo:

  • Versão gratuita
  • Dólares 9 por mês

Prós: Sites para criação de layouts

  • integra-se com Marvel App, Dropbox, Figma, Unsplash e Canva
  • o plano pago permite personalizar a imagem
  • Rápido e fácil

Contras:

  • O plano gratuito possui marcas d'água
  • precisa criar imagens em outro lugar

Recomendado para…

  • você trabalha principalmente no Marvel App, Canva ou Figma

Por que não se tornar um profissional?

Como dissemos acima, o único propósito dos mockups é ter uma boa aparência. Se há muita coisa que depende do sucesso de sua maquete – talvez você precise conquistar uma parte interessada insatisfeita ou apresentar uma ideia para obter mais financiamento – então você definitivamente deseja que sua maquete tenha uma aparência perfeita. Nesse caso, porque não deixar nas mãos de um profissional. Sites para criação de layouts

Ao contratar um designer freelancer, você coloca seu design nas mãos de um especialista que entende os meandros do design. Você não precisa se preocupar com preços de software ou curvas de aprendizado porque o designer cuidará disso para você. E com a nossa comunidade de designers de todo o mundo, você certamente encontrará design com esse estiloaquele que você precisa!

  «АЗБУКА»