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.
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.
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.
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.
