Handoff: documentando a entrega do projeto

Introdução - Apresentação

Boas-vindas a mais um curso aqui da Alura. Meu nome é André Lisboa e eu sou professor de design digital aqui na plataforma. Eu tenho mais de 5 anos experiência nessa área e ao longo da minha trajetória eu já desenvolvi diversos sites e aplicativos. E esse é o vídeo que inaugura o nosso curso de Handoff em UX.

O que vamos trabalhar ao longo desse curso? Digamos que como profissionais de UI e de UX, geralmente trabalhamos em equipes multidisciplinares. Essas equipes podem nos ter como profissionais de UI, de UX, pode ter POs, pode ter também profissionais de desenvolvimento, diversos profissionais diferentes que atuam para conseguirmos construir produtos digitais.

E digamos que trabalhamos em uma empresa que fez essas telas. Eu fiz essas telas justamente apenas para esse curso, mas é uma simulação do que acontece geralmente nas empresas.

Digamos que fizemos todas as telas, elas são relativas a uma plataforma de um coletivo de skate e nelas você pode ver os vídeos desse coletivo, você pode ver artes, camisas, locais que esse coletivo frequenta, enfim, algumas informações relativas a isso. E digamos que agora essas telas já estão aprovadas e precisamos enviar para a equipe de desenvolvimento, a equipe de programação, para fazer com que isso ganhe vida. Como vamos fazer isso?

É o que vamos produzir ao longo do curso. Nós vamos usar essa tela do upload de vídeo como exemplo para entender como fazemos para enviar todas as informações para a equipe que vai trabalhar com o desenvolvimento.

Nós vamos destrinchar ao longo do curso todas as informações, começando pelos estilos locais, onde vamos sinalizar quais cores foram utilizadas na plataforma, quais são as propriedades dessas cores, também com os estilos de texto dizendo quais propriedades, quais os nomes dos estilos presentes e também dos componentes.

Temos, por exemplo, botões nessas interfaces e eles têm uma forma de ser construída que é exatamente dessa forma, então vamos indicar todas as informações para a pessoa que vai trabalhar com desenvolvimento. E não só mostrando os estilos de cor, componentes e fontes, mas também mostrando o fluxo e as informações relativas a tela específica que vamos utilizar.

Vamos pegar essa tela do upload do vídeo para usá-la como padrão e desenvolver uma metodologia de construção que pode ser aplicada para qualquer outra tela no futuro. Nós vamos informar os espaçamentos, os estilos, o funcionamento dessa tela, o fluxo navegável, a prototipação no final e também vamos separar todos os assets exportáveis para essa pessoa que vai trabalhar com o desenvolvimento.

Esse curso é voltado para você que já conhece as ferramentas do Figma, do Adobe XD ou do Sketch, já trabalha com a criação dos layouts digitais e agora quer conhecer um pouco mais sobre, entregáveis, como pegar tudo isso que você produziu enviar para uma equipe de desenvolvimento que vai dar prosseguimento a esse trabalho.

Espero que você tenha gostado de todo o conteúdo que foi preparado ao longo desse curso e eu te vejo no próximo vídeo onde vamos ver um pouco melhor qual é a ementa que está preparada para ele. Eu espero você lá e vai ser um vídeo bem legal.

Introdução - Overview

Agora que vimos um pouco e entendemos qual é o conteúdo que está preparado ao longo desse curso, vamos ver um pouco mais a fundo sobre a ementa dele.

Vamos primeiro falar na aula 1, que é a que estamos agora, temos a aula de introdução, que foi o vídeo anterior, e temos agora esse vídeo do Overview que estamos falando um pouco melhor sobre a ementa. No vídeo 1.3, 1.4 e 1.5 vamos entender um pouco sobre conteúdos teóricos a cerca do mundo dos handoffs. Então vamos começar falando sobre contexto, boas práticas e ferramentas.

Podemos ver que na aula de contexto vamos entender qual o contexto que nos encontramos como profissionais de UI, de UX, que trabalhamos em equipes multidisciplinares e que por isso temos que ter uma comunicação muito bem alinhada entre essas pessoas que trabalham conosco.

E muitas vezes essas pessoas são nós, como profissionais de design, e principalmente profissionais de desenvolvimento, que vão pegar esse produto, todo esse layout que vamos produzir e transformar em código. Então vamos entender um pouco sobre esse contexto e que muitas vezes pode acontecer esse problema.

Em que criamos o layout, o layout quando estamos trabalhando Figma, o layout tem uma cara e quando ele é implementado ele tem uma outra cara, totalmente diferente. Então esse é o contexto que nos encontramos, que muitas vezes acontece e que resolvemos com o handoff.

Então depois vamos entender um pouco sobre o handoff, quais são as principais causas desse problemas acontecer, vamos ver um pouco sobre os princípios para colaboração, a colaboração entre a pessoa que trabalha com design e a pessoa que trabalha com o desenvolvimento e vamos ver as melhores práticas para fazermos essa comunicação de uma forma eficiente.

Posteriormente, no vídeo seguinte, vamos ver um pouco sobre as melhores ferramentas, as ferramentas existentes no mercado, para fazermos esse handoff e conseguirmos ter um bom entregável para a equipe de desenvolvimento.

Então vamos continuar na aula 2, onde vamos de fato meter a mão na massa e vamos começar a produzir as coisas dentro do Figma. Vamos entender um pouco na aula 2.1 sobre a estrutura que vai guiar o nosso processo de construção ao longo do curso e depois vamos falar sobre as cores, tipografias, componentes e espaçamento dos componentes. Eu vou mostrar o que é isso.

Exatamente nessa página vamos pegar as telas que nós temos e vamos falar quais são as cores que estão sendo utilizadas, quais são as fontes que estão sendo utilizadas, quais são os componentes, um botão, em outro local temos um input de texto. Então são elementos que se repetem na interface e que vamos transformá-los em componentes e vamos destrinchar nessa ficha.

Dizendo nas cores, por exemplo, qual o nome da cor, qual saturação e qual sei código hexadecimal para todas as cores. Mesma coisa para os estilos de fonte, os estilos tipográficos e também para os componentes, então com os botões e não vamos ficar só nos botões, mas também nos inputs de textos e por fim o elemento da miniatura. E também temos a parte dos “Ver specs”, que vamos mostrar como construir cada um desses elementos, dizendo os espaçamentos, quais são as cores, quais são os estilos tipográficos, então vamos deixar tudo destrinchado nessa aula 2.

Então voltando para a nossa ementa, depois de construído isso nós vamos partir para a aula 3. Vamos pegar uma dessas telas e vamos utilizar como modelo para fazermos o curso. Então digamos que essa tela de fazer o upload de um vídeo foi aprovada e eu vou mandar para a equipe de desenvolvimento.

Então vamos usar essa metodologia dessa tela, mas que podemos replicar depois para as demais telas que formos enviar para a equipe de desenvolvimento. Então digamos que essa tela foi aprovada e temos que dizer que texto é esse, que componente é esse, que cor é essa. Então vamos começar a falar um pouco sobre esses fluxos, como chega nessa tela, como sai dela, vamos fazer tudo isso nessa aula 3.

Vamos começar falando dos espaçamentos, estilos e componentes da tela e o funcionamento, que vamos ver nos handoffs dos fluxos, vamos pegar essa tela e vamos dizer o texto, a cor, os espaçamentos e também vamos falar do funcionamento. Então ela tem uma cara inicial quando é carregada, toda vazia, tem uma carga intermediária quando ela está quase preenchida, uma outra cara intermediária que tem um texto no campo de erro, que não foi possível completar e um estado final, em que carregou o vídeo todo, está em 100% e eu já posso publicá-lo.

Na aula 4 vamos continuar fazendo essa metodologia para essa tela específica de upload de vídeo. Então vamos fazer os fluxos navegáveis, o protótipo e exportação de assets. E nessa aula específica vamos falar dos fluxos.

Como eu chego naquela tela? Então vamos dizer para na tela dos vídeos, clicar no botão de “Adicionar novo vídeo”, vai para outra tela, clica no botão “Selecionar arquivos” e você chega na tela.

E como sai dela? Clica no botão “Publicar vídeo”, ele vai carregar uma página, clica no botão “Voltar para a inicial” e volta para a tela inicial.

E além de fazer esse fluxo navegável, nós vamos fazer um protótipo, então vamos mostrar como é o funcionamento, dessa forma conseguimos simular o funcionamento dessa área. E por fim, na aula 4, vamos fazer a parte dos assets.

Então vamos pegar todos os elementos exportáveis, como imagens, e vamos deixá-los em uma área separada, que então a pessoa que trabalha com desenvolvimento pode ter acesso fácil a esses elementos, que fica bem mais explícito na área dos assets.

E por fim, na aula 5 vamos ver como fazemos para compartilhar esse arquivo que produzimos com outras pessoas, com a equipe de desenvolvimento, com o PO, que é o product owner, enfim, conseguimos compartilhar.

E no vídeo 5.2 e 5.3 vamos falar um pouco com o Mateus Marcos, que é um profissional de front end, que trabalha aqui na Alura também, e vamos fazer um bate bola com ele, vamos conversar para ver o que ele acha e se é útil no dia a dia dele. Então é uma troca bem legal para entendermos um pouco sobre a importância de tudo que estamos produzindo.

E por fim vamos fechar o curso, rever todos os conteúdos e entender qual o ganho desse curso para nós como profissionais de design de UX e de UI.

Espero então que você tenha gostado de todo esse conteúdo que foi preparado e no próximo vídeo vamos dar continuidade da nossa ementa e vamos ver a parte do contexto. Vai ser um vídeo bem legal e eu espero você lá.

Introdução - Contexto

A primeira coisa que vamos entender para começar o curso é sobre qual contexto que estamos trabalhando como profissionais de UI e UX.

Digamos que trabalhamos em uma empresa e essa empresa possui essa plataforma, esse site, onde é possível eu fazer upload de vídeos, ver os vídeos que eu fiz upload e ver vídeos de outros usuários. Para essa empresa existir, o que é necessário? Que existam profissionais diferentes. Um profissional de design que vai realizar os layouts, criar esses layouts, criar os fluxos navegáveis, definir escolhas visuais, qual tipografia, qual cor, tudo isso que vai ser utilizado.

Um profissional de UX, por exemplo, que vai realizar pesquisas com os usuários para entender quais são os problemas deles, profissionais de desenvolvimento que vão pegar esses layouts que foi construídos e transformá-los em algo palpável, em código, para ser utilizado de fato, profissionais de marketing que podem realizar ações de divulgação dessa plataforma.

Geralmente trabalhamos em equipes multidisciplinares, não trabalhamos sozinhos, principalmente como UX designer e o UI designer. Trabalhamos também com profissionais de QA, por exemplo, que testam a qualidade desse produtos, desenvolvedores para pegar esses layouts que produzimos e transformarem em código, product owners, enfim, diversos profissionais diferentes.

Mas na nossa atribuição diária, o que fazemos principalmente? Vamos pensar nesse exemplo que eu estou falando do site de vídeos. Por exemplo, fizemos pesquisas com usuários diferentes para entender quais eram os problemas deles e chegamos a solução pensando que uma plataforma de vídeo é a coisa perfeita para esse usuário, que vai resolver totalmente o problema que ele enfrenta no dia a dia.

E chegando nessa conclusão começamos a criar layouts e fluxos navegáveis diferentes para atender esse usuário, como seria a melhor distribuição dos elementos, qual fonte seria melhor, onde ficariam os cards, os botões, enfim, desenhamos todos esses fluxos e essa experiência. Fizemos teste de validação com esse usuário para ver se o que pensamos está fazendo sentido. No teste validação deu errado, refizemos o layout, testamos de novo, enfim. Depois de feito todo esse trabalho, agora terminamos nosso trabalho como designer e entregamos para a equipe de desenvolvimento, para produzir em cima do que desenhamos.

A equipe de desenvolvimento produz o site que desenvolvemos, o layout, e transforma em um código mesmo, em um produto palpável, e quando vamos ver na hora, desenhamos o layout de uma forma e o produto final está de outra forma. Por que isso aconteceu? Porque simplesmente falamos para a equipe de desenvolvimento se virar e não especificamos para eles como construir o que projetamos.

Isso é um problema muito recorrente e comum nas equipes multidisciplinares, que trabalham com essa passagem de conhecimento entre uma área e outra, que não seja implementado da mesma visão que foi pensado pela outra equipe.

Então nesse exemplo você pode ver que no layout da esquerda nós temos o layout, como foi pensado mesmo no Figma, no programa de criação de interfaces, e na direita como foi produzido no site, como está em produção. Você pode notar que há diferenças. Por exemplo, esse logo está em um tamanho diferente um do outro, a fonte está com tamanhos diferentes, no da direita a borda está reta e no da esquerda está arredondada, enfim.

Diversas diferenças que muitas vezes para olho não muito treinando pode achar que não é nada demais, mas tivemos muito trabalho, sabemos que é muito importante, teve o maior trabalho em falar com os usuários, desenhar as experiências, ver o que fazia maior sentido, para depois no final não ficar exatamente como projetamos.

E é claro que não ficou, porque não especificamos ficou nada e a equipe desenvolvimento tem outras preocupações que são de fato fazer esse produto funcionar. Muitas vezes passa batido mesmo esses pequenos detalhes. Como fazemos para resolver essa falha de comunicação entre essas duas equipes?

Então vai ser o tema que vamos ver ao longo desse curso todo, o handoff. O handoff é um termo em inglês que se refere a passagem de bastão. Quando existem aquelas corridas em equipe onde um corredor passa o bastão para o outro, é exatamente esse termo.

Nós, como designers, temos que pegar a nossa parte do trabalho e quando for passar para a próxima área, ter isso muito bem documentado, se comunicar constantemente com essa outra área, para dessa forma conseguirmos o melhor produto possível no final, a melhor experiência para esse usuário que estamos desenvolvendo essa nossa plataforma, esse nosso produto digital.

Então na próxima aula vamos ver sobre o handoff, quais são as melhores práticas para criarmos o melhor handoff possível, quais são os princípios e quais são as causas principais de ruído entre a comunicação do time de design e o time de desenvolvimento. E eu espero você lá.

Sobre o curso Handoff: documentando a entrega do projeto

O curso Handoff: documentando a entrega do projeto possui 172 minutos de vídeos, em um total de 45 atividades. Gostou? Conheça nossos outros cursos de UI Design em UX & Design, ou leia nossos artigos de UX & Design.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Introdução
• Elementos reutilizáveis
• Handoff de tela específica
• Finalizando o handoff da tela
• Compartilhamento e conclusão