A ideia era trazer pra cá um relato menos apaixonado e mais preciso, para te ajudar a fazer uma escolha racional da melhor ferramenta para desenhar interfaces. Por isso, passamos seis meses usando o Sketch antes de escrever esse texto. Mas, o relato imparcial, que deveria se chamar “Photoshop vs Sketch”, acabou virando “Por que o Sketch é o queridinho dos UI Designers”.

Portanto, não vamos fingir que o Photoshop ainda é o dono do nosso coração, porque já fizemos declarações públicas de afeto ao Sketch. Isso não significa que somos incapazes de apontar questões críticas ou de argumentar com bons motivos para escolher um e não o outro.

Então, se você prefere escolhas emocionadas a decisões calculadas, siga-nos os bons.

Primeiras impressões

Depois de utilizar o Photoshop por dez anos, a primeira impressão que tivemos do Sketch é que ele é bem mais simples e prático. Para quem está acostumado com os aplicativos da Adobe, algumas funcionalidades são intuitivas. Outras requerem um pouco mais de uso até se tornarem naturais.

Por ser todo em vetor, o Sketch torna a adaptação dos projetos para diferentes resoluções de tela bem mais prática. Essa facilidade se estende também para a exportação de ícones.

Sem falar que a primeira experiência que se tem com programa é um canvas infinito, que te permite criar, duplicar e arrastar telas ou elementos livremente.

Por ter sido feito para UI Designers, todas as ferramentas do Sketch buscam facilitar ao máximo a construção de interfaces. Há quem diga que, por ter um nicho tão definido, o programa acaba se limitando demais.

Ele é mesmo muito mais enxuto que o Photoshop, mas essas “limitações” impedem que o designer crie soluções mirabolantes — que fazem todo sentido na cabeça dele, mas vira uma enxaqueca crônica no cérebro dos desenvolvedores. Olhando por esse ângulo, as delimitações representam uma grande vantagem. De nada, desenvolvedores frontend.

A médio prazo, o Sketch melhora o fluxo de design e, consequentemente, o desempenho do designer. Com ele, o ritmo é muito mais fluido.

Mas… no que, exatamente, o Sketch é melhor do que o Photoshop?

Senta, que a lista é extensa…

Configuração de fonte

O corpo de texto, entre-linhas e demais configurações de fonte são pensadas para serem muito semelhantes à renderização do navegador. Dessa forma, o desenvolvedor frontend não precisa se preocupar tanto em ficar comparando projeto gráfico e implementação.

CSS friendly

Os efeitos de preenchimento, borda e degradês têm a mesma limitação de um código CSS. Então, dificilmente um projeto gráfico apresentará algo que o desenvolvedor não consiga replicar com facilidade.

Coleção de símbolos

Com um pouco de paciência e muita organização, é possível criar uma biblioteca de símbolos para cada arquivo e componentizá-lo. A partir disso, sempre que houver mudanças em algum componente, todo o projeto gráfico será atualizado automaticamente.

Por exemplo: se eu transformei um botão que era verde em azul e tenho um símbolo “botão” catalogado, quando eu modifícá-lo, todos os outros também serão alterados. Feitiçaria? Não, tecnologia (e muito amor).

Pós projeto

Além de organizar tudo muito direitinho, dividindo por páginas, interações e pastas, o Sketch facilita a medição de margens, paddings, tamanhos de texto, cores, etc. Existem, inclusive, plugins que documentam essas medidas automaticamente. Basta selecionar o objetivo, apertar um atalho e, tcharam, está tudo lá: anotadinho. Usar essa funcionalidade para projetos mobile é uma maravilha.

Exportação: nota 10

Na categoria mobile, a escola Unidos do Sketch ganha nota dez pela exportação. Você só precisa selecionar tudo o que quiser exportar e depois definir os tamanhos e sufixos pra cada .png. São 109 itens? Moleza. Com um clique é possível exportar uma imagem para todas as zilhões de resoluções do android e pras milhões de resoluções do iOS. Se for um projeto desktop, você pode salvar uma versão para monitores de retina automaticamente.

O que falta no Sketch?

Para ficar perfeito, o Sketch precisaria: ter um conceito de “projeto” e salvar a mesma biblioteca de símbolos para vários arquivos diferentes. Hoje, para manter os símbolos atualizados, é preciso desenhar todas as interfaces em apenas um arquivo. Isso nem sempre é possível, principalmente porque alguns produtos precisam de muitas interfaces.

Para quem o Sketch é recomendado?

Para todos os UI Designers que gostam de praticidade; desenvolvedores frontend que codificam as telas e; desenvolvedores que precisam entender o comportamento de uma interação e têm preguiça de ler documentações.

Enfim, para todo mundo que quer usar um programa fácil, prático, bonito e mais barato do que o Photoshop.

Dicas de leitura

Se você ainda não se convenceu de que o Sketch é melhor ou quer mais informações antes de abandonar o bom e velho Photoshop, não deixe de ler:


Gostou do texto? Que tal recomendá-lo? Você também pode seguir a gente no Facebook e no Twitter e ficar por dentro das nossas atualizações semanais. (:

Design + Sketch

The best collection of articles, tips, tutorials, and stories on designing and prototyping with Sketch and beyond

    Aerochimps

    Written by

    Desenvolvemos aplicativos web e mobile. Conversamos sobre aplicativos bacanas, novidades no mundo da tecnologia e ux. http://aerochimps.com/

    Design + Sketch

    The best collection of articles, tips, tutorials, and stories on designing and prototyping with Sketch and beyond

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade