SlideShare uma empresa Scribd logo
Noções de Design Gráfico


Unidade II – Elementos Visuais




                         Prof. Nécio de Lima Veras
          http://lattes.cnpq.br/8284657916723590
Objetivo

Perceber os diferentes tipos de textos e
                 fontes




      Página da disciplina na Web
                             Prof. Nécio de Lima Veras
              http://lattes.cnpq.br/8284657916723590
Leitura em tela x Leitura
                     de impresso
●
    A leitura em tela é cerca de 15% mais lenta
    que a leitura em página impressa.
●
    Leitura em tela mais cansativa que leitura de
    página impressa
●
    Resolução de página impressa mais alta que
    resolução de telas.
●
    Tela emite luz.


                                        Prof. Nécio Veras
Texto impresso




            Prof. Nécio Veras
Deixando o texto mais
       legível




               Prof. Nécio Veras
Especificando um texto

1. O texto deve ter 3 colunas para facilitar a grande
   quantidade de conteúdo e manter a aparência de jornal.
2. Se for para a WEB, todas as marcações (HTML e CSS)
   devem ser validadas com ferramentas de validação do
   W3C.
3. Deve haver uma área principal para colocar uma
   imagem que servirá de elemento visual para o artigo
   apresentado.
4. O título The Hipster Intelligencer deve aparecer no
   terço superior.
5. Use pelo menos um esquema de 3 cores.



                                             Prof. Nécio Veras
Layout




         Prof. Nécio Veras
Leitura exploratória na
                       Web
• A tela é explorada em busca de palavras-
  chave, sentenças e parágrafos significativos.




                                      Prof. Nécio Veras
Pirâmide invertida

•Resumo geral no início.
•Detalhes depois.
•Usuários podem parar de ler a
 qualquer momento e ainda assim
 terem a confiança de que já
 leram as partes mais
 importantes do texto.

                         Prof. Nécio Veras
Menos texto

•Um site deve ter pelo menos 15%
 menos texto que um documento
 impresso.
•Remova conteúdo desnecessário.
•Escreva frases curtas e dois ou três
 parágrafos concisos.
•Reduza advérbios e substitua voz
 passiva por voz ativa.

                              Prof. Nécio Veras
Listas

●   Use listas para dividir grandes blocos de texto e
    dar aos usuários pontos para que possam fixar a
    visão ao explorar a página.
●   Permite a extração de informações do texto
    apenas com uma rápida olhada.
●   Onde usar?
    –   Conteúdo principal
    –   Barras laterais
    –   Navegação e cabeçalhos


                                            Prof. Nécio Veras
Deixando o texto mais
       legível




               Prof. Nécio Veras
Cabeçalhos

●   Facilitam a exploração do texto.
●   Quebram grandes blocos de texto.
●   Dizem sobre o que o texto fala.
●   O nível do cabeçalho mostraa importância do
    texto e não o seu tamanho.
    –   Em HTML: <h1> a <h6>




                                       Prof. Nécio Veras
Circule cabeçalhos e listas
         da página




                   Prof. Nécio Veras
Cabeçalhos e listas




               Prof. Nécio Veras
Fontes
●   Há duas categorias principais de fontes:
    –   com serifa (Ex: Times New Roman)
        ●   muito usadas em impressos
    –   sem serifa (Ex: Arial, Helvetica)
        ●   A mistura entre com e sem serifa pode melhorar o visual e ajudar a separar o
            conteúdo do cabeçalho.
        ●   Fontes sem serifa são mais fáceis de ler em tela que fontes com serifa,
            especialmente em tamanhos pequenos.
●   Serifas pequenas aparecem borradas na tela.
●   Use somente se elas puderem ter um bom tamanho para serem
    lidas pelos usuários.
●   Sugestão:
    –   sem serifa no conteúdo
    –   com serifa nos cabeçalhos
                                                                         Prof. Nécio Veras
Fontes com e sem serifa




                Prof. Nécio Veras
Fontes com serifa




              Prof. Nécio Veras
Fontes sem serifa




              Prof. Nécio Veras
Fontes Manuscritas




              Prof. Nécio Veras
Google Web Fonts




            Prof. Nécio Veras
Visual final do site




                Prof. Nécio Veras
Exercícios




             Prof. Nécio Veras
Referências

Esta apresentação foi baseada nos materiais
didáticos de:
  –   Prof. Régis Pires (Curso de Introdução ao Web
      Design) -
      https://sites.google.com/site/ifpiregis/pronatec/intro
      ducao-ao-web-design




Também no livro Use a Cabeça – WebDesign

                                                Prof. Nécio Veras

Mais conteúdo relacionado

Mais procurados

Aula 1 - Direção de Arte
Aula 1 - Direção de ArteAula 1 - Direção de Arte
Aula 1 - Direção de Arte
Cíntia Dal Bello
 
Aula gestalt 01
Aula gestalt 01Aula gestalt 01
Design Editorial | Introdução
Design Editorial | IntroduçãoDesign Editorial | Introdução
Design Editorial | Introdução
Fabio Silveira: Designer | Professor
 
Teoria Super Básica de Tipografia
Teoria Super Básica de TipografiaTeoria Super Básica de Tipografia
Teoria Super Básica de Tipografia
Fábio Gonçalves
 
02 Tipografia_marcas
02 Tipografia_marcas02 Tipografia_marcas
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
Fábio Gonçalves
 
Design Editorial | Sistemas Tipográficos
Design Editorial | Sistemas TipográficosDesign Editorial | Sistemas Tipográficos
Design Editorial | Sistemas Tipográficos
Fabio Silveira: Designer | Professor
 
O Panorama do design gráfico contemporâneo
O Panorama do design gráfico contemporâneoO Panorama do design gráfico contemporâneo
O Panorama do design gráfico contemporâneo
Beto Lima Branding
 
Fundamentos Super Básicos do Design 2/2
Fundamentos Super Básicos do Design 2/2Fundamentos Super Básicos do Design 2/2
Fundamentos Super Básicos do Design 2/2
Fábio Gonçalves
 
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
 
Aula 01 história do design gráfico
Aula 01   história do design gráficoAula 01   história do design gráfico
Aula 01 história do design gráfico
Elizeu Nascimento Silva
 
Design e design gráfico
Design e design gráficoDesign e design gráfico
Design e design gráfico
Deisi Motter
 
Conceitos e princípios de design
Conceitos e princípios de designConceitos e princípios de design
Conceitos e princípios de design
Nécio de Lima Veras
 
Projeto grafico II | Aula 01
Projeto grafico II | Aula 01Projeto grafico II | Aula 01
Projeto grafico II | Aula 01
Fabio Silveira: Designer | Professor
 
Direção de arte
Direção de arteDireção de arte
Direção de arte
James R. Withoeft
 
Design e composição gráfica
Design e composição gráficaDesign e composição gráfica
Design e composição gráfica
Pedro Fidalgo
 
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
 
Diagramação 01.3
Diagramação 01.3Diagramação 01.3
Diagramação 01.3
Camila Cristina
 
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
 
Tipografia - versão 2.0
Tipografia - versão 2.0Tipografia - versão 2.0
Tipografia - versão 2.0
Lo-Ammi Santos
 

Mais procurados (20)

Aula 1 - Direção de Arte
Aula 1 - Direção de ArteAula 1 - Direção de Arte
Aula 1 - Direção de Arte
 
Aula gestalt 01
Aula gestalt 01Aula gestalt 01
Aula gestalt 01
 
Design Editorial | Introdução
Design Editorial | IntroduçãoDesign Editorial | Introdução
Design Editorial | Introdução
 
Teoria Super Básica de Tipografia
Teoria Super Básica de TipografiaTeoria Super Básica de Tipografia
Teoria Super Básica de Tipografia
 
02 Tipografia_marcas
02 Tipografia_marcas02 Tipografia_marcas
02 Tipografia_marcas
 
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
 
Design Editorial | Sistemas Tipográficos
Design Editorial | Sistemas TipográficosDesign Editorial | Sistemas Tipográficos
Design Editorial | Sistemas Tipográficos
 
O Panorama do design gráfico contemporâneo
O Panorama do design gráfico contemporâneoO Panorama do design gráfico contemporâneo
O Panorama do design gráfico contemporâneo
 
Fundamentos Super Básicos do Design 2/2
Fundamentos Super Básicos do Design 2/2Fundamentos Super Básicos do Design 2/2
Fundamentos Super Básicos do Design 2/2
 
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]
 
Aula 01 história do design gráfico
Aula 01   história do design gráficoAula 01   história do design gráfico
Aula 01 história do design gráfico
 
Design e design gráfico
Design e design gráficoDesign e design gráfico
Design e design gráfico
 
Conceitos e princípios de design
Conceitos e princípios de designConceitos e princípios de design
Conceitos e princípios de design
 
Projeto grafico II | Aula 01
Projeto grafico II | Aula 01Projeto grafico II | Aula 01
Projeto grafico II | Aula 01
 
Direção de arte
Direção de arteDireção de arte
Direção de arte
 
Design e composição gráfica
Design e composição gráficaDesign e composição gráfica
Design e composição gráfica
 
Introdução a Projeto Gráfico.
Introdução a Projeto Gráfico.Introdução a Projeto Gráfico.
Introdução a Projeto Gráfico.
 
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
 
Tipografia - versão 2.0
Tipografia - versão 2.0Tipografia - versão 2.0
Tipografia - versão 2.0
 

Destaque

Teoria das cores aplicada ao design
Teoria das cores aplicada ao designTeoria das cores aplicada ao design
Teoria das cores aplicada ao design
Antonio Alves
 
As cores no design gráfico
As cores no design gráficoAs cores no design gráfico
As cores no design gráfico
Renato Melo
 
Cores no design
Cores no designCores no design
Design Editorial | Estruturas
Design Editorial | EstruturasDesign Editorial | Estruturas
Design Editorial | Estruturas
Fabio Silveira: Designer | Professor
 
Storyselling
StorysellingStoryselling
Storyselling
Tiago Santana
 
Artigo Elementos Visuais
Artigo Elementos VisuaisArtigo Elementos Visuais
Artigo Elementos Visuais
ETECProfessores
 
Intertextualidade e Ready Made na propaganda
Intertextualidade e Ready Made na propagandaIntertextualidade e Ready Made na propaganda
Intertextualidade e Ready Made na propaganda
Tiago Santana
 
Versionamento com git
Versionamento com gitVersionamento com git
Versionamento com git
Nécio de Lima Veras
 
Conceitos básicos de usabilidade e acessibilidade
Conceitos básicos de usabilidade e acessibilidadeConceitos básicos de usabilidade e acessibilidade
Conceitos básicos de usabilidade e acessibilidade
Nécio de Lima Veras
 
Design Gráfico - Cores
Design Gráfico - CoresDesign Gráfico - Cores
Design Gráfico - Cores
Nécio de Lima Veras
 
Teste de software
Teste de softwareTeste de software
Teste de software
Nécio de Lima Veras
 
Portfolio de Projetos (Project Portfolio)
Portfolio de Projetos (Project Portfolio)Portfolio de Projetos (Project Portfolio)
Portfolio de Projetos (Project Portfolio)
Thiago Isac
 
Portfolio Designer | Projetista
Portfolio Designer | ProjetistaPortfolio Designer | Projetista
Portfolio Designer | Projetista
Danilo
 
Design na prática
Design na práticaDesign na prática
Design na prática
Luís Lima
 
Teoria das cores
Teoria das coresTeoria das cores
Teoria das cores
Tiago Santana
 
Compreendendo o Mundo Linguagem Visual
Compreendendo o Mundo Linguagem VisualCompreendendo o Mundo Linguagem Visual
Compreendendo o Mundo Linguagem Visual
Fabiano Damiati
 
Palestra - Branding e os Designers
Palestra - Branding e os DesignersPalestra - Branding e os Designers
Palestra - Branding e os Designers
Felipe Caroé
 
Curriculo para Designer leonildo wagner - 08-2016
Curriculo para Designer  leonildo wagner - 08-2016 Curriculo para Designer  leonildo wagner - 08-2016
Curriculo para Designer leonildo wagner - 08-2016
Léo Dias
 
Criação publicitária - As raízes do design gráfico - Dickson
Criação publicitária - As raízes do design gráfico - DicksonCriação publicitária - As raízes do design gráfico - Dickson
Criação publicitária - As raízes do design gráfico - Dickson
Fernando Souza
 
Conceitos Básicos da Animação (p.3/3)
Conceitos Básicos da Animação (p.3/3)Conceitos Básicos da Animação (p.3/3)
Conceitos Básicos da Animação (p.3/3)
Mauricio Mallet Duprat
 

Destaque (20)

Teoria das cores aplicada ao design
Teoria das cores aplicada ao designTeoria das cores aplicada ao design
Teoria das cores aplicada ao design
 
As cores no design gráfico
As cores no design gráficoAs cores no design gráfico
As cores no design gráfico
 
Cores no design
Cores no designCores no design
Cores no design
 
Design Editorial | Estruturas
Design Editorial | EstruturasDesign Editorial | Estruturas
Design Editorial | Estruturas
 
Storyselling
StorysellingStoryselling
Storyselling
 
Artigo Elementos Visuais
Artigo Elementos VisuaisArtigo Elementos Visuais
Artigo Elementos Visuais
 
Intertextualidade e Ready Made na propaganda
Intertextualidade e Ready Made na propagandaIntertextualidade e Ready Made na propaganda
Intertextualidade e Ready Made na propaganda
 
Versionamento com git
Versionamento com gitVersionamento com git
Versionamento com git
 
Conceitos básicos de usabilidade e acessibilidade
Conceitos básicos de usabilidade e acessibilidadeConceitos básicos de usabilidade e acessibilidade
Conceitos básicos de usabilidade e acessibilidade
 
Design Gráfico - Cores
Design Gráfico - CoresDesign Gráfico - Cores
Design Gráfico - Cores
 
Teste de software
Teste de softwareTeste de software
Teste de software
 
Portfolio de Projetos (Project Portfolio)
Portfolio de Projetos (Project Portfolio)Portfolio de Projetos (Project Portfolio)
Portfolio de Projetos (Project Portfolio)
 
Portfolio Designer | Projetista
Portfolio Designer | ProjetistaPortfolio Designer | Projetista
Portfolio Designer | Projetista
 
Design na prática
Design na práticaDesign na prática
Design na prática
 
Teoria das cores
Teoria das coresTeoria das cores
Teoria das cores
 
Compreendendo o Mundo Linguagem Visual
Compreendendo o Mundo Linguagem VisualCompreendendo o Mundo Linguagem Visual
Compreendendo o Mundo Linguagem Visual
 
Palestra - Branding e os Designers
Palestra - Branding e os DesignersPalestra - Branding e os Designers
Palestra - Branding e os Designers
 
Curriculo para Designer leonildo wagner - 08-2016
Curriculo para Designer  leonildo wagner - 08-2016 Curriculo para Designer  leonildo wagner - 08-2016
Curriculo para Designer leonildo wagner - 08-2016
 
Criação publicitária - As raízes do design gráfico - Dickson
Criação publicitária - As raízes do design gráfico - DicksonCriação publicitária - As raízes do design gráfico - Dickson
Criação publicitária - As raízes do design gráfico - Dickson
 
Conceitos Básicos da Animação (p.3/3)
Conceitos Básicos da Animação (p.3/3)Conceitos Básicos da Animação (p.3/3)
Conceitos Básicos da Animação (p.3/3)
 

Semelhante a Noções de Design Gráfico

Desing
DesingDesing
Dicas sobre apresentacoes
Dicas sobre apresentacoesDicas sobre apresentacoes
Dicas sobre apresentacoes
Luis Relvas
 
Criar um website
Criar um websiteCriar um website
Criar um website
ricaselmavera
 
Redação para web
Redação para webRedação para web
Redação para web
joaocarvalhoprof
 
Resumo da apresentação do curso de webwriting em Santos
Resumo da apresentação do curso de webwriting em SantosResumo da apresentação do curso de webwriting em Santos
Resumo da apresentação do curso de webwriting em Santos
Enrico Cardoso
 
Apresentacoes eficientes
Apresentacoes eficientesApresentacoes eficientes
Apresentacoes eficientes
peres marlene
 
Word 08
Word 08Word 08
Regras Para A CriaçãO De Powerpoint1
Regras Para A CriaçãO De Powerpoint1Regras Para A CriaçãO De Powerpoint1
Regras Para A CriaçãO De Powerpoint1
Domusnet
 
Webstandards
WebstandardsWebstandards
Apresentaçao Aula 1
Apresentaçao Aula 1Apresentaçao Aula 1
Apresentaçao Aula 1
Danilo Rosisca Pereira
 
Trabalhando a produção do texto digitado
Trabalhando a produção do texto digitadoTrabalhando a produção do texto digitado
Trabalhando a produção do texto digitado
Nilda de Oliveira Campos
 
Guia para materiais digitais
Guia para materiais digitaisGuia para materiais digitais
Guia para materiais digitais
AdrianaVargas139
 
O Uso dos Slides em Sala de Aula
O Uso dos Slides em Sala de AulaO Uso dos Slides em Sala de Aula
O Uso dos Slides em Sala de Aula
Doug Caesar
 
Acessibilidade de websites.
Acessibilidade de websites.Acessibilidade de websites.
Acessibilidade de websites.
josemfcarvalho
 
Html - Capitulo 03
Html - Capitulo 03Html - Capitulo 03
Html - Capitulo 03
Alvaro Gomes
 
7 Dicas para Criação de layouts para sites em WordPress
7 Dicas para Criação de layouts para sites em WordPress7 Dicas para Criação de layouts para sites em WordPress
7 Dicas para Criação de layouts para sites em WordPress
Marconi Pacheco
 
Curso de Webwriting em São Paulo
Curso de Webwriting em São PauloCurso de Webwriting em São Paulo
Curso de Webwriting em São Paulo
Enrico Cardoso
 
TIRO! BERRO! LACRE! com WordPress
TIRO! BERRO! LACRE! com WordPressTIRO! BERRO! LACRE! com WordPress
TIRO! BERRO! LACRE! com WordPress
Max Denvir
 
Princpiosdowebwriting 111206150428-phpapp02
Princpiosdowebwriting 111206150428-phpapp02Princpiosdowebwriting 111206150428-phpapp02
Princpiosdowebwriting 111206150428-phpapp02
eramos7senac
 
Aula08
Aula08Aula08

Semelhante a Noções de Design Gráfico (20)

Desing
DesingDesing
Desing
 
Dicas sobre apresentacoes
Dicas sobre apresentacoesDicas sobre apresentacoes
Dicas sobre apresentacoes
 
Criar um website
Criar um websiteCriar um website
Criar um website
 
Redação para web
Redação para webRedação para web
Redação para web
 
Resumo da apresentação do curso de webwriting em Santos
Resumo da apresentação do curso de webwriting em SantosResumo da apresentação do curso de webwriting em Santos
Resumo da apresentação do curso de webwriting em Santos
 
Apresentacoes eficientes
Apresentacoes eficientesApresentacoes eficientes
Apresentacoes eficientes
 
Word 08
Word 08Word 08
Word 08
 
Regras Para A CriaçãO De Powerpoint1
Regras Para A CriaçãO De Powerpoint1Regras Para A CriaçãO De Powerpoint1
Regras Para A CriaçãO De Powerpoint1
 
Webstandards
WebstandardsWebstandards
Webstandards
 
Apresentaçao Aula 1
Apresentaçao Aula 1Apresentaçao Aula 1
Apresentaçao Aula 1
 
Trabalhando a produção do texto digitado
Trabalhando a produção do texto digitadoTrabalhando a produção do texto digitado
Trabalhando a produção do texto digitado
 
Guia para materiais digitais
Guia para materiais digitaisGuia para materiais digitais
Guia para materiais digitais
 
O Uso dos Slides em Sala de Aula
O Uso dos Slides em Sala de AulaO Uso dos Slides em Sala de Aula
O Uso dos Slides em Sala de Aula
 
Acessibilidade de websites.
Acessibilidade de websites.Acessibilidade de websites.
Acessibilidade de websites.
 
Html - Capitulo 03
Html - Capitulo 03Html - Capitulo 03
Html - Capitulo 03
 
7 Dicas para Criação de layouts para sites em WordPress
7 Dicas para Criação de layouts para sites em WordPress7 Dicas para Criação de layouts para sites em WordPress
7 Dicas para Criação de layouts para sites em WordPress
 
Curso de Webwriting em São Paulo
Curso de Webwriting em São PauloCurso de Webwriting em São Paulo
Curso de Webwriting em São Paulo
 
TIRO! BERRO! LACRE! com WordPress
TIRO! BERRO! LACRE! com WordPressTIRO! BERRO! LACRE! com WordPress
TIRO! BERRO! LACRE! com WordPress
 
Princpiosdowebwriting 111206150428-phpapp02
Princpiosdowebwriting 111206150428-phpapp02Princpiosdowebwriting 111206150428-phpapp02
Princpiosdowebwriting 111206150428-phpapp02
 
Aula08
Aula08Aula08
Aula08
 

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
 
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
 
Introdução aos Sistemas operacionais
Introdução aos Sistemas operacionaisIntrodução aos Sistemas operacionais
Introdução aos Sistemas operacionais
Nécio de Lima Veras
 
Organizando um Repositório de Objetos de Aprendizagem para dispositivos móvei...
Organizando um Repositório de Objetos de Aprendizagem para dispositivos móvei...Organizando um Repositório de Objetos de Aprendizagem para dispositivos móvei...
Organizando um Repositório de Objetos de Aprendizagem para dispositivos móvei...
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
 
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
 
Introdução aos Sistemas operacionais
Introdução aos Sistemas operacionaisIntrodução aos Sistemas operacionais
Introdução aos Sistemas operacionais
 
Organizando um Repositório de Objetos de Aprendizagem para dispositivos móvei...
Organizando um Repositório de Objetos de Aprendizagem para dispositivos móvei...Organizando um Repositório de Objetos de Aprendizagem para dispositivos móvei...
Organizando um Repositório de Objetos de Aprendizagem para dispositivos móvei...
 

Noções de Design Gráfico

  • 1. Noções de Design Gráfico Unidade II – Elementos Visuais Prof. Nécio de Lima Veras http://lattes.cnpq.br/8284657916723590
  • 2. Objetivo Perceber os diferentes tipos de textos e fontes Página da disciplina na Web Prof. Nécio de Lima Veras http://lattes.cnpq.br/8284657916723590
  • 3. Leitura em tela x Leitura de impresso ● A leitura em tela é cerca de 15% mais lenta que a leitura em página impressa. ● Leitura em tela mais cansativa que leitura de página impressa ● Resolução de página impressa mais alta que resolução de telas. ● Tela emite luz. Prof. Nécio Veras
  • 4. Texto impresso Prof. Nécio Veras
  • 5. Deixando o texto mais legível Prof. Nécio Veras
  • 6. Especificando um texto 1. O texto deve ter 3 colunas para facilitar a grande quantidade de conteúdo e manter a aparência de jornal. 2. Se for para a WEB, todas as marcações (HTML e CSS) devem ser validadas com ferramentas de validação do W3C. 3. Deve haver uma área principal para colocar uma imagem que servirá de elemento visual para o artigo apresentado. 4. O título The Hipster Intelligencer deve aparecer no terço superior. 5. Use pelo menos um esquema de 3 cores. Prof. Nécio Veras
  • 7. Layout Prof. Nécio Veras
  • 8. Leitura exploratória na Web • A tela é explorada em busca de palavras- chave, sentenças e parágrafos significativos. Prof. Nécio Veras
  • 9. Pirâmide invertida •Resumo geral no início. •Detalhes depois. •Usuários podem parar de ler a qualquer momento e ainda assim terem a confiança de que já leram as partes mais importantes do texto. Prof. Nécio Veras
  • 10. Menos texto •Um site deve ter pelo menos 15% menos texto que um documento impresso. •Remova conteúdo desnecessário. •Escreva frases curtas e dois ou três parágrafos concisos. •Reduza advérbios e substitua voz passiva por voz ativa. Prof. Nécio Veras
  • 11. Listas ● Use listas para dividir grandes blocos de texto e dar aos usuários pontos para que possam fixar a visão ao explorar a página. ● Permite a extração de informações do texto apenas com uma rápida olhada. ● Onde usar? – Conteúdo principal – Barras laterais – Navegação e cabeçalhos Prof. Nécio Veras
  • 12. Deixando o texto mais legível Prof. Nécio Veras
  • 13. Cabeçalhos ● Facilitam a exploração do texto. ● Quebram grandes blocos de texto. ● Dizem sobre o que o texto fala. ● O nível do cabeçalho mostraa importância do texto e não o seu tamanho. – Em HTML: <h1> a <h6> Prof. Nécio Veras
  • 14. Circule cabeçalhos e listas da página Prof. Nécio Veras
  • 15. Cabeçalhos e listas Prof. Nécio Veras
  • 16. Fontes ● Há duas categorias principais de fontes: – com serifa (Ex: Times New Roman) ● muito usadas em impressos – sem serifa (Ex: Arial, Helvetica) ● A mistura entre com e sem serifa pode melhorar o visual e ajudar a separar o conteúdo do cabeçalho. ● Fontes sem serifa são mais fáceis de ler em tela que fontes com serifa, especialmente em tamanhos pequenos. ● Serifas pequenas aparecem borradas na tela. ● Use somente se elas puderem ter um bom tamanho para serem lidas pelos usuários. ● Sugestão: – sem serifa no conteúdo – com serifa nos cabeçalhos Prof. Nécio Veras
  • 17. Fontes com e sem serifa Prof. Nécio Veras
  • 18. Fontes com serifa Prof. Nécio Veras
  • 19. Fontes sem serifa Prof. Nécio Veras
  • 20. Fontes Manuscritas Prof. Nécio Veras
  • 21. Google Web Fonts Prof. Nécio Veras
  • 22. Visual final do site Prof. Nécio Veras
  • 23. Exercícios Prof. Nécio Veras
  • 24. Referências Esta apresentação foi baseada nos materiais didáticos de: – Prof. Régis Pires (Curso de Introdução ao Web Design) - https://sites.google.com/site/ifpiregis/pronatec/intro ducao-ao-web-design Também no livro Use a Cabeça – WebDesign Prof. Nécio Veras