6 dicas pro webmaster não ser morto pelo designer

Atenção:
Esse post foi feito em 2009. Ele fazia sentido nessa época. Nesse tempo muitas mudanças aconteceram, tecnologias ficaram mais evidentes e recursos técnicos passaram a oferecer novas possibilidades. Alguns itens (e creio que em breve quase todos) dessa lista não tem mais utilidade ou não tem tanto quanto no ano que foi escrito, mas mantenho o post por documentar a época e a história do blog.

Depois do post “10 dicas pro webmaster não querer te matar“, que teve diversos picos de acesso e cada dia bate novo recorde pro blog, resolvi inverter o foco e ajudar o webmaster a não ser decapitado e exposto em praça pública pelo designer. São leves toques (PARA OS WEBMASTERS) que, junto com o outro post, ajudarão a manter o clima de designers x webmasters calmo, feliz e com aroma de rosas so campo. Vamos lá:

1. Alinhamentos

Não existem coisas quase alinhadas. Ou estão ou não estão, inclusive ele existe pra isso: tornar duas coisas exatamente na mesma linha. Não tente justificar com “Ah, mas são só 3 pixels” se o resultado final ficar com cara de amador. Claro, isso se aplica quando não bate de frente com o item “6. Desapego com a arte” da outra lista de dicas.

2. Cores

Muitas vezes, na hora de usar o conta-gotas do seu software favorito para pegar a cor de algum elemento, você pode pegar a “cor errada”, ainda mais quando os layouts são distribuídos em JPG compactado ou algo equivalente. Na maior parte das vezes ele cria “borrões”, principalmente próximo a letras e bordas de ilustrações. Caso você clique nesses borrões acidentalmente para identificar o hexadecimal da cor, pode ter resultados diferentes a cada uma das páginas do seu projeto. Veja no exemplo a seguir que fiz com uma das imagens do post “Pensar com tipos“, três cores diferentes, retiradas da mesma letra A:

Diversas cores encontradas na mesma parte da imagem, pela compactação demasiada do JPG

3. Compactação de imagem

É bem interessante alinhar com o designer (caso ele não as entregue recortadas) como as imagens serão compactadas pra web, seja em JPG, GIF, PNG 8 ou 24. As vezes as existem muitas perdas de qualidade ou cores essenciais para o projeto.

4. Tipografia

Não, Arial não é igual Tahoma e tampouco com a Verdana. Times New Roman não tem nada a ver com a Georgia. Ok, ok, as vezes é complicado de identificar pra quem não é acostumado, então vale a pena certificar-se de qual das tipografias é utilizada no projeto. Uma família trocada pode causar bastante estranheza por parte de quem vê, mesmo que não tenha o olho treinado. Fica aquela sensação de letreiro preto com letrinhas amarelas de padaria, onde sempre tem fontes diferentes pra compor o “menu”. Perceba como as famílias são diferentes:

Comparação entre alguns caracteres das tipografias Arial, Verdana, Tahoma, Times New Roman e Geogia

5. Entrelinhas e entreletras

Muito comum ser ajustada entre os designers gráfcos, muitas vezes esses dois recursos essenciais não são aplicados na web ou não seguidos pelos HTMLers à risca. Os projetos que precisam colocar mais texto em menos espaços, como portais de conteúdo ou notícias, podem usar uma redução no entreletras (no CSS, letter-spacing) e/ou no entrelinhas (line-height no CSS) para resolver esse problema. Fique atento nessas medidas pra não parecer que “tem texto demais e tá quebrando o layout”

6. – Deixa que eu faço, é só um botãozinho? – NÃO!

Sem radicalizar nada, mas é bem complicado inventar um botão, cor de algo ou posicionamento quando teve um cara que ficou cinco meses pensando e executando só isso. Essa dica não é relacionada ao apego com o produto e sim com a garantia de identidade posta à prova no site todo, desde decisões de estrutura para todo o layout até a cor do link do canto do rodapé. Se precisar criar algo, chegou a hora de trabalhar junto com seu amiguinho designer de novo! Ó que beleza! Pra você entender como é ruim uma pessoa não treinada inventar esses designices, seria como, depois de meses e meses de trabalho árduo e códigos lipíssimos e organizados, vir um designer infeliz e mexer em tudo via Dreamweaver, pelo modo layout. Entendeu? Dói, né?

Mais alguém tem dica aí? Ah, aproveita pra comentar e enviar pros amiguinhos codeiros que você conhece. :)

12 comentários sobre “6 dicas pro webmaster não ser morto pelo designer

  1. Uma consideração para designers a respeito do item 2 e que 99% deles prefere ignorar: sempre que possível, dar preferência ao uso de cores com hexadecimal ‘perfeito’ – ou seja, dentro das 256 cores web básicas. Por que? Em primeiro lugar porque evita o problemas como o do conta gotas já que a cor é “pura”. Segundo porque a chance de ter qualquer variação de cor de uma placa de vídeo pra outra é praticamente nula (não levanado em consideração a calibragem do monitor, obviamente). É deveras chato quando você quando a cor que no seu monitor parece laranja e no da pessoa que fez o lay fica rosa por conta da interpretação do sistema.

    “Mas e se eu quiser uma cor fora das 256?” – Tudo bem, pode usar, não é crime ou proibido. Mas há de se convir que é dificil ficar sem opção com 256 cores – afinal, se na facul/colégio técnico/etc vc se virava com uma caixa de 36 cores, qual é a dificuldade? :p

  2. Fico encantada toda vez que entro neste BLOG.

    Depois das 10 dicas para o webmaster não te matar, acho que não há nada mais justo do que o inverso!

    Tento não brigar por nenhuma das dicas exceto a de Alinhamento, que confesso agora: “Fico puta!” mas dou razão ao designer que por sua vez também fica puto comigo em muitos casos. Rs…

    O ideal seria pararmos de achar que o curto tempo, que geralmente temos para desenvolvimento implica numa coisa feita “as pressas” (pra não dizer feita qualquer jeito).

    Parabéns pelo Post!!!

  3. Muito bom este post também, só não concordo 100% com a terminologia “webmaster”, assim como eu comentei no post anterior. Pelo descrito no seu texto vc chama de webmaster o desenvolvedor que geralmente é um profissional de T.I. Então pq não chamá-lo de programador? Se vc leu o livro do Felipe Memória pode ver que webmaster é outra coisa! Acho q vou colocar um post no meu blog sobre isso. Mas enfim! Estou curtindo seu blog e vou acompanhá-lo pq vc trata de assuntos realmente relevantes. Parabéns novamente!

  4. D. vespa.

    Sobre as cores devo dizer que 256 é uma paleta ultra limitada, principalmente para cor luz.

    Dizer que “me virava com 36 cores” é um ledo engano, primeiro porque cor pigmento é muito diferente de cor luz, segundo, depende do tipo de lápis de cor (sempre usei aquarelável, que possui uma leve transparência e porosidade, permitindo muitas misturas interessantes e totalmente fora da limitada paleta de 36 cores iniciais).

    Tudo bem que nem todos, mas desde meus 6 anos de idade tenho verdadeira paixão por cores, então nunca me satisfiz com apenas 36 lápis de cores básicos, minha primeira caixa foi de 48 cores, complementada pela segunda, que adicionou mais 64 cores básicas…não preciso dizer que as diversas misturas e combinações entre 2,3,4,5 cores básicas das caixas davam outras milhares…então não, 256 cores nunca foram suficientes.

    Nem preciso comentar os efeitos da reflexibilidade da superfície x tipo de pigmento x iluminação ambiente x posição e ângulo de visão.

    Então não rola, prefiro enviar a cor em separado apenas para não ter este erro em específico do que me limitar a 256 cores.

    E sim, muda de monitor para monitor, uma cruel verdade, mas isso independe de pertencer às 256 cores ou não. “monitor calibrado” é algo raro quando se trata de web e Brasil, diria algo utópico, o máximo que pode ser feito é se afastar das cores “dúbias” e procurar testar em diversos monitores diferentes (coisa que faço doentiamente, fases diferentes do LCD, comparo com os tubulares – que no Brasil ainda tem bastante, e outros obs: calibrados, no mesmo estado em que vem de fábrica, para a web fica mais próximo possível do que um consumidor comum enxergaria).

    Bom era isso, abraços e fui-me.

  5. Post perfeito. Parabéns! Mas eu não enxergo nenhuma diferença nos exemplos de tipografia. Pra mim Verdana, Arial e Tahoma continuam sendo iguais! (pegando os óculos) Ah, agora vejo 2 pixels a mais na circunferência da segunda barriga do B maiúsculo quando comparamos Verdana e Arial. (risos) Mais uma vez: parabéns!

  6. Fala, Lindão!
    Belo post.
    Sempre me preocupei com a fidelidade da arte produzida ao arquivo original. Até porque, como você mesmo disse, o cara não passa tanto tempo em cima de um job para ter um estalo artístico do além, mover umas caixinhas e escolher cores, tem todo um estudo por trás, inclusive é um dos motes do teu blog.

    Discordo do Danilão quanto às cores, cada projeto tem uma natureza diferente, e ter uma gama maior de possibilidades com certeza ajuda a melhor alinhar a arte com os objetivos do projeto.

    Uma coisa para ficar de olho, é o color profile do Photoshop, na hora de exportar pode dar diferença. Tem um link bacana sobre isso
    http://creativebits.org/photoshop_-_save_for_web_problem

    Abraço!!

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>