Iniciando em UI Design: dicas de como enviar seu projeto para desenvolvimento.
Minha primeira entrega como ui designer não foi a melhor de todas. Geralmente nossos primeiros trabalhos não costumam ser o melhor de todos, algo normal em diversas profissões e no design não é diferente.
Mesmo tendo o apoio de um time de peso com profissionais experientes, é normal bater uma certa insegurança e isso, aliado ao medo de fazer algo errado, pode impactar na sua tarefa.
Por isso, resolvi elencar alguns anos de aprendizados, erros e acertos e transforma-los em dicas simples que me ajudaram a entender melhor todo o processo de criação e desenvolvimento de interfaces.
DESENHAR TELAS BONITAS NÃO BASTA
O processo de criar uma nova interface é animador, ver o resultado de toda a pesquisa tomando forma traz uma sensação de orgulho, afinal, é o resultado do seu trabalho de pesquisa, testes e validações.
Essa é a parte principal do trabalho, mas devemos lembrar que a documentação de tudo o que foi criado até aqui faz parte do processo de UX/UI e pode ser interpretado facilmente por um designer, mas se não houver uma documentação específica para o desenvolvedor, o profissional que dá “vida” ao que foi “desenhado” pelo designer o resultado final pode ser prejudicado. Assim começa o trabalho de documentação, não basta desenhar, tem que explicar.
“Existem dev’s que tem conhecimento das metodologias de design e podem facilmente entender todo o processo, este texto não é direcionado para este tipo de profissional”
Para o desenvolvedor é necessária uma documentação separada para que ele entenda todas as nuances da sua interface. Telas estatísticas as vezes não são suficientes para demonstrar, por exemplo, micro-interações ou ainda o comportamento de carregamento de determinado componente.
Por isso, sua documentação para o desenvolvedor deve ser detalhada, mas nem tanto. Cada time tem seu modo de trabalhar, e as dicas abaixo foram aprendizados que surgiram da experiência com times multidisciplinares de desenvolvimento.
Antes de tudo, alinhe com o desenvolvedor.
“Falhe cedo para custar pouco”
Antes de fazer sua documentação ou enviar suas interface para o desenvolvimento, alinhe com o desenvolvedor alguns pontos. 15 minutos de reunião podem evitar o retrabalho de um dia inteiro. Falhe cedo para custar pouco, encontrar erros com o projeto em desenvolvimento custa tempo e, as vezes muito dinheiro.
Em muitos times o P.O (product owner) gerencia as demandas do time e em alguns casos, pode simplesmente abrir uma tarefa (task) no board do time e pronto, o desenvolvedor tem que se virar para entender e isso não será bom para o projeto.
Ao alinhar alguns pontos como tamanho das telas, cores e comportamentos, ele pode apontar que não pode ser feito ou sugerir melhorias do ponto de vista técnico que ajudam na experiência ou economizam tempo em determinada tarefa.
1. Crie um canal direto com o time de desenvolvimento
Indo pela mesma linha da dica anterior, essa dica é de suma importância. Muitos desenvolvedores trabalham em um ritmo de cobrança altíssimo e se não seguirem os ritos do desenvolvimento ágil, isso pode piorar.
O canal direto de comunicação serve para sanar dúvidas pontuais de forma rápida e objetiva sem fazer o desenvolvedor parar muito tempo o que pode criar um impedimento no projeto; impedimento é palavra proibida em muito times.
Entre esperar o P.O tirar a dúvida com o designer esperando uma resposta e tomar a decisão, o desenvolvedor certamente vai fazer o que ele julga ser o certo, o que, na maioria das vezes não é o que vc desenhou fazendo com que retrabalho seja frequente baixando a moral do time.
2. Explique o contexto do projeto
Em algumas vezes o projeto é novo para o desenvolvedor e ele não entende o contexto das telas ou escolhas visuais feitas pelo time de design.
Lembre-se, a interface é uma conversa entre usuário e sistema uma cor específica pode ser escolhida para facilitar a leitura de pessoas com deficiência por exemplo. Isto tem que ser documentado ou explicado para o desenvolvedor pois a não adoção da cor desenhada ou não seguir um padrão certamente irá gerar retrabalho para o desenvolvimento. Em muitos casos o processo de subida do código passa por aprovadores e é um processo que além de demorado, gera resistência em alguns profissionais.
3. Desenhe as telas para os dispositivos que serão utilizados.
Desenhar a tela para o dispositivo mais utilizado pelo usuário é uma tarefa animadora, desenhar e ver sua ideia crescer é animador mas pode ser um processo complexo.
Com a quantidade de dispositivos existentes e a facilidade de obtê-los, precisamos assegurar que a experiência seja padronizada em todos os dispositivos. Desde a smart tv até o smart watch e necessário que o desenvolvedor consiga dar vida a sua interface e para isso, ele precisa de um ponto de partida e este ponto será seu protótipo que irá guiá-lo até o fim do desenvolvimento.
Então sempre entregue uma documentação completa com todas as variações de tela e interações necessárias para que o usuário consiga realizar suas tarefas.
4. Documente de maneira visual e textual
Existem diversas formas de fazer uma documentação para o desenvolvimento e diversas ferramentas podem auxiliar no processo.
O Figma e o Adobe XD por exemplo, são ferramentas de apoio ao designer e além de entregarem o protótipo, oferecem o downloads dos assets da sua interface (ícones, fontes, botões imagens e etc.) o que é de suma importância para a o correto desenvolvimento.
Outra ferramenta formidável é o Zeplin, uma ferramenta colaborativa que oferece um espaço de colaboração que ajuda me muito a comunicação entre os times de desenvolvimento e design.
4. Seja chato, mas nem tanto
Ao enviar seu design para um desenvolvedor inexperiente ou que ainda não esteja ambientado com o seu design system, podem ser necessários ajustes pontuais que aparentemente possam passar despercebidos para quem está desenvolvendo sua interface. Nosso cérebro se acostuma e se vicia e erros podem não ser visualizados tão facilmente.
Nosso trabalho como defensores dos usuários é garantir uma boa experiência. Garantir uma boa experiência significa assegurar que, é o que será entregue é exatamente o que foi enviado. Por isso, você deve ser “chato” com detalhes e garantir que aqueles componentes estão no lugar correto.
Vale lembrar que ser chato não é ser mandão ou o dono da verdade — sempre deixe claro o objetivo e o motivo de determinados elementos estarem posicionados em determinado local da sua interface. Lembre-se, nunca colocamos nada na interface sem ter um motivo ou objetivo claro, seja chato com a fidelidade do layout apresentado mas ouça o que o desenvolvedor tem a dizer. Uma segunda opinião sempre é bem vinda, se não se enquadrar no seu objetivo, basta explicar o motivo e continuar.
5. Tenha uma design system consistente
É de conhecimento comum que nem todas as empresas tem um design system estruturado, sejam elas grandes ou pequenas, muitas sofrem deste problema. Na atual empresa onde trabalho, um design system estruturado só surgiu há 3 anos, algo muito recente mesmo se tratando de tecnologia.
A empresa tendo um design system ou não, é interessante que o seu projeto tenha algo parecido com um, mesmo que básico. Ele pode ser baseado em design atômico e vai ajudar na sua padronização e ser um excelente ponto de partida para novos projetos.
Ele deve fazer parte da sua documentação estabelecendo ao menos alguns elementos. na minha concepção os que mais podem causar problemas são: definição das cores padrão de botões, cores primárias e secundárias, tamanho de fontes e estilo. Podem parecer elementos simples, mas pela quantidade de repetições, são os que mais me causaram problemas. Se você for o desenvolvedor, sempre use variáveis no front.
6. Se puder, deixe tudo na nuvem
Com a pandemia e o distanciamento, a quantidade de alinhamentos online aumentou consideravelmente e com eles a quantidade de projetos.
Neste cenário tão dinâmico de mudanças rápidas mandar arquivos por e-mail não é mais tão viável pois novas versões dos seus arquivos podem surgir rapidamente e se perder na thread de emails por isso, organize seus arquivos em um servidor de nuvem acessível de um modo que seus arquivos atualizados sempre estejam disponíveis.
Além de ser mais organizado, este modelo de organização ajuda na gestão e controle de links pois com apenas um clique você retirar o acesso de determinado arquivo a determinado grupo ou pessoa.
CONCLUSÃO
No começo da sua jornada com UX/UI designer você terá muitos aprendizados diariamente. Estas dicas são algumas delas, lembre-se sempre que não existe processo ou ferramenta melhor, algumas se destacam entre outras mas o importante é que você crie seu processo e que ele faça sentido para você te dando confiança no fluxo diário de trabalho.\
Espero ter ajudado ;)
