Mark Boulton é designer gráfico e já trabalhou em empresas como a BBC, a T-Mobile e a British Airways. Lançou recentemente o livro A Pratical Guide to Designing for the Web que recomendo vivamente a quem quiser saber mais sobre o design para a web, da tipografia à teoria da cor, passando pelas grelhas, está lá tudo. A apresentação de Mark Boulton foi sobre um dos temas quentes do momento, Font Embedding. E também sobre Tipografia, é verdade.

Apaixonado pela tipografia há muitos anos, Mark explicou que um dos trabalhos que teve, ainda na faculdade, foi descrever as suas memórias passadas recorrendo à tipografia. Pode parecer estranho à primeira leitura mas para ele faz todo o sentido, uma vez que cada tipo de letra, bem como as suas propriedades, pode transmitir diferentes sensações e estímulos a quem lê.

Como humanos criamos estruturas para nos ajudar a lidar com as coisas. Na web acontece a mesma coisa. A organização permite criar uma lógica nos sites que os tornam mais simples e fáceis de utilizar.

Os tipógrafos eram os Arquitectos de Informação antes estes aparecerem.

Actualmente durante a concepção da maioria dos sites a tipografia apenas é considerada nas etapas finais do projecto. Na opinião de Mark a tipografia devia ser incluída em todas as fases dos projectos, pois é esta que vai transmitir a mensagem. É como subir o Evereste, mas de forma estruturada, uma coisa de cada vez. A escolha errada do tipo de letra vai afectar o resto da estrutura.

Na web os designers não controlam os tipos de letra utilizados pois estes variam consoante o dispositivo a partir do qual se acede aos sites. Solução? Font Embedding! Mas este é um assunto delicado já que as fundições detêm os direitos sobre a maioria dos tipos de letra existentes e são corporações enormes e com processos de licenciamento demasiado complexos e demorados para satisfazer as necessidades actuais dos designers.

Comics Sans: a culpa não é tua! Foste vítima de abuso!

Depois do almoço, com o Rich Clark, um dos membros do HTML5 Doctor, o Darren Bailey e alguns elementos da ClearLeft foi a vez de Dan Rubin, User Interface Designer para a Sidebar Creative apresentar Designing Virtual Realism.

A apresentação focou-se essecialmente no design de interfaces e de como as texturas que conhecemos do nosso dia-a-dia podem ajudar a melhorar a qualidade geral dos nossos sites, bem como a forma como os utilizadores se servem deles.

Falou no facto de o design estar presente em todos os produtos que utilizamos diariamente e que as nossas experiências passadas determinam a forma como nos relaccionamos com eles e como os utilizamos. O ambiente providencia contexto às coisas, ou seja, cada objecto pode ter diferentes utilizações e/ou interpretações consoante o local ou situação em que se encontra.

A forma com que utilizamos os diversos dispositivos faz com que a interacção com eles exija muito pouco da nossa mente. Utilizamos instintivamente, porque parece a melhor forma de o fazer, ou porque somos levados a isso? Se acha o os seus utilizadores são estúpidos, possivelmente o seu site/produto está mal concebido em termos de experiência para o utilizador. Devemos dar pistas visuais para os casos em que é possível a interacção. Os utilizadores agradecem, utilizando.

Aconselhou a utilização de texturas da vida real nos sites, para uma sentimento de maior familiaridade e explicou a forma como criou um dos temas WordPress disponível na WooThemes. Utilizou o scanner para passar para formato digital a textura de uma caixa de máquina fotográfica, uma embalagem a que achou piada e uma carteira. O resultado pode ser encontrado em New Theme Concept by Dan Rubin.

Na natureza tudo tem textura. Porque não no web design?

• O design está presente em todas as coisas;
• As experiências passadas afectam a forma de pensar sobre as diversas coisas;
• O ambiente providencia contexto, ou seja, interpretamos as mesmas coisas de maneira diferente consoante o local onde estamos e/ou interagimos com elas;
• Os dispositivos são encarados com extensões do corpo, ou seja, utilizamo-los sem termos de dispender grande esforço mental para o fazer;
• Acha o que os seus utilizadores são estúpidos? Possivelmente o seu design é que tem falhas graves;

O terceiro orador foi Jon Hicks, conhecido designer. Trabalha actualmente para a Opera Software como Senior Designer.

Na sua apresentação tentou apresentar a utilização de ícones de forma a melhorar a interacção entre os utilizadores e as páginas e não apenas como decoração. Falou da omnipresença dos ícones na nossa vida, desde a pré-história e de como a sua forma e modo de apresentação foi variando ao longo dos tempos e dos meios nos quais eram utilizados.

Alguns pontos essenciais da apresentação:

• A utilidade dos ícones para transmitir o estado actual de um elemento (mouse over, activo, inactivo, etc.);
• A facilidade dos ícones de produzir, imediatamente, uma reacção no utilizador (mediante a familiaridade com os mesmos);
• A utilização de convenções, também no ícones, permite que as mesmas definições sejam utilizadas em sites distintos;

Devemos utilizar ícones para:

• Resumir texto;
• Atrair a atenção;
• Explicar acções e comportamentos;
• Transpor diferenças de linguagem;
• Ajudar a navegação;
• … e adiccionar interesse!

Passou depois a descrever alguns dos seus processos na criação de ícones, actualmente o seu trabalho diário, desde a escolha da “metáfora” correcta para cada um dos ícones consoante o significado que se pretende obter, à existência, ou não, de convenções para determinados tipos de ícone, a recolha de inspiração dos mais variados sítios.

A parte da criação contempla o desenho de vários ícones, inicialmente com papel e lápis e depois transpondo-os para o computador que permite criar os ícones e testar as variadas combinações por forma a fazerem sentido e testar se, realmente, o significado que transmitem é o adequado à finalidade do mesmo.

Falou da necessidade de utilizar ícones que as pessoas facilmente reconheçam sem ter de haver explicação adicional, já que isso iria contra o principal factor que leva à utilização de ícones: a simplificação dos interfaces. A consistência dos ícones, as cores utilizadas consoante se pretende que chame a atenção ou que se mantenha discreto.

Finalmente falou dos diversos tipos de ficheiro utilizados os ícones, bem como dos prós e contras de cada um deles.

Podem encontrar os slides (pdf) e o post sobre a presentação em Icons for Interaction.

O segundo orador foi Simon Collison, fundador da Erskine Design e falou sobre aquilo que Andy Clarke apelidou de “The Ultimate Package – Traditional Techniques with a Twist”.

Os pontos-chave do “The Ultimate Package”:

1. Project Backbone
2. Collaboration
3. Audience Grouping & Actions
4. Project Methodology
5. Roadmap
6. Inspiring Creativity
7. Conventions
8. Prototyping
9. Single Focused Design Path
10. Conclusion

Na apresentação Simon falou dos processos que utiliza no seu trabalho diário para uma melhor colaboração com Greg Wood.

Falou na necessidade de ter um pacote básico de ferramentas disponível no início de qualquer trabalho. De realizar o trabalho tendo sempre em conta qual o objectivo final.

Destacou o aspecto fundamental que a colaboração representa, de forma quer a um melhor resultado final, quer a um melhor ambiente de trabalho. Neste ponto do seu “Ultimate Package” salientou a importância da comunicação entre os diferentes intervenientes do processo de comunicação: entre designer e developer, entre estes dois e o cliente e entre os três e o público-alvo do projecto.

Uma das formas para melhor entender as necessidades de cada um destes elementos e por fim do público-alvo é a utilização dos pequenos hexágonos coloridos que podem ver no pdf e que servem para mostrar a forma como as diferentes pessoas acham que seria a estrutura final do trabalho em mãos. No fundo, diferentes pessoas criaram diferentes concentrações de hexágonos, mantendo entre todas pequenos pontos comuns.

Além das escolhas individuais é importante ter em conta também as necessidades dos diferentes grupos de utilizadores, executivos, pessoas com conhecimentos técnicos, sem conhecimentos técnicos, etc., fazendo os possíveis para atender à expectativa quer dos grupos quer dos indivíduos.

Falou depois nas diferentes metodologias possíveis para obter os melhores resultados finais: Waterfall, Agile, Sprint, ou qualquer outra. Destacou que, essencialmente, a metodologia poderá, e deverá, variar mediante o projecto pois cada uma tem vantagens e desvantagens próprias que as farão mais ou menos apropriadas.

Passou depois à importância de ter um caminho bem definido entre o início do processo de criação e o resultado final, para que cada um dos envolvidos saiba em que parte do processo se encontra e quais as suas responsabilidades na fase actual.

A necessidade de inspirar a criatividade e formas de o fazer foi o ponto seguinte. Desde objectos do dia-a-dia, a grupos de fotos no Flickr, screenshots de páginas, até ao factor positivo que representa um espaço físico de trabalho, com materiais relativos ao trabalho. Este espaço é, para ele, essencial no processo criativo.

No sétimo ponto, Convenções, falou nas vantagens que a utilização de convenções trará quer ao andamento de um trabalho, ao tempo necessário para o concretizar e ao resultado final. As convenções permitem uma maior rapidez a detectar possíveis erros e na sua posterior correcção. Desde convenções nos ficheiros CSS e na sua organização, até à convenção na estrutura das pastas existentes em cada projecto.

A importância da criação de protótipos detalhados daquilo que se pretende produzir permite testar diferentes formas de interacção ainda antes de as transportar para HTML e CSS. Destacou particularmente os protótipos em papel pela facilidade e rapidez de criação. A criação de protótipos HTML e CSS permite então testar todas, ou quase todas, as interacções possíveis no ambiente natural do site, o browser.

A definição de um caminho directo e bem documentado durante todo o processo de trabalho é essencial para maior rapidez, melhor ambiente de trabalho, melhor entendimento entre todos os envolvidos, melhor qualidade e, mais importante que tudo, uma maior satisfação dos utilizadores do trabalho final.

Podem encontrar os slides em @Media2009: The Process Toolbox

Começou por falar na situação actual, de crise, e da forma como ela nos afecta, seja qual for a nossa profissão. Passou depois a descrever algumas mudanças que podemos fazer para melhorar os nossos processos de trabalho.

Destacou a importância de manter um pensamento positivo em tempos de crise e recessão, pois as recessões podem ser muito estimulantes para a criatividade. Uma forma diferente de “a necessidade aguça o engenho”. E somos nós, os profissionais da web, que precisamos de fazer estas mudanças, não os nossos clientes. Nós temos o conhecimento e precisamos de encontrar formas de o tornar mais rentável. Nisto, a criatividade é um ingrediente essencial.

Utilizamos métodos e processos ultrapassados. Precisamos de encontrar novas maneiras de ser criativos, mudar a ideia que os clientes têm sobre o nosso trabalho.

Tempo de descartar hábitos antigos.

O habitual processo de Design – Visuals – Cliente – Developer – Tests consome demasiado tempo e é extremamente ineficiente. Precisamos de um workflow baseado na criatividade: Design (CSS e HTML) – Pequenos ciclos de trabalho – Design Interactivo torna todo o processo de criação mais rápido, mais interactivo e com um maior retorno sobre o investimento para o cliente.

O browser como uma ferramenta de design

Para quê utilizar aplicações de edição gráfica, como o Photoshop, para fazer algo para a Web? Estas falham nesse propósito pois não permitem uma reprodução exacta do comportamento de um layout no browser. Redimensionar a janela, aumentar o tamanho do tipo de letra, o movimentar do rato sobre os diferentes elementos.

Para quê mostrar aos clientes designs estáticos de uma coisa que se pretende interactiva? Isso torna as interacções dos diferentes elementos mais dificeis de explicar.

O design utilizando HTML e CSS é interactivo. Torna-se táctil. É tempo de parar de mostrar layouts estáticos aos clientes. Esta é uma das principais razões para que grande parte dos sites tenham uma largura fixa e sejam centrados. Designs estáticos reforçam a noção de que “os sites deviam parecer exactamente iguais em todos os browsers”.

Utilizando o browser como a sua principal ferramenta de design conseguiu no processo de redesign do New Internationalist criar 30 templates em cerca de 3 semanas de trabalho.

Diferente não significa defeituoso.

Utilizar elementos alternativos como os pseudo-elementos que faltam no Internet Explorer 6 são coisas com as quais podemos viver. Esta foi uma das ideias que o levou a criar o Universal IE6 CSS.

Uma citação de Dan Cederholm sobre a utilização de Sobre RGBa:

The a stands for awesome

A interacção torna-se natural com o design no browser. Alguns dos pontos a ter em conta:

• Pode-se testar durante o design e começa-se a testar logo desde o início;
• Criar um sistema e não uma página, para uma maior rentabilização do tempo e menor quantidade de código;
• Desenhar sobre uma grelha flexível, para acomodar eventuais modificações;
• Criar do conteúdo para fora, ou seja, começar com o conteúdo e não o colocar apenas no final do design criado;
• Utilizar convenções de código, para maior uniformidade e facilidade de manutenção futura;

A utilização de sistemas flexíveis gera um maior retorno sobre o investimento, menos problemas e deixa mais tempo para comunicar.

O que fazer com o tempo extra que a mudança de processo nos proporciona?

Os clientes não nos pagam pelas nossas horas de trabalho, mas sim pelo conhecimento que fomos acumulando ao longo dos anos, utilizem o tempo que ganharam para aprender ou aprofundar os vossos conhecimentos.

Podem encontrar os slides da apresentação e a transcrição em For a Beautiful Web

Chegámos a Londres ao final da tarde e aproveitámos o facto de termos ganho uma hora com a mudança de fuso horário para passear pelos arredores do hotel. O hotel estava situado a escassos 3 minutos a pé do local da conferência o que facilitava ainda mais as coisas. Ainda mais perto, nas costas do hotel, ficava o London Eye.

Depois do jantar, acabei por me deslocar até ao bar sugerido pela organização, The Mulberry Bush, para beber uma cerveja. Acabei por encontrar outras pessoas que iriam estar na conferência no dia seguinte, entre elas o Peter Paul Koch que contava aparecessem mais que os 9 presentes.

Os posts seguintes são representam o meu resumo de cada uma das apresentações.

Todas as apresentações me despertam grande interesse, mas em particular as do Andy Clarke, Walls Come Tumbling Down, a do Mark Boulton, Font Embedding and Typography e a Hot Topics, moderada pelo Jeremy Keith.

Durante os dois dias que dura podem contar com resumos das sessões à medida que estas forem decorrendo. Podem seguir a conta twitter da conferência em @media2009

Depois de ter noticiado no mês de Julho a edição de 2008 da The Web Design Survey 2008, um questionário que pretende conhecer melhor os profissionais da web, eis que estão disponíveis os resultados.

Este ano em vez de ser disponibilizado um documento para consulta foi criado um site que contém toda a informação de uma forma mais confortável de ler. Encontrem-no em Findings from the survey for people who make websites, 2008

A Tipografia ainda é, na minha opinião, um mistério para muitos designers. O tipo de Tipografia de que falo não é o habitual “Que tipo de letra devo usar” mas sim “distinguir um hífen de um em-dash”. Chamem-me purista mas isto incomoda-me.

Então, numa tentativa de espalhar a palavra, aqui fica o primeiro de Cinco Passos Simples para Melhor Tipografia. Para começar vou falar da Medida.

Medir a Medida

Medida é o nome dado ao comprimento de uma linha de caracteres completa. Há várias unidades de medida usadas para definir a Medida. As três unidades básicas são:

• Um ponto = 1/72 de uma polegada
• Uma pica = 12 pontos
• Um em = A distância horizontal igual ao tamanho do tipo de letra, em pontos, que está a utilizar. Ex: 1em de 12pt = 12pt.

Mas, com o advento do DTP, e com o design de sites que se lhe seguiu, são usadas também:

• Milímetros
• Pixels

Há um tamanho ideal para a Medida e que é definido pela quantidade de caracteres na linha. Uma regra geralmente boa é a de 2-3 alfabetos de comprimento, ou 52-78 caracteres (espaços incluídos). Isto serve o propósito da legibilidade. Mantenha a Medida dentro destas linhas orientadoras e não deverá ter problemas de legibilidade. Note que esta recomendação poderá mudar largamente mediante pesquisas, esta é apenas uma teoria que aplico e que parece funcionar bem como regra geral.

CSS e fluído?

O interessante aqui são os designs fluídos para a web. Como pode a Medida reagir a um aumento, ou uma dimuição, de tamanho. Toda a grelha teria de se adaptar ao novo tamanho. Um interessante ponto de discussão e desafio.

A Medida e o leading

Uma regra simples é o seu leading ser mais longo que o espaçamento entre palavras. Isto porque, quando o balanço é correcto, os seus olhos deslocar-se-ão ao longo da linha em vez de para baixo.

Se a medida é maior que as regras para melhor legibilidade, então aumente o leading, ou a altura da linha, como é por vezes, erradamente, chamada. Isto terá o efeito de aumentar a legibilidade. O seu leading deverá aumentar proporcionalmente à Medida. Medida pequena, menor Leading. Medida mais larga, maior leading. É uma regra simples mas muito eficaz.

Inverter as cores?

Quando inverter as cores, ex.: texto branco em fundo preto, certifique-se que aumenta o leading, o tracking e diminui o peso da letra. Isto aplica-se a todas as larguras da Medida. Texto branco em fundo preto tem um maior contraste em relação ao oposto, por isso as letras devem ficar mais separadas, mais leves em grossura e ter mais espaço entre linhas.

Tracking

Uma boa regra no que refere ao tracking das palavras (não dos caracteres) é que quanto menor for o comprimento da linha, mais apertado é o tracking, e o oposto também se verifica.

A sua responsabilidade

Seguindo estas simples regras garante que o corpo dos seus textos será tão legível quanto possível. Estas regras têm origem na arte da tipografia que, infelizmente para a nossa indústria em particular, não são ensinadas tanto quanto deveriam nas escolas de arte do mundo. Como resultado elas não são praticadas e a tipografia correcta e bem feita está em declínio.

É nossa responsabilidade, enquanto designers, de abraçar as regras que nasceram de um ofício que remonta vários séculos.

Espero que esta série de cinco passos, rápidos e garantidos, sirvam para melhorar a sua arte tipográfica e garantam que os computadores e o DTP não acabem com ela. Isso seria uma enorme perda.

A série de artigos

Este é o primeiro artigo da série “Cinco Passos Simples…” o próximo fala sobre “Hanging Punctuation”.

Este artigo é uma tradução do artigo original Five simple steps to better typography com total conhecimento e permissão do autor, o designer inglês Mark Boulton. Recentemente foi lançado o livro A pratical guide to Designing for the Web onde podem encontrar muitas das coisas que deram origem a esta série de posts.

A Tipografia ainda é, na minha opinião, um mistério para muitos designers. O tipo de Tipografia de que falo não é o habitual “Que tipo de letra devo usar” mas sim “distinguir um hífen de um em-dash”. Chamem-me purista mas isto incomoda-me.

Então, numa tentativa de espalhar a palavra, aqui fica o primeiro de Cinco Passos Simples para Melhor Tipografia. Para começar vou falar da Medida.

Medir a Medida

Medida é o nome dado ao comprimento de uma linha de caracteres completa. Há várias unidades de medida usadas para definir a Medida. As três unidades básicas são:

• Um ponto = 1/72 de uma polegada
• Uma pica = 12 pontos
• Um em = A distância horizontal igual ao tamanho do tipo de letra, em pontos, que está a utilizar. Ex: 1em de 12pt = 12pt.

Mas, com o advento do DTP, e com o design de sites que se lhe seguiu, são usadas também:

• Milímetros
• Pixels

Há um tamanho ideal para a Medida e que é definido pela quantidade de caracteres na linha. Uma regra geralmente boa é a de 2-3 alfabetos de comprimento, ou 52-78 caracteres (espaços incluídos). Isto serve o propósito da legibilidade. Mantenha a Medida dentro destas linhas orientadoras e não deverá ter problemas de legibilidade. Note que esta recomendação poderá mudar largamente mediante pesquisas, esta é apenas uma teoria que aplico e que parece funcionar bem como regra geral.

CSS e fluído?

O interessante aqui são os designs fluídos para a web. Como pode a Medida reagir a um aumento, ou uma dimuição, de tamanho. Toda a grelha teria de se adaptar ao novo tamanho. Um interessante ponto de discussão e desafio.

A Medida e o leading

Uma regra simples é o seu leading ser mais longo que o espaçamento entre palavras. Isto porque, quando o balanço é correcto, os seus olhos deslocar-se-ão ao longo da linha em vez de para baixo.

Se a medida é maior que as regras para melhor legibilidade, então aumente o leading, ou a altura da linha, como é por vezes, erradamente, chamada. Isto terá o efeito de aumentar a legibilidade. O seu leading deverá aumentar proporcionalmente à Medida. Medida pequena, menor Leading. Medida mais larga, maior leading. É uma regra simples mas muito eficaz.

Inverter as cores?

Quando inverter as cores, ex.: texto branco em fundo preto, certifique-se que aumenta o leading, o tracking e diminui o peso da letra. Isto aplica-se a todas as larguras da Medida. Texto branco em fundo preto tem um maior contraste em relação ao oposto, por isso as letras devem ficar mais separadas, mais leves em grossura e ter mais espaço entre linhas.

Tracking

Uma boa regra no que refere ao tracking das palavras (não dos caracteres) é que quanto menor for o comprimento da linha, mais apertado é o tracking, e o oposto também se verifica.

A sua responsabilidade

Seguindo estas simples regras garante que o corpo dos seus textos será tão legível quanto possível. Estas regras têm origem na arte da tipografia que, infelizmente para a nossa indústria em particular, não são ensinadas tanto quanto deveriam nas escolas de arte do mundo. Como resultado elas não são praticadas e a tipografia correcta e bem feita está em declínio.

É nossa responsabilidade, enquanto designers, de abraçar as regras que nasceram de um ofício que remonta vários séculos.

Espero que esta série de cinco passos, rápidos e garantidos, sirvam para melhorar a sua arte tipográfica e garantam que os computadores e o DTP não acabem com ela. Isso seria uma enorme perda.

A série de artigos

Este é o primeiro artigo da série “Cinco Passos Simples…” o próximo fala sobre “Hanging Punctuation”.

Este artigo é uma tradução do artigo original Five simple steps to better typography com total conhecimento e permissão do autor, o designer inglês Mark Boulton. Recentemente foi lançado o livro A pratical guide to Designing for the Web onde podem encontrar muitas das coisas que deram origem a esta série de posts.