Iniciação a identidade visual pt1

703 visualizações

Publicada em

Iniciação ao estudo de identidade visual através de passos simples com explicações objetivas.

Publicada em: Design
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
703
No SlideShare
0
A partir de incorporações
0
Número de incorporações
1
Ações
Compartilhamentos
0
Downloads
24
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Iniciação a identidade visual pt1

  1. 1. INICIAÇÃO A IDENTIDADEVISUALPt1 - Tipografia
  2. 2. Identidade Visual“Conjunto de elementos gráficos que compõemas características visuais de um nome, idéia,empresa, produto ou serviço.”
  3. 3. Elementos a serem tratados Tipografia Símbolo Cores Manual de identidade visual
  4. 4. TipografiaA tipografia (do grego typos — “forma” — egraphein — “escrita”) é a arte e o processo decriação na composição de um texto, física oudigitalmente.
  5. 5. Histórico Pi Shêng por volta do ano 1040 da era cristã inventou os tipos separados que eram feitos de argila, depois madeira e finalmente de bronze. Johanner Gutenberg, em 1445, desenvolve os tipos móveis. https://www.youtube.com/watch?v=DRdxfzXyuEE
  6. 6. Grupos Tipográficos
  7. 7. Elementos de construçãoToda e qualquer fonte tipográfica é composto por elementos distintos, tais como: - Linha de Base (baseline) - Linha Central (meanline ou midline) - Ascendente (ascender) - Descendente (descender) - Letra Caixa Alta (upper-case) - Letra Caixa-baixa (lower-case) - Altura de x (x-height) - Cabeça ou Ápice (apex) - Serifa (serif) - Barriga ou Pança (bowl) - Haste ou Fuste (stem) - Montante ou Trave (diagonal stroke) - Base ou Pé (foot) - Barra (bar) - Bojo (counter) - Etc
  8. 8. Fonte Conjunto de caracteres sob o mesmo estilo e em todos os corpos. Caixa alta, baixa, sinais de pontuação, acentos e numerais.
  9. 9. Usabilidade Na maioria dos casos, uma composição tipográfica deve ser especialmente legível e visualmente envolvente, sem desconsiderar o contexto em que é lido e os objetivos da sua publicação. No uso da tipografia o interesse visual é realizado através da escolha adequada de fontes tipográficas, composição (ou layout) de texto, a sensibilidade para o tom do texto e a relação entre texto e os elementos gráficos na página. http://www.youtube.com/watch?v=McZSUjP1AcE
  10. 10. Sites para download de fontes http://www.dafont.com/ http://www.fontsquirrel.com/
  11. 11. Ferramentas tipográgicas http://wordmark.it/ http://www.lipsum.com/ http://www.csstypeset.com/ http://www.myfonts.com/WhatTheFont/
  12. 12. Aplicações web Tamanho de fonte maior que 13px Não utilizar mais que 3 tipos de fontes diferentes As fontes mais legíveis são as sem serifas Um bom espaçamento entre linhas também é aconselhável para melhorar a legibilidade
  13. 13. Aplicações web Contraste de fonte com o fundo. Se não tivermos certeza de que o contraste é suficiente, podemos fazer um screenshot da página, abrir num editor de imagem e transformar a imagem em tons de cinza. Prefira alinhar o texto a esquerda Utilize espaços entre parágrafos para deixar o texto respirar Usar a unidade EM para redimensionar o texto.
  14. 14. Aplicações web Não utilizar aspas verticais. Do lado esquerdo da citação: “, e do lado direito ”, o browser irá reproduzir assim: “Melhor citação”. Adicionar espaço extra entre as linhas. Usar as reticências corretamente em vez de três pontos. Devido ao comprimento do ponto final, três pontos, não parecem uma interrupção. O símbolo correcto a usar é uma elipse. Para usar uma elipse usamos … que fica assim: …
  15. 15. Outras fontes de pesquisaArtigos On Web Typography (http://www.alistapart.com/articles/on-web-typography/) Typography Guidelines And References (http://www.smashingmagazine.com/typography-guidelines-and- references/) “What Font Should I Use?%rdquo;: Five Principles for Choosing and Using Typefaces (http://www.smashingmagazine.com/2010/12/14/what-font-should-i-use-five-principles-for-choosing-and- using-typefaces/)Tutoriais CSS Typography: The Basics (http://sixrevisions.com/css/css-typography-01/) 10 Web Typography Rules Every Designer Should Know (http://www.webdesignerdepot.com/2009/02/10-web-typography-rules-every-designer-should-know-2/) 22 Advanced CSS Text Effects And Web Typography Tips (http://www.1stwebdesigner.com/css/advanced- css-text-effects-web-typography-tips/) 10 Best Web Typography Tutorials (http://idesignow.com/css/10-best-web-typography-tutorials.html)
  16. 16. Bibliografia http://log.pt/blog/2012/01/dicas-de-tipografia- para-a-web/ http://chocoladesign.com/9-exemplos-de- tipografia-na-web http://rogerlima.wordpress.com/2008/04/25/aul a-de-tipografia/ http://brenobrito.wordpress.com/2011/05/22/um a-verdadeira-aula-sobre-tipografia/

×