Gatos e cachorros. Caim é Abel. Designers e desenvolvedores. Estes são apenas alguns dos grandes confrontos históricos.

Designers e desenvolvedores muitas vezes parecem vir de diferentes planetas e têm cérebros completamente diferentes.

Os desenvolvedores querem que um site funcione corretamente, os designers querem que ele pareça certo.

Algumas semanas atrás, nós exploramos as principais pet peeves que os web designers têm com desenvolvedores web e sugeriu algumas soluções para eles.

Hoje, vamos discutir o outro lado da moeda: as cinco queixas mais comuns que os desenvolvedores têm com os designers .

PEEVE # 1: "Por que os designers querem criar tudo em Flash?"

O site é um mero botão e algum texto, mas o designer insiste em usar o Flash, mesmo que triplique o tempo de download.

Questão
Para alguns projetistas, o uso de tecnologias de núcleo da web (HTML, CSS e JavaScript) para criar uma página da Web pode parecer a sentença de morte da inovação. Eles limitam sua criatividade e os forçam a depender do desenvolvedor para realizar sua visão.

O Flash oferece aos designers possibilidades de design potencialmente ilimitadas, e eles podem reter muito mais controle sobre o produto final, especialmente se conhecerem o ActionScript. Com o Flash, os designers podem escolher de qualquer tipografia, inclinar e distorcer elementos, adicionar animações e criar efeitos especiais que são simplesmente impossíveis no enfadonho de HTML.

Solução
A primeira pergunta a ser feita pelo desenvolvedor é: "Qual é a melhor solução técnica para o problema?" Pode ser tecnologias da Web essenciais ou pode ser o Flash. Ter uma mente aberta é importante. Para determinar o que funcionaria melhor, sente-se com o designer e concorde com uma lista de requisitos técnicos e de design para o projeto.

Por exemplo, explore se a página precisa carregar rapidamente, use uma fonte específica para fins de marketing, atenda às diretrizes de acessibilidade ou tenha animação. Depois de responder a esse tipo de pergunta, você poderá avaliar melhor os prós e contras do uso do Flash.

Informar seu designer sobre estruturas JavaScript como Dojo e jQuery é uma boa ideia. Eles podem não perceber a funcionalidade interativa e os efeitos especiais que podem ser alcançados com o AJAX e o DHTML.


PEEVE # 2: "O designer já ouviu falar de HTML CSS?"

O designer criou um ótimo design usando o Photoshop, mas a web simplesmente não funciona dessa maneira.

Questão
Alguns designers parecem ignorar intencionalmente os aspectos mais fundamentais da tecnologia web. Isso pode resultar em designs que não são realistas ou extremamente difíceis de recriar na Web, que dependem muito de imagens para uma tipografia simples ou que levam a uma experiência de usuário inferior.

Solução
CSS é a linguagem do web design, e os designers que trabalham no meio não têm desculpa para não entender o básico. Eu comparo isso ao meu trabalho anterior em design de impressão. Eu não precisava saber como administrar uma daquelas impressoras industriais gigantescas, mas tinha que saber sobre trapping, meios-tons e CMYK.

Eu precisava entender os fundamentos do processo de impressão se quisesse obter os melhores resultados com meus designs. O mesmo vale para o web design. Os designers não precisam saber como um servidor funciona, mas devem ter conhecimentos básicos de altura de linha, preenchimento, imagens de plano de fundo e outros fatores que compõem o processo de desenvolvimento da Web.


PEEVE # 3: "O designer me deu um PSD com 50.000 camadas sem nome e sem pastas!"

Você faz o download do documento do Photoshop de 50 MB, aguarda cinco minutos para que ele finalmente abra, comece a cortar um plano de fundo de botão simples e enfrente uma parede de camadas não identificadas em ordem aparentemente aleatória e metade delas foi desativada.

Questão
Os desenvolvedores precisam manter seus documentos bem organizados, ou então não serão eficazes. No entanto, se algo parece certo na porta de visualização do Photoshop, então isso geralmente é bom o suficiente para o designer. Para um desenvolvedor que está acostumado a programação orientada a objeto (OOP) e uma ordem lógica para código, isso pode ser um pesadelo!

Solução
Os desenvolvedores não são os únicos que ficam frustrados com arquivos PSD desorganizados e confusos. Como diretor de criação, enviei mais de um PSD com uma solicitação para que o designer organizasse e nomeasse todas as camadas. Aborde esse problema com o designer o mais cedo possível. Deixe claro que você precisará de um arquivo limpo e organizado.

Se isso não for possível (ou o designer é apenas teimoso), um truque para encontrar a camada de um objeto é para a direita / Ctrl + clique na porta de visualização com a ferramenta Mover (o atalho de teclado é "v").

Um menu contextual de todas as camadas e grupos de camadas sob o cursor aparecerá. Selecione a camada desejada e, se a Paleta de Camadas estiver aberta, a camada correta será realçada.

Também recomendo que os designers aprendam como usar os Smart Objects do Photoshop . Os Objetos Inteligentes permitem que você colete as várias camadas que compõem um objeto (por exemplo, as camadas que contêm um botão) em um arquivo separado incorporado no arquivo principal do Photoshop.

Objetos inteligentes são fáceis de usar e oferecem vários benefícios:

  • Eles criam um arquivo Photoshop "orientado a objeto", no qual elementos repetidos têm um único "símbolo".
  • Eles podem ser impressos como elementos prontos para a Web sem a necessidade de técnicas confusas de segmentação de camadas.
  • Eles facilitam a organização do PSD reduzindo o número de camadas no arquivo mestre.


PEEVE # 4: "O designer não se adaptou ao conteúdo do mundo real".

Estamos usando um sistema CMS que dá ao cliente controle total do conteúdo. O modelo de design, no entanto, mostra apenas uma linha de texto para títulos e um parágrafo de texto para teasers.

O projetista espera colunas e alturas de módulo balanceadas, mas não podemos antecipar a quantidade de cópias que precisarão caber lá.

Questão
O texto Generating Greeked (ou “Lorem Ipsum”) é um método consagrado pelo tempo de adicionar conteúdo de aparência realista, na ausência da cópia final do site. No entanto, como não é um conteúdo real, pode levar os designers a tirar conclusões erradas sobre o design final da página.

Solução
As composições de projeto são estáticas, mas as páginas da web do mundo real precisam ser fluidas e dinâmicas. Os designers devem reconhecer isso e cobrir todos os cenários possíveis. Esta é uma das principais limitações da criação de composições estáticas: elas não são a coisa real.

Acho útil definir a altura das áreas que serão usadas para exibir elementos como títulos e títulos, em vez de deixá-los em aberto. Isso ajudará você a determinar exatamente quanto espaço eles ocuparão no design final.


PEEVE # 5: "O designer espera que eu adivinhe quais os estilos que ele usou."

O designer lhe entrega uma composição sem nenhuma explicação e espera que você descubra a família de fontes, alturas de linha, cores, larguras, preenchimento, bordas e margens.

Questão
Ao contrário da criação de uma maquete no Photoshop, o desenvolvimento da Web geralmente não é feito em um ambiente WYSIWYG (o que você vê é o que obtém). Em vez disso, o desenvolvedor atribui valores específicos para medições, cores e tipografia.

Solução
Eu vejo esse colapso na comunicação em muitos projetos; Ele destaca uma das maiores diferenças entre "design" e "desenvolvimento". Mesmo que o designer tenha usado um modelo com uma grade predefinida, o desenvolvedor muitas vezes precisa examinar outros estilos.

Fazer com que o designer crie um guia de estilo como um produto, é importante. O guia de estilo servirá como um modelo acordado para o design e reduzirá a confusão.


Special Bonus Peeve: “Eu não preciso de nenhum designer me dizendo como programar!”

O designer quer algo feito de uma maneira particular, se você, o desenvolvedor, acha que isso é aconselhável.

Questão
Os designers que dizem aos desenvolvedores como codificar são tão frustrantes quanto os desenvolvedores dizendo aos designers como fazer o trabalho deles. Mas a linha entre designer e desenvolvedor é geralmente pequena, e às vezes os dois papéis são investidos na mesma pessoa.

Se você tem responsabilidades claramente definidas para um projeto, ouvir alguém que não estava envolvido no processo de tomada de decisão adivinhar suas conclusões é irritante.

Técnicas que parecem boas para os outros na superfície nem sempre se encaixam no ambiente de programação em que você está trabalhando. Explicar os detalhes de suas decisões técnicas leva tempo precioso, quando tudo que você quer é que o designer confie que você tomou decisões sábias. .

Solução
Ouça o que o designer tem a dizer sobre alternativas técnicas; você pode não ter pensado em todos eles. Mais de uma vez, estive em discussões com designers que trouxeram soluções para a mesa que eu não conhecia, como a primeira vez que vi o jQuery em ação.

Lembre-se de que você e o designer (espero) compartilham o mesmo objetivo de criar o melhor produto possível. Se você mantiver uma mente aberta e uma abordagem equilibrada, não poderá errar.


Escrito exclusivamente para WDD por Jason Cranford Teague . Ele oferece serviços especializados de consultoria na web e sessões de treinamento. Você pode pré-encomendar seu novo livro, Falando em Estilos: Os Fundamentos do CSS para Web Designers na Amazon.com.

Que você tem com designers? Gostaríamos de saber mais sobre isso, por favor, compartilhe seus comentários abaixo.