A tipografia cinética se refere a arte e técnica de expressão utilizando movimento e animação de textos e palavras. A tipografia cinética tem demonstrado a abilidade de adicionar conteúdo emotivo significante e trazer apelo ao texto, permitindo que algumas qualidades normalmente encontradas em filmes e na palavra falada sejam usadas em texto estático. (Não sabe o que é tipografia? Tenho um artigo inteiro explicando isto).

Exemplos de vídeos tipográficos

Mais exemplos e inspiração

Mais alguns sites onde você pode encontrar exemplos e inspirações para vídeos tipográficos.

• Typeinspire – Inspiração para obras tipográficas em geral
• Kinetic Typography – Canal no Vimeo
• Nicetype – Outro canal no Vimeo
• I Love Typography – Um dos melhores sites de tipografia
• Webdesigner depot – Mais exemplos de vídeos tipográficos

Como fazer um vídeo tipográfico

Existem vários tutoriais de como fazer vídeos tipográficos na web, vou selecionar apenas alguns aqui. Infelizmente, todos são em inglês (se alguém souber de algum tutorial em português, por favor comente!). De qualquer forma, como são vídeo-tutoriais em sua maioria, é só seguir o que é feito na tela que não deve ter problema. Os tutoriais abaixo são para Adobe After Effects – um dos melhores softwares para criação de efeitos em vídeo. Caso alguém tenha sugestões melhores, por favor comente!

• Tipografia cinética em Illustrator e After Effects
• Tutorial básico de animação com tipografia
• Ótimo tutorial que te dá o básico da animação com tipografia
• Tutorial do Video Copilot muito bom também

Ah, e como sei que vai ter um ou outro pedindo pra eu ensinar, deixo avisado: sou bem amador ainda então não vou fazer nenhum vídeo tutorial até aprender bem ;) (mesmo assim, sempre tem um mané que não lê o artigo todo).

Fontes: designflakes, Hiato Criativo, YouTube

Aproveite e siga o Design Blog no Twitter! Assim você fica por dentro das novidades no mundo do design, com links super interessantes.

Artigos relacionados

• O que é tipografia?
• Vídeos tipográficos
• Vídeos tipográficos

Jacek Utko sugere que é tempo de repensar o papel do jornal (desculpe o trocadilho). Afinal de contas, mais e mais pessoas preferem acessar suas notícias através da internet com seus computadores ou smartphones. Em seu trabalho, Utko provou que um bom design pode ajudar aos leitores reconectarem com os jornais.

Confira o vídeo inspirador e lembre-se: um bom design pode salvar.

Aproveite e siga o Design Blog no Twitter! Assim você fica por dentro das novidades no mundo do design, com links super interessantes.

Artigos relacionados

• O Grande Texto Vermelho (Trailer)
• O que é tipografia?
• Três erros comuns no design gráfico

Aproveite e siga o Design Blog no Twitter! Assim você fica por dentro das novidades no mundo do design, com links super interessantes.

Artigos relacionados

• Vida de designer
• Ser designer é…
• O design pode salvar uma empresa da falência?

Fonte do vídeo

Isso prova que o designer precisa saber quando intervir e avisar ao cliente “olha, existe uma maneira mais fácil de fazer isto. Talvez você não ache interessante, mas o objetivo é informar e satisfazer aos seus clientes, e não a você como indivíduo“. Afinal de contas, o cliente nem sempre tem razão e é nosso dever educá-lo quando necessário.

Aproveite e siga o Design Blog no Twitter! Assim você fica por dentro das novidades no mundo do design, com links super interessantes.

Artigos relacionados

• Design e experiência – parte 2
• Vídeos tipográficos – Exemplos e tutoriais
• O design pode salvar uma empresa da falência?

Com a popularização da web e o surgimento de novos softwares que facilitam muito a vida dos designers, vários vídeos de tipografia cinética têm surgido na internet.

Tomei a liberdade de selecionar os melhores vídeos para você, leitor. São vídeos baseados em diálogos de filmes famosos.

Ah, não sabe o que é tipografia? Já fiz um artigo sobre isto – leitura recomendada!

Pulp Fiction

Matrix

Onze Homens E Um Segredo (Oceans Eleven)

O Advogado do Diabo (Devil’s Advocate)

Explicação sobre o que é tipografia – já foi postado aqui, mas vale a pena re-postar

Vídeo-musical curto da trilha “Are You Gonna Be My Girl” da banda Jet

Sugestão: procure pela palavra “typography” no YouTube que você vai encontrar centenas de vídeos assim.

Aproveite e siga o Design Blog no Twitter! Assim você fica por dentro das novidades no mundo do design, com links super interessantes.

Artigos relacionados

• Vídeos tipográficos – Exemplos e tutoriais
• Vídeos tipográficos
• O que é tipografia?

O plano maior do Google

Cena do filme Pulp Fiction

Cena de comédia de Abbott e Costello

Cena do filme Ocean’s 11

Mais uma do Ocean’s 11

Animação sobre as diferenças entre dois tipógrafos conhecidos.

Cena do filme Devil’s Advocate

Aproveite e siga o Design Blog no Twitter! Assim você fica por dentro das novidades no mundo do design, com links super interessantes.

Artigos relacionados

• Vídeos tipográficos – Exemplos e tutoriais
• Vídeos tipográficos
• O que é tipografia?

O que significa?

Tipografia é a impressão dos tipos. Está morrendo com o computador. Tipologia é o estudo da formação dos tipos. Cresce a cada dia. Mas no final, a nomenclatura usada é tipografia. Como fonte (família do tipo) é atualmente chamada de tipo.

O termo tipo é o desenho de uma determinada família de letras como por exemplo: verdana, futura, arial, etc. As variações dessas letras (ligth, itálico e negrito, por exemplo) de uma determinada família são as fontes desenhadas para a elaboração de um conjunto completo de caracteres que consta do alfabeto em caixa alta e caixa baixa, números, símbolos e pontuação.

Os tipos constituem a principal ferramenta de comunicação. As faces alternativas de tipos permitem que você dê expressão ao documento, para transmitir instantaneamente, e não-verbalmente, atmosfera e imagem

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. Todos esses fatores são combinados para que o layout final tenha uma “atmosfera” ou “ressonância” apropriada ao conteúdo abordado. No caso da mídia impressa, designers gráficos costumam se preocupar com a escolha do papel adequado, da tinta e dos métodos de impressão.

O conhecimento da tipografia é essencial aos designersO conhecimento adequado do uso da tipografia é essencial aos designers que trabalham com diagramação, ou seja, na relação de texto e imagem. Logo a tipografia é um dos pilares do design gráfico e uma matéria necessária aos cursos de design. Para o designer que se especializa nessa área, a tipografia costuma se revelar um dos aspectos mais complexos e sofisticados do design gráfico.

Classificação das fontes

Na tipografia, as fontes tipográficas (ou apenas fontes) são classificadas em 4 grupos básicos: as com serifas, as sem serifas, as cursivas e as fontes dingbats.

Elementos das fontes

Toda 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

O arranjo de tipos é a seleção de fonte, altura da letra (point size), largura da linha, espaçamento entre-linha (leading) e espaçamento entre-letras (kerning). Isto tudo visa melhorar a legibilidade do texto a ser escrito, facilitando o entendimento dele além de providenciar um conforto aos olhos de quem lê.

Não confunda leiturabilidade com legibilidade: Leiturabilidade é relacionada a língua em que o texto é escrito ou entendido – diz respeito a dificuldade da língua em si, e não sua aparência. A ergonomia é uma das disciplinas que estuda o efeito da tipografia nos seres humanos, examinando o conforto visual, o entendimento da mensagem, entre outras coisas.

Alinhamento

Há cinco maneiras básicas de organizar as linhas de composição em uma página:
1) Justificada: todas as linhas têm o mesmo comprimento e são alinhadas tanto a esquerda quanto a direita.
2) Não-justificada á direita: as linhas têm diferentes comprimentos e são todas alinhadas á esquerda e irregulares a direita.
3) Não-justificada á esquerda: as linhas têm diferentes comprimentos e são alinhadas á direita e irregulares a esquerda.
4) Centralizada: as linhas têm tamanho desigual, com ambos os lados irregulares.
5) Assimétrica: um arranjo sem padrão previsível na colocação das linhas.

Dicas importantes

Alinhamento: Evite alinhamento centralizado em textos longos. O excesso de espaço branco nas laterais tende a fazer a pessoa se perder. Opte por textos alinhados a esquerda, sem justificativa (caso as palavras fiquem com espaçamento grande d   e   m   a   i   s   entre elas)

Contraste: Nunca utilize tipo claro em fundo claro, ou tipo escuro em fundo escuro. Opte sempre pelo contraste. Afinal de contas, texto é para ser lido! Para impressos, o melhor é sempre letra preta no papel branco. Já para os computadores, há muita divergência de opiniões: para muitos, letra branca em fundo preto é menor pois na tela o branco é uma luz emitida, enquanto o preto é ausente (o que supostamente deveria facilitar a leitura além de não consumir tanta energia elétrica). Mas isto ainda é disputado. De qualquer maneira, contraste sempre.

Use apenas uma categoria de fonte: Se você fizer um texto todo com uma fonte serifada, utilize apenas fontes serifadas no resto do texto. Não mude no meio do caminho, pois isso pode trazer uma confusão visual ao leitor. Claro que se você quiser usar uma fonte como título de um texto e prosseguir com uma fonte diferente, manda bala. Mas…

Se for mudar de fonte, deixe óbvio a mudança; Dá pra criar um texto com título em Georgia e corpo do texto em Helvetica (serifada e sem-serifa, respectivamente). Mas deixe óbvio a mudança – use uma cor diferente, um fundo diferente, ou um tamanho de letra diferente. Além de criar um impacto visual melhor, a pessoa não fica achando que o designer errou na hora de utilizar suas fontes.

Não se esqueça dos princípios básicos do design. Já fiz um artigo sobre isto antes.

Vídeos tipográficos

Para finalizar, confira alguns vídeos interessantes:

O que é tipografia. Vídeo em inglês bem produzido explicando rápidamente o que vêm a ser tipografia. Link do YouTube.

Escola Tipográfica. Vídeo em inglês promovendo uma escola tipográfica. Link do YouTube.

Bibliografia

• I Love Typography
• Wikipedia
• Type-Culture Academic Resource

Aproveite e siga o Design Blog no Twitter! Assim você fica por dentro das novidades no mundo do design, com links super interessantes.

.

Artigos relacionados

• Dia Internacional do Design Gráfico + fontes grátis!
• Fontes extravagantes = sofisticação
• Fonte tipográfica beneficente
]]> http://design.blog.br/design-grafico/o-que-e-tipografia/feed 45 http://design.blog.br/design-grafico/tres-erros-comuns-no-design-grafico http://design.blog.br/design-grafico/tres-erros-comuns-no-design-grafico#comments Sat, 22 Sep 2007 16:00:42 +0000 Canha http://digitalpaperweb.com.br/ezine/1/tres-erros-comuns-no-design-grafico Vagando pelo YouTube, encontrei um documentário da rede de televisão norte-americana ABC no seu programa 20/20. Uma espectadora do site apontou que, depois de 27 anos no ar, o programa – que sempre tratou de assuntos humanos importantes – nunca falou sobre design gráfico (que é algo extremamente importante nos dias de hoje).

Pensando nisso, o programa fez um segmento interessante dedicado ao design, e explicando os três erros mais comuns nesta área.

(Sim, é só uma brincadeira. Se bem que Comic Sans deveria ser banido da face da Terra…)

Aproveite e siga o Design Blog no Twitter! Assim você fica por dentro das novidades no mundo do design, com links super interessantes.

.

Artigos relacionados

• O design pode salvar uma empresa da falência?
• O Grande Texto Vermelho (Trailer)
• O que é tipografia?
]]> http://design.blog.br/design-grafico/tres-erros-comuns-no-design-grafico/feed 1