interessante perceber que o link que é apenas um “+” azul no meu site é o 2o item que mais recebe cliques da home…

mapa de calor de cliques gerado pelo crazy egg.

typeface.js permite escrever em HTML e CSS como se os visitantes tivessem a fonte instalada.
O resultado gera imagens vetoriais pelo browser.

nao testei ainda, mas eh um bom começo… Ja me questionei algumas vezes sobre o fato de jah termos tecnologia pra tanta coisa incrível, mas não haver uma forma de embedar efetivamente uma fonte no html..

Revendo um material da época da facul do curso de tipografia, me intrigou ao lembrar vanguarda de Jan Tschichold e seus mandamentos ao defender a “nova tipografia”.

O movimento que vemos hoje, de web 2.0, funcional, simplicidade, clareza com o usuário e o desprezo de informações visuais desnecessárias, já eram teclas esmagadas por ele antes da 1a GM! (ok, .. nada de teclado!)

Revendo conceitos, podemos dizer que na verdade não se trata de “vanguarda”, mas sim de lógica, de fazer o óbvio. Minimalizar é consequência da preocupação com o objetivo maior que é comunicar.

Como faz mais do que sentido nesse post, dei uma enxugada nos mandamentos do Jan:

1. A nova tipografia tem cariz funcional
2. A função de qualquer tipografia é a comunicar na forma mais breve, simples e incisiva possível.
3. Para que a tipografia possa ser meio de comunicação social, requer organização.
4. As áreas livres (não impressas) do papel são elementos de comunicação de importância igual à das partes impressas.
5. A organização externa é a composição feita com os contrastes mais intensos [simultaneidade], através de formas, tamanhos e pesos diferenciados.
6. Um desenho tipográfico consiste na criação da relação lógica e visual entre as letras, as palavras e o texto a serem compostos num layout.
7. Podem utilizar-se linhas (barras) de orientação vertical e diagonal, como meios de organização interna.
8. A prática do diagramação elementar exclui o uso de qualquer tipo de ornamento, deve-se evitar o uso decorativo, pseudo-artístico e especulativo de elementos.
9. A ordem dos elementos deve basear-se na estandardização do formato dos papéis.
10. Quer na tipografia, quer em outros campos, o desenho elementar não é absoluto ou definitivo.

Agora, …gostaria de saber pronunciar o sobrenome dele ;)

Como nao poderia ser diferente, está no ar a nova versão do meu site, totalmente html dessa vez!
Por enquanto com poucos trabalhos, em breve atualizações ;)

já era mais que tempo de mudar… ufa!

Normalmente o principal objetivo de um site é publicar um conteúdo que seja indexável e acessível, fatores que são prejudicados ao escolhermos uma solução full-flash.

Hoje ainda é recomendável publicar uma redundância do site em html, o que afeta diretamente o custo do projeto. Com o custo e benefício inferior, essa decisão precisa ter uma boa justificativa.

O uso do flash é pertinente em casos específicos, como produtos de publicidade, que exploram o apelo emocional, ou ainda, para aplicações didáticas como e-learning, entre outras. Os recursos interativos que o flash oferece se bem utilizados, podem enriquecer a experiência destes produtos.

Porém, ainda é recorrente o desenvolvimento de flash sites que poderiam ser totalmente em html e evitar que elementos fundamentais, como o nome da empresa, tenham a mesma prioridade semântica que o texto “fechar” em algum lugar do site. Uma perda considerável por conta de uma ou outra animação, que na prática não traz nenhum beneficio para o usuário. Para estes casos, estão cada vez mais à disposição frameworks e outros recursos que possibilitam a prática de elementos dinâmicos, fazendo uso apenas de javascript.

Mesmo que os processos de indexação do conteúdo em flash estejam sendo aprimorados, se não há um real motivo para o uso do flash, devemos optar por soluções em html ou pelo menos híbridas, separando conscientemente elementos que podem ser omitidos nas buscas.

Daniel Blumenthal
www.blumenthal.com.br

A imagem abaixo foi feita puramente por css+html.
Não acredita? Copie o código aqui e cole em um arquivo html para certificar ;D

Autoria: romancortes.com/blog/homer-css/

27 de abril é a dia do aniversário de fundação do ICOGRADA (International Council of Graphic Design Associations) e desde 1995 é celebrado como o Dia Mundial do Design Gráfico (World Graphics Day).Aos que inspiram/respiram design gráfico diariamente eis a oportunidade de comemorar!

PS. Alguns posteres comemorativos no site http://icograda.org/events/archive/category18.htm
+PS. O dia mundia mundial do design industrial (World Day of Industrial Design) é 29 de junho.

Quando: 8 a 11 de outubro de 2008
Onde: São Paulo
Oq: Congresso Brasileiro de Pesquisa e Desenvolvimento em Design. Maior congresso na América Latina na área do Design, é um evento bianual voltado para a discussão da pesquisa e ensino de design no Brasil.

Categorias:
1. Teoria e crítica do design
2. História do design
3. Metodologias do design
4. Pedagogia do design
5. Projetos em design
6. Design e tecnologia

Instruções
O processo de submissão e avaliação em blind review dos trabalhos será realizado eletronicamente via sistema JEMS. Todas as instruções para submissão de artigos serão divulgadas no site do evento: www.sp.senac.br/ped2008.

A terceira edição da Bienal Latino-Americana de Tipografia, a Tipos Latino, receberá as inscrições até o dia 15 de fevereiro de 2008. Os tipógrafos interessados poderão inscrever seus trabalhos nas modalidades “Design de fontes latino-americanas” e “Design com fontes latino-americanas”. Os projetos inscritos deverão ter sido publicados entre abril de 2006 e fevereiro de 2008.

Serão selecionados 70 trabalhos de desenvolvimento de fontes latino-americanas e dez projetos com uso de fontes latino-americanas. Os escolhidos participarão da exposição que irá compor o evento nas nove sedes da mostra.

A Bienal Latino-Americana de Tipografia ocorrerá, simultaneamente, no Brasil, Argentina, Chile, Colômbia, México, Peru, Uruguai e Venezuela, entre os meses de abril e julho de 2008. O Paraguai entrará na lista como país convidado.

O evento pretende criar um espaço de celebração, estímulo e divulgação do design tipográfico desenvolvido na região. Com isso, será apresentado um ciclo de exposições, palestras, oficinas e visitas monitoradas.

Os trabalhos selecionados serão publicados no site e nos catálogos da bienal. O regulamento e formulário de inscrição estão disponíveis no site.

Quando: Até 15 de fevereiro de 2008
+ Informações: www.tiposlatinos.com

Algumas conclusões adquiridas em pesquisas de Eye-tracking podem ajudar a aprimorar o design de interfaces

1. Textos atraem atenção antes das Imagens. Maior parte dos usuários chegam em um site procurando por informações, não imagens.
2. Inicialmente os olhos focam no canto superior direito da página.
3. Usuários olham para o topo esquerdo e percorrem movendo para direita inferior no formato de um “F”. Certifique-se de que os elementos importantes estão localizadas nessas áreas-chave para manter os leitores envolvidos.
4. Banners são ignorados. Geralmente mantém o foco por poucos segundos.
5. Formatações enfeitadas são ignoradas. Usuários confundem com anúncios e acham que nestas áreas não irão encontrar as informações que ele precisa. Manter o site racional, sem extravagância para não confrontar com os elementos mais importantes.
6. Mostrar números numericamente. São identificados muito mais rápido do que números por extenso.
7. Tamanho das fontes influenciam no comportamento. Fontes menores aumentam o foco (específico) enquanto fontes maiores induzem a varredura dos olhos (geral). O uso adequado irá depender da necessidade.
8. Usuários apenas olham para um sub-título se lhe interessar. Apenas inserir subtítulos para informações que possam ser relevantes.
9. Pessoas geralmente percorrem até partes inferiores da página. Para tirar vantagem disto, pode-se oferecer algo que o prenda ao longo da página. Destaques ou listas com marcadores podem demostrar que as informações são facilmente achadas no site.
10. Parágrafos curtos têm melhor desempenho do que longos. Informações devem ser concebidas para o curto tempo de atenção dos internautas. Mantê-las enxutas sempre que possível é fundamental.
11. Formatos de 1 coluna fixam mais os olhos do que os de várias colunas. Não sobrecarregar o visitante com muita informação. Muitas colunas poderão ser ignoradas pelos usuários. Evitar ruídos com a simplificação realmente é melhor em alguns casos.
12. Anúncios no topo esquerdo da página receberão maior atenção do olhar. Integrar anúncios no canto superior esquerdo aumentará sua visibilidade. Claro que não necessariamente serão clicados, portanto, não sacrifique o visual para ganhar visibilidade extra.
13. Anúncios posicionados próximos ao conteúdo principal são vistos com mais frequência.
14. Anúncios em texto foram intensamente mais vistos do que qualquer outro tipo testado. Não distraem e misturam-se com o conteúdo da página, são visualmente menos irritantes e mais aceitos.
15. Imagens grandes chamam mais atenção. As pessoas se interessam mais pelas imagens em que podem ver detalhes e informações claras. A maioria dos usuários têm conexão banda-larga atualmente e não sentem receio em optar por ver imagens grandes.
16. Imagens “limpas” atraem a atenção dos olhos. Obras de arte podem não atrair tanto o olhar das pessoas. Ao usar fotos de pessoas, prefira fotos limpas, de fácil compreensão. Inclusive, fotos com pessoas “reais”, e não modelos, têm melhor performance.
17. Títulos direcionam os olhos. Primeiras informações buscadas pelos leitores ao longo da página.
18. Usuários gastam muito tempo olhando para botões e menus. Por isso vale a pena dedicar tempo extra para garantir que serão bem concebidos, afinal, não só apresentam alto grau de fixação dos olhos, como também é um dos mais importantes elementos do site.
19. Listas prolongam a atenção do olhar. Quebrar os parágrafos em listas mantém os usuários mais concentrados. Usar números ou marcadores para destacar as informações mais importantes torna o site mais fluente e facilita que o usuário encontre as informações que procuram.
20. Longos blocos de texto são evitados. Estudos mostram que internautas não investem tempo lendo blocos longos, por mais relevante que possam ser. É preciso quebrá-los. em parágrafos menores, destacando áreas específicas.
21. Formatação pode chamar a atenção. Diferenciar a formatação de um texto destaca uma determinada informação, porém use com moderação para não tornar a página difícil de ler.
22. Espaço em branco é bom. Deixar áreas livres de qualquer informação, mantém as coisas simples e permite melhor acomodação visual.
23. Ferramentas de navegação funcionam melhor quando posicionadas no topo da página. Torna a navegação fácil de encontrar.

Texto original: Scientific Web Design: 23 Actionable Lessons from Eye-Tracking Studies, de Christina Laun - Dica do Vitor Lourenço

Site que escreve texto usando elementos achados no Google Maps como tipografia para enviar cartões virtuais. ver

Colaboração - Se achar alguma “letra” no maps, pode enviar pra eles: geogreeting@gmail.com

Nada de área de respiro, ou espaços em branco, afinal, vc paga pelo layout e não pra deixar “em branco”!

o início de uma nova era!

O Aharef disponibiliza uma ferramenta em que vc “traduz” o código html de um site graficamente. Abaixo, o resultado obtido por este blog:

onde,
azul: número de links (tags “a href” )
vermelho: número de tabelas
verde: número de tags DIV
violeta: número de imagens
amarelo: número de forms (FORM, INPUT, TEXTAREA, SELECT e OPTION)
laranja: quebras de linha e indentações (BR, P e BLOCKQUOTE)
preto: HTML tags
cinza: outras tags

Ele também sugere contribuir uma galeria com estas imagens de diversos sites.