Se você é um web designer que trabalha principalmente no front-end, pode haver momentos em que você precise entregar seu trabalho a um desenvolvedor. O trabalho deles é pegar sua maquete e transformá-la em um site funcional.
Este é um grande passo no processo. Para alcançar um resultado positivo, designers e desenvolvedores precisam estar na mesma página, por assim dizer. Mas isso é mais fácil dizer do que fazer.
Muitas vezes, certos aspectos de um design e layout podem se perder na tradução. Isso leva a algo que parece diferente no navegador do que no seu aplicativo de prototipagem . Mesmo diferenças sutis podem prejudicar a usabilidade geral e a estética.
E embora possa ser mais fácil culpar um desenvolvedor desonesto pela situação, nem sempre é tão simples. A comunicação é fundamental, assim como fornecer uma compreensão clara do próprio design.
Vamos explorar algumas ideias para tornar a transferência do designer para o desenvolvedor produtiva.
Forneça os detalhes do projeto
Negligenciar os detalhes está entre os problemas mais comuns no processo de criação de maquete. Itens como quais fontes são utilizadas, o espaçamento entre elementos e aprimoramentos de design (sombras, bordas, etc.) podem ser facilmente mal interpretados ou até mesmo perdidos.
Isso pode ser devido à falta de clareza. Sem instruções explícitas, um desenvolvedor pode ter que pesquisar em um protótipo para determinar como esses itens foram implementados. E nem todos terão tempo para fazê-lo.
Podemos supor que esses aspectos do nosso design serão óbvios – não são. Portanto, é importante documentar os vários elementos. Isso fornece um ponto de referência para os desenvolvedores enquanto eles trabalham na compilação.
Felizmente, muitos aplicativos oferecem guias de estilo que ajudarão a evitar qualquer confusão. No entanto, se você estiver projetando em um aplicativo como o Photoshop, pode ser necessário gerar essas informações por conta própria.
Mantenha o Mockup e os Ativos Organizados
Falando em Photoshop, você já abriu um arquivo PSD apenas para ver um grande número de camadas sem nome em uma ordem aparentemente aleatória? A capacidade de determinar o conteúdo de cada camada pode ser extremamente frustrante.
Isso não apenas desperdiça tempo, mas também é outra maneira de um desenvolvedor perder esses detalhes de design. Além disso, forçar um desenvolvedor a navegar em uma bagunça desorganizada não é uma ótima maneira de fazer amigos.
A organização de um mockup é a chave para uma entrega tranquila. Reserve algum tempo para rotular os vários elementos em seu trabalho e colocá-los em uma ordem lógica.
Quando se trata de ativos adicionais, como imagens e fontes, coloque-os em pastas. Também é útil nomear as imagens de uma maneira que reflita seu conteúdo e/ou uso.
Não se esqueça dos estilos responsivos
Quando se trata de como seu design ficará e funcionará em dispositivos móveis, é melhor não deixar as coisas ao acaso. Os estilos responsivos são tão importantes quanto o desktop.
Novamente, é aqui que a ajuda de um bom aplicativo de prototipagem pode ser inestimável. A capacidade de adicionar capacidade de resposta a uma maquete torna as coisas muito mais fáceis para um desenvolvedor colocar em ação.
Mesmo assim, alguns aspectos ainda podem se beneficiar de uma explicação extra. Por exemplo, como os layouts de várias colunas devem responder aos tablets em vez dos telefones? A tipografia vai mudar? Que tal navegação? Estas são todas as coisas importantes a considerar.
Inclua notas sobre dispositivos móveis em guias de estilo e documentação. Isso garantirá uma experiência de usuário consistente para todas as telas.
Seja um guia de turismo
Maquetes interativas e instruções escritas são ótimas. Mas ainda há algo a ser dito para conversar sobre os pontos mais delicados de um projeto.
Com a facilidade da videoconferência, um encontro virtual com um desenvolvedor deve estar na sua lista de tarefas. Isso permite que você atue como uma espécie de “guia turístico”, explicando todas as partes móveis do seu trabalho criativo.
Além disso, também é uma oportunidade de receber feedback valioso . Pode haver casos em que um desenvolvedor detecta um problema que pode afetar negativamente os usuários. É melhor descobrir isso agora, em vez de no meio da construção.
Os participantes também podem fazer perguntas uns aos outros e esclarecer possíveis mal-entendidos. O objetivo é que todos estejam em sincronia com o que está acontecendo. Gastar alguns minutos discutindo o projeto ajudará você a chegar lá.
Designers e desenvolvedores trabalhando em harmonia
No final, todos os envolvidos no design e desenvolvimento de um site têm o mesmo objetivo: um resultado de sucesso. Uma transferência perfeita do designer para o desenvolvedor desempenha um papel importante.
Para designers, é preciso um pouco de esforço extra para garantir o sucesso. Envolve fornecer uma maquete bem organizada e documentada. Isso inclui quaisquer detalhes sobre como o site deve funcionar em vários tamanhos de tela.
Finalmente, um esforço para se envolver com os colegas é vital. Passar tempo juntos (virtualmente ou pessoalmente) para discutir os detalhes deve ser uma prioridade.
É preciso prática para acertar as coisas. E há sempre a possibilidade de um erro. Mas, seguindo os passos acima, você colocará seus projetos no caminho mais direto para o sucesso.