conceitos de design gráfico -...
TRANSCRIPT
Conceitos de Design Gráfico
Disciplina de Design Gráfico
Índice
2
Projeto de Design Gráfico Layouts Efetivos Elementos de Design Princípios de Design Referências Bibliográficas
Projeto de Design Gráfico
3
4
Projeto de Design Gráfico
Definição
Processo de criar a aparência de uma publicação, apresentação ou Web site de uma forma lógica e atrativa.
Projeto de Design Gráfico
Objetivos
5
atrair atenção agregar valor a uma
mensagem aumentar número de
leitores simplificar, organizar,
fornecer ênfase, e criar unidade para a leitura
Projeto de Design Gráfico
Etapas
6
Analisar o público Determinar o propósito de sua mensagem Decidir onde e como sua mensagem aparecerá Estabeleçar metas Organizar texto e gráficos Escolhar um formato adequado e layout Selecionar fontes adequadas Adicionar e manipular gráficos Organizar texto e gráficos Corrigir provas Refinar e afinar
Layouts Efetivos
7
Layout
Definição
8
O arranjo de textos e gráficos em uma publicação impressa, apresentação ou Web site.
Deve servir ao objetivo pretendido pelo designer, organizar as informações e gráficos, a fim de criar um caminho visual para os leitores a seguir, e atrair a atenção dos leitores.
Não há um caminho certo para criar um bom layout.
Layout
Diretrizes Gerais
9
determinar o propósito da sua publicação estabelecer a mensagem principal planejar o seu layout em torno da mensagem escolher o tipo de mídia adequada identificar o público-alvo layoutar mantendo este público em mente
Layout
Diretrizes Organizacionais
10
tamanhos diferentes para diferentes elementos hierarquia e coerência na formatação linhas para separar as informações em grupos pesos diferentes em fontes espaço em branco para fins de design informações importantes no canto superior esquerdo caixa em torno de informações importantes chamar a atenção para as listas de itens cores ou contraste para separar ou enfatizar
Layout
Capturando a Atenção
11
ampliar uma imagem ou foto de algo pequeno inclinar uma imagem ou um bloco de texto em um ângulo cercar um elemento pequeno com espaços em branco cores vivas para ambientes cinzentos ou escuros áreas pretas sólidas ou uma grande área branca cortar uma imagem de uma forma incomum informações importantes apresentadas de forma atípica
Elementos de Design
12
Elementos de Design
13
Linhas Formas Texturas Espaço em branco Tamanho Contraste Cor
Linhas Qualquer marca a ligação entre dois pontos. Diferentes de linhas aparecem em toda parte. Linhas retas, curvas sinuosas, finas, grossas, sólidas e
pontilhadas.
14
Linhas
Utilização organizar as informações destacar elementos conectar ou separar informações circular uma imagem ou criar
uma borda criação de grades criação de gráficos de dados criação de padrões direcionar o olho do leitor ou
criar uma sensação de movimento
15
Linhas
Exemplos de Utilização
16
Linhas
Exemplos de Utilização
17
Linhas
Exemplos de Utilização
18
FormasQualquer coisa que tenha altura e largura tem a forma.
Formas geométricas são regulares e estruturadas. Funcionam muito bem como blocos de construção para o projeto gráfico.
Formas naturais são irregulares e fluídas. Formas abstratas são versões simplificadas de formas
naturais.
19
Formas
Psicologia das FormasFormas Atribuídas a: Exemplos
Angulares força, estabilidade, equilíbrio, confiança
quadrados, retângulos e triângulos
Circulares harmonia, suavidade, proteção, afeto
círculos e elipses
Verticais conflito, dinamismo, poder
Horizontais tranquilidade, calma, descanso, silêncio
Retas masculinidade, agudez, pressa
Curvilíneas ritmo, movimento, prazer, generosidade
Grandes poder, força
Pequenas delicadeza, fraqueza, simplicidade
Formas
Utilização cortar uma foto de uma
forma incomum simbolizar uma idéia tornar um bloco de
texto mais interessante, definindo o texto em uma forma
destacar informações
21
Texturas Aparência ou sensação de uma superfície. Adiciona riqueza e dimensão aos layouts. Também contempla padrões de formas.
22
Texturas
Utilização fornecer humor ou personalidade ao layout criar contraste entre elementos desviar o olhar provocar emoções criar uma sensação de riqueza e profundidade
23
Texturas
Exemplo de Uso
24
EspaçoDistância ou área entre ou em torno de coisas.
Separa ou une, destaca, e dá ao olhar um descanso visual.
25
EspaçoO espaço em branco (a ausência de texto e gráficos) é fundamental para o design gráfico. A chave é a de adicionar apenas bastante espaço em branco para que o olho sabe para onde ir e pode descansar um pouco quando chega lá.
26
Espaços
Utilização fornecer um descanso visual criar laços entre elementos destacar um elemento tornar o texto mais legível muito espaço em branco em torno de um elemento
importante chama a atenção para ele
27
Espaço
Exemplo de Uso
TamanhoMuito importante em manter um layout funcional, atraente e organizado.
Mostra que é mais importante, atrai a atenção, e ajuda a ajustar o foco.
29
Tamanho
Utilização mostrar importância de um elemento torna os elementos de fácil percepção atrair a atenção contraste de tamanho cria interesse estabelecer uma aparência
consistente
30
Tamanho
Exemplo de Uso
31
ContrasteValor de brilho ou escuridão de uma área.
Cada sombra sobre o espectro de cores tem um contraste, de muito mais claro ao mais escuro.
Separa, sugere humor, acrescenta drama, e cria a ilusão de profundidade.
32
Contraste
Utilização dar a ilusão de volume e profundidade criar uma imagem de leveza ou escuridão tornar um layout dramático com grandes áreas de luz ou
sombra enfatizar um elemento objetos parecerem estar na frente ou atrás de outros
33
Contraste
Exemplo de Uso
34
CorConfere humor, cria imagens, atrai a atenção, e identifica objetos.
Ao selecionar cores para uma publicação ou uma página web, pense no que você quer que a cor faça e o que é apropriado para o seu propósito.
35
Cor
Utilização destaque para elementos
importantes atrair os olhos sinaliza onde olhar
primeiro criar um estado de
espírito organizar elementos em
conjunto ou isolá-los provocar emoção
36
Cor
Espectro de CoresSão divididas em primárias, secundárias e terciárias:
37
Cor
RGB x CMYK
38
RGB: luz emitidareprodução de cores em dispositivos eletrônicos
CMYK: luz refletidacores subtrativas para meios impressos
Cor
Temperatura
39
Cores quentes: representam as cores do fogo, das folhas de outono, e do pôr do sol; são energizantes, apaixonados, e positivas.
Cores frias: mais moderadas do que as cores quentes; representam a noite, a água, a natureza; são calmantes, relaxantes, e um pouco reservadas.
Cores neutras: servem como pano de fundo no projeto gráfico, combinados com cores mais viva; o significado é associado às cores que as cercam.
Cor
Harmonia - Cores Análogas pertencem a mesma família
de tons usadas para dar a sensação de
uniformidade geralmente tornam o layout
elegante, porém deve-se tomar o cuidado para não deixá-lo monótona
40
Cor
Harmonia - Cores Complementares são opostas umas às outras cada cor primária tem uma
secundária por complementar e vice-versa
ao juntar-se obtém-se alguma tonalidade de cinza
utilizadas para valorizar o contraste
41
Harmonia - Cores Análogas
42
Cor
Psicologia das Cores
Cor Associado a:
Vermelho paixão, força, amor, perigo
Laranja energia, criatividade, equilíbrio, entusiasmo
Amarelo riqueza, diversão, satisfação, otimismo
Verde natureza, juventude, sorte, esperança
Azul harmonia, confidência, tecnologia, liberdade
Violeta espiritualidade, realeza, sabedoria, dor
Branco pureza, inocência, paz, simplicidade
Preto sofisticação, formalidade, morte, mistério
Cor
Paleta de Cores
44
45
Princípios de Design
46
Princípios de Design
47
Equilíbrio Ênfase Ritmo Unidade
Equilíbrio
48
Distribuição igual de peso, volume ou importância.
Equilíbrio simétrico é um arranjo de elementos para que eles sejam distribuídos uniformemente à esquerda e à direita.
Equilíbrio assimétrico é um arranjo de objetos de igual peso em cada lado da página. Cor, contraste, tamanho, e forma podem ser usados.
Equilíbrio
Utilização
49
repetição de forma a intervalos regulares centralizar elementos várias ilustrações em uma área pequena para equilibrar
uma imagem ou bloco de texto grande uma ou duas formas incomuns e o resto formas regulares amenizar um texto pesado com uma ilustração vibrante muito espaço em branco em torno de grandes blocos de
texto ou imagens escuras
50
Ritmo
51
Padrão criado por elementos repetitivos variados. Repetição e variação são as chaves para o ritmo visual.
Elementos em intervalos regulares criam um ritmo suave e uma sensação relaxante.
Mudanças bruscas no tamanho e espaçamento dos elementos cria um ritmo mais vivo e um clima animado.
Ritmo
Utilização
52
série de elementos de forma semelhante com espaços em branco entre si para um ritmo regular
série de elementos progressivamente maiores com maiores espaços em branco para um ritmo progressivo
alternar fontes em negrito e padrão, claro e escuro repetir uma forma semelhante em várias áreas repitir um elemento na mesma posição em cada página
RITMO
Ênfase
54
O que se destaca ou se faz notar.
Necessário um ponto focal para chamar a atenção dos leitores. Geralmente, um ponto focal é criado quando um elemento é diferente do resto.
Cuidado: muitos pontos focais anulam o efeito.
Ênfase
Utilização
55
série de ilustrações quadradas ao lado de uma delineada em uma forma incomum
parte importante do texto em uma curva ou um ângulo negrito para títulos e subtítulos e um peso mais leve para
todos os outros conteúdos imagem grande ao lado de um pequeno pedaço de texto inversão: letras claras contra fundo escuro cor ou formato de fonte inusitada listas destacadas em uma barra lateral sombreada
Ênfase
Exemplo de Uso
Unidade
57
Ajuda os elementos a encaixarem-se ao layout.
Os leitores precisam pistas visuais para que eles percebam o layout como uma unidade.
Pode-se utilizar a repetição de cores, formas e texturas, ou uma estrutura de grade com margens, colunas, e espaçamento proporcionais.
Unidade
Utilização
58
apenas um ou dois estilos de fonte e varie suas características (tamanho, cor e contraste)
coerência com o tipo de fonte, tamanhos e estilos para títulos, subtítulos, legendas, cabeçalhos, rodapés
use a mesma paleta de cores repita cores, formas ou texturas em diferentes áreas elementos visuais que compartilham cores, temática ou
forma semelhante. alinhe imagens e texto com as linhas de grade
Unidade
Exemplos de Uso
59
Referências
60
Referências
Color in Motionwww.mariaclaudiacortes.com
Design – Smashing Magazinewww.smashingmagazine.com/category/design
Design with Lines – Design Shackwww.designshack.co.uk/articles/graphics/6-tips-for-designing-with-lines
The Basic of Graphic Designwww.online.tusc.k12.al.us/tutorials/grdesign/grdesign.htm
Whitespace – A List Apartwww.alistapart.com/articles/whitespace
61