teoria e prÁtica - diego piovesan medeiros · 1º de janeiro de 2001 a seguir aplicaremos os...

22
TEORIA E PRÁTICA DA FORMA E COR Aula #02 - Planejamento visual Prof.: esp. Diego Piovesan Medeiros [email protected] quarta-feira, 11 de agosto de 2010

Upload: vucong

Post on 09-Nov-2018

215 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: TEORIA E PRÁTICA - Diego Piovesan Medeiros · 1º de Janeiro de 2001 A seguir aplicaremos os quatro princípios ... - Hardware e Acessórios Cabos ... deste slide atrai seus olhos

TEORIA E PRÁTICA DA FORMA E COR

Aula #02 - Planejamento visual

Prof.: esp. Diego Piovesan [email protected]

quarta-feira, 11 de agosto de 2010

Page 2: TEORIA E PRÁTICA - Diego Piovesan Medeiros · 1º de Janeiro de 2001 A seguir aplicaremos os quatro princípios ... - Hardware e Acessórios Cabos ... deste slide atrai seus olhos

PRINCÍPIOS BÁSICOSVejamos a seguir uma capa de um relatório comum (e sem criatividade): centralizada, com espaços iguais para preencher a página. Se você não soubesse ler em português, pensaria que são seis tópicos separados na página, pois cada linha parece ser um elemento individual.

Tudo o Que

Vai Volta

Lições para viajar de

carona pelo país

Robin Willians

1º de Janeiro de 2001 A seguir aplicaremos os quatro princípios básicos, acompanhando os resultados:

quarta-feira, 11 de agosto de 2010

Page 3: TEORIA E PRÁTICA - Diego Piovesan Medeiros · 1º de Janeiro de 2001 A seguir aplicaremos os quatro princípios ... - Hardware e Acessórios Cabos ... deste slide atrai seus olhos

PROXIMIDADE

Tudo o QueVai Volta

Lições para viajarde carona pelo país

Robin Willians1º de Janeiro de 2001

Se os itens estiverem relacionados entre si, agrupe-os em proximidade. Separe-os, se eles não estiverem diretamente ligados.Varie o espaço entre os itens para indicar a proximidade.

Aproximando o título do subtítulo, criamos uma unidade bem-definida, no lugar de seis unidades segmentadas. Ficou nítido que os dois tópicos estão ligados entre si.Distanciando o nome do autos e a data, fica claro que estas informações não fazem parte do título.

quarta-feira, 11 de agosto de 2010

Page 4: TEORIA E PRÁTICA - Diego Piovesan Medeiros · 1º de Janeiro de 2001 A seguir aplicaremos os quatro princípios ... - Hardware e Acessórios Cabos ... deste slide atrai seus olhos

quarta-feira, 11 de agosto de 2010

Page 5: TEORIA E PRÁTICA - Diego Piovesan Medeiros · 1º de Janeiro de 2001 A seguir aplicaremos os quatro princípios ... - Hardware e Acessórios Cabos ... deste slide atrai seus olhos

Proximidade - CD-ROMsCD-ROMsCDs para criançasCDs educacionaisCDs de lazerDiscos laser - EducacionalAprendizado inicialIdiomasCiênciasMatemática - Material do ProfessorLivrosMaterial do professorVídeos - Hardware e AcessóriosCabosDispositivo de entradaArmazenamentoMemóriaModemsImpressoras e acessóriosVídeo e som

O maior problema desta lista é que tudo está próximo de tudo, dificultando uma relação ou organização.

CD ROMs

Educacional

Material do Professor

Hardware & Acessórios

CD ROMsCDs para criançasCDs educacionaisCDs de lazerDiscos laser

IdiomaisCiênciasMatemática

LivrosMaterial do professorVídeos

CabosDispositivo de entradaArmazenamentoMemóriaModemsImpressoras e acessóriosVídeo e som

A mesma lista foi criada através de grupos

visuais. Acrescentando um contraste aos títulos e a linha divisória dá-se

mais legibilidade, o que torna mais fácil uma

relação entre o título e seus tópicos.

quarta-feira, 11 de agosto de 2010

Page 6: TEORIA E PRÁTICA - Diego Piovesan Medeiros · 1º de Janeiro de 2001 A seguir aplicaremos os quatro princípios ... - Hardware e Acessórios Cabos ... deste slide atrai seus olhos

Alinhamento

Tudo o QueVai Volta

Lições para viajar decarona pelo país

Robin Willians1º de Janeiro de 2001

Fique atento a cada elemento que você colocar na página. Alinhe cada objeto com uma parte lateral de outro, para que a página inteira fique unificada.

Mesmo que o nome do autor esteja distante do título, existe uma conexão visual entre os dois elementos, criada através do alinhamento.O exemplo anterior também está alinhado: o alinhamento é a centralização. Mas como você pode ver, alinhando à esquerda ou à direita (como este exemplo) você cria uma lateral mais marcante, mais fácil de seguir com os olhos.

quarta-feira, 11 de agosto de 2010

Page 7: TEORIA E PRÁTICA - Diego Piovesan Medeiros · 1º de Janeiro de 2001 A seguir aplicaremos os quatro princípios ... - Hardware e Acessórios Cabos ... deste slide atrai seus olhos

quarta-feira, 11 de agosto de 2010

Page 8: TEORIA E PRÁTICA - Diego Piovesan Medeiros · 1º de Janeiro de 2001 A seguir aplicaremos os quatro princípios ... - Hardware e Acessórios Cabos ... deste slide atrai seus olhos

Repetição

Tudo o QueVai VoltaLições para viajar decarona pelo país

Robin Willians

Repetição é uma forma mais marcante de criar consistência em um material. Avalie se é apropriado fazer com que um dos elementos fique mais marcante e utilize-o como o elemento repetitivo.

A fonte diferenciada do título se repete no nome do autor, fortalecendo a conexão entre ambos. Os pequenos triângulos foram especialmente acrescentados para criar uma repetição. Apesar de cada um deles apontar para uma direção diferente, a forma triangular é suficientemente específica para ser reconhecida em todas as suas incidências na página.A repetição ajuda a unificar elementos separados do design (da diagramação).

quarta-feira, 11 de agosto de 2010

Page 9: TEORIA E PRÁTICA - Diego Piovesan Medeiros · 1º de Janeiro de 2001 A seguir aplicaremos os quatro princípios ... - Hardware e Acessórios Cabos ... deste slide atrai seus olhos

quarta-feira, 11 de agosto de 2010

Page 10: TEORIA E PRÁTICA - Diego Piovesan Medeiros · 1º de Janeiro de 2001 A seguir aplicaremos os quatro princípios ... - Hardware e Acessórios Cabos ... deste slide atrai seus olhos

Contraste

Robin Willians

Você concorda com o fato de que o exemplo deste slide atrai seus olhos muito mais do que o anterior?Neste caso, o responsável é o contraste do preto contra o branco. Há várias maneiras de criar contrastes: linhas, fontes, cores, relações espaciais, direções, etc.

O trabalho com o contraste neste exemplo foi apenas o de acrescentar a caixa preta. Realce um pouco a letra colocando o subtítulo em itálico, contrastando-o com a letra normal (sem italização) do título e do nome do autor.

Tudo o QueVai Volta

Lições para

viajar de

carona pelo país

quarta-feira, 11 de agosto de 2010

Page 11: TEORIA E PRÁTICA - Diego Piovesan Medeiros · 1º de Janeiro de 2001 A seguir aplicaremos os quatro princípios ... - Hardware e Acessórios Cabos ... deste slide atrai seus olhos

quarta-feira, 11 de agosto de 2010

Page 12: TEORIA E PRÁTICA - Diego Piovesan Medeiros · 1º de Janeiro de 2001 A seguir aplicaremos os quatro princípios ... - Hardware e Acessórios Cabos ... deste slide atrai seus olhos

quarta-feira, 11 de agosto de 2010

Page 13: TEORIA E PRÁTICA - Diego Piovesan Medeiros · 1º de Janeiro de 2001 A seguir aplicaremos os quatro princípios ... - Hardware e Acessórios Cabos ... deste slide atrai seus olhos

TipografiaA combinação de fontes diferentes visa aperfeiçoar a comunicação, porém, algumas vezes esta combinação pode confundi-la. Tome cuidado ao utilizar vários tipos de fontes, crie sempre um contraste para melhorar o entendimento. Há seis maneiras claras e diferentes de contrastar a tipologia:

Não seja

TÍMIDOExponha suas

idéias!

Um contraste de tamanho nem sempre significa que você deva fazer com que o tipo fique grande; significa que deve haver um contraste. Por exemplo: quando você vê uma pequena linha isolada em uma página grande de jornal, fica com vontade de lê-la, certo? Grande parte do que o convida a fazê-lo é o contraste do tipo muito pequeno colocado em uma página grande.

quarta-feira, 11 de agosto de 2010

Page 14: TEORIA E PRÁTICA - Diego Piovesan Medeiros · 1º de Janeiro de 2001 A seguir aplicaremos os quatro princípios ... - Hardware e Acessórios Cabos ... deste slide atrai seus olhos

quarta-feira, 11 de agosto de 2010

Page 15: TEORIA E PRÁTICA - Diego Piovesan Medeiros · 1º de Janeiro de 2001 A seguir aplicaremos os quatro princípios ... - Hardware e Acessórios Cabos ... deste slide atrai seus olhos

O peso de uma fonte refere-se à espessura dos traços. A maioria das famílias é desenhada com vários pesos: regular, bold (negrito), light, etc. O contraste dos

pesos é uma das melhores maneiras de aumentar a estética visual de uma página sem redesenhar algo, mas você nunca poderá alcançar o contraste belo

e forte se não tiver uma fonte com traços grandes e fortes.

Helvetica Light

Helvetica Normal

Helvetica Bold

Outro Newsletter

TítulonononononononononononononononononononononononononononononononononononOnonononononononononononononononononononononononononononononono..

Outro TítulononononononononononononononononononononononononononononononononononononononononononOnonononononononononononononononononononononononononononononono..

nononononononononononononononononononononononononononononOnonononononononononononononononononononononononononononononono..

SubtítulonononononononononononononononononononomnononononononononononononononononOnonononononononononononononononononononononononononononononono..

Outro Newsletter

TítulonononononononononononononononononononononononononononononononononononOnonononononononononononononononononononononononononononononono..

TítulononononononononononononononononononononononononononononononononononononononononononOnonononononononononononononononononononononononononononononono..

nononononononononononononononononononononononononononononOnonononononononononononononononononononononononononononononono..

SubtítulonononononononononononononononononononomnononononononononononononononononOnonononononononononononononononononononononononononononononono..

quarta-feira, 11 de agosto de 2010

Page 16: TEORIA E PRÁTICA - Diego Piovesan Medeiros · 1º de Janeiro de 2001 A seguir aplicaremos os quatro princípios ... - Hardware e Acessórios Cabos ... deste slide atrai seus olhos

Serifado

EstruturaSerifas

Contraste grosso-finoSem Serifa

Não há serifas

Não há contraste grosso-fino nos traços

Existem ainda as categorias: Moderno, Manuscrito, Decorativo, Estilo Antigo.

Lucida SansHelveticaArial

A estrutura refere-se à maneira através de qual uma letra é construída e, como podemos ver através deste exemplo, a estrutura de cada categoria é bastante distinta.

Dica importante: nunca coloque duas fontes de mesma categoria na mesma página. Não há como disfarçar suas similaridades. Além disso, existem tantas opções! Por que dificultar as coisas?

quarta-feira, 11 de agosto de 2010

Page 17: TEORIA E PRÁTICA - Diego Piovesan Medeiros · 1º de Janeiro de 2001 A seguir aplicaremos os quatro princípios ... - Hardware e Acessórios Cabos ... deste slide atrai seus olhos

Cuidado!Nunca façam isso pelamordedeus!

quarta-feira, 11 de agosto de 2010

Page 18: TEORIA E PRÁTICA - Diego Piovesan Medeiros · 1º de Janeiro de 2001 A seguir aplicaremos os quatro princípios ... - Hardware e Acessórios Cabos ... deste slide atrai seus olhos

FormaA forma de uma letra refere-se ao seu formato. Os caracteres podem ter a mesma estrutura, mas suas “formas” podem ser diferentes. Por exemplo, a letra “G” (em caixa-alta) tem a mesma estrutura da letra “g” (em caixa-baixa) da mesma família. Entretanto, suas verdadeiras formas – ou formatos – são muito diferentes. Este é um tipo de contraste muito prático, e aumenta a legibilidade e ênfase de uma palavra ou frase.

G gA aB bH hE e

As formas de cada uma destas letras

maiúsculas são completamente

diferente das minúsculas. Portanto,

caixa-alta versus caixa-baixa é outra

maneira de contrastar os tipos.

Usar caixa-alta algumas vezes (não exagere!) faz surgir um

CONTRASTE

girafa

GIRAFA

tartaruga

TARTARUGA

quarta-feira, 11 de agosto de 2010

Page 19: TEORIA E PRÁTICA - Diego Piovesan Medeiros · 1º de Janeiro de 2001 A seguir aplicaremos os quatro princípios ... - Hardware e Acessórios Cabos ... deste slide atrai seus olhos

quarta-feira, 11 de agosto de 2010

Page 20: TEORIA E PRÁTICA - Diego Piovesan Medeiros · 1º de Janeiro de 2001 A seguir aplicaremos os quatro princípios ... - Hardware e Acessórios Cabos ... deste slide atrai seus olhos

Direção

PARA CIMA! O tipo inclinado para cima cria uma energia positiva.

Girar, inclinar, inverter, etc, as vezes podem ser uma boa maneira de enfatizar e contrastar uma parte de seu texto.

Título longo nas duas colunas

Nononononono nonononononononononononononononononononononononononononononononononononononononononononononononononononononononononono.

Subtítulo nononononon ononononononononononoonnonononononononono.ne

wsl

ette

r Nononononononononononononononononononononononononononononononononononononononono.

Nonononono nononononononononononononononononononononononononononononononononononononononono..

Segundo Título interessante

As vezes um redirecionamento marcante do tipo cria um impacto dramático ou um formato único, o que justifica plenamente seu uso.

quarta-feira, 11 de agosto de 2010

Page 21: TEORIA E PRÁTICA - Diego Piovesan Medeiros · 1º de Janeiro de 2001 A seguir aplicaremos os quatro princípios ... - Hardware e Acessórios Cabos ... deste slide atrai seus olhos

quarta-feira, 11 de agosto de 2010

Page 22: TEORIA E PRÁTICA - Diego Piovesan Medeiros · 1º de Janeiro de 2001 A seguir aplicaremos os quatro princípios ... - Hardware e Acessórios Cabos ... deste slide atrai seus olhos

Referência bibliográfica- Design para quem não é designer (Robin Willians)- www.ccsp.com.br

quarta-feira, 11 de agosto de 2010