Qual é a maneira correta de trabalhar com um designer gráfico? [fechadas]

Recentemente, trabalhamos com um designer gráfico (organizado pelo cliente) para fornecer a capa para um aplicativo Django + Bootstrap que construímos. O designer forneceu uma série de imagens estáticas do novo layout, juntamente com um documento descrevendo alguns atributos técnicos (tamanhos de fonte, cores, algumas dimensões etc.).

Acabou sendo incrivelmente demorado implementar isso. Embora o site inteiro fosse basicamente uma página inicial, uma página de índice e meia dúzia de páginas de detalhes, passei pelo menos 5 dias apenas implementando as alterações CSS e HTML. Então, eu vou sair em um galho e chamar isso de O Caminho Errado .

Minha abordagem básica foi:

1. Compare a imagem estática e a renderização atual e observe uma diferença.
2. Adivinhe qual mudança seria necessária no CSS / HTML
3. Faça essa mudança
4. Vá para o passo 1.

Alguns dos problemas específicos não foram eu entender que o design incluía uma alteração de 8 colunas para 12, algumas imagens fornecidas no formato errado (.png podem ser renderizadas de maneira diferente em diferentes combinações de navegador / plataforma), dificuldades ao tentar desfazer o estilo do Bootstrap, o lutas CSS comuns para obter uma renderização perfeita de pixels, etc. E, ocasionalmente, era necessário reorganizar os modelos HTML para obter um determinado comportamento.

Qual o caminho certo?

Na minha empresa, existem algumas pessoas especializadas neste trabalho.

Eles são designers. E eles sabem HTML. Eles podem ser uma ponte entre os projetistas e os engenheiros de front-end; o que eles geralmente são. Dessa forma, apenas precisamos integrar o HTML deles.

Este é um trabalho difícil. Há uma razão pela qual sites como "PSD para HTML em 24h" funcionam bem. A solução em nossa empresa é ter pessoas especializadas em fazer isso. Para nós, trabalhar com o HTML é fácil.

Não há bala de prata.

Não sei se existe um "caminho certo", mas uma maneira razoavelmente eficaz de cooperar com um designer é primeiro criar um sistema não estilizado que use modelos e permita o fácil intercâmbio de todos os modelos. Então, depois de ter uma interface funcional, mas sem estilo (ou com estilo minimalista), você entrega os resultados ao designer para estilizar.

Um exemplo decente desse tipo de padrão de design seria jQueryUI ( http://jqueryui.com/ )

Primeiro, devo admitir que nunca trabalhei com front-ends da Web até agora.

Mas acho que pode ser uma boa prática para você e o designer escrever uma prosa sobre como deve ser o design final. Dessa forma, você pode ter mais certeza de que é consistente, porque teria cheiro se você estivesse descrevendo tabelas diferentes para cada página. A prosa pode facilitar sua implementação, porque na verdade você está escrevendo um código, mais próximo da sua implementação do que imagens.

Tente também fazer o designer se concentrar nos componentes, não nas páginas inteiras. Se você acertar os componentes de uma página, compor a página inteira é uma etapa muito mais fácil.

Eu desenvolvi HTML / CSS com vários designers e, como já foi dito, não há "bala de prata". Os designers com quem trabalhei não sabiam muito (nada) sobre html / css. Alguns deles tinham alguma experiência em web design e devo dizer que, quando eles têm esse conhecimento, sempre acaba sendo mais fácil de desenvolver e "melhorar o site", especialmente quando está envolvida a capacidade de resposta de um UX.

Eu acho que o que algumas empresas que procuram um site não sabem / ignoram é: qualquer um pode dizer que ele é um designer gráfico / desenvolvedor de web / designer de web / designer de interface do usuário com conhecimentos básicos (ou mesmo nenhum, sim, eu já vi isso) em ambos. Enquanto os "reais" podem ir além e produzir sites eficientes e de manutenção. Eu tento "educar" o cliente e explicar que o Webdesign envolve habilidades que "apenas imprimem" os designers gráficos não possuem. Quando isso funciona, normalmente envio o cliente para designers com quem já trabalhei e com um fluxo de trabalho comum.

Dito isto, muitas vezes acontece por muitas razões que você acaba criando sites com pessoas que possuem habilidades gráficas e sem habilidades de web design. Nessa situação, a melhor maneira que encontrei para economizar tempo de codificação e não acabar com layouts inevitáveis ​​é se envolver no processo de design e se comunicar com o designer e explicar o que você pode / não pode fazer e o que seria mais simples / melhor do seu ponto de vista.

Embora isso possa ser difícil de organizar em algumas situações, é importante explicar ao cliente e ao designer que "se você pensa que o design da web é o maior objetivo de um projeto da web, acaba economizando tempo, dinheiro e idéias" e que estará feliz em participar do processo de projeto para economizar tempo e dinheiro.

Este é o worflow que tento seguir na maioria dos projetos:

1. O designer cria padrões gráficos se eles não existirem (geralmente não me envolvo aqui. Apenas tento sugerir ao designer fontes que sejam compatíveis com a web, por exemplo: google fonts)
2. Mokup feito pelo designer. Eu me envolvo aqui e trabalho com o designer para criar layouts compatíveis com a web (especialmente para os responsivos) antes que o cliente o veja .
3. cliente valida mokup
4. Eu codifico o mokup

O tempo gasto em comunicação e trabalho com o designer é economizado durante o processo de codificação e isso acaba com um código mais simples, mais sustentável e mais organizado.

Isso não poupa você de um designer feliz ligando para você na sexta-feira à noite com um mokup muito bonito que o cliente já viu e agora quer com esta frase: "Ei, cara, você poderia codificar isso para mim, o prazo é ... ontem! " Então toda a teoria se desfaz e, se você está procurando trabalho naquele momento, é bom ter uma cabeça durante todo o fim de semana.

Conclusão:

Eu não acho que isso seja muito diferente de qualquer código relacionado ao não projeto, a melhor maneira de trabalhar com outras pessoas é se comunicar com elas.

Como designer gráfico, que se tornou desenvolvedor web de pilha cheia, para mim essa foi a parte mais fácil. Acho que muitas vezes há uma lacuna de comunicação entre uma equipe de design de UX e os desenvolvedores que implementam o produto. Certamente, os documentos ajudam, mas o processo pode começar a parecer muito mais natural quando ocorrem conversas cara a cara sobre estratégia. Além disso, sei que o tempo é escasso para todos, mas tente se envolver durante a fase de design e layout. Isso pode ajudar tremendamente quando é necessária a comunicação entre um designer e desenvolvedor. O projeto assume mais um esforço unificado de equipe e menos um cenário de "Bem, eu acabei minha parte, além do limite". Eu achei muito benéfico ter o trabalho de design e desenvolvimento acontecendo paralelamente, incentive a equipe de design a fornecer wireframes no início do processo. Dessa forma, você pode fazer um passe de estilo que lide exclusivamente com layout e posicionamento. Então, à medida que os diáconos se tornam mais ricos e completos. Faça outro passe CSS para aparência e outros atributos de estilo. Pelo menos isso impede que você precise se concentrar em tudo de uma vez.

Estou enfrentando um problema semelhante. Eu tenho a idéia de que ferramentas como Greasemonkey ou Tampermonkey podem ser usadas para esse fim. Na semana passada, pedi comentários sobre essa ideia: como terceirizar a interface do usuário de um aplicativo da Web dinâmico? , mas não obteve respostas satisfatórias.

Com essas ferramentas, você pode injetar CSS, HTML e Javascript em uma página. Na minha ideia, você fornece a URL do site de trabalho ao designer e espera os scripts Greasemonkey em troca. Teoricamente, você deve poder integrá-los muito rapidamente ao site existente. Dessa forma, será tarefa do designer escrever o HTML e CSS e fazer o site realmente funcionar. Isso requer muito mais habilidades de programação do lado do designer.

Eu sei que essa ideia requer muita elaboração. Mas ainda não tentei e não sei se mais alguém está fazendo isso. Pode haver alguns problemas com a implementação.