SlideShare uma empresa Scribd logo
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 de Lima Veras
               http://lattes.cnpq.br/8284657916723590
Leituras recomendadas




               Prof. Nécio Veras
Conceitos 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?
• [...] 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
Design
• Ver e transmitir experiência visual para
  interlocutores.
• Levar em conta:
  – Dinamismo;
  – Legibilidade;
  – Equilíbrio.




                                        Prof. Nécio Veras
Design
• Ser inteligente;
• Saber transmitir uma mensagem usando
  representações visuais;




                                  Prof. Nécio Veras
Traduzindo o outdoor




               Prof. Nécio Veras
Design
• 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 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.EDU




           Prof. Nécio Veras
Design 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 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 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 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 Diagramaçã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: 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
Exemplo




          Prof. Nécio Veras
Exemplo
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
Exemplo




          Prof. Nécio Veras
Princí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
Exemplo
                                 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.




                             Centralizado no bloco.
                             Bloco descentralizado na
                             página.




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.


                                         Prof. Nécio Veras
Alinhamento Fantasia




               Prof. Nécio Veras
Observe
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.



                                           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: Repetiçã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
Exemplo




Os títulos e subtítulos são elementos
        repetitivos (TAHOMA BOLD) e
  mantém a consistência entre eles.



                                        Prof. Nécio Veras
Exemplo

    Repetições:

    Fonte bold / Fonte light
    Endentações
    Espaçamento
    Alinhamentos
    Sinais de tópicos quadrados




                      Prof. Nécio Veras
Exemplo


  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: 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
Exemplo




          Prof. Nécio Veras
Exemplo




          Prof. Nécio Veras
Exemplo (CRAP)




           Prof. Nécio Veras
Exemplo (CRAP)




           Prof. Nécio Veras
Exemplo (CRAP)




           Prof. Nécio Veras
Exercícios




             Prof. Nécio Veras
Referê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)




                                           Prof. Nécio Veras

Mais conteúdo relacionado

Mais procurados

01 introducao_identidade
01 introducao_identidade01 introducao_identidade
01 introducao_identidade
Fabio Silveira: Designer | Professor
 
Design Editorial | Elementos Editoriais
Design Editorial | Elementos EditoriaisDesign Editorial | Elementos Editoriais
Design Editorial | Elementos Editoriais
Fabio Silveira: Designer | Professor
 
Produção gráfica
Produção gráficaProdução gráfica
Produção gráfica
Sergio Ollandezos
 
Aula 02 design gráfico na publicidade princípios de design
Aula 02   design gráfico na publicidade princípios de designAula 02   design gráfico na publicidade princípios de design
Aula 02 design gráfico na publicidade princípios de design
Elizeu Nascimento Silva
 
Aula 2 composição visual
Aula  2 composição visualAula  2 composição visual
Aula 2 composição visual
Artedoiscmb Cmb
 
História do Design - Apresentação - Hd00
História do Design - Apresentação - Hd00História do Design - Apresentação - Hd00
História do Design - Apresentação - Hd00
Valdir Soares
 
Teoria do design aula 01 [conceitos basicos]
Teoria do design aula 01 [conceitos basicos]Teoria do design aula 01 [conceitos basicos]
Teoria do design aula 01 [conceitos basicos]
Léo Dias
 
Design e design gráfico
Design e design gráficoDesign e design gráfico
Design e design gráfico
Deisi Motter
 
Sintaxe da Linguagem Visual - parte I
Sintaxe da Linguagem Visual - parte ISintaxe da Linguagem Visual - parte I
Sintaxe da Linguagem Visual - parte I
Cíntia Dal Bello
 
Teoria das cores
Teoria das coresTeoria das cores
Teoria das cores
pacobr
 
1. Aula Teoria das Cores
1. Aula Teoria das Cores1. Aula Teoria das Cores
1. Aula Teoria das Cores
Aline Okumura
 
Técnicas Visuais Aplicadas ao Design
Técnicas Visuais Aplicadas ao DesignTécnicas Visuais Aplicadas ao Design
Técnicas Visuais Aplicadas ao Design
anamargarites
 
Fotografia publicitária
Fotografia publicitáriaFotografia publicitária
Fotografia publicitária
Júlio Rocha
 
Tipografia
TipografiaTipografia
Tipografia
Lo-Ammi Santos
 
Tipos de imagens digitais
Tipos de imagens digitaisTipos de imagens digitais
Tipos de imagens digitais
Aline Okumura
 
Composição e Diagramação
Composição e DiagramaçãoComposição e Diagramação
Composição e Diagramação
Ed Marcos
 
Conceitos de Design
Conceitos de DesignConceitos de Design
Conceitos de Design
Marcio Duarte
 
Design
Design Design
Design
Piedade Alves
 
Princípios clássicos de composição visual e Gráfica para não Designers
Princípios clássicos de composição visual e Gráfica para não DesignersPrincípios clássicos de composição visual e Gráfica para não Designers
Princípios clássicos de composição visual e Gráfica para não Designers
Leonardo Pereira
 
Composição gráfica
Composição gráficaComposição gráfica
Composição gráfica
Odair Cavichioli
 

Mais procurados (20)

01 introducao_identidade
01 introducao_identidade01 introducao_identidade
01 introducao_identidade
 
Design Editorial | Elementos Editoriais
Design Editorial | Elementos EditoriaisDesign Editorial | Elementos Editoriais
Design Editorial | Elementos Editoriais
 
Produção gráfica
Produção gráficaProdução gráfica
Produção gráfica
 
Aula 02 design gráfico na publicidade princípios de design
Aula 02   design gráfico na publicidade princípios de designAula 02   design gráfico na publicidade princípios de design
Aula 02 design gráfico na publicidade princípios de design
 
Aula 2 composição visual
Aula  2 composição visualAula  2 composição visual
Aula 2 composição visual
 
História do Design - Apresentação - Hd00
História do Design - Apresentação - Hd00História do Design - Apresentação - Hd00
História do Design - Apresentação - Hd00
 
Teoria do design aula 01 [conceitos basicos]
Teoria do design aula 01 [conceitos basicos]Teoria do design aula 01 [conceitos basicos]
Teoria do design aula 01 [conceitos basicos]
 
Design e design gráfico
Design e design gráficoDesign e design gráfico
Design e design gráfico
 
Sintaxe da Linguagem Visual - parte I
Sintaxe da Linguagem Visual - parte ISintaxe da Linguagem Visual - parte I
Sintaxe da Linguagem Visual - parte I
 
Teoria das cores
Teoria das coresTeoria das cores
Teoria das cores
 
1. Aula Teoria das Cores
1. Aula Teoria das Cores1. Aula Teoria das Cores
1. Aula Teoria das Cores
 
Técnicas Visuais Aplicadas ao Design
Técnicas Visuais Aplicadas ao DesignTécnicas Visuais Aplicadas ao Design
Técnicas Visuais Aplicadas ao Design
 
Fotografia publicitária
Fotografia publicitáriaFotografia publicitária
Fotografia publicitária
 
Tipografia
TipografiaTipografia
Tipografia
 
Tipos de imagens digitais
Tipos de imagens digitaisTipos de imagens digitais
Tipos de imagens digitais
 
Composição e Diagramação
Composição e DiagramaçãoComposição e Diagramação
Composição e Diagramação
 
Conceitos de Design
Conceitos de DesignConceitos de Design
Conceitos de Design
 
Design
Design Design
Design
 
Princípios clássicos de composição visual e Gráfica para não Designers
Princípios clássicos de composição visual e Gráfica para não DesignersPrincípios clássicos de composição visual e Gráfica para não Designers
Princípios clássicos de composição visual e Gráfica para não Designers
 
Composição gráfica
Composição gráficaComposição gráfica
Composição gráfica
 

Destaque

Design Gráfico - Introdução
Design Gráfico - IntroduçãoDesign Gráfico - Introdução
Design Gráfico - Introdução
Danilo Fernandes
 
Desenvolvimento de Sites
Desenvolvimento de SitesDesenvolvimento de Sites
Desenvolvimento de Sites
Patricia Mallmann
 
Apres pos edit_ied_comite
Apres pos edit_ied_comiteApres pos edit_ied_comite
Apres pos edit_ied_comite
Fabio Silveira: Designer | Professor
 
Aula Naming
Aula NamingAula Naming
Marketing de Conteúdo na Web
Marketing de Conteúdo na WebMarketing de Conteúdo na Web
Marketing de Conteúdo na Web
Elva Vieira
 
Design e Usabilidade na Web
Design e Usabilidade na WebDesign e Usabilidade na Web
Design e Usabilidade na Web
Marcelo Vianna
 
CRP-422-2016-12
CRP-422-2016-12CRP-422-2016-12
Teoria do design da comunicação visual
Teoria do design da comunicação visualTeoria do design da comunicação visual
Teoria do design da comunicação visual
Ines_Moreira
 
MANUAL do PROJETO INTEGRADO 2015
MANUAL do PROJETO INTEGRADO 2015MANUAL do PROJETO INTEGRADO 2015
MANUAL do PROJETO INTEGRADO 2015
Fabio Silveira: Designer | Professor
 
Elementos da linguagem visual.
Elementos da linguagem visual.Elementos da linguagem visual.
Elementos da linguagem visual.
Renata_Vasconcelos
 
Aula lingvisual ied_02ok
Aula lingvisual ied_02okAula lingvisual ied_02ok
Aula lingvisual ied_02ok
Fabio Silveira: Designer | Professor
 
Projeto grafico II | Aula 02
Projeto grafico II | Aula 02Projeto grafico II | Aula 02
Projeto grafico II | Aula 02
Fabio Silveira: Designer | Professor
 
Planejamento de produtos digitais - 2
Planejamento de produtos digitais - 2Planejamento de produtos digitais - 2
Planejamento de produtos digitais - 2
Jornalismo Digital
 
Gaining Competitive Advantages Through Supply Chain Management:Success Stories
Gaining Competitive Advantages Through Supply Chain Management:Success StoriesGaining Competitive Advantages Through Supply Chain Management:Success Stories
Gaining Competitive Advantages Through Supply Chain Management:Success Stories
Lijo M Loyid
 
Curriculumvitae2014
Curriculumvitae2014Curriculumvitae2014
Curriculumvitae2014
rui domingues
 
Introdução á disciplina de Webdesign - turma 1 Sem 2015
Introdução á disciplina de Webdesign - turma 1 Sem 2015Introdução á disciplina de Webdesign - turma 1 Sem 2015
Introdução á disciplina de Webdesign - turma 1 Sem 2015
Claudia Bordin Rodrigues
 
Haccp
HaccpHaccp
Haccp
llillianna
 
Design Gráfico Para Web: Website checklist
Design Gráfico Para Web: Website checklistDesign Gráfico Para Web: Website checklist
Design Gráfico Para Web: Website checklist
Dra. Camila Hamdan
 
Ferramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento WebFerramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento Web
igorpimentel
 
Business Analysis Canvas [Canvas para Análise de Negócio]
Business Analysis Canvas [Canvas para Análise de Negócio]Business Analysis Canvas [Canvas para Análise de Negócio]
Business Analysis Canvas [Canvas para Análise de Negócio]
Rildo (@rildosan) Santos
 

Destaque (20)

Design Gráfico - Introdução
Design Gráfico - IntroduçãoDesign Gráfico - Introdução
Design Gráfico - Introdução
 
Desenvolvimento de Sites
Desenvolvimento de SitesDesenvolvimento de Sites
Desenvolvimento de Sites
 
Apres pos edit_ied_comite
Apres pos edit_ied_comiteApres pos edit_ied_comite
Apres pos edit_ied_comite
 
Aula Naming
Aula NamingAula Naming
Aula Naming
 
Marketing de Conteúdo na Web
Marketing de Conteúdo na WebMarketing de Conteúdo na Web
Marketing de Conteúdo na Web
 
Design e Usabilidade na Web
Design e Usabilidade na WebDesign e Usabilidade na Web
Design e Usabilidade na Web
 
CRP-422-2016-12
CRP-422-2016-12CRP-422-2016-12
CRP-422-2016-12
 
Teoria do design da comunicação visual
Teoria do design da comunicação visualTeoria do design da comunicação visual
Teoria do design da comunicação visual
 
MANUAL do PROJETO INTEGRADO 2015
MANUAL do PROJETO INTEGRADO 2015MANUAL do PROJETO INTEGRADO 2015
MANUAL do PROJETO INTEGRADO 2015
 
Elementos da linguagem visual.
Elementos da linguagem visual.Elementos da linguagem visual.
Elementos da linguagem visual.
 
Aula lingvisual ied_02ok
Aula lingvisual ied_02okAula lingvisual ied_02ok
Aula lingvisual ied_02ok
 
Projeto grafico II | Aula 02
Projeto grafico II | Aula 02Projeto grafico II | Aula 02
Projeto grafico II | Aula 02
 
Planejamento de produtos digitais - 2
Planejamento de produtos digitais - 2Planejamento de produtos digitais - 2
Planejamento de produtos digitais - 2
 
Gaining Competitive Advantages Through Supply Chain Management:Success Stories
Gaining Competitive Advantages Through Supply Chain Management:Success StoriesGaining Competitive Advantages Through Supply Chain Management:Success Stories
Gaining Competitive Advantages Through Supply Chain Management:Success Stories
 
Curriculumvitae2014
Curriculumvitae2014Curriculumvitae2014
Curriculumvitae2014
 
Introdução á disciplina de Webdesign - turma 1 Sem 2015
Introdução á disciplina de Webdesign - turma 1 Sem 2015Introdução á disciplina de Webdesign - turma 1 Sem 2015
Introdução á disciplina de Webdesign - turma 1 Sem 2015
 
Haccp
HaccpHaccp
Haccp
 
Design Gráfico Para Web: Website checklist
Design Gráfico Para Web: Website checklistDesign Gráfico Para Web: Website checklist
Design Gráfico Para Web: Website checklist
 
Ferramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento WebFerramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento Web
 
Business Analysis Canvas [Canvas para Análise de Negócio]
Business Analysis Canvas [Canvas para Análise de Negócio]Business Analysis Canvas [Canvas para Análise de Negócio]
Business Analysis Canvas [Canvas para Análise de Negócio]
 

Semelhante a Conceitos e princípios de design

Desing
DesingDesing
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
Ricardo 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çãoI
Paolo Passeri
 
Arquitetura da informação
Arquitetura da informaçãoArquitetura da informação
Arquitetura da informação
Nécio de Lima Veras
 
Noções de planejamento visual
Noções de planejamento visualNoções de planejamento visual
Noções de planejamento visual
Evandro Manara Miletto
 
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
 
Apresentaçao Aula 2
Apresentaçao Aula 2Apresentaçao Aula 2
Apresentaçao Aula 2
Danilo Rosisca Pereira
 
Aula 2 Webdesign
Aula 2 WebdesignAula 2 Webdesign
Aula 2 Webdesign
Danilo Rosisca Pereira
 
Diagramacao ua
Diagramacao uaDiagramacao ua
Diagramacao ua
prof carlos
 
Como usar o Canva
Como usar o CanvaComo usar o Canva
Como usar o Canva
Rener Campos
 
Se Liga Concórdia
Se Liga ConcórdiaSe Liga Concórdia
Se Liga Concórdia
Gefferson Vivan
 
11º Encontro de Design & UX: Visualização de Dados - Entendendo suas Etapas
11º Encontro de Design & UX: Visualização de Dados - Entendendo suas Etapas11º Encontro de Design & UX: Visualização de Dados - Entendendo suas Etapas
11º Encontro de Design & UX: Visualização de Dados - Entendendo suas Etapas
Lara Brito
 
Webstandards
WebstandardsWebstandards
Apresentaçao Aula 1
Apresentaçao Aula 1Apresentaçao Aula 1
Apresentaçao Aula 1
Danilo Rosisca Pereira
 
Meetup: Cultura de UX – Ladies That UX Florianópolis
Meetup: Cultura de UX – Ladies That UX FlorianópolisMeetup: Cultura de UX – Ladies That UX Florianópolis
Meetup: Cultura de UX – Ladies That UX Florianópolis
Ladies That UX Florianópolis
 
Design de Interação Criativo, Social, Emotivo e Complicado
Design de Interação Criativo, Social, Emotivo e ComplicadoDesign de Interação Criativo, Social, Emotivo e Complicado
Design de Interação Criativo, Social, Emotivo e Complicado
UTFPR
 
Metodologias de Design de Interação
Metodologias de Design de InteraçãoMetodologias de Design de Interação
Metodologias de Design de Interação
UTFPR
 
Como.Conduzir.Apresentacoes
Como.Conduzir.ApresentacoesComo.Conduzir.Apresentacoes
Como.Conduzir.Apresentacoes
guesta96e9e
 
e-criar
e-criare-criar
e-criar
barbarascp
 
Infografias em contexto educativo
Infografias em contexto educativoInfografias em contexto educativo
Infografias em contexto educativo
Ana Loureiro
 

Semelhante a Conceitos e princípios de design (20)

Desing
DesingDesing
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çã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
 
Arquitetura da informação
Arquitetura da informaçãoArquitetura da informação
Arquitetura da informação
 
Noções de planejamento visual
Noções de planejamento visualNoções de planejamento visual
Noções de planejamento visual
 
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)
 
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
 
Diagramacao ua
Diagramacao uaDiagramacao ua
Diagramacao ua
 
Como usar o Canva
Como usar o CanvaComo usar o Canva
Como usar o Canva
 
Se Liga Concórdia
Se Liga ConcórdiaSe Liga Concórdia
Se Liga Concórdia
 
11º Encontro de Design & UX: Visualização de Dados - Entendendo suas Etapas
11º Encontro de Design & UX: Visualização de Dados - Entendendo suas Etapas11º Encontro de Design & UX: Visualização de Dados - Entendendo suas Etapas
11º Encontro de Design & UX: Visualização de Dados - Entendendo suas Etapas
 
Webstandards
WebstandardsWebstandards
Webstandards
 
Apresentaçao Aula 1
Apresentaçao Aula 1Apresentaçao Aula 1
Apresentaçao Aula 1
 
Meetup: Cultura de UX – Ladies That UX Florianópolis
Meetup: Cultura de UX – Ladies That UX FlorianópolisMeetup: Cultura de UX – Ladies That UX Florianópolis
Meetup: Cultura de UX – Ladies That UX Florianópolis
 
Design de Interação Criativo, Social, Emotivo e Complicado
Design de Interação Criativo, Social, Emotivo e ComplicadoDesign de Interação Criativo, Social, Emotivo e Complicado
Design de Interação Criativo, Social, Emotivo e Complicado
 
Metodologias de Design de Interação
Metodologias de Design de InteraçãoMetodologias de Design de Interação
Metodologias de Design de Interação
 
Como.Conduzir.Apresentacoes
Como.Conduzir.ApresentacoesComo.Conduzir.Apresentacoes
Como.Conduzir.Apresentacoes
 
e-criar
e-criare-criar
e-criar
 
Infografias em contexto educativo
Infografias em contexto educativoInfografias em contexto educativo
Infografias em contexto educativo
 

Mais de Nécio de Lima Veras

Introdução ao JavaFX
Introdução ao JavaFXIntrodução ao JavaFX
Introdução ao JavaFX
Nécio de Lima Veras
 
Introdução à analise e complexidade de algoritmos
Introdução à analise e complexidade de algoritmosIntrodução à analise e complexidade de algoritmos
Introdução à analise e complexidade de algoritmos
Nécio de Lima Veras
 
Teste de software
Teste de softwareTeste de software
Teste de software
Nécio de Lima Veras
 
Versionamento com git
Versionamento com gitVersionamento com git
Versionamento com git
Nécio de Lima Veras
 
Uma Abordagem Baseada em Agentes para Planejamento e Monitoramento de Serviço...
Uma Abordagem Baseada em Agentes para Planejamento e Monitoramento de Serviço...Uma Abordagem Baseada em Agentes para Planejamento e Monitoramento de Serviço...
Uma Abordagem Baseada em Agentes para Planejamento e Monitoramento de Serviço...
Nécio de Lima Veras
 
Introdução à Engenharia de Software Orientada a Agentes com JaCaMo
Introdução à Engenharia de Software Orientada a Agentes com JaCaMoIntrodução à Engenharia de Software Orientada a Agentes com JaCaMo
Introdução à Engenharia de Software Orientada a Agentes com JaCaMo
Nécio de Lima Veras
 
Jason: Componentes personalizados
Jason: Componentes personalizados Jason: Componentes personalizados
Jason: Componentes personalizados
Nécio de Lima Veras
 
Agentes inteligentes com jason
Agentes inteligentes com jasonAgentes inteligentes com jason
Agentes inteligentes com jason
Nécio de Lima Veras
 
Ambientes em Sistemas Multi-agentes
Ambientes em Sistemas Multi-agentesAmbientes em Sistemas Multi-agentes
Ambientes em Sistemas Multi-agentes
Nécio de Lima Veras
 
Arquiteturas concretas de agentes inteligentes - bdi agents
Arquiteturas concretas de agentes inteligentes - bdi agentsArquiteturas concretas de agentes inteligentes - bdi agents
Arquiteturas concretas de agentes inteligentes - bdi agents
Nécio de Lima Veras
 
Revisão de matemática
Revisão de matemáticaRevisão de matemática
Revisão de matemática
Nécio de Lima Veras
 
Especificações iniciais de agentes inteligentes
Especificações iniciais de agentes inteligentesEspecificações iniciais de agentes inteligentes
Especificações iniciais de agentes inteligentes
Nécio de Lima Veras
 
Notas sobre agentes inteligentes
Notas sobre agentes inteligentesNotas sobre agentes inteligentes
Notas sobre agentes inteligentes
Nécio de Lima Veras
 
Anotações do mapeamento OR
Anotações do mapeamento ORAnotações do mapeamento OR
Anotações do mapeamento OR
Nécio de Lima Veras
 
Hibernate-consultas
Hibernate-consultasHibernate-consultas
Hibernate-consultas
Nécio de Lima Veras
 
Mapeamento de herança OR
Mapeamento de herança ORMapeamento de herança OR
Mapeamento de herança OR
Nécio de Lima Veras
 
Relacionamentos do mapeamento OR
Relacionamentos do mapeamento ORRelacionamentos do mapeamento OR
Relacionamentos do mapeamento OR
Nécio de Lima Veras
 
Processos iniciais do mapeamento OR
Processos iniciais do mapeamento ORProcessos iniciais do mapeamento OR
Processos iniciais do mapeamento OR
Nécio de Lima Veras
 
Java swing
Java swingJava swing
Introdução à linguagem UML
Introdução à linguagem UMLIntrodução à linguagem UML
Introdução à linguagem UML
Nécio de Lima Veras
 

Mais de Nécio de Lima Veras (20)

Introdução ao JavaFX
Introdução ao JavaFXIntrodução ao JavaFX
Introdução ao JavaFX
 
Introdução à analise e complexidade de algoritmos
Introdução à analise e complexidade de algoritmosIntrodução à analise e complexidade de algoritmos
Introdução à analise e complexidade de algoritmos
 
Teste de software
Teste de softwareTeste de software
Teste de software
 
Versionamento com git
Versionamento com gitVersionamento com git
Versionamento com git
 
Uma Abordagem Baseada em Agentes para Planejamento e Monitoramento de Serviço...
Uma Abordagem Baseada em Agentes para Planejamento e Monitoramento de Serviço...Uma Abordagem Baseada em Agentes para Planejamento e Monitoramento de Serviço...
Uma Abordagem Baseada em Agentes para Planejamento e Monitoramento de Serviço...
 
Introdução à Engenharia de Software Orientada a Agentes com JaCaMo
Introdução à Engenharia de Software Orientada a Agentes com JaCaMoIntrodução à Engenharia de Software Orientada a Agentes com JaCaMo
Introdução à Engenharia de Software Orientada a Agentes com JaCaMo
 
Jason: Componentes personalizados
Jason: Componentes personalizados Jason: Componentes personalizados
Jason: Componentes personalizados
 
Agentes inteligentes com jason
Agentes inteligentes com jasonAgentes inteligentes com jason
Agentes inteligentes com jason
 
Ambientes em Sistemas Multi-agentes
Ambientes em Sistemas Multi-agentesAmbientes em Sistemas Multi-agentes
Ambientes em Sistemas Multi-agentes
 
Arquiteturas concretas de agentes inteligentes - bdi agents
Arquiteturas concretas de agentes inteligentes - bdi agentsArquiteturas concretas de agentes inteligentes - bdi agents
Arquiteturas concretas de agentes inteligentes - bdi agents
 
Revisão de matemática
Revisão de matemáticaRevisão de matemática
Revisão de matemática
 
Especificações iniciais de agentes inteligentes
Especificações iniciais de agentes inteligentesEspecificações iniciais de agentes inteligentes
Especificações iniciais de agentes inteligentes
 
Notas sobre agentes inteligentes
Notas sobre agentes inteligentesNotas sobre agentes inteligentes
Notas sobre agentes inteligentes
 
Anotações do mapeamento OR
Anotações do mapeamento ORAnotações do mapeamento OR
Anotações do mapeamento OR
 
Hibernate-consultas
Hibernate-consultasHibernate-consultas
Hibernate-consultas
 
Mapeamento de herança OR
Mapeamento de herança ORMapeamento de herança OR
Mapeamento de herança OR
 
Relacionamentos do mapeamento OR
Relacionamentos do mapeamento ORRelacionamentos do mapeamento OR
Relacionamentos do mapeamento OR
 
Processos iniciais do mapeamento OR
Processos iniciais do mapeamento ORProcessos iniciais do mapeamento OR
Processos iniciais do mapeamento OR
 
Java swing
Java swingJava swing
Java swing
 
Introdução à linguagem UML
Introdução à linguagem UMLIntrodução à linguagem UML
Introdução à linguagem UML
 

Conceitos e princípios de design

  • 1. 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
  • 2. Objetivo Conhecer os princípios do Design Gráfico. Prof. Nécio de Lima Veras http://lattes.cnpq.br/8284657916723590
  • 3. Leituras recomendadas Prof. Nécio Veras
  • 4. Conceitos 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
  • 5. 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
  • 6. Design • Ver e transmitir experiência visual para interlocutores. • Levar em conta: – Dinamismo; – Legibilidade; – Equilíbrio. Prof. Nécio Veras
  • 7. Design • Ser inteligente; • Saber transmitir uma mensagem usando representações visuais; Prof. Nécio Veras
  • 8. Traduzindo o outdoor Prof. Nécio Veras
  • 9. Design • 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
  • 10. Design 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
  • 11. RISD.EDU Prof. Nécio Veras
  • 12. Design 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
  • 13. Design 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
  • 14. Design 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
  • 15. Design 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
  • 16. Design em Diagramaçã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
  • 17. Princí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
  • 18. Exemplo Prof. Nécio Veras
  • 19. Exemplo 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
  • 20. Exemplo Prof. Nécio Veras
  • 21. Princí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
  • 22. Exemplo 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
  • 23. Capa com formato padrão, sem brilho. A reação inicial do leitor é negativa. Centralizado no bloco. Bloco descentralizado na página. 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. Prof. Nécio Veras
  • 24. Alinhamento Fantasia Prof. Nécio Veras
  • 25. Observe 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. Prof. Nécio Veras
  • 26. 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
  • 27. Princípio: Repetiçã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
  • 28. Exemplo Os títulos e subtítulos são elementos repetitivos (TAHOMA BOLD) e mantém a consistência entre eles. Prof. Nécio Veras
  • 29. Exemplo Repetições: Fonte bold / Fonte light Endentações Espaçamento Alinhamentos Sinais de tópicos quadrados Prof. Nécio Veras
  • 30. Exemplo Repetições: Um dos elementos da imagem (o triângulo) foi repetido na página, dando unidade ao todo. Prof. Nécio Veras
  • 31. Princí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
  • 32. Exemplo Prof. Nécio Veras
  • 33. Exemplo Prof. Nécio Veras
  • 34. Exemplo (CRAP) Prof. Nécio Veras
  • 35. Exemplo (CRAP) Prof. Nécio Veras
  • 36. Exemplo (CRAP) Prof. Nécio Veras
  • 37. Exercícios Prof. Nécio Veras
  • 38. Referê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) Prof. Nécio Veras