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

Projeto Pedagógico, Design - FAAC UNESP
Projeto Pedagógico, Design - FAAC UNESPProjeto Pedagógico, Design - FAAC UNESP
Projeto Pedagógico, Design - FAAC UNESPCADunesp
 
Palestra - Grid : Estudos de Caso
Palestra - Grid : Estudos de CasoPalestra - Grid : Estudos de Caso
Palestra - Grid : Estudos de CasoLuiz Agner
 
Princípios de design
Princípios de designPrincípios de design
Princípios de designTersis Zonato
 
Processo de Criacão de Logomarca
Processo de Criacão de LogomarcaProcesso de Criacão de Logomarca
Processo de Criacão de LogomarcaBreno Brito
 
Design e design gráfico
Design e design gráficoDesign e design gráfico
Design e design gráficoDeisi Motter
 
I manuali del comunicare. ECCE LOGO. Identità visiva. Progettare il logo.
I manuali del comunicare. ECCE LOGO. Identità visiva. Progettare il logo.I manuali del comunicare. ECCE LOGO. Identità visiva. Progettare il logo.
I manuali del comunicare. ECCE LOGO. Identità visiva. Progettare il logo.Arnaldo Amlesu
 
Design Gráfico - Introdução
Design Gráfico - IntroduçãoDesign Gráfico - Introdução
Design Gráfico - IntroduçãoDanilo Fernandes
 
Grafica - SLIDE CORSO.pdf
Grafica - SLIDE CORSO.pdfGrafica - SLIDE CORSO.pdf
Grafica - SLIDE CORSO.pdfGiacomoMessina3
 
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
 
Palestra - Fundamentos do Grid
Palestra - Fundamentos do GridPalestra - Fundamentos do Grid
Palestra - Fundamentos do GridLuiz Agner
 
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 designElizeu Nascimento Silva
 
Composição e diagramação
Composição e diagramaçãoComposição e diagramação
Composição e diagramaçãoLuciana Santini
 
Aula 5 - Comunicação Gráfica e Design
Aula 5   - Comunicação Gráfica e DesignAula 5   - Comunicação Gráfica e Design
Aula 5 - Comunicação Gráfica e DesignCíntia Dal Bello
 

Mais procurados (20)

Projeto Pedagógico, Design - FAAC UNESP
Projeto Pedagógico, Design - FAAC UNESPProjeto Pedagógico, Design - FAAC UNESP
Projeto Pedagógico, Design - FAAC UNESP
 
Conceitos e princípios de design
Conceitos e princípios de designConceitos e princípios de design
Conceitos e princípios de design
 
Palestra - Grid : Estudos de Caso
Palestra - Grid : Estudos de CasoPalestra - Grid : Estudos de Caso
Palestra - Grid : Estudos de Caso
 
Princípios de design
Princípios de designPrincípios de design
Princípios de design
 
Processo de Criacão de Logomarca
Processo de Criacão de LogomarcaProcesso de Criacão de Logomarca
Processo de Criacão de Logomarca
 
Design e design gráfico
Design e design gráficoDesign e design gráfico
Design e design gráfico
 
I manuali del comunicare. ECCE LOGO. Identità visiva. Progettare il logo.
I manuali del comunicare. ECCE LOGO. Identità visiva. Progettare il logo.I manuali del comunicare. ECCE LOGO. Identità visiva. Progettare il logo.
I manuali del comunicare. ECCE LOGO. Identità visiva. Progettare il logo.
 
Design Gráfico - Introdução
Design Gráfico - IntroduçãoDesign Gráfico - Introdução
Design Gráfico - Introdução
 
Grid
GridGrid
Grid
 
Grafica - SLIDE CORSO.pdf
Grafica - SLIDE CORSO.pdfGrafica - SLIDE CORSO.pdf
Grafica - SLIDE CORSO.pdf
 
Aula EE - composicao
Aula EE - composicaoAula EE - composicao
Aula EE - composicao
 
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
 
Palestra - Fundamentos do Grid
Palestra - Fundamentos do GridPalestra - Fundamentos do Grid
Palestra - Fundamentos do Grid
 
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
 
Painél semântico
Painél semânticoPainél semântico
Painél semântico
 
Aula 02 linguagem visual
Aula 02   linguagem visualAula 02   linguagem visual
Aula 02 linguagem visual
 
Aula 06 linguagem visual
Aula 06   linguagem visualAula 06   linguagem visual
Aula 06 linguagem visual
 
02 Tipografia_marcas
02 Tipografia_marcas02 Tipografia_marcas
02 Tipografia_marcas
 
Composição e diagramação
Composição e diagramaçãoComposição e diagramação
Composição e diagramação
 
Aula 5 - Comunicação Gráfica e Design
Aula 5   - Comunicação Gráfica e DesignAula 5   - Comunicação Gráfica e Design
Aula 5 - Comunicação Gráfica e Design
 

Destaque

Teoria das cores aplicada ao design
Teoria das cores aplicada ao designTeoria das cores aplicada ao design
Teoria das cores aplicada ao designAntonio Alves
 
As cores no design gráfico
As cores no design gráficoAs cores no design gráfico
As cores no design gráficoRenato Melo
 
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
 
Artigo Elementos Visuais
Artigo Elementos VisuaisArtigo Elementos Visuais
Artigo Elementos VisuaisETECProfessores
 
Intertextualidade e Ready Made na propaganda
Intertextualidade e Ready Made na propagandaIntertextualidade e Ready Made na propaganda
Intertextualidade e Ready Made na propagandaTiago Santana
 
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 acessibilidadeNé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 | ProjetistaDanilo
 
Design na prática
Design na práticaDesign na prática
Design na práticaLuís Lima
 
Compreendendo o Mundo Linguagem Visual
Compreendendo o Mundo Linguagem VisualCompreendendo o Mundo Linguagem Visual
Compreendendo o Mundo Linguagem VisualFabiano Damiati
 
Palestra - Branding e os Designers
Palestra - Branding e os DesignersPalestra - Branding e os Designers
Palestra - Branding e os DesignersFelipe 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
 

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
 
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 Editorial | Introdução
Design Editorial | IntroduçãoDesign Editorial | Introdução
Design Editorial | Introdução
 
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
 

Semelhante a Noções de Design Gráfico

Dicas sobre apresentacoes
Dicas sobre apresentacoesDicas sobre apresentacoes
Dicas sobre apresentacoesLuis Relvas
 
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 SantosEnrico Cardoso
 
Apresentacoes eficientes
Apresentacoes eficientesApresentacoes eficientes
Apresentacoes eficientesperes marlene
 
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 Powerpoint1Domusnet
 
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 digitadoNilda de Oliveira Campos
 
Guia para materiais digitais
Guia para materiais digitaisGuia para materiais digitais
Guia para materiais digitaisAdrianaVargas139
 
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 AulaDoug Caesar
 
Acessibilidade de websites.
Acessibilidade de websites.Acessibilidade de websites.
Acessibilidade de websites.josemfcarvalho
 
Html - Capitulo 03
Html - Capitulo 03Html - Capitulo 03
Html - Capitulo 03Alvaro 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 WordPressMarconi 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 PauloEnrico Cardoso
 
TIRO! BERRO! LACRE! com WordPress
TIRO! BERRO! LACRE! com WordPressTIRO! BERRO! LACRE! com WordPress
TIRO! BERRO! LACRE! com WordPressMax Denvir
 
Princpiosdowebwriting 111206150428-phpapp02
Princpiosdowebwriting 111206150428-phpapp02Princpiosdowebwriting 111206150428-phpapp02
Princpiosdowebwriting 111206150428-phpapp02eramos7senac
 

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 à 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
 
Introdução aos Sistemas operacionais
Introdução aos Sistemas operacionaisIntrodução aos Sistemas operacionais
Introdução aos Sistemas operacionaisNé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