]]>

Mais informações: Salve a Web

Quem leu isto também leu:

• Como melhorar a usabilidade no seu layout
• Mega sorteio Design Blog e Adobe!
• Código comentado salva vidas!

]]>

Design interativo

Modelo de processo mais simples de pensar no design centrado no usuário. Quanto mais interação (interação = transmitir informações claras) o site tiver com o usuário final, melhor ficará. A medida que o usuário navega e busca por informações, o site responde para o navegante o seu status atual. Por exemplo: informar se encontrou ou não algo, mensagens de validações de formulário, pré-loading, sugestões de informações, dar um feedback para qualquer ação do usuário e etc.

Design paralelo

Esse modo não é tão complexo como se imagina, porém demanda mais tempo de planejamento, pois pode e deve ser feito pelo menos duas opções de wireframes. Depois, basta combinar o que todos os wireframes tem de melhor e produzir um design único para o site. Baseado nesse resultado, começar a pensar na navegação, como serão os feedbacks, interações, etc.

Conclusão

Os dois métodos compartilham uma idéia básica: não há um meio certo para criar a interface perfeita, e você pode não obter uma boa usabilidade comprando a primeira ideia. Você deve testar varias ideias, combinar… o importante é pensar no usuário final.

Quem leu isto também leu:

• Princípios e meios para melhorar a experiência do usuário
• Hierarquia visual de elementos
• Mega sorteio Design Blog e Adobe!

]]>

Agora é sua chance de ter o pack completo do CS5.5 Web Premium original, fornecido pela Adobe! Só pra você ter idéia dos softwares que estão inclusos:

• Dreamweaver® CS5.5
• Flash® Catalyst® CS5.5
• Flash Professional CS5.5
• Flash Builder® 4.5 Premium Edition
• Photoshop® CS5 Extended
• Illustrator® CS5
• Acrobat® X Pro
• Fireworks® CS5
• Contribute® CS5
• Bridge CS5
• Device Central CS5.5
• Media Encoder CS5.5

Tudo o que você precisa para fazer sites, impressos ou o que quiser. E a Adobe, ao contrário de outras empresas, não é uma daquelas que estão paradas no tempo. Acha que o Flash tá desaparecendo? Pense de novo. Bam! A Adobe fornece soluções em HTML 5 e Air.

Não sou de ficar puxando-saco de ninguém, mas vai me dizer que você nunca sonhou em ter esse monte de software de graça? Mas vamos ao que interessa, e se você quiser saber mais sobre os produtos Creative Suite, acesse o Facebook deles ou veja o Twitter do @CreativeSuiteBR.

Ah, além do Adobe CS5.5 Web Premium*, estamos também sorteando a 2 kits com:

• 1 caneca
• 1 pen drive de 2 Giga
• 1 limpador de tela
• 1 bolinha anti estresse
• 1 boné preto
• 1 luminária para notebook
• 1 caneta
• 1 caderno de anotações
• 1 mochila

Tudo personalizado pela Adobe!

Como que faço para concorrer a essas maravilhas?

Pra concorrer, é mega fácil. Basta:

1. Curtir o Design Blog no Facebook
2. Curtir o Creative Suite no Facebook
3. Seguir o Design Blog no Twitter
4. Seguir o Creative Suite no Twitter

E twittar o seguinte link:

Eu quero a #Adobe #CS5.5 Web Premium que o @design_blog está sorteando http://kingo.to/IMF @CreativeSuiteBR

Lembre-se que precisa ser twittado exatamente como consta acima e você precisa ter curtido as duas páginas no Facebook e seguir as duas contas de Twitter! Vale lembrar que múltiplas tuítadas com o mesmo links serão contabilizados como uma só.

Achou muito complicado? Ué, quer coisas de graça ou não? :D

A promoção começa hoje, dia 13 de julho e será encerrada as 23:59 do dia 27 de julho. Os vencedores serão anunciados pelo nosso Twitter no dia 28.

Aproveite para conferir aqui o regulamento da promoção.

Participe e boa sorte!

* – O Voucher dá direito a um produto Adobe CS5.5 Web Premium. A Adobe, por meio da sua agência de comunicação no Brasil – IMS Brasil –, irá entrar em contato com o vencedor do primeiro prêmio do sorteio realizado pelo Design Blog com a finalidade e colher informações base para o licenciamento do aplicativo. Será necessário fornecer os seguintes dados: Nome, Endereço, Telefone, e-mail, RG e CPF bem como a plataforma utilizada – MAC OSX ou Windows. Os dados são para efeito da emissão da nota fiscal do produto. O produto será entregue assim que estiver disponível para remessa, no endereço informado à agência.

Quem leu isto também leu:

• Regulamentar a profissão de designer – sim ou não?
• Novo Forum de Design
• Como conseguir emprego de designer

]]>

Quem leu isto também leu:

• A internet do futuro tem lugar para web designers?
• Mega sorteio Design Blog e Adobe!
• Design Blog Podcast – Episódio 04

]]>

Fonte: todas as informações contidas nesse artig foram baseadas nos estudos da fundação Nielsen Normam Group.

Feedback: Interfaces devem fornecer feedback sobre o seu estado atual. Por exemplo, se algo está processando e em qual nível do processo está, quantificar o tempo para a execução ou finalização de algo.

Implementação: Interfaces não devem ser organizadas em torno da implementação da tecnologia ou exigir que o usuário tenha acesso a informações adicionais que não são encontradas na própria interface.

Como voltar/desfazer: As ações voltar/desfazer da interface devem estar claras, explicando como voltar para o início ou desfazer a ação. O usuário deve ter acesso aos meios necessários para ter o controle da ação.

Recuperação/entendimento de informações: Uma interface pró-ativa deve ajudar os usuários a recuperar/informar sobre erros de tecnologia, por exemplo, instalar o Shockwave.

Interação: Os usuários devem ser capazes de descobrir funcionalidades e informações explorando a interface naturalmente, ou seja não deve ser forçados a recordar informações da memória.

Eficiência: Interfaces devem ser o mais eficiente possível, minimizando a complexidade das ações e do tempo total para completar uma tarefa. O que puder, deve sim ser simplicado, afim de melhorar a experiência final do usuário.

Além destes itens, existem outros de metodos para se identificar ou previnir erros para proporcionar meios coerentes para uma experiência perfeita. Claro, cada UX Designer acaba por criar metodologias próprias, mas novas dicas são sempres bem vindas ;D

Quem leu isto também leu:

• Como melhorar a usabilidade no seu layout
• Mega sorteio Design Blog e Adobe!
• Código comentado salva vidas!

]]>

Nas palavras de Chapman:

Como web designers e web developers, o que a internet reserva para os usuários no futuro é de vital importância para nossas vidas. Se o futuro da web implica em mudanças radicais para todos, precisamos entender como isto vai afetar o que fazemos como meio de vida e o que vamos precisar mudar em nosso trabalho para não ficar de fora – se é que é possível.

“O futuro é conteúdo e informação”

Se você for como a maioria dos consumidores tecnológicos atuais, você possui um smartphone – um aparelho móvel (celular) que pode acessar a internet. Seja um aparelho da Apple (iPhone, iPod Touch, iPad, etc), um Android ou até mesmo um Blackberry se você for um executivo empresarial, você tem acesso aos seus projetos profissionais e pessoais – como checar e-mail ou procurar entretenimento. E a autora questiona: “Quanto disto você faz pelo navegador do seu celular?“. A resposta é provavelmente “não muito“.

Usamos apps (aplicativos) específicos para checar e-mail, apps para verificar seu status no Facebook, Twidroid, Tweetdeck ou Gravity para atualizar o seu Twitter, apps específicos para ver vídeos no YouTube, Pandora ou Last.fm para escutar música.

Até mesmo nos desktops ou laptops estamos cada vez mais usando aplicativos para acessar alguns serviços – desde o GMDesk que acessa o seu GMail até o Tweetdeck para ver o seu Twitter. Temos até opções como o Fluid ou Prism para transformar qualquer site em um aplicativo independente do navegador. Sem contar o Google Chrome OS que transforma seu computador em um navegador, rodando aplicativos nas nuvens.

E as versões de sites móveis? Muitos deles são similares entre si, sendo que a única coisa que muda é o conteúdo. E não é por menos: quem acessa por aparelho móvel acredita que o design é irrelevante. “Por quê?” você se pergunta. A resposta é simples: eles estão acessando o site móvel exclusivamente pelo conteúdo. Claro que isto não quer dizer que não apreciem um bom design, desde que a interface não complique ou interfira com a habilidade do usuário encontrar o que precisa.

Agregadores são o futuro / presente da web

O que são estes agregadores? São serviços como o Google Reader, Twitter e Facebook. Eles juntam o conteúdo de diversas fontes e apresentam sob uma única interface.

Veja o caso do Facebook: você raramente precisa sair do site para ter acesso ao conteúdo postado lá. Vídeos? Assista diretamente online. Feeds RSS? Você mal sai do Facebook para ler.

Nossos inimigos?

O Google é pior ainda neste caso. É só ver a quantia de produtos que eles oferecem. Muitas vezes você nem precisa sair da página de busca para conseguir uma informação. Em breve, você poderá ver o conteúdo do que você buscou direto pela página deles.

Nem tudo é desvantagem para os donos de sites

Claro que com a queda de acessos ao site, a publicidade (como o Google AdSense) cairá. Em contrapartida, o consumo de banda de cada site será muito menor. Sem a transferência de gráficos, folhas de estilo CSS e processamento de informações, consumo de banda será drasticamente reduzida.

Outra vantagem é o aumento do controle por parte do usuário. Eles podem definir como eles vão visualizar o conteúdo, não correndo mais o risco de ter que entrar em sites sem acessibilidade e não encontrar o conteúdo que precisam. Finalmente usuários com deficiências teriam uma presença muito maior na web.

O que isto tudo implica ao web designer?

O conteúdo passará a ser dinâmico. Ele não está mais limitado a um site somente. Com o RSS, você já pode acessar o conteúdo deste blog sem nunca ter que acessar ele (pelo nosso feed, por exemplo). E números não me deixam mentir: atualmente conto com 2.869 assinantes de feed que acessam o conteúdo do meu blog, chegando perto de ultrapassar os 3.000 acessos diretos diários que este blog possui. O Twitter é outro: são atualmente 4.700 seguidores que além de terem acesso ao conteúdo deste site, ainda podem acessar os vários links interessantes que publico diariamente.

E o que tudo isto representa a nós, web designers? Bom, se a web se tornar um lugar só de aplicativos e agregadores, a necessidade de se contratar um web designer será bem menor. Empresas não vão achar necessário contratar alguém para fazer um site quando eles podem apenas utilizar um template pronto e enviar todo o seu conteúdo para o Google, Facebook e Twitter.

Por outro lado, desenvolvedores vão passar por um “boom” de negócios. A procura pelo desenvolvimento de apps será muito maior. Claro que será necessário de um designer para que o app funcione, mas a demanda será muito menor do que para um site.

Como isto nos afetará, especialmente no Brasil?

Não dá pra negar que muito do que a Chapman falou é verdade. Houve um aumento significativo de aparelhos móveis com acesso a internet e o Twitter tem se tornado um serviço muito popular aqui no Brasil. No entanto, o Brasil ainda está muito atrás dos Estados Unidos e Europa no quesito “usuários de tecnologia”. Por exemplo, o Facebook está tendo uma participação de mercado brasileiro que aumenta a cada dia, mas ainda é muito inferior ao Orkut. O povo brasileiro ainda é leigo quando o assunto é a nova tecnologia.

Mas é só ver os números: como falei, tenho uma média de acessos diários de 3.000 visitas únicas. Assinantes de feed, chega a quase 2.900. Já no Twitter, tenho 4.700 seguidores. As pessoas estão passando a preferir poder centralizar todos os seus sites em um lugar só. E a tendência é que mais pessoas passem a aderir a estas formas de visualizar conteúdo.

Ao contrário dos Estados Unidos e Europa, acredito que estamos pelo menos a 3 anos de distância de termos um público móvel igual ao público que acessa pelo desktop. E talvez 5 anos para que o público móvel ultrapasse o número de acessos de quem acessa pelo navegador. Isto não quer dizer que devemos passar a ficar preocupados apenas por volta do ano de 2014!.

Claro, o web design não vai se tornar algo obsoleto nos próximos 10 anos, mas talvez a necessidade de se contratar um web designer caia bastante. Temos que ficar por dentro do que está acontecendo na web e como ela está mudando. Precisamos ficar atentos e tentar inovar onde for possível.

Uma coisa eu posso garantir: quem parar de estudar hoje, estará sem emprego até julho de 2012.

E você? Acredita que há um lugar para web designers na web do futuro? Ou já estamos perdendo espaço na web atual? Comente!

Quem leu isto também leu:

• Código comentado salva vidas!
• Mega sorteio Design Blog e Adobe!
• Design Blog Podcast – Episódio 04

]]>

Qual animal você acha que o Design Blog seria? Deixe um comentário abaixo explicando por que!

Quem leu isto também leu:

• Salve a Web, por favor
• Como melhorar a usabilidade no seu layout
• A guerra entre developers, designers e gerentes

]]>

Briefing e contrato em mãos!

Com o briefing em mãos, está na hora de criar o mapa do site e fazer um brainstorming. É importante manter seu cliente a par do que você está fazendo para que ele saiba o que está sendo feito. Se você desaparecer durante as primeiras semanas, seu cliente vai começar a enviar e-mails ou ligar para o seu telefone para saber como que as coisas estão indo. Caso você atualize-o constantemente, ele se sentirá mais seguro em relação ao seu trabalho.

Cobrando o cliente nas datas certas

É importante que você lembre as datas de cobrança. Para isto, utilize lembretes como os disponíveis no iCal (para Mac) ou até mesmo configure o Google Calendar para lhe enviar um lembrete três dias antes do vencimento de cada parcela. Dois dias antes, envie o e-mail de cobrança ao seu cliente para que ele lembre de pagar no dia.

Peça para que confirme o pagamento, assim você pode deixar anotado em seu calendário que ele efetuou o pagamento. Aproveite e agradeça toda vez que ele pagar ;)

A metade do projeto

Chega um ponto do projeto onde você já tem tudo quase pronto: o design foi aprovado e codificado em CSS/HTML e agora basta acertar os detalhes finais. Essa é uma das partes mais demoradas.

Os detalhes são os mais demorados

É importante fazer o seu cliente parte deste processo final para que ele possa verificar se está tudo como planejado.

Comece a fase do beta-testing, onde você analisa se o site funciona em todos os navegadores mais atuais, assim como sistemas operacionais diferentes. O Adobe Browser Lab é uma ótima ferramenta que permite que você teste em navegadores e SOs diferentes sem ter que instalar nada.

Lance o “Release Candidate”

Assim que o site estiver pronto e você acha que já dá pra deixá-lo visível ao público, vá fazendo testes variados com seu cliente. Acesse todas as páginas, reveja todo o conteúdo. Peça para que seu cliente tire um tempo para navegar pelo site todo quando ele tiver um tempo livre – evite de fazer isto durante uma reunião com ele, para que ele possa focar melhor.

Revendo o site durante seu tempo livre, o cliente pode se focar inteiramente no site e verificar tudo com calma. Assim não ocorre do cliente olhar tudo rapidamente e aprovar, pedindo para fazer alterações mais tarde, quando o contrato já expirou.

Colocando no ar e última cobrança

Pronto! Basta publicar o site a todos e fazer a cobrança final (se houver). Mas não pense que acabou! Se você quiser ter um serviço diferente, ainda existem mais coisas que podem serem feitas.

Manutenção e serviços adicionais

Ofereça serviços de manutenção ao seu cliente. Estes serviços podem variar de atualizar o código do site quando necessário até atualizar fotos dos produtos. Você pode oferecer um valor mensal fixo ou um preço especial por atualização. No entanto, lembre ao cliente que após o site ser publicado, alterações maiores no design e no conteúdo devem ser orçados a parte como um novo projeto.

Serviços adicionais podem incluir um acompanhamento de visitas e SEO (seu site já deve ter SEO, mas lembre-se que estas otimizações devem ter um acompanhamento constante para melhores resultados).

Agora sim, acabou. Seu projeto web foi entregue, o cliente adorou seu trabalho e você está feliz. Parabéns!

Quem leu isto também leu:

• Como lidar com projetos web? Parte 1
• O que clientes esperam que web designers saibam
• Como melhorar a usabilidade no seu layout

]]>

Uma das perguntas que mais recebo no meu e-mail é “Como que lido com projetos web?”. Muitos web desigers conseguem um cliente mas não sabem o que fazer dali em diante. Neste post vou explicar tudo que você precisa saber para que seu projeto flua sem nenhum problema.

O contrato: definindo tudo antes do início

Contrato: peça fundamental

O contrato é de extrema importância e muitas vezes é ignorado pelos web designers (e até mesmo os outros designers das outras áreas). Ele serve para proteger o seu interesse como profissional e os interesses do seu cliente. Eis algumas coisas que devem ser explícitas no contrato:

Descrição do projeto, revisões e layout

O que seu cliente está contratando? Explique todo o processo, desde o briefing até a geração de alternativas e finalmente o formato de entrega do projeto. É muito importante que você deixe claro em relação as revisões. Quantas revisões que seu cliente terá direito de fazer pelo preço acertado?

No xCakeBlogs, oferecemos até duas revisões pelo preço acertado. Por que? Pois alguns clientes abusam e não aprovam a primeira versão do layout, não aprovam a segunda e ainda pedem mais alternativas. É por isto que, se não for aprovado da primeira vez, revemos o briefing com o cliente para ver o que nós entendemos errado. Pedimos que o cliente faça uma crítica construtiva e compare com o briefing que ele enviou. É importante para sabermos o que foi feito de errado por nossa parte (ou se o cliente estava indeciso na hora que escreveu o briefing). Caso passe das duas revisões sem sucesso, informamos que novo pagamento e novo briefing deverão serem feitos. Isto fica explícito no contrato.

Pagamentos

No contrato deve estar escrito se a forma de pagamento é à vista ou parcelado (que é combinado previamente). Independente de qual for, deixe claro quando cada pagamento é feito. Se for a vista, peça para que seja pago no início do projeto para evitar que o cliente desista no final e não te entregue nada, e se você quiser ofereça algum tipo de remuneração em caso de desistência (por exemplo, 50% do valor pago ou a porcentagem de acordo com quanto do projeto já foi feito). Se o pagamento escolhido foi parcelado, informe as datas de pagamento de cada parcela e o valor delas.

É importante que você sempre peça um valor adiantado, independente de quem for o cliente. Até mesmo parentes podem tentar te passar a perna!

Direitos autorais e copyright

Quem terá o direito autoral sobre o que foi criado? E quem terá a responsabilidade sobre o uso de fontes, fotos, arquivos vetoriais, etc? É ideal que, caso o cliente fornecer as fotos e fontes para serem usadas no layout, você deixe claro que o direito autoral é de responsabilidade dele. Já vi acontecer designers serem ameaçados de processo por terceiros pois seu cliente usou uma imagem deles como fundo para o site sem o consentimento do autor.

Prazos

Defina os prazos para cada etapa e data para entrega final. Lembre-se de dar uma margem de segurança, pois raramente o projeto é entregue exatamente na data prevista. Algumas vezes o cliente demora para preencher o briefing ou para aprovar uma das revisões, atrasando todo o processo. Deixe claro que, se o cliente não obedecer o cronograma (você deve definir a data limite para ele enviar o briefing, enviar o material para ser usado, aprovar as revisões, etc), você não deverá ser culpado pelo atraso na entrega.

Aprovação final

Consiga uma assinatura ou assinatura digital na versão final antes de ir ao vivo. Isto vai te salvar muita dor de cabeça se algo estiver escrito errado ou existe algum problema no código. Além do mais, isto dá ao seu cliente a confiança que ele precisa. Caso algo estiver errado após a aprovação final, você poderá cobrar adicional.

Cancelamento de projeto

Outra forma de se assegurar caso o projeto seja cancelado. Afinal de contas, você não pode ser lesado pelo tempo gasto com algo que foi cancelado antes de você receber uma compensação decente.

Os contratos não precisam ser sempre assinados e enviados via correios. Hoje em dia, a justiça já permite o uso e-mails como documento legal, então se seu cliente aprovar o contrato via e-mail já é válido (só não vale mensagens instantâneas como MSN ou “aceitação verbal”).

Existem muitos modelos de contratos disponíveis na web, basta dar uma procurada.

O briefing

Muitos designers pulam a parte do briefing por ser algo que as vezes o cliente demora a respoder, então eles fazem tudo às cegas. E isto só pode resultar em desastre.

Nem sempre é fácil entrar na cabeça do cliente, e isto será o seu salva-vidas. Pode até ser um briefing pequeno, mas com as perguntas certas você vai poupar muito tempo ao seu cliente e a você mesmo. O bom que briefings curtos podem até ser feitos via telefone (lembre-se de anotar tudo que ele falar!). Eis algumas coisas que você pode incluir em seu briefing, mas lembre de adaptá-lo aos projetos específicos que você faz.

Especificações técnicas

Dimensões, alinhamento e tipo de largura. Geralmente o cliente não vai ter idéia do que ele quer nesta parte, então nós no xCakeBlogs não colocamos este tipo de pergunta no briefing. Caso o cliente queira especificar que ele quer um layout com largura fluída, por exemplo, ele irá especificar isto de qualquer forma.

Pergunte também sobre domínio e hospedagem (seu cliente já possui? Caso não tenha, ele aceita sugestões?). Você irá fazer o upload da versão final do site, ou isto fica a encargo do cliente?

Conteúdo

Um mapa do site é bom. Peça que seu cliente defina quais páginas que serão criadas e o que ele terá de conteúdo. Se você ver que a estrutura não é das melhores, ofereça alternativas antes de começar o projeto.

Peça para que ele informe todo o conteúdo neste momento. Textos, logo, fotos, etc. Caso não esteja no contrato, informe-o que o texto precisa estar revisto e corrigido, e que as imagens já devem vir tratadas – tudo em formato digital! Já tive clientes me enviando texto escrito a mão (caneta e papel!) e fotos impressas. Quando falei que teria que cobrar para digitalizar tudo, o cliente ficou pasmo – afinal de contas, ele tinha escrito todo o texto no computador e, como não tinha impressora, passou tudo para o papel. As fotos? Ele também tinha em formato digital mas mandou revelar só para me entregar. Acho que ele nunca ouviu falar de “e-mail”.

Outra coisa que você pode pedir é todo o material de marketing prévio da empresa para você ter uma idéia de como eles administravam a comunicação empresarial no passado.

Dados de marketing

Público-alvo, percepção atual da empresa e percepção desejável, estilo, cores e formalidade do design. Além disto, a diferença entre eles e as empresas concorrentes.

Esta parte da diferença entre eles e as empresas concorrentes nem sempre pode ser algo claro. Muitas vezes o cliente procura defender sua empresa como se você fosse um comprador em potencial. É necessário lembrar ele que você precisa das informações reais. Se o preço do produto do seu cliente é maior do que do concorrente, por que é assim? Informe seu cliente que ele não precisa defender as diferenças, pois isto não vai lhe ajudar muito. A questão do preço por exemplo, pode ser por que a qualidade é maior (neste caso, você pode deixar o site com cara mais de “exclusivo”).

Peça por referências também. De preferência, referências do gosto do cliente. Em seguida, você vai analisar se as preferências pessoais do seu cliente são similares às preferências do público-alvo dele. Se notar uma diferença muito grande, informe isto. É importante ele saber que o site não é para agradar ao gosto pessoal do dono, mas sim ao gosto do público-alvo.

Amanhã continua o artigo. Fique ligado! Assine o feed RSS para não perder!

Inspiração: Onextrapixel

Quem leu isto também leu:

• Como lidar com projetos web? Parte 2
• O que clientes esperam que web designers saibam
• Como melhorar a usabilidade no seu layout

]]>

Tipografia na internet sempre foi uma coisa meio problemática. Apesar dos diversos métodos existentes hoje em dia, até bem pouco tempo atrás as opções eram realmente limitadas. Navegadores que não renderizavam direito, regras CSS pouco conhecidas e usadas, layouts feitos em tabelas. Tudo isso atrapalhava a informação que dificilmente era apresentada de uma forma aceitável.

E, na minha opinião, a tipografia é o maior alicerce do webdesign. Quando apresentamos conteúdo numa página, na grande maioria dos casos estamos trabalhando com alguma forma de texto. Lidamos sempre com palavras. E por isso eu considero uma das habilidades mais louváveis de um bom webdesigner, fazer bom uso da tipografia.

Este artigo é sobre algumas técnicas para facilitar o seu trabalho na hora de criar/desenvolver uma boa tipografia na web. A começar pelas fontes.

Nota: Curiosamente, enquanto eu escrevia esse artigo, eu me deparei com mais dois artigos na internet que tratavam de temas muito parecidos. Um em português e outro em inglês. Apenas gostaria de citá-los aqui porque, de alguma forma, eles influenciaram o que eu estava escrevendo e também porque são duas ótimas fontes sobre algumas técnicas aqui descritas.

Web-safe fonts

Na época em que o CSS2.1 foi desenvolvido, não havia muita necessidade de uma especificação para usar fontes no CSS que não as do sistema operacional (na verdade até havia o rascunho do @font-face, mas acabou não indo pra frente). E com isso em mente foi convencionado o que se chamou de web-safe fonts. Um grupo de fontes que… mais ou menos… estavam nos sistemas operacionais mais comuns. Mais ou menos porque as fontes eram parecidas, mas não as mesmas.

Felizmente a propriedade font-family (ou apenas font) aceita substitutos caso a fonte específica não seja encontrada. Por isso quando declaramos uma fonte da maneira convencional, precisamos da versão windows, Mac e uma genérica caso as duas primeiras não existam.

font-family: Helvetica, Arial, "sans-serif";

Seria um trabalho cansativo ficar descobrindo qual fonte combina com qual em cada sistema operacional. Alguns softwares (como o Adobe Dreamweaver) até montaram stacks de fontes para ajudar. Mas, na minha opinião, este é o melhor stack de websafe fonts já feito. Reparem como até separação por título e parágrafo foi pensada. Esse autor realmente merece ir para o céu.

Image Replacement

Isso é usado geralmente em sites estáticos quando queremos que um título (por exemplo) dê lugar a uma imagem. Em resumo basta definir o elemento como block, aplicar a imagem de background e empurrar o texto 9999px para a esquerda com text-indent. Uma dica: se o elemento for um link, overflow:hidden; previne que uma caixa pontilhada que some no lado esquerdo da tela apareça quando clicado.


#logo{
display:block;
background: url(logo.png) transparent;
width:100px;
height:100px;
text-indent:-9999px;
overflow:hidden;
}


Substituição por Javascript/Flash/PHP

Essas são técnicas (bem elaboradas eu diria) para se resolver o problema das web-safe fonts. Mas nenhuma é perfeita.

As mais comuns são Sifr, Cufón e FLIR.

SIFR basicamente utiliza Flash para renderizar as fontes e javascript para colocá-las no lugar correto. Infelizmente requer que o usuário tenha javascript e flash habilitado. Cufón utiliza o elemento Canvas do HTML5 e VML no Internet Explorer para renderizar o texto com a fonte selecionada, mas o texto não pode ser selecionado. FLIR envia uma request ao servidor (PHP apenas) para criar uma imagem com o texto de marcação usando a fonte que você quer. Mas denovo… nada de texto selecionável.

Para saber mais a respeito dessas técnicas:

• Tipografia em sites com conteúdo dinâmico
• Cufon vs sIFR vs FLIR

@font-face

Ah… A grande esperança da tipografia de qualidade na internet.

Essa é a minha propriedade favorita do CSS3. Primeiro porque já podemos usá-la e ela funciona corretamente em todos IEs (com a extensão EOT infelizmente, mas já é alguma coisa). Segundo porque finalmente podemos usar a fonte que quisermos na web. Claro, com as devidas restrições de direitos autorais. Mas o interessante é que já existem sites especializados em distribuir fontes grátis usadas no @font-face.

• Font Squirrel (meu preferido)
• 10 Great Free Fonts for @font-face embedding
• Fonts available for @font-face embedding

Como usar

Para usar o @font-face, primeiro precisamos definir a fonte num seletor separado e depois declarar normalmente no elemento desejado. É importante utilizar o formato TTF(padrão) e EOT(formato fechado utilizado pela microsoft). Assim, garantiremos que ela funcionará em todos os navegadores modernos.

Por exemplo:


@font-face{
font-family: Alexandria;
src: url(Alexandria.eot);
src: local(Alexandria), url(Alexandria.ttf) format(“opentype”);
}

p{
font-family: Alexandria, serif;
}


Além disso, algumas empresas como o Typekit oferecem fontes de qualidade por uma mensalidade (ou de graça no plano básico) para usar em seus projetos.

Problemas

O único problema ainda na versão atual do @font-face é que em alguns navegadores ele é dependente do anti-aliasing do sistema. Por exemplo, no firefox 3.5 num windows XP com a opção cleartype desligada, a maioria das fontes fica horrível. Por sorte, do Windows Vista em diante, a Microsoft optou por deixar o cleartype ligado por padrão. Mas o problema é que se for usada num site onde grande parte dos usuários utiliza windows xp, teremos problemas como esse aqui.

Eu não quis aqui apenas simplificar as possibilidades de tipografia na web. Mesmo porque esse é um assunto muito complexo para apenas um post. Apenas apresentei as melhores formas (na minha opinião) de mostrar as fontes num site.

No próximo artigo vou falar mais especificamente de CSS e do que é possível fazer com as propriedades para melhorar a aparência do seu texto.

Quem leu isto também leu:

• Código comentado salva vidas!
• A internet do futuro tem lugar para web designers?
• jQuery: o básico que todo designer precisa saber – parte I