Analizei a estrutura dos arquivos e fiquei entusiasmado. O projeto Blueprint é, sem dúvida, uma das melhores referências livres de CSS da atualidade.

O projeto é dividido nas seções que se seguem:

• Estilização de versões para impressão;
• Estilos para botões;
• Grid Layouts;
• Tipografia.

Planos futuros:

• Suporte a PNG para IE 5.5+;
• Desenho de layouts líquidos.

Vale a pena conferir, novamente, o link.

Blueprint é uma ótima solução para desenvolvedores experientes padronizarem seus trabalhos e para iniciantes pegarem o foco do que é, efetivamente, desenvolver para web semanticamente. :).

¹ – Para quem não entendeu, a frase diz: “seria demasiado difícil entender cada frase escrita”.

Pois é, assim como nossos antepassados pensaram inteligentemente ao desenvolver nossa grafia com espaçamento entre as palavras, nós, designers, também precisamos pensar inteligentemente ao dispor texto em um design. A dica aqui não vale só para o webdesign: qualquer forma de design com elementos textuais pode se valer dessa prática.

Espaço em branco como elemento do design

Um estudo realizado em 2004 mostra o quão importante é a correta utilização dos espaços em branco. No estudo, foram realizados testes de performace de leitura por usuários levando em conta quatro tipos de layout compostos de texto. De todos os layouts, o que compunha uma melhor definição tipográfica (margens e espaço entre linhas) foi, indiscutivelmente, a melhor solução de disposição de texto em performace de leitura e em capacidade de compreensão pelos leitores. Para os textos sem margens (aqueles que ficam colados nas laterais da viewport do browser, por exemplo), a peformace de leitura caiu substancialmente.

Espaço em branco, na realidade, é uma alusão aos espaços sem preenchimento textual e/ ou de imagem – que não compõe o design – que podem ser utilizados para melhor organizar a área ativa do site, ou seja, é toda área que é parte do design (seja em branco ou não) que não influe na interação com o usuário.

Usar espaço em branco não necessariamente é ter falta de conteúdo

É notório que quanto menos conteúdo, mais fácil se torna organizar os componentes de um layout. Conseqüentemente, mais fácil se torna, também, separar estes componentes em toda a área do layout. Acredito que esta realidade acaba por contaminar o pensamento que alguns webdesigners têm sobre layouts de muito conteúdo, fazendo com que sites do gênero sejam criados com dados enfileirados e empilhados, sem a preocupação com a segmentação e, principalmente, a separação destes. É importante lembrar que, quanto mais conteúdo se têm a diagramar, mais cuidado se deve tomar com a separação deste no layout. Nestes casos, os espaços em branco passam de parte meramente decorativa do layout, para parte imprescindível na construção de uma boa usabilidade e acessibilidade do mesmo. ;)

Atualização 2007/01/09: Mark Boulton acada de postar um artigo sobre espaços em branco no A List Apart. Vale a pena dar uma conferida.

A tipografia está diretamente relacionada com a característica visual de um projeto gráfico. Falando-se em web, especificamente, a adequação do estudo de tipografia à diagramação do projeto torna-se complementar, exatamente por este motivo. Todo belo design começa sempre com um belo conjunto de typefaces.

Por falar em typefaces…

Veerle Pieters, no úlimo @media 2006, já dizia:

Good designers use typefaces, great designers use typography

A abordagem citada por ela está ligada à colaboração dos typefaces no design. Nada de usar um typeface qualquer na hora de pensar em tipografia. O estudo dos typefaces está diretamente ligado à característica tipográfica e visual de um projeto.

Então a dica é não nos prendermos no básico. Devemos nos aprofundar na linguagem que os typefaces apresentam, adequando cada linguagem à cada característica visual que precisamos criar.

A importância da tipografia no design

George Everet, em um de seus últimos artigos, cita:

Graphic design is typography, derives from typography, and can’t exist without typography.

Pois é! Tipografia vai além da escolha de typefaces. Tipografia é todo um estudo de como apresentar dados textuais e, além disso, como transformar textos em UI.

Algumas características do estudo de tipografia:

• A linguagem dos typefaces;
• O alinhamento de elementos de textos, bem como a sua definição de margens;
• Espaçamento entre caracteres e linhas;
• A definição de tamanhos diversos de texto para cada área a compor no design;
• Cuidados com contraste entre texto e plano de fundo (backgrounds).

E por aí vai…

Tipografia como base do webdesign

Oliver Reichenstein, em uma série de (até agora) dois artigos, foi categórico: Webdesign é 95% tipografia!

Webdesign, realmente, é em grande parte composto somente de texto. Isso quando pensamos em texto não como conteúdo e sim como UI. Por isso a importância da definição de uma tipografia de qualidade.

Para finalizar, destaco um trecho interessante do segundo artigo de Oliver:

We don’t need to make sure that a website looks the same on all platforms!

Mais vale um texto legível e acessível, porém com o visual característico ao dispositivo que é utilizado, do que um texto mal formatado tipograficamente para, meramente, ostentar-se de um troféu de site exatamente igual em qualquer navegador. Deixemos isso para as áreas não textuais. Afinal, webstandards também é flexibilidade. ;)

Hora de Wireframes

Os wireframes, atrelado ao Design de Interação definido na fase de escopo, são, acredito eu, os principais elementos de qualquer projeto.

O Design de Interação trata de relacionar todo o fluxo que as páginas do projeto terão e os wireframes vêm como uma transformação visual para o diagrama criado. Tendo a base das páginas que serão necessárias (Design de Interação), agora é só desenhar uma estrutura visual para o conteúdo das páginas (wireframes), colocando os elementos do layout em locais específicos, levando em conta sua importância e relevância.

Costumo desenhar meus wireframes inicialmente em papel e depois prototipar estes desenhos em XHTML e CSS. Defino, assim, alguns mockup’s e templates para o projeto.

Os wireframes em XHTML são mais amplos por possibilitarem a definição de fatores que os em gráfico não possibilitam. O estudo da tipografia e a implementação das cores são alguns destes fatores.

Desenhar Wireframes é uma arte, pois deve-se tomar muito cuidado no posicionamento de cada elemento no canvas do layout. É importante sempre levar em conta fatores como Acessibilidade e Usabilidade.

Modelando o Banco de Dados

A fase de modelagem de banco de dados é outra que poderia ser adiantada, porém fazer uma modelagem logo no início pode causar sérios transtornos (não tenha dúvidas que depois de desenhar os wireframes muitas coisas mudam na estrutura de banco de dados). Um campo que nasce, uma chave que se move, sempre há o que reavaliar.

Os wireframes darão boa base para a estrutura que o banco de dados deve ter. Então, basta organizar as tuplas que porventura já estiverem criadas, adicionar as tuplas que nasceram no meio do caminho e definir os campos para cada uma delas. Costumo fazer esse processo também desenhando à mão, mas depois é sempre bom passar tudo isso para um DER mais bem detalhado.

Apresentando resultados

A cara do projeto acaba de nascer! Temos wireframes em papel ou em gráfico, templates e a modelagem do banco de dados. Chegou a hora de apresentar resultados.

Quando o trabalho se trata de um freelance, cuidados na apresentação devem ser tomados. Talvez não seja interessante mostrar wireframes em papel, a não ser que os desenhos tenham uma boa cara. De qualquer forma, acho mais interessante apresentar os templates em XHTML. Já no meio corporativo, onde os resultados podem ser discutidos entre os colegas e a chefia, vale qualquer um dos papéis, desde que bem organizados.

Neste momento um ciclo se inicia até a chegada num consenso para a apresentação ideal que o projeto deve ter. Revisões naturalmente podem surgir.

Relacionados

• Processo de criação web
• Processo de criação web: o escopo
• Processo de criação web: a identidade
• Processo de criação web: a diagramação
• Processo de criação web: o desenvolvimento

Para não ter problemas de compatibilidade entre fontes de PC e Mac para a família a ser criada, pode-se usar Times para fontes serifadas, Arial e Helvetica para fontes não serifadas e Courier para fontes monospace. Mas… Por que não fugir deste padrão em determinados casos?

Arrojando a família de fontes

Existem várias técnicas para usar fontes que não são comumente encontradas em computadores de usuários, mas estas são muito limitadas e muitas das vezes restringem-se apenas à estilização de títulos.

Na maioria dos casos, nada melhor que uma família de fonte bem definida. Uma “família de fonte bem definida” seria a criação de uma família que seja apresentada igual ou similarmente em PC's e em Mac's. Podemos usar, então, as web-safe fonts.

Usando um typeface web-safe

Typeface, basicamente, é o conjunto de caracteres, símbolos e ideogramas que formam uma fonte.

As typefaces possuem quatro famílias básicas. São elas: serif, sans-serif, monospace e display.

• Fontes serif são as que apresentam extensões decorativas nas extremidades de seus caracteres (pontas salientes). A fonte Times New Roman talvez seja a mais clássica das fontes serifadas.
• Fontes sans-serif são fontes não serifadas (sans vem do francês sem), ou seja, fontes sem as pontas salientes. A nossa boa e velha Arial está na lista das não serifadas.
• Fontes monospace são as que possuem os caracteres com mesma largura. Lembra-se das letras das máquinas de escrever? Pois então, elas são monospace. As fontes monospace são comumente utilizadas em programação para tipografar os códigos fonte.
• Fontes display são fontes ornamentais e decorativas. Ela desencadeia em outras famílias de fonte, como as coursivas (Comic Sans MS) e as fantasy (Impact), por exemplo.

As fontes web-safe são as instaladas por default em um SO e econtradas tanto nos PC's quanto nos MAC's. Para cada família de fonte, temos algumas fontes web-safe. São elas:

serif:

• Georgia
• Times New Roman
• Palatino

sans-serif:

• Arial
• Arial Narrow
• Arial Black
• Helvetica
• Trebuchet MS
• Verdana

monospace:

• Andale Mono
• Courier
• Courier New

display:

• Comic Sans MS
• Impact

Usando as fontes acima, a probabilidade de ter um layout com tipografia diferente entre PC's e MAC's é mínima. Lembrando sempre que a ordem de utilização das fontes e a família a ser usada deve estar diretamente relacionada à finalidade do site a ser criado.

Referências

• Browse Safe Fonts
• Motive Guides – Web typography

Antes de por em prática o desenho para o layout eu defini a forma como ele seria apresentado (tipografia, swatches e estrutura). O logo ainda não havia sido criado, mas já tinha a idéia de como fazê-lo (gostaria que fosse algo que pudesse ser usado tanto na web, quanto em outros trabalhos).

Tipografia

Optei por usar uma fonte de serifa para o logo, por estas terem um aspecto mais arrojado. Depois do troca-troca de fontes, cheguei à um denominador comum: Garamond. Por conta disso, o site também ganhou tipografia com serifa: família Georgia, arial, verdana, sans-serif Georgia, Palatino, "Palatino Linotype", Times, serif. Aproveito o ensejo para salientar que nem todo projeto deve se dar ao luxo de usar fontes de serifa. A boa e velha família verdana é a melhor opção quando o site deve atender à qualquer tipo de público. Mas cada caso é um caso, às vezes até a temida Times New Roman pode ser uma ótima pedida!

Cores

A escolha das cores costuma ser a primeira coisa que faço quando vou iniciar um projeto. Se o cliente já tem um logo, procuro me basear nas suas cores padrão. Se ele não o tiver, procuro me basear na identidade que o projeto deve ter. Mas isso não é uma regra, a criatividade costuma falar mais alto nessas horas.

Para este site, inicialmente, eu criei várias paletas de cores, alternando entre azul e algumas outras, como areia, marrom e até um pouco de verde. Cocei os dedos para colorir o layout, fiz algumas composições, mas no final me rendi ao clean. O resultado final foi: três tons de azul (incluindo o do logo), uma cor meio dourada para dar vida aos links e algumas tonalidades de cinza. O marrom também ficou, mas só de coadjuvante, aparecendo, apenas, no hover dos links.

Navegabilidade

A navegação foi estudada em conjunto com a composição do layout. Desde o início pensei que não seria interessante usar tamanhos fixos para as áreas de conteúdo. Não teria a ver com a característica do site. Como pretendia algo despojado, sem aquele aspecto duro que certos sites passam, nada melhor do que usar um layout flexível. E o conceito de flexibilidade me deu grandes idéias para o posicionamento do logo e do menu (na foto que inseri o logo não está na direita). A sidebar receberia o campo de busca logo acima e os arquivos logo abaixo. Na foto há mais alguns itens, mas estes só entrarão no ar daqui algum tempo.

Para completar a navegação, usei um área de conteúdo extra com um background mais chamativo no rodapé, porém sem exageros. Nela estão links gerais para acesso rápido no site, além de links externos.