Ei designers, você está enlouquecendo seus colegas desenvolvedores?
É provável que você tenha alguns hábitos que não se adaptam muito bem ao código, e isso dificulta a vida do desenvolvedor que trabalha com você em projetos. Quer ser um melhor colega de trabalho (e amigo)?
Aprenda a se comunicar e projetar melhor para que os desenvolvedores gostem de você. Isso acelerará os projetos e facilitará a vida no trabalho. E não é uma questão de trazer doces para as reuniões também. Você pode fazer os desenvolvedores amarem você, fazendo pequenas mudanças na maneira como você trabalha.
O maior problema entre designers e desenvolvedores é que eles costumam trabalhar em bolhas. Os indivíduos ou equipes não começam a falar sobre um projeto até que o primeiro rascunho do projeto seja concluído. Depois, há uma transferência do designer para o desenvolvedor.
Suspiro.
Esse não é o jeito de trabalhar. Designers e desenvolvedores devem se envolver desde o início para falar sobre como um projeto se unirá. Enquanto o designer pode se concentrar em cores e tipos e imagens, o desenvolvedor pode fornecer informações sobre usabilidade, função e desempenho.
Designers e desenvolvedores devem ter uma boa ideia de como é o outro lado. Os designers devem entender código e usabilidade suficientes para falar com os desenvolvedores e entender os desafios; os desenvolvedores devem ter um pouco de conhecimento da teoria do design para que possam fazer sugestões quando as ideias de design não forem adequadas para a web.
Uma das maiores coisas que um designer pode fazer é preparar e empacotar arquivos da mesma maneira todas as vezes.
Quantas vezes você abriu um documento do Photoshop com centenas de camadas sem nome? Não dê esse tipo de arquivo para um desenvolvedor. Cada camada e estilo - independentemente de qual software você usa - deve ser nomeado apropriadamente.
Quantas vezes você abriu um documento do Photoshop com centenas de camadas sem nome?
Estilos, amostras de cores e tipografia devem ser consistentes em todo o design. (Um botão não deve ser diferente de uma página para outra.)
Nomeie os arquivos e estilos da mesma maneira para cada projeto. Agrupe elementos semelhantes de maneira semelhante e use um sistema de pastas consistente. Dessa forma, o desenvolvedor não precisa reaprender como localizar peças e elementos a cada novo projeto.
Um dos maiores desafios para projetos de design que incluem peças impressas e digitais é o gerenciamento de tipografia. Não use fontes da área de trabalho para projetos de impressão para projetos da Web ou de aplicativos e apenas assuma que eles funcionarão. (Muitas vezes eles não.)
Para projetos digitais, opte por Google Fonts para tipografia. Isso significa que você pode ter que encontrar um tipo de letra semelhante para a web para combinar com o que você está usando para impressão. (Isso está ok.)
Não faça o desenvolvedor fazer isso por você. Escolha as fontes do Google e use-as desde o início. Você pode até mesmo observar tipos de letra impressos ou digitais em seu guia de estilo.
A razão por trás disso é simples: a incorporação de fontes pode ser um pouco complicada. Além disso, as Fontes do Google são gratuitas e garantem que você não incorra em custos adicionais do projeto. (Enquanto você está nisso, considere fazer a mesma coisa com ícones e usar um pacote como o Font Awesome, que permite ao desenvolvedor estilizar ícones usando CSS, não importar um monte de arquivos de imagem!)
Enquanto estamos no tópico de ativos de imagem, exportar e empacotar arquivos adequadamente é super importante. Enquanto um desenvolvedor pode abrir e exportar todos os arquivos de imagem para atender às suas necessidades, você pode perguntar o que eles precisam e fazer ao longo do caminho.
Isso garante que você obtenha as colheitas desejadas nas imagens, enquanto compacta os arquivos para ajudar seu site a carregar rapidamente.
Não tente fazer isso sozinho. Pergunte ao desenvolvedor como os arquivos devem ser salvos, nomeados e compactados para melhor uso.
Há tantos tamanhos de dispositivos e proporções a serem considerados ao projetar websites e aplicativos móveis. Como designer, você precisa saber o tamanho da tela, as margens, o preenchimento, etc. para criar um modelo que seja realmente utilizável.
Fale com o desenvolvedor antes de começar a desenhar para garantir que você saiba como é o ambiente de design antes de começar. Não há nada pior do que um design que pareça incrível no Photoshop ou no Sketch e que fique sem produção.
Você precisa saber essas coisas antecipadamente:
Já foi mencionado algumas vezes, mas a comunicação entre o designer e o desenvolvedor é realmente a chave para fazer todo esse trabalho. A comunicação pode fazer ou quebrar projetos, prazos de impacto e influenciar o design e a funcionalidade do projeto final.
A comunicação pode fazer ou quebrar projetos
Leve seu desenvolvedor para almoçar. Conheça eles. Faça muitas perguntas pelo caminho. Se você não tem certeza se algo vai funcionar ou não, basta perguntar. Os desenvolvedores não são pessoas assustadoras e é muito mais fácil responder a uma pergunta no início do processo do que ter que repensar e todo o conceito.
Enquanto você conversa com o desenvolvedor e faz perguntas, aprofunde-se. Aprenda alguns conceitos básicos de desenvolvimento se você ainda não tiver essas habilidades no seu arsenal de design.
Os designers que trabalham em projetos digitais devem se mostrar em:
Você pode nunca escrever código, mas os princípios de desenvolvimento de aprendizado farão de você um designer melhor porque você entenderá o valor das ferramentas e dos fluxos de trabalho.
O processo de design também se estende ao desenvolvimento. Designers, você precisa reconhecer que o desenvolvedor é tão vital para o processo de design quanto você.
Com isso em mente, crie um guia de estilo “vivo” que inclua não só cores e fontes, mas também componentes. Todos devem poder acessar e atualizar o documento à medida que o projeto ganha vida.
Um bom guia de estilo ajudará todos os que trabalham em um projeto a manter consistência com elementos visuais, fornecer contexto para escolhas de design, servir como ponto de colaboração para o projeto e ajudar a padronizar o código. O guia de estilo de vida permite que todos compartilhem idéias e forneçam orientação durante todo o projeto. Não é apenas um documento que alguém cria antes de um projeto entrar em produção.
Coloque as seguintes informações no guia de estilo para aproveitar ao máximo:
Respeite a grade. No design responsivo do site, a grade é mais do que apenas uma diretriz para a colocação de elementos na tela, ela também pode ditar onde os elementos vão em diferentes tamanhos de tela e como as colunas se empilham e se misturam.
A grade pode ajudá-lo a projetar e manter o fluxo. (O desafio é que você não pode quebrar arbitrariamente regras de design.)
Pense nisso da seguinte maneira: seu design tem quatro blocos de conteúdo alinhados em toda a linha (com larguras de medianiz) em um monitor de tela inteira. Em seguida, em um tablet, esses blocos se deslocam para formar duas colunas, com duas linhas. Em um dispositivo móvel, eles mudam para formar uma única coluna com quatro linhas.
Entender como a grade impacta o tamanho dos objetos e como os objetos se deslocarão em dispositivos diferentes é importante porque pode ditar como você projeta para o conteúdo que você tem. Pense no mesmo cenário novamente. E se você tivesse cinco blocos de conteúdo? Isso exigiria um novo design para garantir que você crie um contorno visual consistente.
A chave real para garantir que os projetos se juntem com facilidade é ser flexível. Técnicas de design e padrões para a web mudam o tempo todo. Enquanto alguns projetos permitem que você seja um defensor de detalhes e um design dinâmico, o design responsivo não funciona dessa maneira.
A regra de ouro quando se trata de trabalhar com desenvolvedores é ... não seja um idiota.
Designers que são fáceis de trabalhar ganham mais respeito e melhor relacionamento com os desenvolvedores. Isso levará a projetos melhores e mais bem-sucedidos. Deve ser óbvio, mas muitas vezes há muito comportamento idiota por aí. Não caia nessa armadilha.
Seja flexível, abra e converse com o seu desenvolvedor. Eles vão te amar por isso.