Esboço versus Photoshop. Confissões de um UI Designer.

O objetivo deste artigo é apresentar uma nova ferramenta de design gráfico que surgiu recentemente: Sketch. Antes de mais nada, quero deixar claro que não não sou acionista da start-up por trás da Sketch.

capa-esboço-photoshop

Em 2017, por que os designers de interface do usuário (ainda) usam a Creative Cloud?

Uso o Creative Suite desde a versão 5.0 do Photoshop. Pude acompanhar a evolução deste software e há algum tempo tenho uma sensação estranha: o Photoshop não atendeu mais às minhas expectativas como designer de UX/UI. Eu já tinha ouvido falar do Sketch, mas achei que não iria “fazer o trabalho” tão bem quanto o meu fiel amigo Photoshop. Mas isso foi antes! A mudança ocorreu no âmbito de uma missão em que estava a trabalhar em “equipa” com um UX designer. Estávamos enfrentando um grande problema: tínhamos que iterar muito rapidamente em um grande número de telas.

Uso de uma ferramenta de designer de UX/UI comum

No início o designer de UX produzia os wireframes em sua ferramenta de prototipagem, depois veio minha intervenção de UI com o Photoshop. Só que antes de poder "criar" o "wireframe" gastei (muito) tempo recriando os elementos no Photoshop. A observação foi simples e clara: o uso de duas ferramentas retardou nossa entrega. A solução subjacente: o uso de uma ferramenta comum, mas ainda persistia uma pergunta: qual?

Duas soluções nos foram oferecidas: usar o Photoshop ou o Sketch. Nossa escolha naturalmente recaiu no segundo por um motivo simples: o aumento das habilidades de parte da dupla (neste caso eu o UI designer) no Sketch seria mais rápido (e mais natural) do que o aumento das habilidades do UX designer no Photoshop . Essa escolha valeu a pena porque nosso Entrega atingiu uma velocidade maior. Já que entre mim e o Sketch está nascendo uma história de amor... 

As 10 razões pelas quais o Sketch se tornou meu companheiro

1/ Sketch opta por Menos é mais em termos de interface

esboço-3-4-ícone de design de material

Minha primeira impressão me deixou perplexo. Acostumado com a rica interface do Photoshop, achei o Sketch um pouco “barato“. Não se deixe desviar pela pureza da funcionalidade, você se acostumará muito (muito) rapidamente. Como designers de interface do usuário, estamos acostumados a interfaces de software com muitas paletas de ferramentas. euA interface é organizada e é aí que reside sua força. Temos apenas o “mínimo vital” para projetar nossas interfaces.

Vejo duas vantagens nisso:

  • O primeiroR: mais espaço para designers. Não há mais paletas de ferramentas que vêm sobre suas bancadas.
  • A segunda : sfacilitou o aprendizado: poucas ferramentas, muito rápido para começar. 

2/ Uma ferramenta UX/UI comum

sketch_collab

Na minha opinião, o principal interesse do Sketch é que ele oferece a possibilidade de ser usado no de gestão de documentos UX/UI. O designer de UX e o designer de interface do usuário (finalmente) têm uma ferramenta comum que permite que todos continuem trabalhando em seus problemas. O UX trabalha no design: por exemplo, produz um V01. A interface do usuário começa a partir desta versão para criar um arquivo V02. E assim sucessivamente de acordo com o número de iterações. Mas quem diz trabalho colaborativo também diz organização.

Juntos, implementamos uma nomenclatura precisa para otimizar o compartilhamento de arquivos. Uma dica de redação: date_filename_versionXX. Cada nova iteração corresponde a uma nova versão. Eficiência prática e formidável!

4/ Sketch usa a linguagem mac nativamente

Nativo, você disse nativo? Poupo você também de considerações técnicas: lembre-se de que o Sketch é nativo do MacOS. Assim, é de uma velocidade de execução impressionante.

Outra vantagem é que ele incorpora funções gratuitas do iOS, como controle de versão, salvamento automático e renderização de fonte (hiper) precisa. Todas as operações são não destrutivas: combinações e transformações de formas vetoriais são reversíveis. Prática !

5/ A riqueza de plugins e uma comunidade ativa

1-OdxoqLP-NvjW_7EhDof-Hg

A comunidade por trás do Sketch é muito grande e muito ativa. Por exemplo, a adição de símbolos que apareceram no V03 aconteceu graças ao feedback do usuário.

E na UX Republic, apreciamos quando os fornecedores de software são centrados no usuário, não centrados no produto. Sketch foi primeiro um MVP (Minimum Viable Product). Sua equipe, ouvindo seus usuários, desenvolve futuras atualizações. Uma abordagem que praticamos em UX e que tem muitas vantagens: o software evolui de acordo com as necessidades e usos dos usuários.

https://www.sketchapp.com/extensions/plugins/

6/ Exportação de ativos

Zeplin

A produção de ativos torna-se fácil e rápida graças ao plugin Zeplin. Esta ferramenta é compartilhada entre você e os desenvolvedores. TTodos os seus ativos serão gerados e utilizáveis ​​pela equipe de desenvolvimento.

7/ Sketch + Zeplin e Slack

Zeplin pode se conectar ao Slack. Assim, toda a equipe pode acompanhar as exportações de ativos em tempo real. Vou explicar o princípio para você: uma vez que uma tela é finalizada, eu a exporto para o Zeplin. Uma notificação aparece no #design do canal da equipe de desenvolvimento. Assim, os riscos de erros relacionados ao versionamento são quase nulos. O ganho: mais tempo e menos erros.

8/ Uma ferramenta a um preço atrativo

Uma licença de $ 99, sim, você leu certo! É mais do que atraente como preço em comparação com uma licença da Adobe.

9/ Vetor completo e css

Um dos pontos fortes do Sketch também é sua abordagem 100% vetorial: prática, simples e rápida. Da mesma forma, o sketch é projetado para criar UI: tudo o que você projeta pode ser feito em HTML/CSS. Uma funcionalidade de gerador de código também está disponível.

10/ Espelho de esboço

espelho-png8

Assim como seu rival, o Sketch desenvolveu um visualizador para iPhone: esboço-espelho. É uma ferramenta indispensável para o design móvel.

Um último argumento

Finalmente, aprecio particularmente os símbolos. Talvez porque eles me lembram deles clipes de filme em Flash ou Objetos Inteligentes para Photoshop. Mais uma vez, são mais simples, mais práticos, mais leves que um produto Adobe Suite.

camadas@2x

Para terminar de convencê-lo

Apesar da pouca idade, Sketch tem tudo ótimo (ou quase). Suas evoluções regulares sugerem um modo colaborativo mais avançado, onde UI e UX podem funcionar ao mesmo tempo no mesmo arquivo. Se gostou deste artigo, convido-o a consultar este artigo que é um complemento muito bom a este. e que corrobora essa tendência que observamos em nossas diversas missões na UX Republic. E você o que acha? Vamos discutir sobre@ux-república
https://www.invisionapp.com/blog/sketch-vs-photoshop/
Jérôme Fiorese, UX-Activist @jerome