Qual é o jeito certo de trabalhar com um designer gráfico? [fechadas]

41

Recentemente, trabalhamos com um designer gráfico (organizado pelo cliente) para fornecer o skin 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 todo o site 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 de CSS e HTML. Então eu vou sair em um membro e chamar isso de The Wrong Way .

Minha abordagem básica foi:

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

Algumas das questões em particular eram eu não entender que o design incluía uma mudança de 8 colunas para 12, algumas imagens fornecidas no formato errado (os .pngs podem renderizar diferentemente em diferentes combinações de navegador / plataforma), aborrecimentos tentando desfazer o bootstrap estilo, o CSS comum de wrestling para conseguir renderização pixel perfeita etc. E ocasionalmente eu tive que reorganizar os templates HTML para obter um certo comportamento.

Qual é o caminho certo?

    
por Steve Bennett 29.05.2013 / 04:11
fonte

6 respostas

15

Na minha empresa, há algumas pessoas especializadas nesse trabalho.

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

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

Não há bala de prata.

    
por 29.05.2013 / 09:54
fonte
6

Não sei se existe um "caminho certo", mas uma maneira razoavelmente eficaz de cooperar com um designer é primeiro criar um sistema sem estilo 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 estilo minimalista), você entrega os resultados ao designer para estilo.

Um exemplo decente desse tipo de padrão de design seria jQueryUI ( link )

    
por 29.05.2013 / 07:51
fonte
3

Primeiro, tenho que 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 a prosa de como o design final deve ser. Dessa forma, você pode ter mais certeza de que é consistente, porque cheiraria se você estivesse descrevendo tabelas diferentes para cada página. A prosa pode facilitar sua implementação, porque você está realmente escrevendo código, o que está mais próximo de sua implementação do que de imagens.

Tente também fazer com que o designer se concentre em componentes, não em páginas inteiras. Se você obtiver os componentes de uma página corretamente, compor-los para a página inteira é um passo muito mais fácil.

    
por 29.05.2013 / 09:19
fonte
0

Eu tenho desenvolvido 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 webdesigning e devo dizer que quando eles têm esse conhecimento, ele sempre fica mais fácil de desenvolver e "melhor website" especialmente quando a capacidade de resposta de um UX está envolvida.

Eu acho que algumas empresas que procuram por um site não sabem / ignoram é: qualquer um pode dizer que ele é designer gráfico / webdevelopper / webdesigner / designer de interface do usuário com conhecimento básico (ou mesmo nenhum, sim eu vi isso) em ou. Considerando que os "reais" podem ir a milha extra e produzir sites eficazes e sustentáveis. Eu tento "educar" o cliente e explicar que o Webdesigning envolve habilidades que "imprimir apenas" designers gráficos não possuem. Quando isso funciona, normalmente envio o cliente para designers com quem já trabalhei e tenho um fluxo de trabalho comum.

Dito isto, muitas vezes acontece por muitas razões que você acaba construindo sites com pessoas que têm habilidades gráficas e sem habilidades de webdesigning. Nessa situação, a melhor maneira que encontrei de salvar o tempo de codificação e não acabar com layouts indesejáveis é estar envolvido no processo de design e se comunicar com o designer e explique 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 projetista que "se você acha que o webdesigning forma o bigining de um projeto da web, você acaba economizando tempo, dinheiro e headeachs" e que você ficará feliz em participar do processo de design para economizar dinheiro e assistência médica.

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

  1. O designer cria padrões gráficos se eles não existirem (eu normalmente não me envolvo aqui. Eu apenas tento sugerir ao designer para fontes compatíveis com a Web ex: 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. o cliente valida o mokup
  4. codifico o mokup

O tempo que passei comunicando e trabalhando com o designer é salvo durante o processo de codificação e isso acaba com um código mais simples, mais fácil de manter e mais nítido.

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

Conclusão:

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

    
por 08.10.2014 / 15:42
fonte
-1

Como designer gráfico virou desenvolvedor web full stack, para mim isso tem sido a parte mais fácil. Eu acho que muitas vezes há uma lacuna de comunicação entre uma equipe de design UX e os desenvolvedores que implementam o produto. Claro, os documentos ajudam, mas o processo pode começar a parecer muito mais natural depois de algumas conversas presenciais sobre a 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 a comunicação é necessária entre um designer e um desenvolvedor. O projeto assume mais um esforço de equipe unificado e menos de um cenário "Bem, eu já fiz minha parte, por cima do muro". Eu achei muito benéfico ter o trabalho de design e desenvolvimento acontecendo em paralelo, encorajar a equipe de projeto a fornecer wireframes no início do processo. Dessa forma, você pode fazer um passe de estilo que lida apenas com layout e posicionamento. Então, conforme os sinais se tornam mais ricos e completos. Tome outro passe CSS para aparência e outros atributos de estilo. Pelo menos isso evita que você tenha que se concentrar em tudo de uma vez.

    
por 17.08.2015 / 13:41
fonte
-2

Estou enfrentando um problema semelhante. Eu tenho a idéia de que ferramentas como Greasemonkey ou Tampermonkey podem ser usadas para esse propósito. 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 inserir CSS, HTML e Javascript em uma página. Na minha ideia, você dá o URL do site de trabalho para o designer e espera que os scripts do Greasemonkey sejam retornados. Teoricamente, você deve ser capaz de integrá-los rapidamente ao site existente. Desta forma, será trabalho do designer escrever o HTML e CSS e fazer o site realmente funcionar. Isso requer muito mais habilidades de programação no lado do designer.

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

    
por 29.05.2013 / 05:44
fonte