Do design para a programação: dicas para evitar retrabalho

Do design para a programação: dicas para evitar retrabalho

Mas não está layoutado assim! E esse espaçamento aqui? Cadê a fonte? Esses questionamentos são bem comuns quando um projeto passa do design para a programação. É na busca pela harmonia na relação entre designer e front-end que essa publicação existe. Confira algumas dicas para evitar o retrabalho nesta transição dos projetos web.

1 – Entenda o seu modelo de trabalho

Aqui eu já falei do tipo de projeto em cascata e a diferença para os modelos ágeis. Vale a pena lembrar disso na hora de se relacionar com a próxima área. A grande diferença está na ordem dos fatores:

  • Nos métodos tradicionais, o designer termina o seu trabalho, documenta (ou não) e passa para o front-end e depois para o back.
  • Nos métodos ágeis, o desafio é entregar a solução mais rápido e funcional. E aí, todo mundo trabalha junto num grupo pequeno para resolver o protótipo. Nesse caso, a comunicação é mais próxima, mais falada e a documentação vem pro final. Veja esse exemplo da Work & Co, liderada pelo brasileiro Felipe Memória.

2 – Arquivos editáveis

Se você é designer e quer evitar retrabalho no front-end fuja do PNG ou do JPG. Pode parecer óbvio pra você, mas o arquivo editável (.psd) é fundamental para identificação das cores reais, fontes, espaçamentos e todos os detalhes que caracterizam o projeto.

3 – Documentação do design para a programação

A depender do seu modelo de trabalho, a documentação pode ser menos ou mais valorizada. Eu defendo a documentação no wireframe e o no layout como roteiro para apoiar os desenvolvedores. No layout, ela me parece fundamental para prever as ações e reações esperadas (a clicar, hover, arrastar, pesquisar, submit e clicado) e apontar caminhos para a construção do CSS. Nesta publicação, em que falamos sobre ferramentas para wireframe, você pode utilizar aquelas que possuem o recurso de documentação ou garantir um pdf para estes comentários. Para o layout, a documentação cabe como exemplos no próprio editável (.psd, sketch) ou em ferramentas de apresentação que mencionamos nesta publicação.

4 – Comunicação

Na transição do layout para a programação, precisamos lembrar que estamos falando com dois universos. O visual precisa se comunicar como o código. Muitas vezes o texto da documentação não é suficiente e é a proximidade física ou por canais de comunicação que resolvem o problema. Sou da opinião de usar a documentação e marcar reunião para esclarecer as dúvidas que restam, já que as agendas são muito disputadas durante a jornada de trabalho.

5 – Bootstrap

Esse aqui é o recurso amado por designers e programadores porque evita muitas discussões na hora de construir o front. Trata-se de um framework, desenvolvido pelo time do Twitter, que otimiza o desenvolvimento de plataformas já focadas nas telas responsivas. Com ele, o caminho para construção do CSS, Html e Javascript fica bem menor e inteligente. No site do bootstrap você encontra vários exemplos para copiar e colar no seu html. Menu, formulários, heading tags, breadcrumbs estão lá prontos para reduzir o tempo dedicado ao mão na massa.

Quer entender melhor? Dá uma olhada nesse vídeo do TekZoom:

6 – Validação

Depois que o front trabalhou na construção do trio (JS, CSS e Html) vale sempre a pena abrir espaço para validação. Esse encontro pode acontecer já na fase do backend para apontar aquelas delicadezas que o olhar do designer é ninja de identificar. Espaçamento, alinhamento, font original, recortes e todos os detalhes que garantem a personalidade do projeto. Juntos fica tudo lindo!

Gostou?

Deixe sua dúvida ou comentário para que as publicações fiquem melhores.

Deixe uma resposta