Um tutorial de fluxo de trabalho de design para desenvolvedores: entregue melhor UI/UX no prazo

Nota do editor: Lubos Volkov é um designer experiente que trabalhou remotamente com vários desenvolvedores ao longo de sua carreira. Como designer de produto da Toptal, Lubos interage diariamente com membros da equipe de vários departamentos, incluindo engenharia, comunidade e conteúdo. Ele é um designer talentoso cujas habilidades de comunicação contribuem para seu sucesso. Neste tutorial, Lubos compartilha suas experiências e maneiras de otimizar os fluxos de trabalho de UI e UX do designer-desenvolvedor que levam a produtos de qualidade entregues dentro ou antes do prazo.

Trabalhar com um grande designer ou equipe de design pode ser um trunfo inestimável para qualquer equipe. Com canais de comunicação claros e cooperação fluida, o projetista deve fornecer tudo o que você precisa para acelerar o processo de construção e limitar ao máximo as dúvidas e a confusão.

O que você, desenvolvedor de UX, pode fazer para garantir que o produto que você criou seja entregue em tempo hábil, sem sacrificar a qualidade da interface do usuário e a experiência do usuário?

Minha resposta: Envolva seus designers desde o primeiro dia e mantenha-os envolvidos durante todo o processo de desenvolvimento de UI/UX. Certifique-se de estabelecer linhas de comunicação claras e mensagens consistentes entre desenvolvedores e designers.

Você tem tudo o que precisa?

A pior coisa que pode acontecer durante a implementação de qualquer UI é a __falta de comunicação entre o designer e o desenvolvedor __(a menos que sejam a mesma pessoa). Alguns designers pensam que seu trabalho está feito quando o PSD é enviado. Mas, isso é simplesmente errado! Você deve criar um fluxo de trabalho de comunicação sempre ativo que dure além da entrega dos PSDs.

Em muitos casos, levará algum tempo até que os designers vejam a implementação real do design de UI/UX. Para sua surpresa, a compilação geralmente é completamente diferente da apresentação inicial. (Isso aconteceu comigo mais de uma vez. Enviei arquivos de origem com descrições completas e protótipos de interação, mas quando finalmente vi o projeto, meses depois, ele tinha um layout diferente, cores diferentes e nenhuma interação no local.)

Alguns designers podem me odiar por isso, pois esse fluxo de trabalho de design requer muito trabalho “extra” do lado deles. No entanto, criar e entregar ativos e informações completos, de forma organizada, é melhor para o projeto e para a equipe como um todo.

Se um desenvolvedor tiver tudo o que precisa à sua frente, isso acelerará o processo. Um PSD limpo não é suficiente.

O que você precisa para fazer o trabalho de forma eficaz e eficiente?

Estes são os ativos que um desenvolvedor deve esperar do designer para trazer um design de UI/UX para implementação:

• Arquivo de recursos - O designer deve colocar todos os elementos do aplicativo em um arquivo. Este arquivo deve conter botões, caixas de seleção, estilos de cabeçalho, fontes, cores, etc. Basicamente, com base nas informações contidas neste arquivo, o desenvolvedor deve ser capaz de recriar qualquer interface do zero. É muito mais fácil para um desenvolvedor exportar qualquer elemento de um único PSD do que pesquisar vários arquivos por ele.

• Ativos - Certifique-se de que os desenvolvedores obtenham todos os ativos necessários, pois os arquivos de origem não devem mais ser tocados.

• Protótipos de interação - Os dias de “telas estáticas” já se foram. Usar interações e animações inteligentes para suavizar o fluxo de trabalho e a implementação do design de UX é uma prática comum agora. Mas você não pode simplesmente dizer “isso vai deslizar da esquerda” para um desenvolvedor. O designer deve criar o protótipo real dessa interação. O protótipo deve incluir informações como velocidade, velocidade, etc., e espera-se que o projetista especifique cada um desses valores.

• Convenção de nomenclatura - Solicite uma estrutura de nomenclatura de arquivo para manter as coisas organizadas. Isso tornará mais fácil para ambos navegar pelos arquivos. (Ninguém gosta de ter coisas escondidas em uma pasta em segundo plano.)

• Recursos HDPI - Vivemos em “tempos difíceis”, com a enorme densidade das telas. Certifique-se de que o designer fornecerá imagens em todas as resoluções necessárias, para que seu aplicativo pareça nítido em todos os lugares. Nota: use o maior número possível de vetores; vai te ajudar muito (svg).

Se você encontrar algo mais faltando durante a implementação, não tenha medo; pingar o designer e pedir para ele. Nunca pule, e nunca economize! Vocês são membros da mesma equipe e seu trabalho é entregar o melhor produto possível. Se um designer falha, você falha também.

Trabalho em progresso

Utilize seus designers durante o processo de desenvolvimento de UI/UX. Não os mantenha à margem esperando que eles apenas “empurrem os pixels”. Um designer vê possíveis inovações antes mesmo do início da implementação. Para tirar proveito disso, mantenha-os informados. Forneça acesso para ver e testar o trabalho em andamento. Estou bem ciente de que ninguém gosta de compartilhar projetos inacabados. Mas, é muito mais fácil fazer alterações no meio de uma compilação do que no final. Isso pode economizar seu tempo e evitar trabalho desnecessário. Depois de dar ao designer a chance de testar o projeto, peça a ele para compilar uma lista de problemas e soluções e sugerir melhorias.

O que fazer quando um desenvolvedor tem uma ideia que mudaria a aparência de um aplicativo? Discuta isso com o designer e nunca permita que um desenvolvedor modifique o design sem consultar o designer. Esse fluxo de trabalho de design garantirá que a construção permaneça no caminho certo. Um grande designer tem uma razão para cada elemento na tela. Retirar uma única peça, sem entender por que ela está ali, pode arruinar a experiência do usuário do produto.

Gerenciamento de Projetos de Design de UI/UX

Os designers pensam que os desenvolvedores podem dar vida a um projeto em um dia ou até mesmo em uma hora. Mas, como um ótimo design, um ótimo desenvolvimento leva tempo e esforço. Mantenha seu designer ansioso à distância, deixando-o ver o progresso da construção. Usar um software de gerenciamento de projeto externo, para garantir que cada revisão seja contabilizada, é uma ótima maneira de garantir que você não perca informações importantes discutidas em uma conversa por e-mail ou em uma sessão do Skype. E sejamos honestos: às vezes, mudanças e atividades nem são comunicadas até que aconteçam.

Seja qual for a solução que você usar, certifique-se de escolher um processo de fluxo de trabalho que toda a equipe adotará e usará de forma consistente. Em nossa equipe, tentei empurrar o Basecamp porque era isso que eu estava usando, mas nossos desenvolvedores de front-end achavam que tinha recursos limitados. Eles já estavam usando outros softwares de gerenciamento de projetos para rastrear bugs, progresso, etc., como JIRA, GitHub e até Evernote. Eu entendi que o rastreamento e o gerenciamento de projetos devem ser mantidos o mais simples possível, então migrei meu fluxo de trabalho de design de interface do usuário para o JIRA. Eu queria ter certeza de que eles entendiam meu fluxo de trabalho e progresso, mas eu não queria que eles sentissem que o design era outra coisa para gerenciar.

Aqui estão algumas sugestões para uma ferramenta de gerenciamento de projetos:

• Basecamp - Acompanha o progresso das tarefas relacionadas ao design e desenvolvimento e permite exportar facilmente as tarefas. Ele também tem um cliente móvel simples.
• JIRA - Uma plataforma totalmente personalizável onde você pode configurar facilmente quadros personalizados para diferentes áreas. Por exemplo, organize quadros para acompanhar atividades como back-end, front-end, design, etc. Acho que o cliente mobile é um pouco fraco, mas é uma ótima solução para equipes maiores e inclui um recurso de rastreamento de bugs.
• E-mail - Isso é ótimo para configurar uma conversa ou enviar imagens. Mas tenha cuidado se você usar o e-mail para feedback. As coisas podem facilmente se perder.

Você também pode experimentar o Trello e outros softwares de gerenciamento de projetos, mas os mais usados ​​em nosso setor são o Basecamp e o JIRA. Novamente, o mais importante é encontrar um sistema de gerenciamento de projetos que todos possam usar de forma consistente, caso contrário, é um ponto discutível.

Design e desenvolvimento de UX se unem

O designer e o desenvolvedor são uma combinação poderosa. Certifique-se de fazer um brainstorming de UI e UX juntos o mais rápido possível. Os desenvolvedores devem estar dispostos a ajudar um designer a conceber ideias, enquanto um designer deve ter pelo menos um conhecimento básico da tecnologia que está sendo usada.

Descobrir o fluxo de trabalho de design juntos. Não implemente cegamente o que seus designers criam. Seja proativo e crie algo que pareça bonito e tenha uma ótima experiência do usuário, aproveitando suas duas perspectivas diferentes. Os designers pensam fora da caixa e veem animações, ideias, pixels e botões malucos, enquanto os desenvolvedores veem a tecnologia, lombadas e limites.

Na minha experiência, todo designer é louco por pixels e conceitos interessantes. Mas, às vezes, um designer chega a um ponto em que tem uma ideia, mas o desenvolvedor recua e diz: “Isso não vai funcionar bem depois de implementado. Haverá problemas de consumo de desempenho”. Recentemente, eu estava procurando implementar uma janela modal com um fundo desfocado, mas esse desfoque causou tempos de carregamento pesados. Para resolver esse problema, o desenvolvedor sugeriu o uso de uma sobreposição de cores regular, que carrega mais rápido e mantém a qualidade da imagem. Designers, prestem atenção: não comprometam a experiência do usuário pelo design.

Loop de feedback

O feedback do designer é crucial e deve acontecer com a maior frequência possível. É provavelmente a coisa que mais consome tempo (e energia) que você fará. Mas, você precisa adotá-lo para poder entregar resultados perfeitos. Aqui estão algumas dicas de trabalho de design de UX e UI sobre como tornar seu feedback perfeito.

• Seja visual - O feedback precisa ser o mais específico possível. A melhor maneira de torná-lo preciso é fazer uma captura de tela simples e destacar um problema que você deseja corrigir. Seria ainda melhor se você tivesse fotos de uma implementação atual versus como deveria ser . A comunicação visual eliminará 50% das perguntas.

• Seja descritivo - O feedback deve ser preciso. Você não pode simplesmente dizer “mova este botão para cima”. O designer deve especificar quantos pixels um botão deve mover, qual preenchimento deve ser usado etc. Sempre inclua uma explicação do problema e a solução apropriada para ele. Vai levar muito tempo, mas vale a pena.

• Seja paciente - Tenha em mente que o designer e os desenvolvedores não compartilham o mesmo foco. Se os desenvolvedores não entenderem completamente a ideia de um designer, isso pode levar a confusão e decisões erradas. Em todos os casos, ambos os lados precisam ser pacientes e dispostos a ajudar os outros membros da equipe. É realmente difícil às vezes, mas é uma habilidade suave que todo designer e desenvolvedor deve aprender.

É bastante óbvio que essas coisas precisam ser combinadas para transformá-las em um fluxo de trabalho de design adequado. Mas, qual ferramenta pode realmente ajudá-lo a fornecer o feedback?

• E- mail - Não tenho medo de dizer que esta ainda é a plataforma mais comum para entregar o feedback. É totalmente bom usá-lo, se você seguir algumas regras simples.
  • Primeiro, use um único tópico de e-mail para seus comentários. Não coloque todos os ajustes individuais em um novo e-mail com um assunto diferente.
  • Segundo, crie a lista de correções. Tente sentar e pensar em cada ajuste ou correção que você notou.
  • E por último, não envie uma lista enorme de uma só vez. Tente dividi-lo em listas individuais menores e vá por partes.

• Skype (Hangouts) - A voz é uma ferramenta realmente poderosa para o feedback. Você pode fazer e responder perguntas imediatamente. Mas, certifique-se de fazer anotações e enviar a mensagem de acompanhamento (e-mail) após a ligação.

• Ferramentas de colaboração - Para ser honesto, não sou um grande fã de ferramentas de colaboração. Mas, eles têm um grande benefício. Eles ajudam você a manter o feedback no lugar. Fazer e responder perguntas é rápido e fica lá para sempre.

Aqui estão algumas das ótimas ferramentas:

Anotação de comentários:

• https://redpen.io/
• http://collabshot.com/
• http://www.designdrop.io/

Ferramentas de colaboração:

• http://www.invisionapp.com/
• https://basecamp.com/

Conclusão

Estabeleça um fluxo de trabalho de design de sistema e UI/UX que mantenha as linhas de comunicação abertas durante todo o processo de design e desenvolvimento. Isso permitirá que você implemente grandes ideias, preveja problemas potenciais e priorize questões importantes.

O desenvolvedor e o designer podem criar grandes coisas juntos, desde que estejam dispostos a trabalhar em equipe . Aprendam uns com os outros e criem tutoriais como este!