Your SlideShare is downloading. ×
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Tipografia em interfaces digitais
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Tipografia em interfaces digitais

2,710

Published on

Aula do curso de Pós-Graduação em Ergodesign de Interfaces: Usabilidade e Arquitetura de Informação da PUC-Rio. Mais informações em …

Aula do curso de Pós-Graduação em Ergodesign de Interfaces: Usabilidade e Arquitetura de Informação da PUC-Rio. Mais informações em http://www.eduardobrandao.com/aulas/design-telas/tipografia-em-interfaces-digitais/

Published in: Education
2 Comments
14 Likes
Statistics
Notes
No Downloads
Views
Total Views
2,710
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
2
Likes
14
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. tipografia eminterfaces digitaisEduardo Rangel Brandão, M.Sc.A reprodução, total ou parcial, dos textos e imagens deste documento só é permitida para fins não comerciais,sendo obrigatória a citação da fonte.
  • 2. O conteúdo desta aula foi ministrado no Curso de Pós-Graduação em Ergodesign de Interfaces: Usabilidade e Arquitetura de Informação da Pontifícia Universidade Católica do Rio de Janeiro
  • 3. tipografiaA tipografia desempenha um papel duplo:•  Tanto como comunicação verbal.•  Quanto como comunicação visual.A escolha de uma família de letras iráconferir consistência ao projeto.
  • 4. tipografiaOs jornais são um dos exemplos maisclaros sobre a importância do empregoda tipografia.Cada um tem uma família tipográfica quedetermina sua personalidade.
  • 5. * Fonte: livro “Identidade visual: a direção do olhar”, de Gilbeto Luiz Strunk tipografia
  • 6. tipografiaQuando os leitores examinam a página:•  Primeiro observam os padrões gráficos•  gerais.•  Depois analisam gramaticalmente a•  linguagem, ou seja, eles lêem.
  • 7. tipografiaNos casos onde há mais de um tipo napágina, é estabelecida uma situação quepode ser:•  Concordante.•  Conflitante.•  Contrastante.
  • 8. tipos concordantesOcorre ao utilizar somente uma família defontes, sem muitas variações de estilo,tamanho, peso, etc.É fácil manter a harmonia da página,conferindo ao material uma estéticacalma ou formal.
  • 9. tipos conflitantesOcorre ao combinar fontes similares emestilo, tamanho, peso, etc.As similaridades são incômodasporque as atrações visuais não sãoas mesmas (concordantes), mastambém não são diferentes(contrastantes).Logo, criam um conflito.
  • 10. * Fonte: livro “Design para quem não é designer”, de Robin Williams tipos conflitantes Aa Aa Aa Arial Tahoma Verdana
  • 11. tipos contrastantesOcorre quando combinamos fontes separadase elementos nitidamente diferentes entre si.Os projetos visualmente interessantes,geralmente, têm bastante contraste.Estes contrastes são enfatizados, atraindo aatenção das pessoas.
  • 12. * Fonte: livro “Design para quem não é designer”, de Robin Williams tipos contrastantes Aa Aa Aa Arial Courier New Times New Roman
  • 13. características dos tipos•  Ascendentes: são as partes das letras•  que são mais altas do que a altura do x.•  Altura do x (ou altura-x): é a altura da•  parte principal das letras em caixa-baixa•  (minúsculas).•  Descendentes: são as partes das letras•  que ficam abaixo da linha de base (a•  linha invisível, sobre a qual o tipo fica).
  • 14. * Fonte: livro “Design para quem não é designer”, de Robin Williams, e dissertação de mestrado “Ergonomização da interação humano-computador: leiturabilidade em terminais devídeo de computador”, de Luís Eduardo Santa Maria características dos tipos Altura-X Ascendente Abc ghi qrstu x Arial, tamanho 96 Descendente Altura-X Ascendente Abc ghi qrstu x Times New Roman, tamanho 96 Descendente
  • 15. características dos tipos•  Olho: é a pequena área fechada que•  resulta do traçado de certas letras como•  a letra “o” e o topo da letra “e”.
  • 16. * Fonte: livro “Design para quem não é designer”, de Robin Williams, e dissertação de mestrado “Ergonomização da interação humano-computador: leiturabilidade em terminais devídeo de computador”, de Luís Eduardo Santa Maria características dos tipos Olho Abc ghi qrstu x Arial, tamanho 96 Olho Abc ghi qrstu x Times New Roman, tamanho 96
  • 17. ajustes do tamanho do tipoA interface deve ser adaptada parasatisfazer as necessidades de todos osusuários?Pessoas com baixa acuidade visualpodem fazer ajustes para que os tipossejam exibidos com um tamanho maislegível?
  • 18. ajustes do tamanho do tipoDesigners deveriam utilizar a unidaderelativa e flexível “em” para permitir oajuste do tamanho dos tipos?No caso de um usuário que ajusta seubrowser para exibir um padrão de tiposem 12 pontos, por exemplo, um recuo detexto de “2-em” representaria 24 pontos.
  • 19. * Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sarah Horton ajustes do tamanho dos tipos na interface Com um layout flexível, o projeto da interface permanece intacto, mesmo quando o tamanho do texto é ampliado.
  • 20. ajustes do tamanho do tipoTambém é possível ajustar o tamanhodos tipos em “pontos” ao invés daunidade “em”.Mas os monitores exibem o conteúdo emdiferentes resoluções.Um tipo de 12 pontos em uma tela terá,aproximadamente, 14 pontos em outra.
  • 21. * Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sarah Horton ajustes do tamanho dos tipos na interface Como são exibidos, em um computador Windows e em um computador Macintosh, os principais tipos True Type da Microsoft, com 12 pontos.Uma fonte pequena visualizada no Windows poderá tornar-se totalmente ilegível quandovisualizada no Macintosh (nos programas do Windows o tipo é 2 a 3 pontos maior que oequivalente do Macintosh).
  • 22. * Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sarah Horton ajustes do tamanho dos tipos na interface Como são exibidos, em um computador Windows e em um computador Macintosh, os principais tipos True Type da Microsoft, com 12 pontos.
  • 23. tipos dos sistemas operacionaisOs tipos básicos que vêm instalados comos sistemas operacionais Windows eMacintosh aparecem listados no próximoslide.Ao especificar tipos em sites da internet,por exemplo, deve-se escolher ao menosuma fonte de cada sistema operacional,para evitar que o browser exiba a suafonte padrão.
  • 24. * Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sarah Horton tipos básicos do windows e macintosh Muitos usuários de Macintosh que tenham instalado o Microsoft Office ou o Internet Explorer da Microsoft contarão com fontes Windows instaladas em seus sistemas operacionais.
  • 25. tipografia em interfaces digitais: com-serifa x sem-serifa
  • 26. tipos com-serifa x sem-serifaA maioria dos tipos possui categoriasdistintas, que utilizam as serifas(terminações dos caracteres) paraclassificá-los.
  • 27. * Fonte: dissertação de mestrado “Ergonomização da interação humano-computador: leiturabilidade em terminais de vídeo de computador”, de Luís Eduardo Santa Maria tipos com-serifa x sem-serifa 1. Serifa côncava (ex: Garamond, Venetian). 2. Serifa quadrada (ex: Rockwell). 3. Serifa côncava quadrada (ex: Clarendon). 4. Serifa linear (ex: Bodoni, Didot). 5. Serifa exagerada (ex: Souvenir). 6. Serifa triangular (ex: WideLatin). 7. Sem serifa normal (ex: Helvetica, Univers). 8. Sem serifa de terminação oblíqua (ex: Lithos). 9. Sem serifa de terminação larga (ex: Optima). 10. Sem serifa de terminação arredondada (ex: Helvetica Rounded).
  • 28. tipos com-serifaSerifa (ou cerifa) é um traço ou filete quearremata os terminais dos tipos.Trata-se de um elemento que define commaior clareza os limites do traço,alinhando os caracteres.Os tipos com-serifa exibem uma transiçãogrosso/fino visível nos seus traços.
  • 29. * Fonte: artigo “Typographic design patterns and best practices”, de Michael Martin - <http://www.smashingmagazine.com/2009/08/20/typographic-design-survey-best-practices-from-the-best-blogs/> tipos com-serifa
  • 30. * Fonte: artigo “Typographic design patterns and best practices”, de Michael Martin - <http://www.smashingmagazine.com/2009/08/20/typographic-design-survey-best-practices-from-the-best-blogs/> tipos com-serifa
  • 31. tipos sem-serifaComo o próprio nome já diz, as fontessem-serifa não possuem serifas nos finaisde seus traços.A idéia de remover as serifas foi umprogresso mais tardio na evolução datipografia e não obteve muito sucesso atéo início do século 20.
  • 32. tipos sem-serifaOs tipos sem-serifa não possuem umatransição grosso/fino visível nos seustraços.Logo, as letras têm sempre a mesmaespessura.
  • 33. * Fonte: livro “Design para quem não é designer”, de Robin Williams, e dissertação de mestrado “Ergonomização da interação humano-computador: leiturabilidade em terminais devídeo de computador”, de Luís Eduardo Santa Maria tipos com-serifa x sem-serifa Sem serifa Abc ghi qrstu x Todos os tipos com o peso igual - letras com a mesma espessura. Sem serifa Com serifa Abc ghi qrstu x Transição grosso/fino visível nos traços. Com serifa
  • 34. tipos com-serifa x sem-serifaA “Arial” foi a fonte escolhida comopreferida em diversas pesquisas,utilizando-se crianças, estudantesuniversitários e adultos acima dos 50anos.A “Times New Roman”, fonte maispopular dos processadores de texto,demonstrou baixa aceitação em diversaspesquisas sobre leitura em telas.
  • 35. * Fonte: artigo “Typographic design patterns and best practices”, de Michael Martin - <http://www.smashingmagazine.com/2009/08/20/typographic-design-survey-best-practices-from-the-best-blogs/> tipos com-serifa x sem-serifa no títuloSerifa (40%) Sem-serifa (60%) Pesquisa realizada em 50 sites populares (entre portais, blogs e versões on-line de jornais e revistas).
  • 36. * Fonte: artigo “Typographic design patterns and best practices”, de Michael Martin - <http://www.smashingmagazine.com/2009/08/20/typographic-design-survey-best-practices-from-the-best-blogs/> tipos com-serifa x sem-serifa no corpo do textoSerifa (34%) Sem-serifa (66%) Pesquisa realizada em 50 sites populares (entre portais, blogs e versões on-line de jornais e revistas).
  • 37. * Fonte: artigo “Typographic design patterns and best practices”, de Michael Martin - <http://www.smashingmagazine.com/2009/08/20/typographic-design-survey-best-practices-from-the-best-blogs/> tipos mais populares Corpo do texto Títulos Pesquisa realizada em 50 sites populares (entre portais, blogs e versões on-line de jornais e revistas).
  • 38. tipografia em interfaces digitais: legibilidade xleiturabilidade
  • 39. legibilidade x leiturabilidadeLegibilidade: é o atributo de umcaractere que permite a cada pessoaidentificá-lo em relação a outroscaracteres.Depende de características comoespessuras das hastes, proporção entreespessura/altura, desenho do caractere,proporção entre largura/altura e contrastefigura/fundo.
  • 40. legibilidade x leiturabilidadeLeiturabilidade: é a qualidade que tornapossível reconhecer a informação que umdeterminado material contém, quandorepresentado por caracteres agrupadosem conjuntos de palavras, frases eenunciados.
  • 41. * Fonte: dissertação de mestrado “Ergonomização da interação humano-computador: leiturabilidade em terminais de vídeo de computador”, de Luís Eduardo Santa Maria legibilidade x leiturabilidadeaO caractere é facilmente identificado na sua forma e contraste. Boa legibilidade.aEmbora possua uma forma bem desenhada, o baixo contraste figura/fundo prejudica alegibilidade.
  • 42. * Fonte: dissertação de mestrado “Ergonomização da interação humano-computador: leiturabilidade em terminais de vídeo de computador”, de Luís Eduardo Santa Maria legibilidade x leiturabilidadeO contraste entre figura e fundo é ótimo, mas a forma do caractere dificulta a suaidentificação, prejudicando a sua legibilidade.Neste caso, tanto o baixo contraste figura/fundo quanto a forma do caractere prejudicam alegibilidade.
  • 43. * Fonte: dissertação de mestrado “Ergonomização da interação humano-computador: leiturabilidade em terminais de vídeo de computador”, de Luís Eduardo Santa Maria legibilidade x leiturabilidadeAulaO conjunto de caracteres agrupados fornecem uma compreensão rápida da informação,conferindo uma boa leiturabilidade para o texto.Embora seja (quase) possível distinguir separadamente todos os caracteres, a forma decada um prejudica a sua legibilidade. Logo, o agrupamento das letras fornece umacompreensão mais demorada para a mensagem, diminuindo a leiturabilidade do texto.
  • 44. tipografia em interfaces digitais:alinhamento de textos
  • 45. alinhamento de textosO texto pode ser alinhado de diferentesmodos:•  Textos justificados.•  Textos centralizados.•  Textos alinhados à direita.•  Textos alinhados à esquerda.
  • 46. * Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sarah Horton textos justificados Freqüentemente ficam mal espacejados e com uma hifenização excessiva, necessitando de um ajuste manual. Esse nível de controle não é uma possibilidade em todas as interfaces. Na internet, por exemplo, este controle não se aplica.
  • 47. textos justificados Texto justificado mal espacejado, criando um resultado pouco atrativo. O scroll da página não oferece indicação sobre a posição do texto. Não é possível saber se este texto encontra-se no início, meio ou final. Deve-se evitar scrolls que não oferecem algum tipo de feedback para seus usuários.
  • 48. textos justificados Texto justificado mal espacejado, criando um resultado pouco atrativo.
  • 49. * Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sarah Horton textos centralizados São difíceis de ler, pois na cultura ocidental lê-se o texto da esquerda para a direita, ancorando a exploração ao longo da página na linha vertical da margem esquerda. As margens esquerdas quebradas, que são produzidas pela centralização do texto, dificultam essa exploração, porque os olhos necessitam procurar o início de cada nova linha.
  • 50. * Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sarah Horton textos alinhados à direita São difíceis de ler, pois na cultura ocidental lê-se o texto da esquerda para a direita, ancorando a exploração ao longo da página na linha vertical da margem esquerda. As margens esquerdas quebradas, que são produzidas pelo alinhamento do texto à direita, dificultam essa exploração, porque os olhos necessitam procurar o início de cada nova linha.
  • 51. * Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sarah Horton textos alinhados à esquerda É a opção de melhor leitura, porque a margem esquerda é uniforme e previsível e a margem direita é irregular. Ao contrário do texto justificado, o alinhamento à esquerda não requer ajustes no espacejamento das palavras, pois as desigualdades do espacejamento acabam ficando ao final das linhas. A margem direita “quebrada” confere mais variedade e atratividade, sem interferir na leitura.
  • 52. alinhamento de textosOs títulos e cabeçalhos centralizadoscombinam bem com um texto justificado.Os títulos e os cabeçalhos acima detextos alinhados à esquerda tambémdevem ser ajustados rente à margemesquerda.
  • 53. alinhamento de textosA apresentação centralizada dos títulos ecabeçalhos contrasta com a assimetria damargem direita quebrada do textoalinhado à esquerda, produzindo umapágina desequilibrada.
  • 54. * Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sarah Horton alinhamento de textos Página equilibrada Página desequilibrada Página equilibrada Título Título Título Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consetetur amet, consetetur amet, consetetur sadipscing elitr, sed diam sadipscing elitr, sed diam sadipscing elitr, sed diam nonumy eirmod tempor nonumy eirmod tempor nonumy eirmod tempor invidunt ut labore et invidunt ut labore et invidunt ut labore et dolore magna aliquyam. dolore magna aliquyam. dolore magna aliquyam. Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consetetur amet, consetetur amet, consetetur sadipscing elitr, sed diam sadipscing elitr, sed diam sadipscing elitr, sed diam nonumy eirmod tempor nonumy eirmod tempor nonumy eirmod tempor invidunt ut labore et. invidunt ut labore et. invidunt ut labore et. Texto justificado, título e Texto alinhado à esquerda, Texto alinhado à esquerda, cabeçalho centralizados. título e cabeçalho título e cabeçalho alinhados centralizados. à esquerda.
  • 55. tipografia em interfaces digitais:realces de textos
  • 56. realces de textosA utilização de realces de texto direcionao olhar do usuário ao longo do conteúdo.Deve-se acrescentar ênfase usandoapenas um parâmetro por vez.Somente uma pequena variação énecessária para criar o contraste visual.
  • 57. realces de textosO texto pode ser realçado de diferentesmodos:•  Textos em itálico.•  Textos em negrito.•  Textos sublinhados.•  Textos coloridos.
  • 58. realces de textosO texto pode ser realçado de diferentesmodos (continuação):•  Textos em letras maiúsculas.•  Textos com letras arredondadas.•  Textos com letras grandes.
  • 59. * Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sarah Horton textos em itálico O texto em itálico chama a atenção dos olhos porque contrasta com o formato do corpo do texto. É aconselhável utilizar o texto em itálico para os casos convencionais (como citar o título de um livro ou jornal, por exemplo) ou dentro do bloco de texto para diferenciar palavras e frases importantes ou escritas em um idioma estrangeiro. Deve-se evitar colocar grandes blocos de texto em itálico, porque a leitura deste tipo de recurso é muito mais baixa que a de um texto romano do mesmo tamanho.
  • 60. * Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sarah Horton textos em negrito O texto em negrito contrasta com o texto normal por sua “cor”. Apesar disso, grandes blocos de texto em negrito ocasionam a perda do contraste e, por isso, acabam perdendo a sua efetividade. Uma fonte arejada, com bastante espaço entre as letras e entre as linhas cria uma “cor” e uma textura bastante suaves. Uma fonte em negrito, pouco arejada, cria uma cor escura, com uma textura diferente e pesada.
  • 61. * Fonte: artigo “Web 2.0 how-to design style guide”, de Ben Hunt - <http://www.webdesignfromscratch.com/web-design/web-2.0-design-style-guide/> textos em negrito Através dos textos em negrito, muitos designers buscam captar a atenção do usuário para certas informações. Geralmente, esses textos em negrito apresentam uma visão geral do produto: •  Em poucas palavras. •  Em um curto período de tempo. Os textos em negrito são utilizados de forma mais gráfica do que o texto regular. Os designers buscam controlar o impacto visual, para evitar que a experiência de navegação seja prejudicada.
  • 62. * Fonte: artigo “Web 2.0 how-to design style guide”, de Ben Hunt - <http://www.webdesignfromscratch.com/web-design/web-2.0-design-style-guide/> textos em negrito Quando usar textos em negrito? Não adianta destacar qualquer coisa sobre o propósito da interface. Logo, textos em negrito só devem ser utilizados quando houver algo realmente importante para ser dito. A utilização de um fundo plano e contrastante pode ajudar bastante.
  • 63. * Fonte: artigo “Web 2.0 how-to design style guide”, de Ben Hunt - <http://www.webdesignfromscratch.com/web-design/web-2.0-design-style-guide/> textos em negrito
  • 64. * Fonte: artigo “Web 2.0 how-to design style guide”, de Ben Hunt - <http://www.webdesignfromscratch.com/web-design/web-2.0-design-style-guide/> textos em negrito: logotipos Um logotipo em negrito ajuda a criar uma marca clara e forte, capaz de incorporar atitude, tom de voz e uma boa primeira impressão.
  • 65. * Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sarah Horton textos sublinhados O texto sublinhado é uma herança da época das máquinas de escrever, quando ainda não estavam disponíveis as opções de texto em itálico ou negrito. Este recurso possui um grande defeito estético: é muito pesado e interfere na forma das letras. Além disso, ao incluir um texto sublinhado em uma interface web, por exemplo, certamente o mesmo será confundido com um link de hipertexto.
  • 66. * Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sarah Horton textos coloridos A utilização de cores é uma boa opção para diferenciar a tipografia, além de funcionar bem como um meio sutil de destacar os cabeçalhos de seção. Deve-se escolher tons que contrastem com o fundo da página. Na web, deve-se evitar cores que possam ser confundidas com o padrão azul e violeta dos links da internet. A utilização de outras cores (além do azul e violeta) dentro de blocos de texto também pode confundir usuários, que clicarão nas cores pensando que se trata de um link.
  • 67. textos coloridos link link visitadoDurante anos, azul e violeta foram utilizados como padrão de cor de link na internet.
  • 68. textos coloridoslink não é link link não é linkDificuldade para identificar o que é link e o que não é link.
  • 69. textos coloridos link não é link não é linklinklink não é linklinkDificuldade para identificar o que é link e o que não é link.
  • 70. * Fonte: artigo "Design acessível, daltonismo e a cegueira das cores", de Henrique C. Pereira - <http://revolucao.etc.br/archives/design-acessivel-daltonismo-e-a-cegueira-das-cores/#more-329> textos coloridos: usuários daltônicos, #comofaz ? Em um menu, que recebe um destaque diferenciado por causa de características como posicionamento e contornos, os links não precisam ser sublinhados. Mas, desde que todo o contexto deixe claro que se tratam de links de menu. No meio do conteúdo, não há como fugir dos links sublinhados como uma forma simples de indicar, para todos os usuários, o que é um link e o que não é. Se você não conseguiu ver o número 74 na imagem, você é daltônico.
  • 71. * Fonte: artigo "Design acessível, daltonismo e a cegueira das cores", de Henrique C. Pereira - <http://revolucao.etc.br/archives/design-acessivel-daltonismo-e-a-cegueira-das-cores/#more-329> textos coloridos: usuários daltônicos, #comofaz ? Visão normal Visão daltônica Exemplo de como os usuários daltônicos enxergam alguns links.
  • 72. * Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sarah Horton textos em letras maiúsculas O TEXTO EM MAIÚSCULAS É UM DOS MÉTODOS MAIS COMUNS E MENOS EFICIENTES PARA ADICIONAR ÊNFASE. A LEITURA CONSISTE, PRIMEIRAMENTE, EM RECONHECER O FORMATO GERAL DAS PALAVRAS, E NÃO EM ANALISAR CADA LETRA E DEPOIS MONTAR UMA PALAVRA RECONHECÍVEL.
  • 73. textos em letras maiúsculas Todas as palavras digitadas em caixa-alta têm uma forma retangular similar, que nos obriga a ler as palavras letra por letra. Logo, é recomendável um estilo de escrita baseado em letras minúsculas, porque as letras maiúsculas dificultam a leitura.
  • 74. * Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sarah Horton textos em letras maiúsculasinterfacesINTERFACES
  • 75. * Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sarah Horton textos em letras maiúsculasA leitura depende do topo
  • 76. * Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sarah Horton textos em letras maiúsculasA leitura depende do topo
  • 77. * Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sarah Horton textos em letras maiúsculas As palavras ou frases escritas em caixa-baixa são mais legíveisA leitura depende do topo devido ao fato que, durante a leitura, explora-se principalmente a parte superior das palavras.
  • 78. * Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sarah Horton textos em letras maiúsculas As palavras ou frases escritas em caixa-baixa são mais legíveisA leitura depende do topo devido ao fato que, durante a leitura, explora-se principalmente a parte superior das palavras.
  • 79. “ Não ipomtra emetãso,odrem ascsioa de uma plravaa qaul a úncia lrteas iprotmatne é que a piremria e útmlia lrteas etejasm no lgaur crteo. O rseto pdoe ser uma ttaol bçguana que vcoê andia pdoe ler sem peroblma. ”
  • 80. * Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sarah Horton textos em letras maiúsculas Atenção!Cuidado Com Iniciais Ao utilizar letras maiúsculas apenas nas iniciais de títulos,Maiúsculas Nos Títulos a exploração da forma das palavras também será quebrada.
  • 81. * Fonte: artigo “The visual design of Web 2.0”, de Jonathan Nicol - <http://f6design.com/journal/2006/10/21/the-visual-design-of-web-20/> textos com letras arredondadas A utilização de caracteres arredondados, em muitas interfaces, fornece uma abordagem moderna e lúdica para a identidade visual do produto.
  • 82. * Fonte: artigo “Web 2.0 how-to design style guide”, de Ben Hunt - <http://www.webdesignfromscratch.com/web-design/web-2.0-design-style-guide/> textos com letras grandes Hoje em dia, muitas interfaces utilizam letras grandes. Essa característica se deve ao fato dos designers estarem trabalhando com menos coisas na tela, removendo os elementos desnecessários. Logo, sobroumais espaço, permitindo que os elementos mais importantes sejam aplicados num tamanho maior. Coisas maiores são mais perceptíveis: esse efeito é utilizado ao longo da história do design em cabeçalhos, títulos e manchetes.
  • 83. * Fonte: artigo “Web design trends for 2010”, de Jacqueline Thomas - <http://webdesignledger.com/tips/web-design-trends-for-2010> textos com letras grandes Muitos designers de interface se esquivaram desse estilo no passado, porque os cabeçalhos das interfaces eram menores e mais discretos. No entanto, ao combinarmos com a tendência de cabeçalhos maiores (topo separado), os textos com letras grandes chamam a atenção do usuário, ajudando a expressar mais claramente a identidade do site.
  • 84. * Fonte: artigo “Web design trends for 2010”, de Jacqueline Thomas - <http://webdesignledger.com/tips/web-design-trends-for-2010> textos com letras grandes Por conta da conscientização, cada vez maior, sobre a importância da usabilidade, designers de interface preferem não se arriscar quanto ao uso de fontes novas e diferentes. Com a utilização correta, um site que utiliza a tipografia como elemento principal do projeto será mais interessante para o usuário, evitando uma sobrecarga de toneladas de fotos.
  • 85. * Fonte: artigo “Web 2.0 how-to design style guide”, de Ben Hunt - <http://www.webdesignfromscratch.com/web-design/web-2.0-design-style-guide/> textos com letras grandes A letra grande também é mais acessível. Não apenas para as pessoas com problemas visuais, mas também para: •  Os que utilizam dispositivos móveis. •  As pessoas que estão distantes da tela. •  Os que estão “folheando” a tela.
  • 86. * Fonte: artigo "Modern web design style, good web 2.0 design“, de Bem Hunt - <http://www.webdesignfromscratch.com/web-design/current-style/>“ Faça com que o texto mais importante da interface seja maior.”
  • 87. * Fonte: artigo “Web 2.0 how-to design style guide”, de Ben Hunt - <http://www.webdesignfromscratch.com/web-design/web-2.0-design-style-guide/> textos com letras grandes
  • 88. * Fonte: artigo “Typographic design patterns and best practices”, de Michael Martin - <http://www.smashingmagazine.com/2009/08/20/typographic-design-survey-best-practices-from-the-best-blogs/> textos com letras grandes
  • 89. * Fonte: artigo “The visual design of Web 2.0”, de Jonathan Nicol - <http://f6design.com/journal/2006/10/21/the-visual-design-of-web-20/> textos com letras grandes
  • 90. * Fonte: artigo "Modern web design style, good web 2.0 design“, de Bem Hunt - <http://www.webdesignfromscratch.com/web-design/current-style/> textos com letras grandes Como usar letras grandes? Use as letras grandes para ajudar os usuários a enxergarem rapidamente: •  Sobre do que se trata a interface. •  O que é mais importante nela. É preciso ter sensibilidade para descobrir para onde esses usuários desejam olhar e o que eles procuram.
  • 91. * Fonte: artigo “Web 2.0 how-to design style guide”, de Ben Hunt - <http://www.webdesignfromscratch.com/web-design/web-2.0-design-style-guide/> textos com letras grandes Como usar letras grandes? Ao utilizar letras grandes, é preciso simplificar o layout e remover os elementos desnecessários. Também é preciso ter uma razão para aumentar o tamanho de alguns textos. Esse texto deve ser significativo e útil, caso contrário, não há razão para mudar o tamanho do mesmo.
  • 92. * Fonte: artigo "Modern web design style, good web 2.0 design“, de Bem Hunt - <http://www.webdesignfromscratch.com/web-design/current-style/>“ Quando tudo é importante,todos os importante. Logo, quando nada é textos são grandes, nenhum texto é grande. ”
  • 93. * Fonte: artigo “Web 2.0 how-to design style guide”, de Ben Hunt - <http://www.webdesignfromscratch.com/web-design/web-2.0-design-style-guide/> textos com letras grandes O tamanho é relativo Não se pode aumentar todos os textos de uma interface e achar que melhorou a experiência de uso. Como em outras técnicas de design, a aplicação de textos grandes funciona quando utilizada com moderação. É melhor não mexer no tamanho dos textos, quando: •  A interface exibe uma grande quantidade •  de informação. •  Estas informações têm a mesma •  importância.
  • 94. * Fonte: artigo "The best of Eyetrack III: what we saw when we looked through their eyes", de Steve Outing e Laura Ruel - <http://www.poynterextra.org/eyetrack2004/main.htm> textos com letras grandes Fontes maiores promovem a varredura da página (pessoas lêem apenas as primeiras palavras e só dão continuidade ao processo caso a sua atenção seja despertada por estas palavras).
  • 95. * Fonte: artigo “Typographic design patterns and best practices”, de Michael Martin - <http://www.smashingmagazine.com/2009/08/20/typographic-design-survey-best-practices-from-the-best-blogs/> tamanho do tipo no título Pesquisa realizada em 50 sites populares (entre portais, blogs e versões on-line de jornais e revistas).
  • 96. * Fonte: artigo “Typographic design patterns and best practices”, de Michael Martin - <http://www.smashingmagazine.com/2009/08/20/typographic-design-survey-best-practices-from-the-best-blogs/> tamanho do tipo no corpo do texto Pesquisa realizada em 50 sites populares (entre portais, blogs e versões on-line de jornais e revistas).
  • 97. * Fonte: questionário “What font size do you use for body copy on your clients sites?”, de Smashing Magazine - <http://polldaddy.com/poll/2251460/?view=results&msg=voted> tamanho do tipo no corpo do texto “Qual o tamanho da fonte você utiliza no corpo do texto do site dos seus clientes?” Pesquisa realizada com 951 designers.
  • 98. tipografia em interfaces digitais:comprimento dos textos
  • 99. * Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sarah Horton comprimento dos textos As colunas de texto das É por esse motivo que os revistas e dos livros são designers tentam manter as estreitas por razões passagens de texto muito fisiológicas: a uma distância densas em colunas que não de leitura normal, o campo de sejam mais largas que esse leitura horizontal é de campo de leitura confortável. aproximadamente 8 centímetros.
  • 100. * Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sarah Horton comprimento dos textos As linhas de texto mais longas exigem que o leitor mova a cabeça ligeiramente ou force os músculos oculares para conseguir lê-las. Há uma perda da leiturabilidade porque, no longo caminho de volta à margem esquerda, o leitor pode perder a localização da próxima linha.
  • 101. * Fonte: artigo “Typographic design patterns and best practices”, de Michael Martin - <http://www.smashingmagazine.com/2009/08/20/typographic-design-survey-best-practices-from-the-best-blogs/> número de caracteres por linha Pesquisa realizada em 50 sites populares (entre portais, blogs e versões on-line de jornais e revistas).
  • 102. tipografia em interfaces digitais: entrelinha dos textos
  • 103. * Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sarah Horton entrelinha dos textos O espaço vertical de um bloco de texto é chamado de entrelinha, ou seja, a distância que existe entre a base de uma linha de texto e a base da próxima linha. A entrelinha tem uma grande influência na leiturabilidade dos blocos de texto. Uma entrelinha muito grande não permite que os olhos encontrem com facilidade a próxima linha. Uma entrelinha muito pequena torna as linhas de texto confusas, porque a parte superior de uma linha se sobrepõe a parte inferior da linha acima dela.
  • 104. * Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sarah Horton entrelinha dos textos Nos documentos impressos, utiliza- se uma entrelinha 2 pontos acima do tamanho da fonte. Logo, uma fonte de 12 pontos, por exemplo, utiliza uma entrelinha de 14 pontos. No caso das interfaces, utiliza-se uma entrelinha maior, para compensar: •  Os longos comprimentos de linha. •  A baixa resolução da tela. Então, uma fonte de 12 pontos, por exemplo, deve utilizar uma entrelinha de 14 a 16 pontos.
  • 105. tipografia em interfaces digitais:por quê é difícil ler na tela?
  • 106. por quê é difícil ler na tela?A tela do computador processa oscaracteres com uma resolução muitomais baixa do que em livros e revistas.O número padrão de pixels por polegada(ppi) em um monitor Mac é em torno de72.No PC, geralmente, é de 96.
  • 107. por quê é difícil ler na tela?Além disso, o texto que é exibido na telaé difícil de ler não só pela baixaresolução.A maior parte dos textos digitais violauma regra fundamental da tipografia: aslinhas são longas demais para permitiruma leitura cômoda.
  • 108. por quê é difícil ler na tela? A informação preenche a janela do browser, independente do tamanho (largura) desta janela: longas linhas de texto.
  • 109. por quê é difícil ler na tela? Neste caso a janela do browser foi ajustada para um tamanho menor, diminuindo a largura da linha de texto.
  • 110. por quê é difícil ler na tela? Blocos fixos de informações: parte da tela não é aproveitada.
  • 111. tipografia em interfaces digitais:lorem ipsum
  • 112. lorem ipsumNão utilize o “lorem ipsum” como recursode marcação de textos na interface.Textos incompreensíveis atrapalham oentendimento da página.Vale a pena perder um pouco mais detempo para apresentar exemplos maispróximos da realidade.
  • 113. lorem ipsum generatorLorem ipsum generator: http://www.designerstoolbox.com/designresources/greek/
  • 114. “ O conteúdo é o que interessa! Design é comunicação. É preciso mais do que ” pixels para comunicar.
  • 115. lorem ipsumA compreensão de boxes e retângulosnão é tão trivial quanto se imagina.A experiência do usuário deve serconduzida por palavras.Não importa quantas são necessárias(poucas ou muitas), mas essas palavrassão peças fundamentais em qualquerinterface.
  • 116. * Fonte: palestra “Elementos de composição de telas - design de interfaces: facilitando a experiência dos usuários”, de Felipe Memória não utilize lorem ipsum Exemplo de wireframe do site GNT.
  • 117. * Fonte: palestra “Elementos de composição de telas - design de interfaces: facilitando a experiência dos usuários”, de Felipe Memória não utilize lorem ipsum Exemplo de wireframe do site GloboEsporte.com.
  • 118. tipografia em interfaces digitais: referênciasbibliográficas
  • 119. referências bibliográficas: livros
  • 120. referências bibliográficas: livros •  Guia de estilos da web: princípios básicos de design para a criação de web sites Patrick J. Lynch Sarah Horton
  • 121. referências bibliográficas: livros •  Identidade visual: •  a direção do olhar •  Gilbeto Luiz Strunk
  • 122. referências bibliográficas: livros •  Design para quem não é designer •  Robin Williams
  • 123. referências bibliográficas: artigos
  • 124. referências bibliográficas: artigos•  Modern web design style, good web 2.0 design•  Bem Hunt•  http://www.webdesignfromscratch.com/web-design/current-style/•  The visual design of Web 2.0•  Jonathan Nicol•  http://f6design.com/journal/2006/10/21/the-visual-design-of-web-20/•  Typographic design patterns and best practices•  Michael Martin•  http://www.smashingmagazine.com/2009/08/20/typographic-design-•  survey-best-practices-from-the-best-blogs/•  Web 2.0 how-to design style guide•  Ben Hunt•  http://www.webdesignfromscratch.com/web-design/web-2.0-design-style-•  guide/
  • 125. referências bibliográficas: artigos•  Design acessível, daltonismo e a cegueira das cores•  Henrique C. Pereira•  http://revolucao.etc.br/archives/design-acessivel-daltonismo-e-a-•  cegueira-das-cores/#more-329•  What font size do you use for body copy on your clients sites?•  Smashing Magazine•  http://polldaddy.com/poll/2251460/?view=results&msg=voted•  Web design trends for 2010•  Jacqueline Thomas•  http://webdesignledger.com/tips/web-design-trends-for-2010•  The best of Eyetrack III: what we saw when we looked through•  their eyes•  Steve Outing•  Laura Ruel•  http://www.poynterextra.org/eyetrack2004/main.htm
  • 126. referências bibliográficas: monografias,dissertações e teses
  • 127. referências bibliográficas: monografias, dissertações e teses•  Ergonomização da interação humano-computador: leiturabilidade•  em terminais de vídeo de computador•  Luís Eduardo Santa Maria•  Dissertação de Mestrado do Programa de Pós-Graduação em Design: Ergonomia e Usabilidade da Interação•  Humano-Computador (PUC-Rio - 2002)
  • 128. referências bibliográficas: palestras
  • 129. referências bibliográficas: palestras•  Elementos de composição de telas - design de interfaces:•  facilitando a experiência dos usuários•  Felipe Memória
  • 130. tipografia em interfaces digitais:sobre o professor
  • 131. sobre o professor Eduardo Rangel Brandão atua desde 1995 na criação de produtos digitais. É gestor da equipe de UX (User eXperience) na área de novas mídias da Globosat, onde desenvolve projetos de sites e aplicativos (smartphones, tablets, smart-TVs, set-top boxes, consoles de games, etc.) para canais de televisão como GNT, SporTV, Multishow, Viva, Gloob, Telecine, Universal Channel, GloboNews, Canal Brasil, MegaPix, SyFy, Futura, PremiereFC, Combate, Sexy-Hot, Off, Muu, Philos, entre outros. É professor em cursos de pós-graduação, em disciplinas correlatas a arquitetura de informação, design de interfaces, usabilidade, interação humano-computador e metodologia de pesquisa. Participa do comitê organizador e do comitê técnico científico de congressos internacionais nas áreas de ergonomia, usabilidade, design de interfaces e interação humano-computador. Trabalhou como arquiteto de informação na Globo.com e como designer de interfaces nas empresas Agência Click, Starmedia, Cadê?, MTEC Informática e Rio Datacentro. Atuou em projetos para Amil, Banco do Brasil, Brasil Telecom, Oi, Petrobras, White Martins, Fundação Planetário, Museu Villa-Lobos, Projeto Portinari, Plaza Shopping Niterói, Pinto de Almeida Engenharia, Decta Engenharia, Programa das Nações Unidas para o Desenvolvimento e Programa de Despoluição da Baía de Guanabara. Publicou diversos trabalhos (entre capítulos de livros, monografias, dissertações e artigos em congressos), concluiu 7 orientações e 38 co-orientações de monografias de alunos de pós-graduação lato sensu e participou de 44 bancas examinadoras em cursos de pós-graduação lato sensu. TITULAÇÃO: mestre em interação humano-computador, especialista em ergonomia e usabilidade e bacharel em desenho industrial, nas habilitações de comunicação visual e projeto de produto.
  • 132. fim :-)Eduardo Rangel Brandão, M.Sc.brandaoedu@gmail.comwww.eduardobrandao.com

×