Prototipagem para a Web com o Framer
Framer é uma ferramenta muito poderosa que pode prototipar qualquer coisa que você possa imaginar, mas se você der uma olhada na Galeria do Framer's você notará rapidamente algo:
Dos seus 54 exemplos, 48 deles são apps, 4 para Apple Watch, 1 para iPad e 1 para Apple TV. O Framer é mesmo destinado a design de web / desktop 'tradicional'?
Absolutamente.
Na IBM Design, a maioria dos meus projetos é feita para aplicativos da Web de desktop corporativo. A maioria dos designers com quem trabalho usa Esboço (incluindo me a mim). Esses arquivos do Sketch são então prototipados usando uma ferramenta como InVision ou recriado e prototipado em código. Como desenvolvedor de front-end em uma equipe de design, tenho uma posição única na qual ambos projetam e codificam protótipos.
Depois de aprender os conceitos básicos do Framer, decidi adicioná-lo ao meu fluxo de trabalho e isso realmente melhorou o meu processo de design. A parte mais poderosa é poder importar um arquivo estático do Sketch para o Framer e transformá-lo em um protótipo realístico e interativo em um período de tempo relativamente curto.
Com isso, não preciso gastar tempo valioso no início do processo, recriando designs em código. Eu posso ter idéias na frente de interessados e usuários muito mais rápido. Eu posso salvar a codificação para mais tarde quando o projeto estiver mais sólido.
Depois de usar o Framer por alguns meses, aqui estão algumas coisas que aprendi:
Planeje e escopo seus protótipos
Antes de começar um projeto, decido algumas coisas:
O que estou tentando realizar?
Independentemente de o protótipo ser para testes de usuários ou para obter uma ideia conceitualizada, qual é a quantidade mínima de trabalho necessária para transmitir a minha ideia ou obter insights dos testes? Eu não estou apenas sendo preguiçoso;), isso ajuda a decidir as interações necessárias, animações e telas que são necessárias.
Quanto mais tempo você gasta em seu design, mais você se apega. Quanto mais ligado, menor a probabilidade de você fazer as mudanças necessárias.
Vamos usar o protótipo acima como exemplo.
Eu estava trabalhando em um novo projeto e queria explorar o que seria um layout baseado em cartão com animações "aleatórias" entre os estados. Eu esbocei a idéia básica que queria fazer e usei isso como meu ponto de partida.
Se vocês dê uma olhada no protótipo acabado, apenas o primeiro cartão é clicável em cada etapa. Não há como voltar atrás, nenhum estado de foco, o conteúdo da última tela não está completo e não é quase perfeito. Nenhum deles foi necessário para fazer a minha ideia, então não passei tempo incluindo-os. O Framer pode fazer praticamente qualquer coisa, mas isso não significa que você deva tentar fazer tudo no seu protótipo.
Crie fluxos de interface do usuário usando o incrível módulo ViewController do Andreas
Você pode usar o ViewController Plug-in de esboço para criar fluxos da interface do usuário diretamente no Sketch. Transforme rapidamente seus projetos em protótipos clicáveis sem ter que escrever código.
Isso é ótimo para apresentar seu trabalho para as partes interessadas e é realmente muito simples de fazer. Em vez de percorrer um arquivo Sketch com uma dúzia de pranchetas ou um .pdf, você pode apresentar um protótipo interativo ou compartilhar sua URL de projeto do Framer hospedado.
Dependendo do que estou tentando realizar, posso acabar escrevendo algum código para coisas como efeitos de foco, animações e entradas de texto para um toque adicional de realismo e interatividade. Mais uma vez, como designer, decida o que é necessário para transmitir sua ideia e implementá-la adequadamente.
Confira AndreasCrie fluxos de interface do usuário usando o artigo Esboço e Framer para aprender mais sobre o plugin.
Microinteractions
Eu acho que há algumas razões que a prototipagem móvel é realmente popular com o Framer, uma delas sendo microinteractions parece muito mais comum em dispositivos móveis. Mas não tem que ser assim! Eu acho que designers para a web podem ser melhores em fazer nosso trabalho ter mais movimento e o Framer é realmente bom nisso.
Este é apenas um exemplo simples de uma interação rápida que fiz usando um arquivo de esboço que um designer da minha equipe já havia feito. Explorar interações como essa leva uma questão de minutos.
Claro, mas porque não apenas código?
Como desenvolvedor de front-end, muitos dos meus projetos acabarão com um protótipo codificado. Em seguida, uso esse protótipo como base para escrever o código front-end no produto, trabalhando junto com engenharia lateral. Então, por que não apenas codificar desde o início?
Como mencionei anteriormente, velocidade. Eu posso rapidamente desenvolver ideias que eu ou outro designer já fizemos importando-as do Sketch para o Framer. É ótimo para a parte inicial do processo de design, onde você está explorando ideias e implementando feedback rapidamente. Eu posso me mover rapidamente no código, mas o Framer leva isso para o próximo nível.
Outra razão é a liberdade. O simples fato de todo o meu código escrito no Framer ser descartado é realmente ótimo. Isso me permite experimentar coisas que eu não faria de outra forma e ficar um pouco mais solto com meu código. Eu posso passar 15 minutos explorando uma ideia e depois descartá-la sem nenhum remorso.
Algumas dicas e truques
Você (ou o designer com quem está trabalhando) provavelmente terá que configurar os arquivos do Sketch de maneira um pouco diferente.
- Agrupe suas camadas. Camadas que não estão em um grupo são ignoradas
- Evite usar espaços nos nomes dos seus grupos
- Camadas ocultas no Sketch ainda são importadas, mas sua visibilidade será definida como false.
- Crie nomes simples e exclusivos para suas pranchetas
- Um sinal negativo (-) no final da sua prancheta irá excluí-lo de ser importado para o Framer
Achatar todas as camadas no Sketch que permanecerão estáticas. Isso irá melhorar o tempo de carregamento do seu projeto, o que é especialmente bom quando se cria um protótipo mais robusto. Você pode fazer isso adicionando um asterisco (*) ao final da camada no Sketch.
Vale a pena passar algum tempo com os designers da sua equipe para saber como configurar os arquivos do Sketch para melhor se adequarem ao fluxo de trabalho e o que funciona melhor para a equipe.
Quando você importa um arquivo Sketch para o Framer, você verá algo assim:
# Import file "design" sketch = Framer.Importer.load("imported/design@1x")Substitua sketch por $, e agora você pode usar $ para referenciar suas camadas de Sketch, evitando escrever a palavra sketch centenas de vezes:
$ = Framer.Importer.load("imported/design@1x")Use o trecho 'Normal Cursor' para um ponteiro normal do mouse:
document.body.style.cursor = "auto"and then scale them down, so they're extra crisp. Eu importo meus designs em @ 2x e depois os reduzo, então eles são mais nítidos. Note que isto não parece se dar bem com o módulo ViewController mencionado acima.
Framer.Device.contentScale = .5Sketch e Framer usam diferentes artboards / dispositivos padrão para a web. O esboço usa 1440 × 1024, enquanto o Framer usa 1440 × 900. Eu opto por 1440 × 900. Não pense que você está restrito a 900 pixels de altura, você pode facilmente criar páginas roláveis no Framer.
[- Este artigo foi originalmente Postado em Medium , republicado com a permissão do autor -]