Archive for November, 2009

Todas as imagens foram retiradas da POST Magazine, de 1951.

Esse post é principalmente voltado aos novos designers, que estão entrando agora no mercado. Claro que os mais experientes também podem atualizar seus conhecimentos com os termos utilizados pelo seu chefe/cliente marketeiro. Vamos a eles:

Benchmarking

É o projeto que você tem que olhar, decorar e executar igualzinho pra fazer o seu.

Budget

É basicamente a grana que eles não tem para te pagar. Se te falarem que é limitado, senta e espera. Sua conta bancária vai demorar pra ver a cor desse dinheiro.

Commitment

Geralmente aparece na frase “Espero que todos tenham commitment nesse projeto”. Basicamente significa que você vai virar noites na agência até o deadline (abaixo).

Deadline

É a data que você vai poder voltar pra sua casa, desde o dia que ouviu “commitment” pela última vez.

Ideia inovadora

É pra você fazer algo que ninguém nunca fez nem pensou, num tempo menor que as equipes cinco vezes maiores que a sua fariam.

Layout vendedor

É utlizado para culpar o pobre designer pelo fracasso do projeto (geralmente bem ruim), por exemplo “O projeto está perfeito, o layout que não é vendedor o suficiente”

Pensar fora da caixa

É parecido com ideia inovadora (acima), só que você pega 30 benchmarkings e mistura tudo numa coisa só.

Stakeholder

É o grupo de pessoas que vai ganhar os méritos pelo projeto que você fez.

Target

É o objetivo do projeto, pra que ele é feito. Caso você erre, é bem provável que o target que seu cliente quer pra você seja o olho da rua.

Viral

Fazer algo viral significa que você tem que ter uma ideia inovadora ou que você pensou fora da caixa (ambos acima) e que todos os consumidores do mundo cismem de enviá-la (em formato de projeto) para todos os amigos do Facebook, Twitter, Orkut, Google Talk e MSN, várias vezes por dia.

Alguém sabe mais alguma? Pode deixar nos comentários, por favor!

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.

Na posição de designer e também (ex) webmaster, eu colecionei ao longo do tempo detalhes que tiram qualquer webmaster do sério e as vezes podem ser evitados. Esses dias um grande amigo (e webmaster) foi até a minha mesa para lamentar as derrapadas (e QUE derrapadas!) que o designer fez nos lays que ele estava codificando. Aí comecei a relembrar da minha “coleção de detalhes” que ajudaria ambos os lados, além de permitir que o projeto ganhe em desenvolvimento e performance, principalmente em sites de conteúdo editorial. Aí vão os “10 mandamentos do webmaster feliz”, baseados em lays que virarão páginas HTML:

1. Cantos arredondados

O Firefox, Safari e Opera já tem interpretação para comandos CSS que fazem isso de modo bem simples, mas o Internet Explorer (até a versão 8 do navegador) não lê isso nem com reza, o que exige ser feito com imagem. Se todos os boxes nesse formato forem do mesmo tamanho até que não causa tanto problema. Entretanto se o “box” precisar aumentar e diminuir de acordo com a quantidade de texto/imagens de dentro, são necessárias várias imagens, o que gera mais requests de servidor e mais linhas de código para serem executadas. Se o projeto não perder TAAAANTO assim com cantos retos, dê preferência a eles.

2. Degradês

Os lineares horizontais e os verticais, tudo bem. Radial, cônico ou lineares em diagonal podem te custar um dente ou um nariz quebrado. A revolta se dá porque não existe código pra isso e o uso de imagens, muitas vezes desnecessárias, é necessário.

3. Drop shadow/Outer e inner glow

Além de qualidade visual duvidosa/forçada as sombras que são tão fáceis de serem feitas no Photoshop podem requerer linhas e linhas de código e diversas imagens para confeccioná-las. Se atrás desse elemento tiver uma textura ou cores diferentes, mais problemas ainda pela frente: As imagens transparentes (em PNG24 no Photoshop ou PNG32 no Fireworks) são mais pesadas e indigestas (pelo Internet Explorer 6) do que as opacas. Do mesmo modo das sombras “dropadas”, não existe glow em CSS. Tudo bem se ficar sem?

4. Tipografia no Photoshop x Tipografia no navegador

Os diversos tipos de suavização de texto no Photoshop nunca casam direitinho com o jeito que os browsers renderizam as páginas (as vezes tem até diferenças entre os browsers na renderização). Eu gosto de usar o “sharp” ou até o “none”, depdendendo do público alvo/browser mais utilizado do projeto.

5. Mapa de estilos

O sujeito que vai codificar a sua página não tem o olho treinado como o seu para identificar entrelinhas ou entreletras diferentes, tamanhos de fontes que mudam 1 ou 2 pixels nem as distâncias certinhas dos elementos do seu projeto digital. Criar uma imagem em GIF, JPG ou PNG com um mapa de estilos de todas as páginas ajuda o webmaster, otimiza o projeto e não te dá dores de cabeça póstumas, já que todas as medidas foram explicadas direitinho. Isso vale pra tudo: Dimensão das imagens, corpos de texto, títulos, links com e sem mouseover etc. Ah, também é legal alinhar as medidas do Photoshop com o webmaster (Edit, Preferences, Units & Rulers). Eu sempre uso em pixels. Um exemplo de elemento numa folha de estilos:

6. Desapego com a “arte”

Sei que os alinhamentos, posicionamentos e tudo mais são extremamente importantes, só que as vezes dá pra abrir mão de 2 ou 3 pixels (quando não ficam com aparência de falta de acabamento) num final de página ou numa diferencinha no crossbrowsing, não dá?

7. Transparências

Imagens transparentes com boa qualidade geralmente são em PNG24 (ou 32, no Fireworks). São mais pesadas e precisam de scripts pra funcionar no Internet Exploerer 6. Se remover a transparência não for tão grave quanto espancar a carinha angelical da sua filha de 6 anos, poupe o trabalho do webmaster e o peso do seu projeto. Boxes com contorno e preferencialmente de uma cor só pra cada podem ser feitos com CSS, levinho e feliz.

8. Grids

Especifique os grids do seu projeto e passe as medidas pro webmaster. Evite usar muitas variações de grid ao longo do site e delimite sempre o espaço do topo, mídias e rodapé. Cuidados especiais merecem as imagens com “anti alias”, pois elas as vezes aumentam um pixelzinho aqui ou acolá e a gente não percebe, mas na hora de recortar pode causar um desalinhamento ou até estrago de “quebrar a página”, principalmente quando as medidas estão bem justas.

9. JPG, GIF e PNG

Se você não quiser ter surpresas com a falta de cores de um GIF ou de um imagem granulada pela compactação de um JPG que deveria ser PNG, por exemplo, vale especificar o formato de saída que as imagens devem ter.

10. Aprenda HTML e CSS

Calma! Calma! Pô, que mancada xingar minha família! Eu sei que você odeia programar, mas nenhum desses dois é programação, só uma marcação, uma codificação. Não espero que você saia produzindo páginas e páginas, mas saber as dificuldades e limitações de ambas podem poupar retrabalhos e aumentar a produtividade entre designers e webmasters.

Evidente que nada disso eu acredito ser REGRA, apenas dicas. Você acha mesmo que existirão projetos que sombra e inner glow num box transparente com preenchimento degradê radial sejam necessários? Quero dizer… Se um dia você precisar disso tudo mesmo, pense com carinho se não tem algo errado com a sua vida. De qualquer modo, acredito que dependendo do projeto você designer possa abrir mão de alguma coisinha pra ajudar nossos amigos webmasters e espero que eles façam o mesmo.
Mas e você amigo webmaster e amigo designer? Tem mais dicas pra compartilhar? Então documenta isso nos comentários, vai?!
Leia também o post póstumo “6 dicas para o webmaster não ser morto pelo designer“

Logo na descrição da orelha do livro tem uma frase que define todo o necessário para que você sinta vontade de ler o livro: SIMPLICIDADE = SANIDADE. Simplificar um projeto é bem mais difícil do que torná-lo completo/complexo. É nisso que John Maeda se apoia pra fazer em dez (capítulos) leis, suas considerações sobre a simplicidade na vida, nos negócios, em tecnologia e no design. São elas: Reduzir, Organizar, Tempo, Aprender, Diferenças, Contexto, Emoção, Confiança, Fracasso e A única. Depois ele trata de três soluções, que são Distanciamento, Abertura e Energia. A grande maioria dos exemplos ele pega de experiências e problemas reais, com produtos reais de empresas reais e soluções também reais. É a teoria baseada em experiência e estudos de casos, não somente em academia e outras publicações.

Por alguns momentos eu sinto o livro meio como “papo-de-avô” demais, ele leva bem a sério o subtítulo do livro, principalmente a parte “vida”. Ele cita exemplo de criancinha que fez sei lá o que, de velho que falou “A” frase mais sábia do mundo no vestiário do clube e coisas do tipo. Como eu sou como um velho rabugento, você não deve ligar pra isso e ler “As Leis da Simplicidade” porque vale muito a pena, mesmo sendo a publicação mais comercial do John Maeda. Não importa se você trabalha com web, gráfico, celular, widgets. Legal é entender que um projeto pode ser mais valorizado e ocasionalmente mais interessante/usável por ser mais simples. Acho bom parar por aqui, meu post tá muito complexo…

Qual designer nunca teve uma história engraçada de seus clientes versus lorem ipsum? Pois é, são muitas mesmo. Depois de me deparar com isso algumas dezenas de vezes, percebi que não era somente engraçado, poderia também ser um problema. Afinal de contas o nosso cliente que é formado em marketing por exemplo, não tem obrigação de saber. Seria como se nos cobrassem por não saber o que é revenue share, SWOT ou ciclo deming (aliás, o que são essas coisas?). Então, da próxima vez que você sofrer com o lorem ipsum, envie esse post pro seu cliente. Um próximo designer dele, decerto, não vai sofrer.

Por que usar Lorem ipsum?

Como é muito difícil no começo do projeto ter todos os textos, nós designers precisamos de algo pra usar na composição dos layouts. Não podemos usar qualquer texto porque sempre alguém vai falar que tem um erro aqui ou acolá, que a empresa não é do jeito do texto, efim, pode-se perder o foco no layout e pensar no texto ainda não finalizado que lá está contido. E faz todo sentido. Além disso, usar os famosos “nonono” como nas antigas cédulas de voto também não é boa ideia pois a mancha gráfica criada por essas sílabas não mostra um texto de maneira natural. Os “nononos” não têm variação de formato das letras e nem extensões cima nem para baixo no texto, já que “n” e “o” nem descem a linha e nem sobem, como o “p” e o “t” respectivamente. Os textos ficam com aparência falsa, como blocos retangulares, sem movimento. Veja um exemplo de texto feito com “nononos”:

Já com o Lorem ipsum, que a grosso modo é um texto “sem significado*” e que pode ser gerado atualmente por ferramentas on-line como o Lipsum, o foco deixa de ser o que está escrito e passa a ser no visual da página, folder, site etc. Pelo menos assim que deveria. Os textos lá gerados tem variação das letras e do tamanho das palavras. Dessa forma as “massas de texto” ficam bem mais realistas nos layouts, muito mais próximas do que serão com os textos corretos. Veja um exemplo de texto com Lorem Ipsum:

Para saber mais:
Lipsum.org: Gerador de Lorem ipsum on-line e explicação histórica em português.
Embora o Lorem ipsum tenha um significado (vide o link acima), para efeitos gerais do layout ele não tem, já que é apenas um texto para marcação de espaço.

Não interessa se a sua tia-avó não sabe o que você faz, contanto que você, seu chefe e seus clientes saibam. Inclusive duvido que as tias-avós, irmãs e cunhados de cientistas físicos ou biomoleculares saibam (também duvido que eles e vangloriem disso). Não interessa se o padeiro virou bread-designer. Importante é você (designer) não agir como um padeiro. Se tem o micreiro que faz site ou folder por um décimo do que você cobra não tem problema. É com ele que você brigar no mercado de trabalho? Não deveria.

O cliente quer o neto dele no logo da construtora? Depois de argumentar e explicar os prejuízos você só tem dois caminhos a seguir: Ou você larga o job ou faz o melhor “neto-no-logo” que puder.

Toda vez que é Dia Nacional do Designer tudo que eu vejo e ouço são as mesmas ladainhas: Piadas com a profissão, arrogância nos comentários, presunção ou até ignorância. Nada disso. Ora, o ano todo é tão difícil que será que até no nosso dia devemos exaltar tais supostas características? Acho que não. Hoje deveria ser o dia que você relembra o último super-projeto que deu certo, a sacada que seu colega teve na hora de entregar aquele logo que parecia interminável, o retorno feliz que o cliente deu depois que apresentou o site num simpósio, o sorriso aprovador que a dona da loja fez quando viu o folder pronto, o telefonema que rendeu um job via indicação que você nem sonha quem possa ser ou simplesmente lembrar que você é feliz na sua profissão e que a valoriza a cada dia que passa.

É assim pelo menos que eu vou comemorar o 5 de novembro. Parabéns pra você que, da mesma maneira que eu, gosta de ser designer.