Melhores softwares e práticas para desenvolvimento de produtos digitais

Este estudo não é o único, mas tenta ser o mais assertivo possível em processos e utilização de softwares, para que o caminho da ideação até o desenvolvimento do produto final seja tranquilo, aconteça sem surpresas desagradáveis e gastos desnecessários de tempo, dinheiro e energia.

Focado no desenvolvimento de interfaces e custando pouco, o Sketch possui uma interface limpa e amigável.

Features:

  • Existe a possibilidade de trabalhar com símbolos globais. Isso significa alterar apenas um único símbolo e a atualização de todas as vezes em que ele aparece será automática.
  • Também ficou muito mais fácil redimensionar símbolos e grupos para diferentes tamanhos de tela.
  • Facilidade para criar grids e visualizá-los. As réguas também são muito precisas, fáceis de usar e bastante flexíveis.
  • Não destrói os pixels durante o redimensionamento. No Sketch existem apenas pixels inteiramente preenchidos.
  • Por trabalhar com vetores, um dos grandes benefícios é o peso reduzido. Podemos ter vários artboards e páginas em um mesmo arquivo, que ainda assim o peso dele será de alguns poucos megas.

O software instalado ocupa apenas 41MB em disco, contra 1.6GB do Photoshop

  • A facilidade de exportar os assets é assombrosa. Bastam apenas dois cliques para que você tenha a imagem recortada e salva em PNG com fundo transparente.
  • Os assets podem ser exportados automaticamente com diferentes tamanhos e resoluções, para serem mais bem trabalhados em tela retina.
  • Infelizmente a Adobe não possui integração com o Sketch, por considerá-lo um concorrente direto do seu filho mais novo, o XD. Ou seja, arquivos de Sketch só podem ser editados por ele mesmo.
  • A parte boa é que diversos softwares de prototipação, como o Invision, o Principle e o Flinto, não querendo ficar pra trás na disputa pela atenção dos designers, criaram grande integração com o Sketch, bastando um único clique para exportar os layouts para qualquer um deles.
  • O Sketch ainda disponibiliza uma função para colaboração online, porém apenas para visualização, sem a possibilidade de edição ou comentários.
  • Como é um software específico para Mac, o espelho em dispositivos mobile funciona apenas na plataforma iOS. Como o sistema operacional Android é o mais utilizado em todo o mundo, resta a esperança de que essa funcionalidade seja democratizada em breve.

Após todas estas vantagens, pode surgir a dúvida de como fica o Photoshop nessa história toda. Por ser um excelente editor de fotos e ter sido apenas adaptado por todos estes anos para o desenvolvimento de interfaces, ele pode ser um complemento muito útil ao Sketch no tratamento de imagens.

De acordo com uma pesquisa de 2015, realizada pelo site Design Tools Survey, que contou com mais de 4 mil participantes de quase 200 países, o Sketch é o software mais usado para desenhar interfaces com 34% das respostas, seguido pelo Photoshop com 29%. Aliás, ele não só é o preferido para interfaces como também para a criação de wireframes.

Porém, através de uma rápida pesquisa feita com 14 designers e desenvolvedores, ficou claro que essa ainda não é a realidade brasileira. O Sketch está começando a ser mais utilizado, mas enfrenta algumas limitações de hardware já que boa parte dos profissionais utilizam Windows.


Protótipos

Nos dias atuais, existem infinitas ferramentas de prototipação e é quase impossível testar todas elas. A ideia de prototipação é ter uma versão do produto simulando o resultado final. Em se tratando de digital, o cenário ideal seria ter sempre o protótipo em HTML. Como nem sempre é possível por conta de inúmeras variáveis, que vão desde a impossibilidade de ter um desenvolvedor front end na equipe desde o início do projeto, até a falta de conhecimento em programação dos designers.

Gráfico: blog.prototypr.io
Foto: Invisionapp.com

O Invision tem se mostrado uma opção bastante popular pela facilidade de uso e pela possibilidade de optar pela versão freemium. Sua simulação gera um protótipo online e clicável, porém a navegação é feita entre telas.

Outra opção viável e bem utilizada, é o bom e velho Axure, que gera um protótipo navegável em HTML, mas que infelizmente não pode ser reaproveitado pelos desenvolvedores, que preferem começar do zero a ter que usar um código tão poluído.

Em grandes projetos geralmente as microinterações são esquecidas pelo caminho, embora sejam muitas vezes vitais para as funcionalidade que impactam na experiência do usuário. Justamente para que não fiquem de lado é importante que, assim como a navegação entre telas, também sejam prototipadas e documentadas.

Quando surge essa necessidade, softwares como o Principle ou o Flinto são bastante recomendados. A interface de ambos é muito parecida com a do Sketch o que facilita o uso. Os arquivos gerados não são clicáveis, mas sim vídeos com uma ordem de navegação pre-definida.

Vídeo: Principleformac.com
Vídeo: Flinto.com

Outros designers ainda utilizam o After Effects para fazerem suas simulações de microinterações. Não importa a forma como o protótipo é feito, desde que a ideia por trás do produto consiga ser transmitida claramente.


Desenvolvimento

Novamente, através da rápida pesquisa feita com designers e desenvolvedores, foi perceptível que a grande reclamação de ambos os lados é a falta de comunicação.

Designers reclamam que os desenvolvedores não obedecem o que foi estipulado no layout e os desenvolvedores muitas vezes têm que adivinhar como o arquivo PSD foi organizado pelo designer, quando existe alguma organização. A falta de habilidade em design ou programação e o desconhecimento em trabalhar com alguns softwares, ajudam a aumentar a distância entre as áreas.

Caso estes profissionais trabalhem à distância os problemas podem ser maiores ainda, pela impossibilidade ou falta de interesse de um suporte profissional de ambos os lados.

Zeplin, Avocode ou Sympli. Estes softwares foram criados com a intenção de fazer a ponte sobre o enorme vão que existia na comunicação entre as partes. Todos os três possuem total integração com o Sketch e disponibilizam plugins para facilitar a exportação de assets.

Vídeo: Zeplin.io

De novo, a interface deles é baseada na mesma interface limpa e amigável do Sketch. Possibilitam a visualização do código CSS dos elementos que foram trazidos do Sketch e geram um style-guide deixando a cargo do designer ou desenvolvedor decidir quais são os elementos chave que devem ser salvos para uso posterior.

Permitem também a inclusão de outros participantes no projeto, que além de visualizar as telas podem fazer comentários.

Ou seja, eles vieram para ser um denominador comum entre os profissionais, falando a linguagem de ambos e melhorando a comunicação, pois é feita em cima de um protótipo palpável.


Conclusão

  • O processo e utilização destes softwares ajudam a minimizar erros entre as equipes, pois facilita o entendimento das diferentes linguagens.
  • Pode haver um ganho de tempo por conta da melhor qualidade das entregas. O objetivo deste processo é que ele seja mais assertivo, evitando refações desnecessárias.
  • Consequentemente, por economizar tempo, economiza também gastos de dinheiro e energia dos envolvidos.
  • Maiores chances do produto final ser fiel à proposta inicial e ao protótipo.

Os profissionais envolvidos
Para otimizar o aprendizado, tanto designers quanto desenvolvedores devem conhecer todas as etapas da criação de um produto, desde a ideação até o monitoramento de performance e análise de KPIs. O foco deste estudo está apenas na fase de manufatura, pulando algumas etapas mais estratégicas.

E por fim, vale a pena dar uma olhada na pesquisa de tendências de design web que o software Avocode criou. Este estudo aponta um crescimento no uso do Sketch, traz algumas curiosidades bem interessantes e serve para comprovar muito do que foi dito neste texto.