Netlus

Imagem capturada na fachada da Sociedade Cearense de Pediatria. Mas poderia ser muito bem utilizada para identificar várias outras associações. Quer sugerir um exemplo?

Bryan Katzel! clap clap clap

O Webleed Design, site/portfólio desse sósia do Rogério Skylab tem um efeito no background usando PNG transparente que eu nunca tinha visto antes e achei genial.

Ah, infelizmente não funciona no Internet Explorer 6. Nem sempre dá para fazer milagre com o azulzinho. Paciência.

Dica do twiteiro Glacial.

Glauco Diogenes. Sensacional o trabalho desse cara. Descobri vendo as novas garrafas da Absolut com o tema Brasil.

Por sinal, o novo site da Absolut vale a visita. 12 artistas produziram 12 opções de garrafas e dessas apenas duas foram escolhidas.

Existe um livro que eu gostaria de conhecer. Você pode ajudar-me, indicando-o. Juro que faço um extenso texto, aqui no Netlus, sobre a publicação, caso ela exista de verdade. Sim. Este é um post em forma de apelo.

Estou aqui para falar que designer não é webdesigner. Nem o contrário. Mas disto eu já sabia. Possivelmente, você também. Acredito que sim.

Rafael já vem publicando alguns textos sobre as peculiaridades que fazem o dicurso visual para a internet ser diferente daquele pensado para o meio impresso. Sem falar nas nossas conversas sobre este assunto. Aliás, segundo o instituto datafoda-se, este é o assunto favorito do Dourado.

Só que eu tô afim mesmo de conhecer e ajudar a construir uma publicação que compilasse informações como “como conhecer um designer se passando por webdesigner”, “não me peça um folder para internet”, além - é claro - de um discurso realmente inteligente da relação dos conceitos do design com a linguagem de folhas de estilo. Ou seja, falar de tipografia, suportes, cores e os outros conceitos de design, acrescentando aí o conceito de usabilidade, numa linguagem que tornasse possível aos designer entender melhor webdesigners.

É uma pensamento que, pessoalmente, faz todo sentido. Que, na verdade, pra mim vai virar doutrina obrigatória e cotidiana em breve. É o que justifica, por exemplo, o Adobe InDesign compreender a liguagem CSS. Conceitos que eu pude ver, rapidamente, discutidos em alguns textos e livros como o “Pensar com Tipos”.

Porém, não achei um site ou livro com este foco. Com a missão de levar isto até as últimas consequências (como diriam alguns retóricos do apocalipse). Então, repito o apelo (ou desafio, para alguns). Tô aqui para solicitar sugestões de publicações impressas e digitais feitas para aqueles designers do meio impresso que querem compreender melhor o universo online da produção visual.

SOS.

Divulgada a nova marca da Construtora Castelo Branco:

A marca acima é de Tiago Pereira Pompeu e foi escolhida em um concurso promovido pela Construtora em maio deste ano. O atraso na divulgação do resultado do concurso andou movimentando um outro post aqui no Netlus.

Aí está, jogo aos leões. Comentem.

Galera, estou meio atolado de trabalho então só vou postar artigos curtos por uns dias até relaxar um pouco denovo. Pode deixar que eu perturbo os outros integrantes do Netlus por vocês para eles postarem mais também.

Enquanto isso, fiquem com uns trabalhos Sérgio Eugenio. Um cara que trabalha comigo na Unifor e que tem um talento enorme para a arte. Como já disse outras vezes, ele é totalmente analógico e praticamente não divulga seus trabalhos na Web. Tomei para mim essa tarefa e criei um DeviantArt pra ele.

Confiram e comentem que ele agradece.

Dica rápida que o teórico Glacial me deu e que pode ser útil a mais algum desenvolvedor.

O XRAY é um script que fornece várias informações sobre o elemento que você clicar na página, como dimensão, posição e propriedades CSS. Para usar, basta arrastar este link para a barra de atalhos do seu Firefox, Opera ou Safari e pronto. Para usar, é só clicar no atalho. No Internet Explorer ainda não funciona, mas a equipe tem planos de fazê-lo funcionar no azulzinho também.

Dando continuidade à série de artigos para ajudar a galera da celulose a migrar para essa maravilha cheia de esculhambação chamada internet, falarei sobre cores.

Depois de tanto tempo misturando ciano, magenta, amarelo e preto, ou mesmo brincando de colorir com aquele catálogo pantone, passar a trabalhar com cor no monitor exige uma certa dedicação. Primeiro, coloque duas coisas na cabeça: monitores têm calibragens diferentes e esqueça o CorelDRAW.

Tubos Catódicos × Cristal Líquido

Monitores são pretos, papéis são brancos. Isso inverte a lógica de trabalho. Se antes ao reduzir a porcentagem de ciano deixa o tom mais claro, agora retirar azul o torna mais escuro. Tá certo, eu sei que seu Photoshop aceita as duas formas, mas a lógica é inversa.

Via de regra, sites como o COLOURlovers e Adobe Kuler podem ajudá-lo durante e após esse processo. Particularmente, gosto muito do COLOURlovers e é geralmente o primeiro lugar para onde corro para me decidir sobre a paleta de cores.

Mas não é só isso não. Monitores não são iguais. Principalmente se compararmos CRT com LCD. Monitores CRT são preferíveis em produção gráfica exatamente por representarem as cores da forma mais fiel possível. Monitores LCD ainda divergem e muito entre os fabricantes e até entre modelos da mesma marca. Tenho um LCD Samsung de 15″ em casa que tem uma calibragem totalmente diferente do de 17″ que uso na empresa. Eu até já o calibrei algumas vezes, mas nunca ficam idênticos e eu já perdi a paciência de tentar corrigí-lo. Se eu que trabalho com isso já cansei, imagine quem é “normal”. Os mais atuais até que são mais parecidos, mas não dá para contar com essa sorte.

Então, o que fazer? Dois itens estão sofrendo com essa diferença: estética e legibilidade. A solução do primeiro é só uma: testar. Com o tempo você aprende a identificar essas particularidades, mas na maioria das vezes o que acontece é um aumento no brilho e algumas bordas borram um pouco. Ou seja, cuidado com tons de cinza e degradês com pouco contraste. Já o segundo é mais simples de prever. Um cidadão chamado Jonathan Snook — cujo blog é muito bacana — fez um aplicativo web que testa o contraste da letra com o fundo e diz se o texto está legível ou não, pelo menos no que diz respeito à cor. Dessa forma é possível garantir a legibilidade mesmo para leitores daltônicos.

Por que você não gosta do CorelDRAW, seu mané?

Por que ele não consegue ler nenhuma cor RGB direito, nem a visualização dele entende que 1 pixel deve ocupar só 1 pixel da tela. Programas que melhor simulam o funcionamento da tela são Illustrator e Fireworks. Existem outros do Linux e Max que não conheço, mas quem conhecer, por favor, cite nos comentários.

Muitos Gráficos já utilizam Illustrator ou Freehand em seus trabalhos. O Freehand está desatualizado, mas ainda dá um caldo. Mas se for para trabalhar profissionalmente com Web, sugiro o Illustrator ou a versão CS3 do Fireworks. As anteriores do Fireworks sempre achei muito fracas, mas a versão nova tenho que dar o braço a torcer que está muito boa.

Pronto para começar?

Com o primeiro e este artigo já é possível definir a área de trabalho e começar a criar alguma coisa com as cores corretas para ir treinando.
No próximo artigo: elementos de interface.

O grandioso grupo M. Dias Branco que, recentemente, ingressou no mercado financeiro de ações e adquiriu várias empresas tradicionais do ramo alimentíceo brasileiro acaba de lançar uma nova marca para mostrar, justamente, seu posicionamento fortalecido e crescente.

Para a composição da nova marca gráfica, nada mais adequado para uma grande empresa do que convidar um grande designer. Certo? Certo.

Contrataram o Hanz Donner, famoso pela composição das vinhentas da Rede Globo.

Certo?

Estou tendo muito contato com designers de meios impressos interessados (alguns até “forçados”) em aprender design para a web. Mas a sensação inicial de se tratar de uma transição simples e até natural vai abaixo logo no primeiro leiaute. A internet, assim como o papel, tem características que devem ser observadas, e é necessário respeitá-las para produzir um material de acordo com o meio.

Por isso, escreverei uma série de artigos para auxiliá-lo nesse caminho sem volta, passando por questões como elementos de interface, área de trabalho, tipografia, usabilidade, acessibilidade e otras cositas más. Se você já for webdesigner, pode ajudar com sua experiência nos comentários.

Área de Trabalho

Resolvi começar por aqui, pois a primeira pergunta feita por um Gráfico (vou chamar de Gráfico os “designers de impressos que estão se aventurando pelo design para web”, é mais curto) sempre é: qual formato utilizo? E a resposta é mais complexa que dizer 9×3m ou meia-página vertical porque quem define isso é o designer e não o meio. Quer dizer que eu posso fazer no formato que eu quiser? Sim e não. Não existem limites físicos no sentido de que se pode criar uma página com rolos e rolos de barra de rolagem, mas é necessário entender as condições dos usuários.

No impresso você tem quase a certeza de que todo mundo irá ver aquele pedaço de papel da mesma forma que você (descontando possíveis problemas de visão). Na internet, tenta-se compensar variáveis como resolução de tela, tamanho da janela do navegador, cores da placa de vídeo e diferenças entre monitor LCD e CRT. Falarei de cores e monitores em outro artigo.

A tinta transborda o papel

Na internet, seu leiaute não tem limites bem definidos, tendo áreas fluidas nas laterais e na base. Comparando com algo impresso seria o busdoor, cuja grade inclui uma “área de segurança” que compensa as diferenças de cada modelo. Você pode até criar algo de tamanho fixo, mas a janela do navegador não irá se adaptar (até poderia, mas hoje em dia isso é no mínimo muito chato).

Para compensar isso, algumas soluções são possíveis como:

• cor chapada no background usando a mesma paleta do site
  Não use sempre preto, internet não é CD-ROM;
• imagem que se repete verticalmente
  A sombra nas laterais é uma imagem de um pixel de altura repetida na vertical;
• imagem que se repete horizontalmente
  A imagem no topo acompanha a largura da janela;
• imagem que se repete lado-a-lado
  A textura ao fundo é repetida em ambos os eixos, efeito conhecido como pattern;
• imagem grande que mostre mais detalhes dependendo da resolução

Também é possível deformar o site para se encaixar de acordo com o tamanho da janela, criando, dessa forma, leiautes líquidos (largura sempre em 100%, independente do tamanho da janela) ou elásticos (possuem uma largura mínima e outra máxima). Sugiro que teste esses links em resoluções diferentes e veja como eles se comportam. Ah! Mesmo que o trabalho seja em Flash, também é possível que ele seja líquido.

Informação à primeira vista

Entendendo como a “periferia” do leiaute é exibida aos poucos, é preciso se concentrar no que o usuário vai ver primeiro. A “área mínima”, aquilo que surge na tela sem utilizar barras de rolagem, varia de acordo com a quantidade de barras instaladas no navegador (barra do Google, Yahoo, anti-vírus…), altura da barra de tarefas e deformidade da janela. Pelo menos uma coisa é certa: a grande maioria das pessoas navega com a janela maximizada ou próximo disso.

Thomas Baekdal fez uma pesquisa sobre isso e pôde concluir a porcentagem desses limites. Segundo Thomas, para abranger as condições de cerca de 95% dos visitantes, a área mínima deve ser de 776×424px.

Para simular essas condições no seu programa gráfico, crie um documento com uma área de trabalho grande e delimite a área mínima utilizando linhas-guia. Dessa forma você sempre lembrará que tem mais espaço a preencher além do tamanho padrão. Lembrando que você pode criar um leiaute que se encaixe perfeitamente na área mínima, mas mesmo assim terá que pensar em algo para o background.

Por enquanto é só…

Bom, espero ter ajuda de alguma forma. Os comentários estão aí para dúvidas e colaborações.

No próximo artigo: cores.