Quais materiais um web designer que usa o Photoshop envia para um desenvolvedor?

Tenho implementado principalmente aplicativos da Web e de desktop e é a primeira vez que comecei a trabalhar com um designer gráfico em um site de uso público. Nesse caso, o designer gráfico não está fazendo HTML + CSS, mas usando o Photoshop.

Que tipo de material é normalmente fornecido como resultado final para que o design seja realmente implementado?

Por exemplo, devo obter algo mais do que apenas arquivos PSD? E quanto a diferentes estados (como foco do link, estado ativo etc.) ou design responsivo? Estou esperando detalhes técnicos demais?

Qualquer ajuda apreciada.

Uma maquete geralmente é entregue para o desenvolvedor saber o que fazer. Isso pode variar de arquivo PSD para apenas uma imagem plana, dependendo do fluxo de trabalho. Na minha experiência, entregar maquete plana com todas as dimensões, tamanhos de fonte e cores usadas, além de todo o conjunto de fatias e imagens usadas. Basicamente, tudo o que é necessário para concluir o projeto. Mas isso realmente depende do fluxo de trabalho. Se o site for feito principalmente em CSS, outras informações serão necessárias (valores de gradiente, valores de sombra projetada, predefinições de corte de imagem).

Os estados dos botões devem sempre estar cobertos. Dependendo de como elas serão feitas (puramente CSS ou fatias), você deve fornecer todas as cores, raios e tamanhos ou as próprias fatias.

O design responsivo é um pouco diferente. Projetar a visualização é apenas o começo. O que o desenvolvedor precisa saber também é como os elementos devem se comportar quando o site é gradualmente "reduzido". Como um menu se comportará se menos opções forem exibidas? O que é apenas um elemento de lista na visualização completa da Web pode alterar drasticamente a tela na visualização móvel. O que acontece com todos os elementos flutuantes (não é possível usá-los no modo de exibição móvel)?

A resposta do @ KMSTR é a solução de 80%, mas se o seu designer for um profissional de verdade, ele será específico sobre pequenos detalhes, como quando as animações de transição devem ocorrer ou qual ordem os elementos DOM devem carregar.

Se o seu designer estiver nesses 20% superiores, peça alguns fluxos de usuário e wireframes de UX ou, se eles são especialmente talentosos, um protótipo feito no After Effects ou no Flash. Idealmente, eles não deixam nenhum aspecto não especificado.

Tudo depende do que você concordou com o designer gráfico.

Alguns designers gráficos não sabem nada além do PhotoShop e serão perdidos se você pedir algo diferente de um arquivo PSD grande.

Alguns designers gráficos são versados ​​em HTML, CSS e JS e podem criar tudo para você.

E então há tudo no meio.

Eu recomendo que você se incline para o último, pois um web designer que entende o meio produzirá projetos muito mais avançados, responsivos, independentes do navegador e flexíveis do que o anterior, mas o primeiro pode funcionar desde que o desenvolvedor da interface do usuário está trabalhando em estreita colaboração com o designer da interface do usuário.

Você deve indicar o que é esperado antecipadamente.

Sou totalmente capaz de fornecer arquivos psd, páginas html / css ou até páginas jquery / php / mysql totalmente dinâmicas. O que é entregue depende do que é solicitado.

Se o desenvolvedor quer apenas um psd, é tudo o que eu entrego e é o trabalho deles criar as páginas. Eu nunca me daria ao trabalho de criar páginas se elas não fossem desejadas.

Tenho alguns clientes que confiam em mim para páginas totalmente funcionais que podem ser inseridas em sites existentes.

Eu tenho alguns clientes que têm um desenvolvedor que se recusa a usar qualquer código enviado a eles e insiste em codificar tudo eles mesmos, então entrego arquivos psd.

Não há uma resposta sólida para sua pergunta. É uma questão do que é acordado antes do início dos trabalhos.

Você realmente quer um designer versado em HTML, CSS e Javascript. O local onde trabalho, nunca vemos um único arquivo de photoshop. O designer nos fornece um URL para a página, copiamos toda a interface do usuário e preenchemos as lacunas para tornar a página dinâmica.

Existem algumas razões pelas quais isso é preferível:

1) Não há dúvida sobre o que o designer deseja - não há números ou notas de interpretação; você vê exatamente como deve ser o produto final antes mesmo de tocá-lo. Todos os valores CSS estão lá, todas as funções ou animações javascript.

2) Reduz o tempo que você precisa para trabalhar nessa página. Sim, você ainda precisa reconectá-lo e talvez fazer montanhas de trabalho no back-end, mas economiza uma quantidade considerável de tempo na frente.

Obviamente, você nem sempre controla o tipo de designer com quem trabalha. Mas se você optar por um que faça apenas o photoshop, verifique todos os estados dos botões e saiba quais animações o designer deseja. Felizmente, se você trabalha nesse tipo de ambiente, basta subir e conversar com seu designer e pedir esclarecimentos conforme necessário.