A apresentação de designs é uma das principais exigências no desenvolvimento de aplicativos. Os desenvolvedores dependem dos seus designs para implementar o aplicativo com sucesso. Neste guia, vou te mostrar como disponibilizar seus designs no InVision de forma simples, para que sua equipe de design tenha sempre acesso às versões mais recentes. Com o InVision, você garante que suas ideias sejam visualizadas e comunicadas de forma ideal, enquanto pode aplicar alterações de forma descomplicada.
Principais conclusões
- O InVision permite uma fácil sincronização e apresentação de designs.
- Você pode exportar seus designs diretamente do Sketch e fazer o upload no InVision.
- A ferramenta oferece diferentes modos de visualização e interação com protótipos.
- As funções de feedback e comentários apoiam a colaboração entre designers e desenvolvedores.
Guia passo a passo
Passo 1: Criar um novo projeto no InVision
Primeiro, abra o InVision e crie um novo projeto. Para isso, escolha a opção de criar um "Protótipo" e opte pelo template do iPhone para apresentar seus designs de forma otimizada para dispositivos móveis. Escolha o nome do projeto como "Mobility Stream Udemy" e clique em "Criar".
Passo 2: Exportar designs do Sketch
Depois de configurar seu projeto, você deve importar seus designs do Sketch. Nesse processo, você deve garantir que está escolhendo as pranchetas corretas e fazendo o upload delas no InVision. Você pode arrastar e soltar os arquivos diretamente no projeto do InVision. Para isso, é importante escolher o formato de exportação adequado do Sketch para evitar complicações.
Passo 3: Instalar o plugin do InVision
Para simplificar o processo de sincronização, você deve usar o plugin do InVision para Sketch. Instale o plugin, faça login com sua conta do InVision e ative a opção de sincronização. Isso permitirá que você transfira alterações de design diretamente do Sketch para seu projeto do InVision, sem precisar fazer upload manual dos arquivos.
Passo 4: Adicionar interfaces aos artefatos
Agora você pode criar a interface do seu aplicativo e tornar as telas interativas. Clique nos botões no modo de construção para criar hotspots que simulam a navegação no aplicativo. Você pode escolher diferentes transições como "Slide in" ou "Instant" para representar a experiência do usuário de forma realista.
Passo 5: Definir transições
Depois de adicionar interações, é importante definir as animações corretas para as transições entre as telas. Aqui você pode escolher o tipo de animação que será aplicada ao mudar para outra tela. Certifique-se de que esses detalhes estejam claros e precisos para os desenvolvedores, para que possam implementar o comportamento desejado.
Passo 6: Definir cores e fundos
Você também deve garantir que todas as cores de fundo e detalhes estilísticos estejam corretos. Muitas vezes, esquece-se de definir as cores de fundo nos arquivos do Sketch. Revise cada tela e verifique se os fundos que você planejou no design estão sendo exibidos corretamente no InVision. Certifique-se de que tudo tenha uma aparência harmoniosa.
Passo 7: Sincronização e atualização
Após fazer todas as alterações, é hora de sincronizar tudo. Salve as alterações no Sketch e clique no botão de sincronização no plugin. Isso atualizará automaticamente suas novas telas e ajustes no InVision. Observe que esse processo pode levar algum tempo.
Passo 8: Coletar feedback
Utilize a função de comentários e feedback no InVision para esclarecer dúvidas gerais sobre seus designs. Você pode adicionar um comentário diretamente no protótipo, que pode ser respondido por outros membros da equipe. Isso é especialmente útil para garantir que seu design atenda ao briefing e que todas as expectativas sejam atendidas.
Passo 9: Concluir a apresentação
Por fim, você deve testar seus designs e garantir que tudo funcione perfeitamente. Verifique todos os hotspots que você criou e simule a interação para obter experiências do ponto de vista do usuário. Assim, você se certifica de que a imagem geral esteja coesa antes de apresentá-la à sua equipe ou aos desenvolvedores.
Resumo - Disponibilizando designs com sucesso no InVision
Neste guia, você aprendeu como disponibilizar seus designs passo a passo no InVision. Você descobriu como é fácil trabalhar com o InVision e como aumentar a eficiência das suas transferências de design. Uma preparação cuidadosa e o uso de recursos úteis ajudarão você a realizar seus projetos com sucesso e fornecer as informações necessárias aos seus desenvolvedores.
Perguntas frequentes
Como instalo o plugin do InVision para Sketch?Baixe o plugin do site do InVision e siga as instruções de instalação.
Como sincronizo designs do Sketch com o InVision?Salve suas alterações e clique no botão de sincronização no plugin do InVision para fazer o upload dos designs.
Quais fundos devem ser usados nos designs?Use cores de fundo distintas para todas as telas, para garantir que sejam exibidas corretamente no InVision.
Posso coletar feedback diretamente no InVision?Sim, você pode adicionar comentários ao seu protótipo e receber feedback de outros membros da equipe.
O que posso fazer se as animações não funcionarem corretamente?Verifique a seleção das transições e teste cada tela para garantir que tudo funcione como desejado.
