Sketch + Zeplin — O workflow de UI design que você respeita

Publicado originalmente em Codesigners.cc

Achou que não ia ter post de UI design? Achou errado otário! =P

De uns dois anos pra cá eu mudei um pouco o modo como eu organizo o meu workflow em projetos de design de interfaces. Ha alguns bons anos, quando comecei a me interessar por estudar design interfaces digitais, eu logo me encontrei imerso em um contexto skeumorfico por conta da UI do iphone. E como todo mero mortal, acabei surfando a onda daquele momento e fazendo o design de algumas interfaces cheias de texturas, volumes e outras características do skeumorfismo.

Ok Brunão, mas por quê você está falando de Skeumorfismo?

Trabalhar com interfaces skeumorficas não era nada parecido com o que o flat design nos proporcionou. Geralmente as interfaces eram feitas no Photoshop (argh!). O conceito de componente ou ‘atomic design’ nem existia, e o que a gente fazia era exportar slices de texturas. Ou seja, se a sua interface tinha uma box com canto arredondado e uma borda com textura de couro, você teria que exportar os 4 cantos dessa borda como imagens, e possivelmente mais dois pedaços da borda, um horizontal e outro vertical. Posteriormente você teria que posicionar cada cantoneira absolutamente na sua div, e aplicar as bordas também absolutamente ou como uma imagem de background.

Em resumo, organizar os assets da sua interface era bizarro. Tudo era imagem bitmap, tudo ficava na pastinha de imagens do seu projeto e nem se falava em design responsivo.

Exemplo de partes e cortes de componente skeumorfico

Daí você me pergunta: “Tá, e o que mudou então?… porquê você acha que é diferente agora?

Com a onda do Flat Design nas interfaces digitais a coisa ficou um pouco mais fácil. Como a maioria dos elementos recebe cores sólidas, com poucas sombras e degradês que também conseguimos aplicar com CSS ou SVG filters, não havia mais a necessidade de exportar tanta imagem assim. Parte disso se deve também à evolução dos browsers, da velocidade de internet e capacidade de processamento e memória dos computadores.

Nessa época eu passei a criar layouts no Adobe Illustrator, pois achava mais fácil poder medir os elementos em pixels e também exportar meus ícones em svg ou png, já que eram praticamente as únicas imagens que eu exportava do projeto, o resto dava pra fazer tudo com HTML e CSS.

Mas como nem tudo são flores, se o skeumorfismo foi embora e ajudou na questão de exportar imagens, o flat design trouxe novos desafios juntamente com a tal da ‘internet 2.0’. Neste momento houve uma espécie de migração de softwares Desktop para a Web, que eram chamados de RIA naquela época (sigla para Rich Internet Application). Agora os projetos não eram apenas websites de 5 páginas, mas sim, sistemas completos com dezenas e até centenas de telas.

Fazer a manutenção dessas telas de interface passou a ser função do designer dentro da equipe de TI. Mas ainda estávamos lá, organizando tudo em pastinhas ou em milhares de arquivos do illustrator, e isso às vezes era bastante cansativo e improdutivo.

Me lembro de trabalhar em uma software house onde eu desenvolvi uma interface para um sistema de gestão de concessionárias. Em um dado momento, houve a necessidade de se modificar um elemento que se repetia em inúmeras telas. O Illustrator ou Photoshop não são preparados para trabalhar com símbolos e instâncias (O Flash era… saudades ❤); e então, eu tive que alterar manualmente em arquivo por arquivo, e lá se foi 1 hora de trabalho só dando delete e control+v.

A coisa piora então quando você tem mais de uma pessoa no time de design ou no time de programadores. Era comum as pessoas de vez em quando acessarem os arquivos da versão errada, pois nem todo mundo da equipe tinha os últimos arquivos atualizados. Nessa época, mais ou menos em 2010, serviços como o Dropbox e Google Drive já existiam, mas não era fácil subir arquivos pra nuvem com uma internet de 1Mb/s dividida por umas 8 pessoas na equipe.

Enfim, fazer a manutenção de interfaces e assets era uma tarefa trabalhosa, onde se gastava muito tempo substituindo, salvando e exportando arquivos para uma espécie de respositório de design, a famosa pastinha do layout.

Sketch App e a produtividade aumentada!

Alguns bons anos depois, por volta de 2015, eu fui conhecer o Sketch e pirei o cabeção! O Sketch é um aplicativo desktop, infelizmente exclusivo para usuários de computadores Mac (da Apple).

Ele foi pensado e desenvolvido justamente para designers e equipes que passavam pelo mesmos problemas que citei acima. Com o Sketch agora era possível exportar TODOS os ícones do seu layout com apenas um clique… quer mais? Você podia exportar todos os ícones em diferentes formatos de imagem!

Não ta bom? Ta, ok… então pensa que você tem 30 telas no seu projeto, e que o seu menu lateral tinha 5 items com ícones, e agora você terá que adicionar mais um. No Sketch você não precisar adicionar o seu novo ícone tela por tela. Basta converter o seu menu lateral em um símbolo, e a partir de agora, toda vez que você mudar algo neste símbolo, automaticamente em todas as telas onde este símbolo estiver presente ele também será atualizado, de uma única vez!

Você também pode adicionar plugins ao sketch. Ele possui inúmeros plugins gratuitos que são muito interessantes, como por exemplo o Craft, que possibilita fazer uma prototipagem da sua interface com interações e animações. O Sketch ainda conta com várias outras ferramentas pensadas especificamente para design de interfaces, e é realmente uma mão na roda!

Gerenciando Assets e Documentação com o Zeplin

O Sketch resolveu o problema de manutenção e produtividade no desenvolvimento de interfaces, mas ele por si só não conseguiu resolver um outro problema que é a Documentação.

De projetos pequenos com equipes de 2 pessoas à projetos com 50 participantes, a documentação sempre será necessária. Ela torna possível que os envolvidos no processo de design e programação estejam ‘na mesma página’ e estejam falando das mesmas coisas quando vão discutir o projeto. Porém, mais importante do que estarem na mesma página, é terem acesso aos dados técnicos de cada componente ou elemento de interface.

Me lembro muito bem ter que fazer inúmeros PDFs para os programadores, colocando medida e informações técnicas em tudo (cores, tamanho de fonte, raio da borda, etc). Essas documentações também tomavam um tempo absurdo e era bem chato de fazer. Ja fiz isso tanto no Photoshop quanto no Illustrator, e o trabalho de colocar medida e informação técnica em tudo é muito chato, além de cansativo e trabalhoso.

Mas esses problemas acabaram com o Zeplin!

Zeplin é um aplicativo que lhe permite importar as telas diretamente do Sketch, e no momento em que você faz isso ele faz algumas coisas maravilhosas:

• Separa todas as informações técnicas de cores;
• Separa todos os estilos de texto do seu projeto informando a fonte, tamanho e cores;
• Separa todos os ícones da sua interface e os converte em assets;
• Deixa todos esses assets clicáveis, e então você pode saber informações técnicas de cor e tamanho daquele elemento específico;
• Dá o código CSS de todos os elementos da sua interface!

Além de fazer tudo isso, ele também permite que múltiplas pessoas acessem os arquivos e que façam comentários em cada tela ou asset. Ou seja, você não precisa mais ficar inúmeras horas medindo tamanho de componente e especificando para o programador que ele precisa deixar o espaçamento entre elementos com 15px. Não precisa mais enviar o código hexadecimal para o programador e dizer que o verde que ele usou não é o verde que está no layout (e ouvir ele respondendo que não faz diferença, verde é verde).

Exemplo de documentação de componente no Zeplin

É só você pedir pra ele entrar no zeplin e clicar em cima do elemento que ele já terá todas as informações técnicas que ele precisa, além de poder até copiar o código CSS bonitinho.

It’s fucking awesome!!!

Existe uma última etapa que é a prototipagem, mas não vou falar dela neste post pois estamos em um ano onde existem algumas promessas de aplicativos para prototipagem muito boas, e estou aguardando estes aplicativos serem lançados para testá-los e fazer um post completão sobre prototipagem. Todavia, o que posso dizer é que no momento eu utilizo o Invision para protótipos, exportando todas as telas a partir do Sketch e criando as interações dentro do Sketch com o plugin Craft (fornecido pelo pessoal da Invision).

E quanto custa essa maravilha toda?

Sketch e Zeplin são pagos.

No momento em que escrevo este artigo o Sketch sai por USD$ 99,00/ano (salgadinho mas vale muito a pena)… Estudantes e professores têm 50% de desconto. Você também pode testá-lo por algum período (não encontrei no site o período de testes).

O Zeplin ainda tem uma versão gratuita, mas você têm um limite de projetos simultâneos e quantidade de assets bem pequena, o que não é interessante. O Zeplin tem 3 opções de preço, e o mais em conta sai por USD$ 19,00/mês com direito até 3 projetos simultâneos e assets ilimitados.

Se você já é um designer de UI/UX ou pretende seguir neste caminho pelos próximos anos, posso lhe assegurar que essa dupla de aplicativos vai lhe trazer grandes benefícios.

Esse não é um post patrocinado (quem me dera…hahaha), e não estou ganhando um centavo ou qualquer outro benefício de alguma das duas empresas donas dos aplicativos citados neste artigo. Tudo o que eu disse acima é minha sincera impressão da combinação destes aplicativos e de como eles melhoraram o meu workflow. Espero que possa ser útil pra você também!

E você? Conhece outros aplicativos que proporcionam um bom workflow com boa produtividade? Conta pra gente aí nos comentários!