A metodologia da 37signals é bastante eficiente no ambiente em que atuam, mas não completamente aplicáveis a qualquer cenário, como descrito por Jeff Croft.

Os produtos da 37signals possibilitam essa prática por serem aplicativos pequenos, com uma estética unificada e previamente estabelecida. Eles somente desenvolvem para eles mesmos.

O mais comum em nosso cotidiano é desenvolver websites diversos, cada um com suas peculiaridades e, na maioria das vezes, com uma identidade institucional própria. Nesse sentido é compreensível que a interface macro seja feita em imagem para análise de estratégias e também para definir uma base estrutural.

Conceber um novo produto, que tenha suas próprias formas e funções é mais compatível com uma ferramenta gráfica, como o photoshop. Por outro lado, é perda de tempo desenhar cada detalhe da interface de um projeto inteiro.

A prática de desenhar tudo em detalhes serve normalmente como forma de documentação, o que é desperdício de tempo, já que a chance de um projeto mudar em pouco tempo é altíssima. Muitas vezes uma home basta para saber como o site todo será, assim, já é possível avançar para a estruturação do código e das demais páginas, onde as mudanças normalmente não afetam a estrutura do layout e muitos elementos se repetem (ou são bastante parecidos) em um mesmo projeto.

Casos em que posso omitir o evento de uma aprovação formal, nem mesmo desenho uma página inteira. Deixo alinhamentos, tipografia e outros elementos pra serem tratados e refinados diretamente no código. O desenho (layout em imagem) serve muito mais como uma referência do que um arquétipo.

Reportagem Navegadores, Ago/09 [PDF]

Com frequencia são atribuídas novas funcionalidades e características aos navegadores, algumas valem a pena se aprofundar mais, pois serão padrões em breve. É o caso do HTML5, suportado por alguns browsers recentes e está começando a ganhar espaço.

Por outro lado, para garantir a adequação dos projetos no dia a dia, penso que basta se ater aos padrões web e desenvolver um código consistente, o mais semântico possível, com foco nos navegadores que seguem essa linha.

2 – Como vimos acima, existe uma oferta variada de navegadores à disposição dos usuários, sendo que o IE e o Firefox parecem atrair a maior atenção do público. De que maneira os browsers podem influenciar no desenvolvimento do design de interfaces?

Diferentes browsers influenciam o desenvolvimento pois divergem na renderização de fontes, espaços e margens.
É preciso saber onde essas diferenças vão interferir no seu layout e já prever formas de contorná-las.

Conhecer o funcionamento dos browsers para estruturar um código bem feito também pode resultar em melhorias de performance do website.

3 – Nesta discussão, a aplicação do conceito de cross-browser se torna fundamental para garantir que um projeto seja suportado pelos diversos navegadores. Diante disso, o que você consideraria imprescindível na aplicação correta deste conceito na construção de um projeto digital?

Nem todo projeto deve ser totalmente cross-browser. Sempre que posso, idealizo projetos visando os principais navegadores que seguem os padrões web. Em navegadores antigos o site deve apenas funcionar bem, ou se possível, nem isso.

Ao ajustar o código para navegadores arcaicos (como o IE6), estamos investindo em postergar sua obsolência.
Como desenvolvedores, podemos induzir a atualização destes navegadores priorizando o código para os navegadores atuais (nivelar por cima).

4 – Ainda sobre esse assunto, quais são os erros mais comuns que dificultam a adequação de projetos web ao conceito de cross-browser?

A aplicação dos padrões web permite que os sites funcionem e sejam vistos corretamente em quase todos os navegadores. O IE, o browser com maior predominância no mercado, apresentou até agora grandes deficiências na implementação destes padrões, ampliando a divergência de renderização.

Algumas características às vezes precisam de ‘hacks’ ou programação extra para funcionarem corretamente, o que interfere diretamente no tempo e custo de desenvolvimento.

As divergências seriam minimizadas se a atualização dos navegadores fosse contínua, induzida pelo próprio software, como ocorre no firefox, por exemplo. As últimas versões dos navegadores mais populares já seguem os padrões web (inclusive o IE8).

5 – Quais ferramentas você utiliza para testar a eficácia de seus projetos nos diferentes navegadores disponíveis pelo mercado?

• litmusapp.com
• netrenderer
• browsershots.org

6 – Além das funções de navegação, os plugins agregados ao Firefox o tornaram em uma ferramenta muito utilizada por profissionais de internet. Você também utiliza o Firefox como ferramenta de trabalho? Caso sim, quais plugins você recomendaria para quem deseja trabalhar com o Firefox?

Acho indispensáveis o uso dos plugins Firebug + Colorzilla.
Com estes, na maioria dos ajustes de código não é necessário abrir mais nenhum outro programa além do navegador (e o editor com FTP, claro).

7 – Quais dicas de leitura você daria para o profissional que deseja se aprofundar neste assunto (cross-browser, navegadores, renderização etc.)?

• Comparativo de tecnologias
• Opera Web Standards Curriculum
• blog tableless (Não é o principal tema)
• Os blogs dos respectivos navegadores também são úteis para acompanhar mudanças e novidades.

Siga o link abaixo para versão em pdf da matéria completa:
Reportagem Legibilidade, Mar/09

1 – Quais são os principais fatores que exercem influência na leitura visual de conteúdos digitais?

Conteúdos digitais normalmente são consumidos em concorrência com outros atrativos por estarem na web/pc/mobile, onde temos uma vasta gama de possibilidades para dispersão.

Ao navegar, estamos sempre “com pressa”, com frequência praticamos a leitura genérica e apenas se o conteúdo nos prender, damos atenção específica. Esse comportamento já é bastante conhecido e por isso devemos preparar conteúdos digitais para nos comunicar na forma mais breve, simples e incisiva possível.
Dessa forma, a tendência de se utilizar “menos” também se aplica ao conteúdo.

É pertinente lembrar que a leitura de textos na tela não é uma prática confortável, assim, podemos facilitar essa tarefa, se evitarmos uma disposição em que os textos atravessam a tela de ponta a ponta.

O uso de colunas, bem como quebrar o conteúdo em partes menores e utilizar tópicos em listas sempre que possível, são alguns recursos úteis para buscar maior clareza na apresentação dos textos e torná-los mais atraentes.

Além da legibilidade, temos que prover uma boa ‘leiturabilidade’, ou seja, garantir um bom nível de fluência durante a leitura dos elementos visuais da interface, buscando uma composição consciente e equilibrada.

2 – Um dos caminhos para garantir uma boa legibilidade em uma interface é a aplicação de espaçamentos e margens, além do adequado alinhamento dos objetos. De que maneira estes “conceitos” devem ser aplicados na concepção de uma interface?

Utilizar corretamente as áreas “em branco” é fundamental. Quando exploramos bem as áreas sem conteúdo, conseguimos destacar com maior facilidade as áreas de Informação. Áreas de respiro protegem os elementos de informação e acomodam o olhar durante a leitura.

O uso de grids também é um recurso inteligente para uma boa disposição dos elementos na interface.

3 – Outra questão fundamental envolve a escolha do tamanho da fonte e da família tipográfica a ser utilizada no projeto. Em termos de legibilidade, o que deve ser levado em consideração na hora de se definir esta etapa no processo de criação?

Atualmente é comum resoluções de tela maiores, isso nos permite utilizar com maior liberdade tamanhos diversos de fontes. Facilmente encontramos sites que utilizam chamadas e destaques textuais em tamanhos grandes, o que contribui com que determinadas informações sejam rapidamente notáveis. Dessa forma, podemos, apenas com o uso da tipografia, hierarquizar o conteúdo visualmente.

Ao escolher uma família, devemos ter atenção se ela foi projetada em determinadas formatações (bold/italic). Quando uma fonte não tiver algumas dessas variações, forçá-las pode trazer um resultado visualmente impreciso. É o que chamamos de “Faux Bold and Italics”.

Ao atribuir certas famílias tipográficas em textos com corpo reduzido pode fazer com que detalhes fiquem serrilhados, pois não se encaixaram perfeitamente na grade de pixels da tela. Neste caso, utilizar fontes não-serifadas (menor índice de detalhes gráficos nos tipos) ou projetadas especificamente para mídia digital são alternativas para se precaver de um resultado indesejado.

4 – Não podemos nos esquecer ainda do contraste de cores a serem utilizadas como plano de fundo e no uso das fontes. Em relação à percepção visual na web, quais seriam as recomendações na hora de se definir a combinação cromática de um site?

Uma boa prática é utilizar paletas com número reduzido de cores, com isso adquirimos com maior facilidade harmonia e consistência gráfica da interface como um todo.

Cores reagem de maneiras diferentes quando utilizadas em conjunto (contraste simultâneo), portanto, ao definí-las devemos evitar vibrações no contato entre as cores selecionadas. Um exemplo comum é o vermelho e verde, que, dependendo dos tons, podem apresentar vibrações que geram desconforto visual quando justapostas.

Dar atenção específica para a seleção das cores é essencial para adquirir um bom nível de legibilidade, além de contribuir com a acessibilidade do projeto.

5 – Quais são os erros mais comuns que podem prejudicar a legibilidade de um projeto interativo?

É bastante comum encontrar interfaces que não priorizam visualmente as informações de forma clara. As partes mais importantes do conteúdo devem ser facilmente notadas e nem sempre essa organização é feita com cuidado.

O uso inadequado de cores, contrastes, texturas (imagens), entre outros, são vistos todos os dias, além da frequente prática de saturar a interface com elementos decorativos, na maioria das vezes, desnecessários.

6 – Que tipo de testes você costuma realizar para medir a legibilidade de um projeto interativo?

Um método empírico que utilizo com frequência é visualizar o projeto em tons de cinza, assim, consigo analisar contrastes sem a interferência das cores. Testes básicos em diferentes OSs e browser também garantem a legibilidade em diferentes ambientes.
Mas o teste que considero o mais importante é o coletivo, pedindo opiniões e, de preferência, analisando reações das pessoas usando a interface.

7 – Citar dois bons exemplos de projetos interativos com boa legibilidade, justificando o porquê de sua escolha.

A List Apart – Site de artigos longos e grande quantidade de informações. Em um formato tradicional, mas que com a utilização de linhas e áreas em branco distingue claramente cada bloco de informação.
O uso de cores e variações tipográficas para links, títulos e outros, é bastante sutil e funcional. Informa visualmente a hierarquia do conteúdo.

twistori – Minimalista e vibrante, cada cor representa um filtro de sentimento, muito bem definido no menu.
Com a utilização do fundo escuro as cores se destacam e aguçam o sentidos que relacionam a cor selecionada às suas sensações.
O tamanho das fontes torna fácil a leitura e faz do texto o único elemento de composição da interface.

8 – Que tipo de bibliografia você indicaria para o profissional que deseja se aprofundar neste assunto?

Legibilidade é a clareza na identificação de elementos visuais, não se restringindo apenas ao uso de textos e está diretamente ligado à funcionalidade de uma interface. Leituras referentes a diagramação, o uso da tipografia como forma e composição são recomendáveis.

Para quem está começando, um livro bastante abrangente e que trata de assuntos fundamentais da comunicação gráfica de forma objetiva é o ‘Sintaxe da Linguagem Visual’, de Donis Dondis. Abrange temas como gestalt, semiótica, teoria da cor, tipografia, entre outros.

Já quem quiser uma abordagem mais prática e simplificada, uma boa pedida é o ‘Não me Faça Pensar’, do Steve Krug. O livro é bem-humorado e interpreta situações do dia a dia na prática do desenvolvimento de interfaces e também aborda formas eficientes de utilizar textos na web.

Especificamente sobre o uso da tipografia, há o ‘Tipografia: origens, formas e uso das letras’ de Paulo Heitlinger em que o autor discute a funcionalidade e estética das letras.

“Treat people like adults” at 37signals’ blog

mapa de calor de cliques gerado pelo crazy egg.

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..

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