InVision Studio: uma visão geral e uma revisão

InVision Studio é uma ferramenta de prototipagem e animação que permite criar designs de tela avançados baseados em vetores rapidamente, graças às camadas flexíveis e uma tela infinita. É considerada uma das melhores ferramentas de prototipagem de alta fidelidade que existem. Com o InVision Studio, você pode acelerar seu fluxo de trabalho; criar protótipos interessantes e interativos; comunique seus projetos para a equipe e clientes; teste seus projetos; e esclarecer dúvidas, preocupações e mudanças de design antes do estágio de desenvolvimento.

InVision Studio é parte do pacote de ferramentas InVision, que também inclui InVision Cloud, onde você pode conectar, armazenar e compartilhar seu fluxo de trabalho completo de design de produto, e InVision DSM, um gerenciador de sistema de design e biblioteca onde você pode armazenar e controlar todos os seus componentes de marca e UX. O InVision Studio pode ser usado em Mac e Windows. Você também pode importar arquivos Sketch.

Recursos do InVision Studio

Depois de baixar o aplicativo InVision Studio, você terá uma escolha de projetos para criar. Depois de escolher o que deseja projetar, você fará um tour pela interface.

Para adicionar uma camada ou componente, clique no sinal de mais na parte superior. Quando você adiciona um componente, todas as suas opções aparecem à direita.

Vamos examinar alguns dos recursos notáveis ​​do InVision.

Redimensione e corte imagens sem máscaras.

Esse recurso, denominado corte inteligente de imagem, corta automaticamente as imagens conforme você altera o tamanho. É semelhante a criar um preenchimento de imagem no Sketch e, em seguida, defini-lo como "preencher", mas em menos etapas e de uma forma mais intuitiva. O corte de imagem inteligente é para imagens com um ponto focal próximo ao centro. Também é melhor se você deseja cortar em um círculo, retângulo ou retângulo arredondado. Para imagens que possuem um ponto focal diferente ou uma forma mais interessante, você desejará criar uma máscara para acessar mais opções de personalização.

Fonte: LearnInVisionStudio.com

Corrija os elementos conforme você rola.

Corrigir o cabeçalho e o rodapé não é novidade no InVision, mas corrigir outros elementos é. Defina a rolagem como horizontal, vertical ou ambas e, em seguida, escolha o elemento que deseja corrigir clicando no ícone de alfinete no canto superior direito.

Vincule várias pranchetas em uma animação.

O cronômetro fornece controle sobre várias pranchetas que você deseja transformar em uma animação. Você também pode repetir uma animação para que a última prancheta aponte para a primeira. Ou você pode ter uma animação de várias etapas diretamente para outra parte do seu design. Animações complexas como essa são ideais para introduções e outros vídeos.

Crie gatilhos de furto para animações de paralaxe.

Gatilhos de deslizamento podem criar efeitos de paralaxe e outros tipos de animações que ocorrem na rolagem.

Crie protótipos responsivos sem escrever código.

Com protótipos responsivos, você pode fazer tudo com base em porcentagem e redimensionar cada elemento com base no tamanho da prancheta. Você pode então criar protótipos que respondam a todos os tipos de telas. Isso torna mais fácil criar maquetes de tamanhos variados. Além disso, definir um design como “redimensionável” no Studio irá redimensioná-lo automaticamente quando visualizado no navegador.

Fonte: LearnInVisionStudio.com

Espelhe protótipos para o seu telefone.

Se você deseja testar uma animação ou protótipo em seu telefone, você pode compartilhá-lo, selecionar “espelho” e escanear o código QR no aplicativo móvel.

Use atalhos semelhantes aos do Sketch.

Se você atualmente usa Sketch, então você já estará familiarizado com os atalhos que o InVision Studio usa - quase todos eles são iguais, especialmente quando se trata de inspetor, camadas e barra de ferramentas.

Alterne entre temas claros e escuros.

Os não designers podem não perceber como esse recurso é útil. Ao projetar uma interface clara, o contraste adicionado de um tema escuro pode ser útil (e vice-versa).

Colabore com a equipe em tempo real.

A colaboração e o fluxo de trabalho são simplificados e os membros da equipe podem criar e comentar em tempo real. Com a sincronização global e atualizações em tempo real, ninguém ficará fora do circuito.

Projetando com o InVision Studio em um navegador

Quero mostrar rapidamente como é trabalhar com a versão de navegador do InVision Studio. Examinaremos brevemente o projeto de uma placa, a criação de um protótipo e o uso do modo à mão livre.

Projetando uma placa

Seu centro de comando está no canto superior direito da tela. Os cinco ícones representam:

• Editar cabeçalho
• Definir tipo de layout
• Definições
• Comentários
• Compartilhado

Editar Cabeçalho

Brinquei um pouco com o cabeçalho. Depois de clicar em “Editar Cabeçalho”, estas opções apareceram:

Substituí a imagem e o texto, desfoquei um pouco e adicionei uma leve sobreposição para destacar o texto. Eu adoro especialmente a opção “Tamanho” - você apenas passa o mouse sobre ela e seleciona entre três tamanhos.

Definir tipo de layout

Em seguida, alterei o tipo de layout para “Meticuloso”. Isso é para os blocos de conteúdo abaixo do cabeçalho, que aparecerão conforme você rola para baixo.

Editando Seções Adicionais

Se você passar o mouse à direita do título da seção, verá três ícones. A seta para baixo é “Mover seção para baixo” e o “X” é “Remover título da seção”. Se você excluí-lo e mudar de ideia, basta passar o mouse sobre a mesma área e terá a opção de adicionar um novo título de seção.

Ao clicar no sinal de mais à direita da seta e no “X”, você obterá um novo menu. Da esquerda para a direita, os ícones representam:

• Adicionar uma amostra de cor
• Adicione uma anotação
• Subir arquivo

Ao passar o mouse sobre um bloco de conteúdo, você verá as opções de redimensionamento novamente, como no cabeçalho. Selecionar um tamanho diferente atualizará automaticamente o resto do layout para recolocar os blocos. Clicar em um bloco de conteúdo abre uma janela à direita.

Passar o mouse sobre uma das cores na barra mostrará seu código de cores. Esta janela também é onde os membros da equipe podem deixar um comentário sobre este bloco de design específico.

Criando um Protótipo

Também brinquei com a demonstração do protótipo, só para mostrar quais são as opções.

Aqui, seu centro de controle está na parte inferior. Começando com o ícone do olho da esquerda para a direita, os ícones são os seguintes:

• Modo de pré-visualização
• Modo de construção
• Modo de Comentário
• Modo de inspeção
• Modo de História
• Compartilhamento Social
• Upload de telas
• Configuração
• Status da tela

Modo à mão livre

O modo à mão livre começa com uma demonstração interativa para mostrar rapidamente como usá-lo. Então, você trabalha com uma tela infinita para montar seu projeto. Se você estiver trabalhando no aplicativo, pode enviar o link “Colaborar ao vivo com o Freehand” para um membro da equipe e eles podem desenhar e adicionar texto ao projeto em tempo real.

Preços do InVision Studio

O plano gratuito inclui um protótipo com colaboradores e telas ilimitadas. Se isso é tudo de que você precisa, nunca precisará pagar. Demonstrações não contam para o limite. Se você projetar mais de um protótipo, terá seis dias de acesso gratuito para criar protótipos ilimitados. Depois disso, você terá que atualizar para criar e usar protótipos adicionais. Se você deseja fazer upgrade, aqui estão seus planos:

Pensamentos finais

Comparado com outras ferramentas de design, você pode achar o InVision Studio um pouco lento e às vezes com erros - isso não quer dizer que seja lento em geral, apenas mais lento (às vezes) do que outras ferramentas semelhantes, como Adobe XD, Figma e Sketch. Eu não tive esse problema pessoalmente, mas ele aparece muito nas avaliações. Além disso, o InVision Studio não oferece suporte a plug-ins, então, se isso for importante para você, considere o Sketch.

Quando se trata de prototipagem, porém, o InVision Studio é difícil de bater, especialmente se você tiver que colaborar com uma equipe. Pode não ser tão poderoso quanto o Adobe XD, mas ainda é uma das melhores ferramentas de prototipagem que você encontrará.

A interface do InVision Studio é fácil de aprender e usar, e os ícones são elegantes e modernos. Também há muita ajuda com tutoriais, tours e links para mais orientações. (Agora, dito isso, eu li comentários que dizem o contrário, então suponho que seja uma questão de gosto.) Há muito pouco trabalho de adivinhação com o InVision Studio, e você pode ir direto ao que está lá para fazer: criar.

Ao projetar, uma regra de ouro é usar a Razão Áurea. Confira meu guia definitivo para usar e compreender a Razão Áurea.

Imagem em destaque via Visual Generation / shutterstock.com