Entregáveis de UI: Boas práticas durante a validação e desenvolvimento.

Durante o processo de concepção de um layout uma série de pessoas podem ser envolvidas, da validação ao desenvolvimento, e você deve se comunicar da melhor forma com cada uma delas. Há vários meios para isso e vou sugerir algumas entregas que considero otimizadas e profissionais.

Se você definiu o Look and feel da interface e de posse do wireframe desenhou as telas principais, talvez fique a pergunta: Mando imagens em alta para aprovação? Este é o meio mais fácil mas nem de longe é a melhor opção.

Aprovando com clientes, gerentes e equipe de negócios.

1 — Presentation

Apresentação em pdf, ppt, keynote ou similar. Esta é uma das opções mais seguras. Você pode fazer uma introdução, contextualizar, apresentar cada coisa na sequência que achar conveniente e adicionar um curto motion caso julgue necessário. Apresentações são recursos muito familiares a gestores e clientes, não tem erro.

2 — Aprovação em Cloud

Com o conceito de apps em nuvem, surge uma nova forma bem interessante para o momento de validação(com o time) e aprovação. Ferramentas como o Marvel e InvisionApp te permitem fazer o upload das telas em uma plataforma onde todos podem fazer comentários tela a tela e você pode reenviar layouts com ajustes que ficam versionados, permitindo visualizar a evolução da solução e buscar versões antigas no histórico de uma determinada tela.

InvisionApp in live

3 — Videos

Uma opção bem mais elabora, muito precisa e nem sempre prática são os vídeos. Você pode apresentar as telas na sequência correta, detalhar com informações textuais, auditivas e demonstrar interações complexas em movimento. É uma solução de alto impacto e alta fidelidade mas pode ser também morosa se você não for bom em construir narrativas e edição de vídeos. Esta também é muito aconselhável para pitchs, stands e eventos de modo geral.

Estas são as soluções ideais que sugiro para todos os projetos, mas tenho que confessar: Eu envio com alguma frequência imagens anexas em e-mail (quem nunca?), mas faço isto com o cuidado de numerá-las para que sejam apreciadas na sequência correta, faço indicativos da interação quando necessário e sempre envio textos detalhados. O mais importante a ressaltar é que guardo esta pratica para momentos de validação com pessoas bem contextualizadas ao projeto e que participam da gerencia do produto. Esta jamais deve ser uma prática adotada com clientes e stakeholders.

Muito bem, neste momento você provavelmente já aprovou com todos os responsáveis a linha criativa, o visual, a paleta de cores e etc… Agora vem o trabalho pesado, desenhar as demais telas, os casos de exceção e repassar tudo isso de forma incremental para os front-ends e desenvolvedores. E qual a melhor forma de fazer isso?

Entregando UI para o time de devs

Certamente enviar os arquivos abertos não é a solução. Isso não só exigirá do desenvolvedor um conhecimento técnico do programa gráfico que você utilizou como também abre margem para que seus arquivos sejam modificados por engano e deixa o trabalho de todos muito lento.

Vamos trabalhar com estas soluções:

1 — Recortes e assets

Você certamente terá que recortar algumas imagens para os desenvolvedores, mas estas imagens não serão a interface. Você deve enviar ícones em fundo transparente, fotografias e ilustrações nas dimensões corretas, todas devidamente otimizadas. Se você utiliza o Sketch, neste momento sua vida será mais fácil, basta cortar as slices e exportar todos de uma vez sem seus backgrounds. Um ponto importante aqui é a otimização, após exportar tudo você deve se certificar que suas imagens tem o menor tamanho possível (em bits).

2 — Otimização

Há uma série de soluções no mercado, mas o TinyPng, é o meu favorito. Ele limpa todos os meta-dados da imagem e comprimi PNG e JPG para o menor tamanho com uma qualidade muito boa! Se sua imagem ficar com pequenas estrias após a compressão, sugiro voltar ao original, enriquecer áreas de degrade com leves ruídos multicoloridos e tentar uma nova compressão.

3 — Especificações

Este é o entregável que garante que a equipe de programação desenvolverá telas com alta fidelidade ao layout. Da sua parte, é necessário enviar as especificações de cada pedacinho, px a px dp a dp. Mas isso pode ser facilitado e muito se você utilizar plugins como o Zeplin ou Avocode.

Interface de client do Zeplin

Neles, você faz o upload diretamente do programa de sua preferência (sketch para Zeplin e PSD para Avocode) e todas as dimensões, cores e fontes são detalhadas em um passe de mágica. Você nunca mais terá de reprovar uma tela ou componente desenvolvido por inconsistência em relação a layout.

4 — Quadro(ou Board) de Componentes

Quando você está em um grande projeto de app ou site, as telas não costumam dar aos desenvolvedores a noção de tudo que precisa ser programado. Nestes casos pode ser muito produtivo o desenho, em separado, de cada componente da interface com seus múltiplos estados. Se tudo estiver muito bem modularizado, a equipe de devs poderá desenvolver telas que você sequer desenhou, apenas combinando elementos que você já detalhou. Importante lembrar que este board não representa fluxos de interação e por isto não substitui o wireframe funcional.

5 — Paleta de cores

Uma paleta bem definida deixará tudo mais ágil no estágio de desenvolvimento, pois toda a equipe poderá saber com facilidade que cor serve para cada situação. Uma dica legal é dar nome as suas cores, assim você e os devs poderão se referenciar com um mesmo nome a todas elas.

6 — Style guide

O entregável mais completo de uma interface é sem dúvida o Style guide. É nele que você reúne família tipográfica, paletas, assets, iconografia, componentes, dimensões e tudo mais referente ao visual de uma interface. E é por ser tão completo que ele garante à interface a coerência indiferente do tamanho do time ou duração do projeto. Um bom style guide deve ser público e de fácil acesso.

Styleguide da Huge.inc.

Há muito material colaborativo para auxiliar a construir o seu style guide. Dentre eles, o meu favorito é este projeto da HUGE.inc. Com ele você pode gerenciar e publicar o style guide de uma interface web. Mas caso você esteja em um projeto de app, você também pode encontrar templates de sketch e photoshop para construir style guides.

Estes não são os únicos entregáveis de UI, e talvez não sejam os melhores para as suas necessidades, mas são os que adotei no meu dia a dia. Se você conhece opções melhores ou tem outras preferências, compartilhe com a gente: Poste nos comentários e auxilie a aprimorar as boas práticas em entregas de UI.