SlideShare uma empresa Scribd logo
1 de 38
Baixar para ler offline
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

Design e design gráfico
Design e design gráficoDesign e design gráfico
Design e design gráficoDeisi Motter
 
Introdução a Projeto Gráfico.
Introdução a Projeto Gráfico.Introdução a Projeto Gráfico.
Introdução a Projeto Gráfico.Wunderman
 
Composição e Projeto Gráfico - 2015 - Aula 1 - Intro
Composição e Projeto Gráfico - 2015 - Aula 1 - IntroComposição e Projeto Gráfico - 2015 - Aula 1 - Intro
Composição e Projeto Gráfico - 2015 - Aula 1 - IntroFábio Gonçalves
 
Aula - Direção e Finalização - Diagramação / Design Editorial
Aula - Direção e Finalização - Diagramação / Design EditorialAula - Direção e Finalização - Diagramação / Design Editorial
Aula - Direção e Finalização - Diagramação / Design EditorialGabriel Ferraciolli
 
Metodologia do Design - Aplicação no Contexto Atual
Metodologia do Design - Aplicação no Contexto AtualMetodologia do Design - Aplicação no Contexto Atual
Metodologia do Design - Aplicação no Contexto AtualGabriel Meneses
 
Oficina Design para quem não é Designer
Oficina Design para quem não é DesignerOficina Design para quem não é Designer
Oficina Design para quem não é DesignerAndreza Jackson
 
Metodologia para Projeto de Design
Metodologia para Projeto de DesignMetodologia para Projeto de Design
Metodologia para Projeto de DesignMarcio Duarte
 
Projeto Pedagógico, Design - FAAC UNESP
Projeto Pedagógico, Design - FAAC UNESPProjeto Pedagógico, Design - FAAC UNESP
Projeto Pedagógico, Design - FAAC UNESPCADunesp
 
Processo de Criacão de Logomarca
Processo de Criacão de LogomarcaProcesso de Criacão de Logomarca
Processo de Criacão de LogomarcaBreno Brito
 
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 - Hd00Valdir Soares
 
Definições contemporâneas de design
Definições contemporâneas de designDefinições contemporâneas de design
Definições contemporâneas de designangelicaferraz
 

Mais procurados (20)

Noções de Design Gráfico
Noções de Design GráficoNoções de Design Gráfico
Noções de Design Gráfico
 
Design e design gráfico
Design e design gráficoDesign e design gráfico
Design e design gráfico
 
Design Editorial | Introdução
Design Editorial | IntroduçãoDesign Editorial | Introdução
Design Editorial | Introdução
 
Design Editorial | Elementos Editoriais
Design Editorial | Elementos EditoriaisDesign Editorial | Elementos Editoriais
Design Editorial | Elementos Editoriais
 
Design - O que é?
Design - O que é?Design - O que é?
Design - O que é?
 
Introdução a Projeto Gráfico.
Introdução a Projeto Gráfico.Introdução a Projeto Gráfico.
Introdução a Projeto Gráfico.
 
Composição e Projeto Gráfico - 2015 - Aula 1 - Intro
Composição e Projeto Gráfico - 2015 - Aula 1 - IntroComposição e Projeto Gráfico - 2015 - Aula 1 - Intro
Composição e Projeto Gráfico - 2015 - Aula 1 - Intro
 
02 Tipografia_marcas
02 Tipografia_marcas02 Tipografia_marcas
02 Tipografia_marcas
 
Aula - Direção e Finalização - Diagramação / Design Editorial
Aula - Direção e Finalização - Diagramação / Design EditorialAula - Direção e Finalização - Diagramação / Design Editorial
Aula - Direção e Finalização - Diagramação / Design Editorial
 
Metodologia do Design - Aplicação no Contexto Atual
Metodologia do Design - Aplicação no Contexto AtualMetodologia do Design - Aplicação no Contexto Atual
Metodologia do Design - Aplicação no Contexto Atual
 
Projeto Gráfico | Pictogramas
Projeto Gráfico | PictogramasProjeto Gráfico | Pictogramas
Projeto Gráfico | Pictogramas
 
Oficina Design para quem não é Designer
Oficina Design para quem não é DesignerOficina Design para quem não é Designer
Oficina Design para quem não é Designer
 
Metodologia para Projeto de Design
Metodologia para Projeto de DesignMetodologia para Projeto de Design
Metodologia para Projeto de Design
 
Projeto Pedagógico, Design - FAAC UNESP
Projeto Pedagógico, Design - FAAC UNESPProjeto Pedagógico, Design - FAAC UNESP
Projeto Pedagógico, Design - FAAC UNESP
 
Processo de Criacão de Logomarca
Processo de Criacão de LogomarcaProcesso de Criacão de Logomarca
Processo de Criacão de Logomarca
 
Aula 01 linguagem visual
Aula 01   linguagem visualAula 01   linguagem visual
Aula 01 linguagem visual
 
Diagramação 01.3
Diagramação 01.3Diagramação 01.3
Diagramação 01.3
 
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
 
Noções de planejamento visual
Noções de planejamento visualNoções de planejamento visual
Noções de planejamento visual
 
Definições contemporâneas de design
Definições contemporâneas de designDefinições contemporâneas de design
Definições contemporâneas de design
 

Destaque

Design Gráfico - Introdução
Design Gráfico - IntroduçãoDesign Gráfico - Introdução
Design Gráfico - IntroduçãoDanilo Fernandes
 
Marketing de Conteúdo na Web
Marketing de Conteúdo na WebMarketing de Conteúdo na Web
Marketing de Conteúdo na WebElva Vieira
 
Design e Usabilidade na Web
Design e Usabilidade na WebDesign e Usabilidade na Web
Design e Usabilidade na WebMarcelo Vianna
 
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 visualInes_Moreira
 
Elementos da linguagem visual.
Elementos da linguagem visual.Elementos da linguagem visual.
Elementos da linguagem visual.Renata_Vasconcelos
 
Planejamento de produtos digitais - 2
Planejamento de produtos digitais - 2Planejamento de produtos digitais - 2
Planejamento de produtos digitais - 2Jornalismo 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 StoriesLijo M Loyid
 
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 2015Claudia Bordin Rodrigues
 
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 DesignersLeonardo Pereira
 
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 checklistDra. Camila Hamdan
 
Ferramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento WebFerramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento Webigorpimentel
 

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

Semelhante a Conceitos e princípios de design

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
 
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 EtapasLara Brito
 
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ópolisLadies 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 ComplicadoUTFPR
 
Metodologias de Design de Interação
Metodologias de Design de InteraçãoMetodologias de Design de Interação
Metodologias de Design de InteraçãoUTFPR
 
Como.Conduzir.Apresentacoes
Como.Conduzir.ApresentacoesComo.Conduzir.Apresentacoes
Como.Conduzir.Apresentacoesguesta96e9e
 
Infografias em contexto educativo
Infografias em contexto educativoInfografias em contexto educativo
Infografias em contexto educativoAna 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
 
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
 
Visualização de Dados
Visualização de DadosVisualização de Dados
Visualização de Dados
 

Mais de 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 algoritmosNé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 JaCaMoNécio de Lima Veras
 
Jason: Componentes personalizados
Jason: Componentes personalizados Jason: Componentes personalizados
Jason: Componentes personalizados Nécio de Lima Veras
 
Ambientes em Sistemas Multi-agentes
Ambientes em Sistemas Multi-agentesAmbientes em Sistemas Multi-agentes
Ambientes em Sistemas Multi-agentesNé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 agentsNé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 inteligentesNécio de Lima Veras
 
Processos iniciais do mapeamento OR
Processos iniciais do mapeamento ORProcessos iniciais do mapeamento OR
Processos iniciais do mapeamento ORNé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