SlideShare uma empresa Scribd logo
1 de 38
Baixar para ler offline
Prof. Nécio de Lima Veras
http://lattes.cnpq.br/8284657916723590
Noções de Design Gráfico
Unidade I - Introdução ao Design
Gráfico
Prof. Nécio de Lima Veras
http://lattes.cnpq.br/8284657916723590
Objetivo
Conhecer os princípios do Design Gráfico.
Prof. Nécio Veras
Leituras recomendadasLeituras recomendadas
Prof. Nécio Veras
Conceitos básicosConceitos básicos
● Design
– Concepção de um projeto ou modelo;
planejamento.
● Designer
– Indivíduo que planeja ou concebe um projeto ou
modelo.
● Web design e web designer.
Prof. Nécio Veras
O que é Design?O que é Design?
• [...] Design pode ser compreendido de várias
formas:
– habilidade, estilo, engenharia, invenção,
planejamento, refinamento, simples exercício de
bom gosto.
Texto de abertura da exposição “Design fo Life”
Cooper-Hewitt National Design Museum, Nova
York, EUA
Prof. Nécio Veras
DesignDesign
• Ver e transmitir experiência visual para
interlocutores.
• Levar em conta:
– Dinamismo;
– Legibilidade;
– Equilíbrio.
Prof. Nécio Veras
DesignDesign
• Ser inteligente;
• Saber transmitir uma mensagem usando
representações visuais;
Prof. Nécio Veras
Traduzindo o outdoorTraduzindo o outdoor
Prof. Nécio Veras
DesignDesign
• Saber colecionar referências visuais e como
profissionais do mundo inteiro resolvem
problemas similares.
• Aprende a montar as partes para construir um
todo;
• Requer tempo, paciência e cuidado em cada
detalhe;
• Talento é só um pré-requisito.
Prof. Nécio Veras
Design DigitalDesign Digital
• Computador nas comunicações:
– Desktop Publishing: substitui todo processo de
design gráfico;
– Vídeo Digital: substitui processo de edição
usando fitas magnéticas e gerações;
– Internet: chega para deixar todo mundo confuso!
:)
• Escola de design: www.risd.edu
Prof. Nécio Veras
RISD.EDURISD.EDU
Prof. Nécio Veras
Design DigitalDesign Digital
• Criação digital não é outra língua, mas sim, outra
forma de comunicação.
• Internet não é a última revolução: TV interativa, papel
digital, etc.
• Revista digital não pode competir com seu
equivalente em papel.
• Design para web não é fácil!
– Cada tela pode se comportar de uma forma diferente.
– Não há como projetar documentos que fiquem iguais
em todos os sistemas: Só se nivelar por baixo .
Prof. Nécio Veras
Design para WebDesign para Web
• Riqueza da mídia é bem maior do que foi quando
começamos a ver a cor no material impresso.
• Web é:
– Ágil como o rádio, abrangente como o jornal, rica
como o videogame, envolvente como a TV, móvel
como o celular.
• Pode ser:
– Cativante como a correspondência, profunda como
uma consulta a um especialista, imprevisível como um
papo de boteco.
Prof. Nécio Veras
Design para WebDesign para Web
• Páginas podem mudar de tamanho e proporção a todo
instante.
• Depende totalmente:
– Condições do computador;
– Capacidade de processamento;
– Recursos multimídia;
– Tamanhos dos monitores e janelas;
– Famílias de letras;
– Navegadores;
– Plug-ins;
– Tecnologia;
– Velocidade de acesso.
Prof. Nécio Veras
Design para a WebDesign para a Web
• Cada leitor consultará as telas na ordem que
quiser;
• Quanto mais rico for o conteúdo, maiores as
chances de que a experiência de cada
visitante seja única;
• Internet não é linear.
Prof. Nécio Veras
Design em DiagramaDesign em Diagramaççãoão
• Diagramação:
– Ato ou efeito de criar diagramas ou ordenação
e distribuição de elementos gráficos para
melhor conduzir o fluxo de leitura, de ideias e
de conceitos.
• Princípios Básicos (CRAP):
– Proximidades;
– Alinhamento;
– Repetição;
– Contraste;
Prof. Nécio Veras
Princípio: ProximidadePrincípio: Proximidade
Itens relacionados entre si, devem ser
agrupados.
Quando vários ítens estão próximos,
tornam-se uma unidade visual e não
várias unidades individualizadas.
Isso ajuda a organizar informações e reduz
a desordem.
Prof. Nécio Veras
ExemploExemplo
Prof. Nécio Veras
ExemploExemplo
Agrupe as
informações
graficamente.
No início de uma
criação determine,
pela lógica, quais
informações
devem ser
enfatizadas e
quais devem ser
abrandadas.
Prof. Nécio Veras
ExemploExemplo
Prof. Nécio Veras
Princípio: AlinhamentoPrincípio: Alinhamento
• Dar coesão aos elementos.
• Mesmo elementos separados fisicamente
uns dos outros, se estiverem alinhados,
haverá uma linha invisível conectando-
os, tanto em relação aos seus olhos
quanto a sua mente.
• Avisar ao leitor que, mesmo não estando
próximos, os itens fazem parte do
mesmo grupo de elementos.
Prof. Nécio Veras
ExemploExemplo
Elementos jogados em qualquer
lugar. Nenhum dos elementos
tem qualquer conexão com outro
elemento do cartão.
Informações organizadas,
além de terem sido agrupadas
pelo Princípio da Proximidade
Prof. Nécio Veras
Capa com formato padrão, sem brilho.
A reação inicial do leitor é negativa.
O alinhamento à esquerda confere força à capa, além de
aparência mais sofisticada.
O nome do autor, mesmo longe do título, está conectado
pelo alinhamento.
Centralizado no bloco.
Bloco descentralizado na
página.
Prof. Nécio Veras
Alinhamento FantasiaAlinhamento Fantasia
Prof. Nécio Veras
Para que a página fique visualmente
organizada, encontre uma linha e guie-
se através dela.
Não centralize o título se o texto for
alinhado à esquerda. Como as laterais
são mal-definidas, não é possível
observar que o título está centralizado.
Evite a endentação de parágrafo em
colunas pequenas. Prefira um
espaçamento maior entre os
parágrafos.
Se houver ilustrações ou fotos, alinhe
pela esquerda ou pela linha base.
ObserveObserve
Prof. Nécio Veras
Se seus alinhamentos
estiverem
bem-delimitados, você
poderá interromper
conscientemente os
alinhamentos e esta
interrupção terá uma
aparência intencional.
Prof. Nécio Veras
Princípio: RepetiPrincípio: Repetiççãoão
• Dar consistência ao material gráfico:
– Através do uso do uso do princípio da
repetição, o material terá uniformidade, ou
seja, uma parte será reconhecida como
pertencente ao restante do todo.
• É um esforço consciente para unificar
todos os elementos do design.
Prof. Nécio Veras
Os títulos e subtítulos são elementos
repetitivos (TAHOMA BOLD) e
mantém a consistência entre eles.
ExemploExemplo
Prof. Nécio Veras
ExemploExemplo
Repetições:
Fonte bold / Fonte light
Endentações
Espaçamento
Alinhamentos
Sinais de tópicos quadrados
Prof. Nécio Veras
ExemploExemplo
Repetições:
Um dos elementos da imagem (o
triângulo) foi repetido na página, dando
unidade ao todo.
Prof. Nécio Veras
Princípio: ContrastePrincípio: Contraste
• Acrescentar algum atrativo visual à página,
criando uma hierarquia organizacional entre
diferentes elementos.
• Cria-se um contraste quando dois elementos
são diferentes.
– Se eles diferirem só um pouco, não acontecerá
o contraste, mas um conflito.
• Se dois elementos não forem exatamente os
mesmos, diferencie completamente.
Prof. Nécio Veras
ExemploExemplo
Prof. Nécio Veras
ExemploExemplo
Prof. Nécio Veras
Exemplo (CRAP)Exemplo (CRAP)
Prof. Nécio Veras
Exemplo (CRAP)Exemplo (CRAP)
Prof. Nécio Veras
Exemplo (CRAP)Exemplo (CRAP)
Prof. Nécio Veras
ExercíciosExercícios
Prof. Nécio Veras
ReferênciasReferências
Esta apresentação foi inspirada e baseada nos
materiais didáticos de:
– Prof. Wanderlei Paré (Oficina de Produção
Gráfica);
– Graciana Somoni Fischer (Design na Web);
– Prof. Régis Pires (Curso de Introdução ao Web
Design)

Mais conteúdo relacionado

Destaque (19)

Falando dos homens
Falando dos homensFalando dos homens
Falando dos homens
 
cohab_servidores_confianca
cohab_servidores_confiancacohab_servidores_confianca
cohab_servidores_confianca
 
Ra & Fraud Latam
Ra & Fraud LatamRa & Fraud Latam
Ra & Fraud Latam
 
Panocenter 2
Panocenter 2Panocenter 2
Panocenter 2
 
Matprim
Matprim   Matprim
Matprim
 
Portfolio rafielet
Portfolio rafieletPortfolio rafielet
Portfolio rafielet
 
Comprev lenira
Comprev   leniraComprev   lenira
Comprev lenira
 
Colunistas 2016 - LivingFor
Colunistas 2016 - LivingForColunistas 2016 - LivingFor
Colunistas 2016 - LivingFor
 
Casan fecha parceria com agência francesa
Casan fecha parceria com agência francesaCasan fecha parceria com agência francesa
Casan fecha parceria com agência francesa
 
gramitica_de_grego_koin
gramitica_de_grego_koingramitica_de_grego_koin
gramitica_de_grego_koin
 
aço
açoaço
aço
 
E-book Marketing para Academias
E-book Marketing para AcademiasE-book Marketing para Academias
E-book Marketing para Academias
 
Ct
CtCt
Ct
 
ITAIPU - Relatorio de sustentabilidade 2011
ITAIPU - Relatorio de sustentabilidade 2011ITAIPU - Relatorio de sustentabilidade 2011
ITAIPU - Relatorio de sustentabilidade 2011
 
Bergus apresentação facebook
Bergus  apresentação facebookBergus  apresentação facebook
Bergus apresentação facebook
 
Trabalho Rapidão Cometa
Trabalho Rapidão CometaTrabalho Rapidão Cometa
Trabalho Rapidão Cometa
 
Texto de Pelusa Cestari
Texto de Pelusa CestariTexto de Pelusa Cestari
Texto de Pelusa Cestari
 
כתב העת על הדרך גליון 10
כתב העת על הדרך   גליון 10כתב העת על הדרך   גליון 10
כתב העת על הדרך גליון 10
 
Recovery in soccer
Recovery in soccerRecovery in soccer
Recovery in soccer
 

Semelhante a Desing

Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição
Laboratório Web 2013-2014 - Etapas na Produção: Desenho e ComposiçãoLaboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição
Laboratório Web 2013-2014 - Etapas na Produção: Desenho e ComposiçãoRicardo Pereira Rodrigues
 
Aula 1 - Técnicas de PrototipaçãoI
Aula 1 - Técnicas de PrototipaçãoIAula 1 - Técnicas de PrototipaçãoI
Aula 1 - Técnicas de PrototipaçãoIPaolo Passeri
 
Design de Experiência do Cliente / Usuário (UX)
Design de Experiência do Cliente / Usuário (UX)Design de Experiência do Cliente / Usuário (UX)
Design de Experiência do Cliente / Usuário (UX)Heller de Paula
 
Interação Humano Computador Capítulo 9 - Design
Interação Humano Computador Capítulo 9 - DesignInteração Humano Computador Capítulo 9 - Design
Interação Humano Computador Capítulo 9 - DesignWellington Oliveira
 
Métodos de Design: Uma abordagem para estudos de viabilidade em projetos de s...
Métodos de Design: Uma abordagem para estudos de viabilidade em projetos de s...Métodos de Design: Uma abordagem para estudos de viabilidade em projetos de s...
Métodos de Design: Uma abordagem para estudos de viabilidade em projetos de s...Alessandro Lima
 
Como.Conduzir.Apresentacoes
Como.Conduzir.ApresentacoesComo.Conduzir.Apresentacoes
Como.Conduzir.Apresentacoesguesta96e9e
 
Laboratório Web 2013-2014 - Etapas na Produção: Análise e Pesquisa
Laboratório Web 2013-2014 - Etapas na Produção: Análise e PesquisaLaboratório Web 2013-2014 - Etapas na Produção: Análise e Pesquisa
Laboratório Web 2013-2014 - Etapas na Produção: Análise e PesquisaRicardo Pereira Rodrigues
 
Apostila apresentações em_powerpoint
Apostila apresentações em_powerpointApostila apresentações em_powerpoint
Apostila apresentações em_powerpointRomulo Mauricio
 
Design - O que Bruce Lee sabe sobre design
Design - O que Bruce Lee sabe sobre designDesign - O que Bruce Lee sabe sobre design
Design - O que Bruce Lee sabe sobre designHector Muniz
 
O hipertexto digital instrucional
O hipertexto digital instrucionalO hipertexto digital instrucional
O hipertexto digital instrucionalGonzalo Abio
 
Infografias em contexto educativo
Infografias em contexto educativoInfografias em contexto educativo
Infografias em contexto educativoAna Loureiro
 
Melhore a sua apresentação PPT
Melhore a sua apresentação PPTMelhore a sua apresentação PPT
Melhore a sua apresentação PPTRicardo Leocádio
 

Semelhante a Desing (20)

Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição
Laboratório Web 2013-2014 - Etapas na Produção: Desenho e ComposiçãoLaboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição
Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição
 
Aula 1 - Técnicas de PrototipaçãoI
Aula 1 - Técnicas de PrototipaçãoIAula 1 - Técnicas de PrototipaçãoI
Aula 1 - Técnicas de PrototipaçãoI
 
Design de Experiência do Cliente / Usuário (UX)
Design de Experiência do Cliente / Usuário (UX)Design de Experiência do Cliente / Usuário (UX)
Design de Experiência do Cliente / Usuário (UX)
 
Interação Humano Computador Capítulo 9 - Design
Interação Humano Computador Capítulo 9 - DesignInteração Humano Computador Capítulo 9 - Design
Interação Humano Computador Capítulo 9 - Design
 
Noções de planejamento visual
Noções de planejamento visualNoções de planejamento visual
Noções de planejamento visual
 
Métodos de Design: Uma abordagem para estudos de viabilidade em projetos de s...
Métodos de Design: Uma abordagem para estudos de viabilidade em projetos de s...Métodos de Design: Uma abordagem para estudos de viabilidade em projetos de s...
Métodos de Design: Uma abordagem para estudos de viabilidade em projetos de s...
 
Aula 1 Webdesign
Aula 1 WebdesignAula 1 Webdesign
Aula 1 Webdesign
 
Como.Conduzir.Apresentacoes
Como.Conduzir.ApresentacoesComo.Conduzir.Apresentacoes
Como.Conduzir.Apresentacoes
 
Como usar o Canva
Como usar o CanvaComo usar o Canva
Como usar o Canva
 
Apresentação ai
Apresentação aiApresentação ai
Apresentação ai
 
Laboratório Web 2013-2014 - Etapas na Produção: Análise e Pesquisa
Laboratório Web 2013-2014 - Etapas na Produção: Análise e PesquisaLaboratório Web 2013-2014 - Etapas na Produção: Análise e Pesquisa
Laboratório Web 2013-2014 - Etapas na Produção: Análise e Pesquisa
 
Grade de diagramação
Grade de diagramaçãoGrade de diagramação
Grade de diagramação
 
Apostila apresentações em_powerpoint
Apostila apresentações em_powerpointApostila apresentações em_powerpoint
Apostila apresentações em_powerpoint
 
Apresentaçao Aula 2
Apresentaçao Aula 2Apresentaçao Aula 2
Apresentaçao Aula 2
 
Aula 2 Webdesign
Aula 2 WebdesignAula 2 Webdesign
Aula 2 Webdesign
 
Design - O que Bruce Lee sabe sobre design
Design - O que Bruce Lee sabe sobre designDesign - O que Bruce Lee sabe sobre design
Design - O que Bruce Lee sabe sobre design
 
Se Liga Concórdia
Se Liga ConcórdiaSe Liga Concórdia
Se Liga Concórdia
 
O hipertexto digital instrucional
O hipertexto digital instrucionalO hipertexto digital instrucional
O hipertexto digital instrucional
 
Infografias em contexto educativo
Infografias em contexto educativoInfografias em contexto educativo
Infografias em contexto educativo
 
Melhore a sua apresentação PPT
Melhore a sua apresentação PPTMelhore a sua apresentação PPT
Melhore a sua apresentação PPT
 

Último

Gramática - Texto - análise e construção de sentido - Moderna.pdf
Gramática - Texto - análise e construção de sentido - Moderna.pdfGramática - Texto - análise e construção de sentido - Moderna.pdf
Gramática - Texto - análise e construção de sentido - Moderna.pdfKelly Mendes
 
O Reizinho Autista.pdf - livro maravilhoso
O Reizinho Autista.pdf - livro maravilhosoO Reizinho Autista.pdf - livro maravilhoso
O Reizinho Autista.pdf - livro maravilhosoVALMIRARIBEIRO1
 
As teorias de Lamarck e Darwin para alunos de 8ano.ppt
As teorias de Lamarck e Darwin para alunos de 8ano.pptAs teorias de Lamarck e Darwin para alunos de 8ano.ppt
As teorias de Lamarck e Darwin para alunos de 8ano.pptorlando dias da silva
 
Insegurança nunca mais tem afeta pessoas
Insegurança nunca mais tem afeta pessoasInsegurança nunca mais tem afeta pessoas
Insegurança nunca mais tem afeta pessoasdiegosouzalira10
 
Nós Propomos! Canil/Gatil na Sertã - Amigos dos Animais
Nós Propomos! Canil/Gatil na Sertã - Amigos dos AnimaisNós Propomos! Canil/Gatil na Sertã - Amigos dos Animais
Nós Propomos! Canil/Gatil na Sertã - Amigos dos AnimaisIlda Bicacro
 
EBPAL_Serta_Caminhos do Lixo final 9ºD (1).pptx
EBPAL_Serta_Caminhos do Lixo final 9ºD (1).pptxEBPAL_Serta_Caminhos do Lixo final 9ºD (1).pptx
EBPAL_Serta_Caminhos do Lixo final 9ºD (1).pptxIlda Bicacro
 
livro para educação infantil conceitos sensorial
livro para educação infantil conceitos sensoriallivro para educação infantil conceitos sensorial
livro para educação infantil conceitos sensorialNeuroppIsnayaLciaMar
 
Periodo da escravidAo O Brasil tem seu corpo na América e sua alma na África
Periodo da escravidAo O Brasil tem seu corpo na América e sua alma na ÁfricaPeriodo da escravidAo O Brasil tem seu corpo na América e sua alma na África
Periodo da escravidAo O Brasil tem seu corpo na América e sua alma na Áfricajuekfuek
 
Apresentação sobre Robots e processos educativos
Apresentação sobre Robots e processos educativosApresentação sobre Robots e processos educativos
Apresentação sobre Robots e processos educativosFernanda Ledesma
 
transcrição fonética para aulas de língua
transcrição fonética para aulas de línguatranscrição fonética para aulas de língua
transcrição fonética para aulas de línguaKelly Mendes
 
Nós Propomos! Sertã 2024 - Geografia C - 12º ano
Nós Propomos! Sertã 2024 - Geografia C - 12º anoNós Propomos! Sertã 2024 - Geografia C - 12º ano
Nós Propomos! Sertã 2024 - Geografia C - 12º anoIlda Bicacro
 
QUESTÃO 4 Os estudos das competências pessoais é de extrema importância, pr...
QUESTÃO 4   Os estudos das competências pessoais é de extrema importância, pr...QUESTÃO 4   Os estudos das competências pessoais é de extrema importância, pr...
QUESTÃO 4 Os estudos das competências pessoais é de extrema importância, pr...azulassessoria9
 
UFCD_9184_Saúde, nutrição, higiene, segurança, repouso e conforto da criança ...
UFCD_9184_Saúde, nutrição, higiene, segurança, repouso e conforto da criança ...UFCD_9184_Saúde, nutrição, higiene, segurança, repouso e conforto da criança ...
UFCD_9184_Saúde, nutrição, higiene, segurança, repouso e conforto da criança ...Manuais Formação
 
Santa Gemma Galgani, Flor de Lucca, mística italiana 1887-1903 (Portugués).pptx
Santa Gemma Galgani, Flor de Lucca, mística italiana 1887-1903 (Portugués).pptxSanta Gemma Galgani, Flor de Lucca, mística italiana 1887-1903 (Portugués).pptx
Santa Gemma Galgani, Flor de Lucca, mística italiana 1887-1903 (Portugués).pptxMartin M Flynn
 
Power Point sobre as etapas do Desenvolvimento infantil
Power Point sobre as etapas do Desenvolvimento infantilPower Point sobre as etapas do Desenvolvimento infantil
Power Point sobre as etapas do Desenvolvimento infantilMariaHelena293800
 
SQL Parte 1 - Criação de Banco de Dados.pdf
SQL Parte 1 - Criação de Banco de Dados.pdfSQL Parte 1 - Criação de Banco de Dados.pdf
SQL Parte 1 - Criação de Banco de Dados.pdfAndersonW5
 
FUNDAMENTOS DA PSICOPEDAGOGIA - material
FUNDAMENTOS DA PSICOPEDAGOGIA - materialFUNDAMENTOS DA PSICOPEDAGOGIA - material
FUNDAMENTOS DA PSICOPEDAGOGIA - materialDouglasVasconcelosMa
 
1. Aula de sociologia - 1º Ano - Émile Durkheim.pdf
1. Aula de sociologia - 1º Ano - Émile Durkheim.pdf1. Aula de sociologia - 1º Ano - Émile Durkheim.pdf
1. Aula de sociologia - 1º Ano - Émile Durkheim.pdfaulasgege
 

Último (20)

Gramática - Texto - análise e construção de sentido - Moderna.pdf
Gramática - Texto - análise e construção de sentido - Moderna.pdfGramática - Texto - análise e construção de sentido - Moderna.pdf
Gramática - Texto - análise e construção de sentido - Moderna.pdf
 
O Reizinho Autista.pdf - livro maravilhoso
O Reizinho Autista.pdf - livro maravilhosoO Reizinho Autista.pdf - livro maravilhoso
O Reizinho Autista.pdf - livro maravilhoso
 
Poema - Maio Laranja
Poema - Maio Laranja Poema - Maio Laranja
Poema - Maio Laranja
 
As teorias de Lamarck e Darwin para alunos de 8ano.ppt
As teorias de Lamarck e Darwin para alunos de 8ano.pptAs teorias de Lamarck e Darwin para alunos de 8ano.ppt
As teorias de Lamarck e Darwin para alunos de 8ano.ppt
 
Poema - Aedes Aegypt.
Poema - Aedes Aegypt.Poema - Aedes Aegypt.
Poema - Aedes Aegypt.
 
Insegurança nunca mais tem afeta pessoas
Insegurança nunca mais tem afeta pessoasInsegurança nunca mais tem afeta pessoas
Insegurança nunca mais tem afeta pessoas
 
Nós Propomos! Canil/Gatil na Sertã - Amigos dos Animais
Nós Propomos! Canil/Gatil na Sertã - Amigos dos AnimaisNós Propomos! Canil/Gatil na Sertã - Amigos dos Animais
Nós Propomos! Canil/Gatil na Sertã - Amigos dos Animais
 
EBPAL_Serta_Caminhos do Lixo final 9ºD (1).pptx
EBPAL_Serta_Caminhos do Lixo final 9ºD (1).pptxEBPAL_Serta_Caminhos do Lixo final 9ºD (1).pptx
EBPAL_Serta_Caminhos do Lixo final 9ºD (1).pptx
 
livro para educação infantil conceitos sensorial
livro para educação infantil conceitos sensoriallivro para educação infantil conceitos sensorial
livro para educação infantil conceitos sensorial
 
Periodo da escravidAo O Brasil tem seu corpo na América e sua alma na África
Periodo da escravidAo O Brasil tem seu corpo na América e sua alma na ÁfricaPeriodo da escravidAo O Brasil tem seu corpo na América e sua alma na África
Periodo da escravidAo O Brasil tem seu corpo na América e sua alma na África
 
Apresentação sobre Robots e processos educativos
Apresentação sobre Robots e processos educativosApresentação sobre Robots e processos educativos
Apresentação sobre Robots e processos educativos
 
transcrição fonética para aulas de língua
transcrição fonética para aulas de línguatranscrição fonética para aulas de língua
transcrição fonética para aulas de língua
 
Nós Propomos! Sertã 2024 - Geografia C - 12º ano
Nós Propomos! Sertã 2024 - Geografia C - 12º anoNós Propomos! Sertã 2024 - Geografia C - 12º ano
Nós Propomos! Sertã 2024 - Geografia C - 12º ano
 
QUESTÃO 4 Os estudos das competências pessoais é de extrema importância, pr...
QUESTÃO 4   Os estudos das competências pessoais é de extrema importância, pr...QUESTÃO 4   Os estudos das competências pessoais é de extrema importância, pr...
QUESTÃO 4 Os estudos das competências pessoais é de extrema importância, pr...
 
UFCD_9184_Saúde, nutrição, higiene, segurança, repouso e conforto da criança ...
UFCD_9184_Saúde, nutrição, higiene, segurança, repouso e conforto da criança ...UFCD_9184_Saúde, nutrição, higiene, segurança, repouso e conforto da criança ...
UFCD_9184_Saúde, nutrição, higiene, segurança, repouso e conforto da criança ...
 
Santa Gemma Galgani, Flor de Lucca, mística italiana 1887-1903 (Portugués).pptx
Santa Gemma Galgani, Flor de Lucca, mística italiana 1887-1903 (Portugués).pptxSanta Gemma Galgani, Flor de Lucca, mística italiana 1887-1903 (Portugués).pptx
Santa Gemma Galgani, Flor de Lucca, mística italiana 1887-1903 (Portugués).pptx
 
Power Point sobre as etapas do Desenvolvimento infantil
Power Point sobre as etapas do Desenvolvimento infantilPower Point sobre as etapas do Desenvolvimento infantil
Power Point sobre as etapas do Desenvolvimento infantil
 
SQL Parte 1 - Criação de Banco de Dados.pdf
SQL Parte 1 - Criação de Banco de Dados.pdfSQL Parte 1 - Criação de Banco de Dados.pdf
SQL Parte 1 - Criação de Banco de Dados.pdf
 
FUNDAMENTOS DA PSICOPEDAGOGIA - material
FUNDAMENTOS DA PSICOPEDAGOGIA - materialFUNDAMENTOS DA PSICOPEDAGOGIA - material
FUNDAMENTOS DA PSICOPEDAGOGIA - material
 
1. Aula de sociologia - 1º Ano - Émile Durkheim.pdf
1. Aula de sociologia - 1º Ano - Émile Durkheim.pdf1. Aula de sociologia - 1º Ano - Émile Durkheim.pdf
1. Aula de sociologia - 1º Ano - Émile Durkheim.pdf
 

Desing

  • 1. Prof. Nécio de Lima Veras http://lattes.cnpq.br/8284657916723590 Noções de Design Gráfico Unidade I - Introdução ao Design Gráfico
  • 2. Prof. Nécio de Lima Veras http://lattes.cnpq.br/8284657916723590 Objetivo Conhecer os princípios do Design Gráfico.
  • 3. Prof. Nécio Veras Leituras recomendadasLeituras recomendadas
  • 4. Prof. Nécio Veras Conceitos básicosConceitos básicos ● Design – Concepção de um projeto ou modelo; planejamento. ● Designer – Indivíduo que planeja ou concebe um projeto ou modelo. ● Web design e web designer.
  • 5. Prof. Nécio Veras O que é Design?O que é Design? • [...] Design pode ser compreendido de várias formas: – habilidade, estilo, engenharia, invenção, planejamento, refinamento, simples exercício de bom gosto. Texto de abertura da exposição “Design fo Life” Cooper-Hewitt National Design Museum, Nova York, EUA
  • 6. Prof. Nécio Veras DesignDesign • Ver e transmitir experiência visual para interlocutores. • Levar em conta: – Dinamismo; – Legibilidade; – Equilíbrio.
  • 7. Prof. Nécio Veras DesignDesign • Ser inteligente; • Saber transmitir uma mensagem usando representações visuais;
  • 8. Prof. Nécio Veras Traduzindo o outdoorTraduzindo o outdoor
  • 9. Prof. Nécio Veras DesignDesign • Saber colecionar referências visuais e como profissionais do mundo inteiro resolvem problemas similares. • Aprende a montar as partes para construir um todo; • Requer tempo, paciência e cuidado em cada detalhe; • Talento é só um pré-requisito.
  • 10. Prof. Nécio Veras Design DigitalDesign Digital • Computador nas comunicações: – Desktop Publishing: substitui todo processo de design gráfico; – Vídeo Digital: substitui processo de edição usando fitas magnéticas e gerações; – Internet: chega para deixar todo mundo confuso! :) • Escola de design: www.risd.edu
  • 12. Prof. Nécio Veras Design DigitalDesign Digital • Criação digital não é outra língua, mas sim, outra forma de comunicação. • Internet não é a última revolução: TV interativa, papel digital, etc. • Revista digital não pode competir com seu equivalente em papel. • Design para web não é fácil! – Cada tela pode se comportar de uma forma diferente. – Não há como projetar documentos que fiquem iguais em todos os sistemas: Só se nivelar por baixo .
  • 13. Prof. Nécio Veras Design para WebDesign para Web • Riqueza da mídia é bem maior do que foi quando começamos a ver a cor no material impresso. • Web é: – Ágil como o rádio, abrangente como o jornal, rica como o videogame, envolvente como a TV, móvel como o celular. • Pode ser: – Cativante como a correspondência, profunda como uma consulta a um especialista, imprevisível como um papo de boteco.
  • 14. Prof. Nécio Veras Design para WebDesign para Web • Páginas podem mudar de tamanho e proporção a todo instante. • Depende totalmente: – Condições do computador; – Capacidade de processamento; – Recursos multimídia; – Tamanhos dos monitores e janelas; – Famílias de letras; – Navegadores; – Plug-ins; – Tecnologia; – Velocidade de acesso.
  • 15. Prof. Nécio Veras Design para a WebDesign para a Web • Cada leitor consultará as telas na ordem que quiser; • Quanto mais rico for o conteúdo, maiores as chances de que a experiência de cada visitante seja única; • Internet não é linear.
  • 16. Prof. Nécio Veras Design em DiagramaDesign em Diagramaççãoão • Diagramação: – Ato ou efeito de criar diagramas ou ordenação e distribuição de elementos gráficos para melhor conduzir o fluxo de leitura, de ideias e de conceitos. • Princípios Básicos (CRAP): – Proximidades; – Alinhamento; – Repetição; – Contraste;
  • 17. Prof. Nécio Veras Princípio: ProximidadePrincípio: Proximidade Itens relacionados entre si, devem ser agrupados. Quando vários ítens estão próximos, tornam-se uma unidade visual e não várias unidades individualizadas. Isso ajuda a organizar informações e reduz a desordem.
  • 19. Prof. Nécio Veras ExemploExemplo Agrupe as informações graficamente. No início de uma criação determine, pela lógica, quais informações devem ser enfatizadas e quais devem ser abrandadas.
  • 21. Prof. Nécio Veras Princípio: AlinhamentoPrincípio: Alinhamento • Dar coesão aos elementos. • Mesmo elementos separados fisicamente uns dos outros, se estiverem alinhados, haverá uma linha invisível conectando- os, tanto em relação aos seus olhos quanto a sua mente. • Avisar ao leitor que, mesmo não estando próximos, os itens fazem parte do mesmo grupo de elementos.
  • 22. Prof. Nécio Veras ExemploExemplo Elementos jogados em qualquer lugar. Nenhum dos elementos tem qualquer conexão com outro elemento do cartão. Informações organizadas, além de terem sido agrupadas pelo Princípio da Proximidade
  • 23. Prof. Nécio Veras Capa com formato padrão, sem brilho. A reação inicial do leitor é negativa. O alinhamento à esquerda confere força à capa, além de aparência mais sofisticada. O nome do autor, mesmo longe do título, está conectado pelo alinhamento. Centralizado no bloco. Bloco descentralizado na página.
  • 24. Prof. Nécio Veras Alinhamento FantasiaAlinhamento Fantasia
  • 25. Prof. Nécio Veras Para que a página fique visualmente organizada, encontre uma linha e guie- se através dela. Não centralize o título se o texto for alinhado à esquerda. Como as laterais são mal-definidas, não é possível observar que o título está centralizado. Evite a endentação de parágrafo em colunas pequenas. Prefira um espaçamento maior entre os parágrafos. Se houver ilustrações ou fotos, alinhe pela esquerda ou pela linha base. ObserveObserve
  • 26. Prof. Nécio Veras Se seus alinhamentos estiverem bem-delimitados, você poderá interromper conscientemente os alinhamentos e esta interrupção terá uma aparência intencional.
  • 27. Prof. Nécio Veras Princípio: RepetiPrincípio: Repetiççãoão • Dar consistência ao material gráfico: – Através do uso do uso do princípio da repetição, o material terá uniformidade, ou seja, uma parte será reconhecida como pertencente ao restante do todo. • É um esforço consciente para unificar todos os elementos do design.
  • 28. Prof. Nécio Veras Os títulos e subtítulos são elementos repetitivos (TAHOMA BOLD) e mantém a consistência entre eles. ExemploExemplo
  • 29. Prof. Nécio Veras ExemploExemplo Repetições: Fonte bold / Fonte light Endentações Espaçamento Alinhamentos Sinais de tópicos quadrados
  • 30. Prof. Nécio Veras ExemploExemplo Repetições: Um dos elementos da imagem (o triângulo) foi repetido na página, dando unidade ao todo.
  • 31. Prof. Nécio Veras Princípio: ContrastePrincípio: Contraste • Acrescentar algum atrativo visual à página, criando uma hierarquia organizacional entre diferentes elementos. • Cria-se um contraste quando dois elementos são diferentes. – Se eles diferirem só um pouco, não acontecerá o contraste, mas um conflito. • Se dois elementos não forem exatamente os mesmos, diferencie completamente.
  • 34. Prof. Nécio Veras Exemplo (CRAP)Exemplo (CRAP)
  • 35. Prof. Nécio Veras Exemplo (CRAP)Exemplo (CRAP)
  • 36. Prof. Nécio Veras Exemplo (CRAP)Exemplo (CRAP)
  • 38. Prof. Nécio Veras ReferênciasReferências Esta apresentação foi inspirada e baseada nos materiais didáticos de: – Prof. Wanderlei Paré (Oficina de Produção Gráfica); – Graciana Somoni Fischer (Design na Web); – Prof. Régis Pires (Curso de Introdução ao Web Design)