cover
Inspirações

Sketch e Zeplin: a combinação perfeita.

Olá criativos. Recentemente eu venho trabalhando com 2 ferramentas que foram feitas para design de interface: Sketch e Zeplin. Essas duas ferramentas combinadas, facilitam o processo para designers e desenvolvedores tanto web quanto mobile.

Neste post rápido, vou introduzir o que são e pra que servem elas.

1 – Abandonando o Photoshop

Criar interfaces no PS era um trabalho um pouco dificil até a versão CC 2015. Antes da Adobe implementar o recurso de “Artboards” na versão 2015, a quantidade de grupos e layers no mesmo documento deixava um pouco bagunçado a organizaçao e visualização do projeto como um todo. Mas o PS nunca foi realmente uma ferramenta efetiva para criar interfaces por uma série de limitações que o editor de imagem tem, tirando o peso para se instalar o programa.

Com a chegada do Sketch, os designers vem há alguns anos, trocando a opção por alguns motivos que são relevantes comparado ao custo x benefício dos dois programas. O valor do Sketch é de $99 na Apple Store enquanto o Photoshop custa por volta de $9,90 por mês.

2 – Utilizando o Sketch

O Sketch é um aplicativo vetorial e com linguagem nativa do sistema Mac que foi desenvolvido pelo time do Bohemian Coding em 2008. Ele foi criado com o objetivo de atender ao fluxo de trabalho dos designers gráficos em seus projetos de interfaces.

34A1381E-6DF2-4E85-9AE9-5C6F24028FF1

Na produção, o Sketch trabalha com ferramentas e recursos que faz que ele se torne mais eficiente no processo de criação. Mas o que o torna mais efetivo? Entre os recursos básicos em comum como qualquer outro software de edição de imagem / vetorial, o Sketch tem recursos inteligentes para se trabalhar e entre eles alguns são importantes citar:

– Precisão: O Sketch trabalha com vetor e sua precisão para posicionamento dos elementos é incrível, pois ele mantém a posição exata dos elementos quando são copiados e colados em outro Artboard. Também, o app é muito leve se comparado ao Photoshop e a organização dos grupos e layers se torna mais fácil.

0C6C4FAD-8B26-4F62-860D-19EEA2715BBB

– Criar símbolos: Criar símbolos no Sketch reduz o tempo de trabalho para se criar padrões como botões, cores, fontes e demais elementos da interface. É possível mudar um elemento para que ele se reflita em todo o projeto, tornando objetos reutilizáveis e de fácil edição.

556CDA33-D448-4246-912C-1029AA4B1101

– Exportação: O recurso de exportar assets é muito intuitivo e claro, pois não existe a necessidade de criar fatias para realizar esta tarefa. Também existe a possibilidade de exportar os assets em formatos próprios para telas de retina.

B078C15C-EFE8-4DFA-90D9-A10CD516ACB0

O Sketch integra com muitas ferramentas de trabalhos colaborativos e plugins. Dentre eles, o Marvel, Invision e UxPin que tem suporte para os arquivos do Sketch.

3 – Integrando o Sketch e o Zeplin.

O Zeplin é uma app feito para Mac e foi criado em Julho de 2014 em Istanbul por 4 profissionais e vem sendo utilizado para trabalhos colaborativos entre designers e desenvolvedores. Ele trabalha exclusivamente (até o momento) com o Sketch.

EB72C3B9-04CB-493E-B3AD-3306F27B51E4

O Zeplin extrai exatamente a posição dos elementos dentro do arquivo do Sketch e entrega esses dados de forma visual. Ele é gratuito para 1 projeto e tem sua versão para Mac e Web. Ele não exige conhecimento de linguagens de programação e um conhecimento mínimo já é o suficiente para utilizar o app.

FAD71914-9493-4984-A251-B57E84CD21FC

O que o desenvolvedor ganha com este app?

Ele tem documentado exatamente as propriedades do arquivo em formato CSS, também fontes e cores. É possível fazer o download dos assets direto do Zeplin. Ele elimina a necessidade de desenvolvedores abrirem o Photoshop para extrair assets de layouts de sites e interfaces de aplicativos, otimizando todo o processo e melhorando a fidelidade do trabalho do designer.

C213B70D-89FD-48B3-B8CE-F113ECA163DC

Recomendo para todos aqueles que trabalham com interfaces web e de aplicativos que possuem Mac a conhecer estes dois apps. Como ferramenta de trabalho, o processo é muito mais rápido e satisfatório para designers e desenvolvedores. Se você já utilizou ou utiliza, compartilhe sua experiência com a gente :)

Acesse para conhecer em Sketch e Zeplin.

Abraços e até a próxima!

Imagens: Sketch App, Zeplin App

Clique aqui para comentar ( )