Por que a Taqtile migrou para o Sketch?
Durante muito tempo a Adobe e seus programas foram a menina dos olhos dos designers. Não usar o Photoshop ou o Illustrator era algo impensável, quase uma ofensa. Mas os tempos mudaram, a onipresença da internet e o domínio dos dispositivos móveis trouxeram consigo novas demandas. Como já dissemos em um post anterior, é preciso começar a adotar o pensamento Mobile First.
Hoje em dia, por incrível que pareça, uma das ferramentas mais utilizadas para o design de interfaces continua sendo o Photoshop, junto de outros programas do pacote Adobe, como o Illustrator. Mas, como o próprio nome já diz, o Photoshop é um software pensado especificamente para fotos. Recentemente, diversas funcionalidades vem sendo adicionadas ao programa com o intuito de torná-lo mais adaptado ao design de interfaces, mas isso só contribui para aumentar a bagunça que já existe por lá. Durante seus 25 anos de existência o Photoshop só acumulou funcionalidades, hoje ele é tanto um software de edição de imagens como também de layout, tipografia e muitas outras coisas, todas escondidas atrás de uma imensidão de layers. Mas tudo tem seu preço, aprender a utilizar o Photoshop é penoso, a curva de aprendizado do programa é enorme e isso faz com que comecem a surgir alternativas.
Uma delas é o Sketch, criado pela equipe da Bohemian Coding (formada por somente 5 pessoas). A principal diferença entre os dois é o fato do Sketch ser um software pensado especificamente para o design de interfaces. Apesar dos poucos anos de existência o programa já está em sua terceira versão e vem crescendo e melhorando com updates frequentes.
Hoje vamos falar sobre algumas funcionalidades do programa que nos fizeram substituir o Photoshop, facilitando e agilizando muito as coisas aqui na Taqtile. Nós sabemos o quanto é difícil abandonar o Photoshop depois de tantos anos de uso, mas, nesse caso, o esforço vale a pena. O Sketch é uma ferramenta incrível, certamente uma das melhores e mais bem pensadas para o design de interfaces.
Artboards
As artboards são uma ferramenta excepcional para criar interfaces responsivas. Com elas é possível reunir todas as telas do projeto em um só arquivo. O Sketch oferece alguns templates pré-definidos para os tamanhos dos principais smartphones e tablets do mercado, o que elimina a chance de erros.
Mas, a maior vantagem delas é a agilidade que elas trazem para o processo como um todo. Criar uma tela sabendo qual foi o passo anterior e qual será o próximo deixa tudo mais fácil.
A funcionalidade foi tão bem recebida que a última atualização do Photoshop trouxe as artboards, em uma tentativa de resgatar os antigos usuários que migraram para o Sketch.
Templates
Além das artboards pré-definidas para os tamanhos mais comuns do mercado, também existem alguns templates com ícones, botões e padrões dos sistemas iOS e Android. Todos eles são bem completos, incluindo até mesmo fontes e telas de diálogo, tudo de acordo com os guidelines do Google e da Apple.
Mirror
Aliado às artboards, o Mirror é a ferramenta perfeita para quem quer ter uma noção melhor de qual será o resultado final do trabalho. Com poucos cliques você pode visualizar suas telas através do seu iPhone ou iPad e tirar aquela eterna dúvida se a fonte vai ficar muito pequena ou se aquele botão vai ser fácil de apertar.
Vetores e SVG
Trabalhar com vetores no Sketch é muito fácil. O software é compatível com arquivos SVG, o que significa que você pode ser feliz com seus ícones, adicionando cores, animando e os modificando tudo como quiser. Além disso, o programa trabalha 100% com vetores, o que significa que ele é também escalável e responsivo.
Exportando
Para nós, uma das killer features do Sketch são as ferramentas de exportação. Por ser 100% vetor, é possível exportar arquivos em PDF, JPG e PNG em @2x para telas de retina. Ou seja, crie suas telas sem preocupação e o Sketch vai redimensioná-las sozinho para outros tipos de telas.
Exportar no Sketch é rápido, fácil e útil, tendo inclusive compatibilidade com o drag and drop da Apple, muito útil para exportar ícones e/ou botões por exemplo. Além de tudo isso, é bom lembrar também que os arquivos exportados são extremamente leves, muito menores do que qualquer arquivo PSD.
Symbols e Styles
Assim como no finado Fireworks, o Sketch também possui os symbols, que funcionam da mesma forma que no programa da Adobe. Você transforma seus ícones, sua navbar, a tabbar, entre outros, em símbolos. Com isso, sempre que uma alteração for feita todos os lugares onde esses ícones estiverem aplicados sofrerão a alteração também. Também é possível separar um ícone de um símbolo, caso você precise fazer uma alteração somente em uma tela, e não em todas.
Os text styles tem a mesma dinâmica. Com eles fica muito mais fácil organizar hierarquicamente seus designs, pré definindo a fonte, o tamanho, a cor e outro parâmetros, para headlines, subheadlines, parágrafos, listas, etc.
Inspector
Essa é uma daquelas coisas que depois de usar você fica se imaginando como viveu até hoje sem ela. Se você desenha um retângulo e depois quer arredondar um dos cantos, ou a altura você não precisa mais deletar o objeto original e começar tudo do zero. No Sketch os shapes permanecem editáveis, com todos os valores disponíveis em uma barra na lateral da tela.
Plugins
Por ser mantido por um time pequeno, os updates do Sketch são focados na manutenção das principais ferramentas e, por vezes, na adição de grandes funcionalidades. Mas, para facilitar as pequenas ações do dia-a-dia, existem também os plugins, criados pela própria comunidade de usuários.
Com eles é possível automatizar e agilizar quase tudo. Duas dicas são o Sketch App Sources, para encontrar e baixar os plugins, e o Sketch Toolbox, excelente para gerenciar o que foi instalado.
Code-friendly
Se você ainda acha que tudo isso é pouco, o Sketch também é code-friendly. Isso significa que tudo o que você faz dentro dele (sombras, gradientes, etc) é possível de ser feito no CSS. Clicando com o botão direito em qualquer objeto da tela há a opção “Copy CSS Atributes”, que copia o código diretamente para seu clipboard.
Essas são algumas das muitas funcionalidades do Sketch que fizeram a gente se apaixonar logo de cara. Apesar delas, é óbvio que a ferramenta não é perfeita, ainda há muito a ser melhorado, mas a boa notícia é que essas melhoras são feitas constantemente.
A principal diferença que sentimos aqui na Taqtile ao migrar do Photoshop para o software da Bohemian Coding foi o aumento na produtividade, muito por conta do Sketch ter sido criado especificamente para o design de interfaces.
Isso não significa que o Photoshop e o Illustrator foram abandonados completamente. Pelo contrário, os dois continuam sendo ótimas ferramentas e ainda fazem parte do nosso “cinto de utilidades”, mas agora junto também do Sketch.
Se você é um UI ou UX designer nós recomendamos fortemente que você dê uma chance ao Sketch. É bom lembrar que, por enquanto, o programa é exclusivo para Mac e ainda não há previsão de lançamento para Windows. Eles oferecem um período de teste de 30 dias e, caso você decida fazer a mudança, a licença custa U$99,00, pagos uma única vez.
Agora, se você ficou empolgado e já quer começar a utilizar o software nós temos outra boa notícia. No início uma das maiores reclamações em relação ao Sketch era sobre a falta de recursos disponíveis. Hoje isso já é passado, existem centenas de sites onde é possível encontrar listas e listas com templates, ícones, botões e muito mais. Esses são alguns dos que costumamos utilizar por aqui:
Sketch Shortcuts — http://sketchshortcuts.com/
SketchAppSources — http://www.sketchappsources.com
SketchApp TV — http://sketchapp.tv/
Sketch Tips — http://www.sketchtips.info
Sketch Tricks — http://sketchtricks.com
Meng To’s Design+Code — http://designcode.io/sketch
Sketch Plugin Directory — https://github.com/sketchplugins/plugin-directory
