SlideShare a Scribd company logo
1 of 13
Diagramação Organizando o sistema de informação do site
Roger Blanck – 17/11/1997 ,[object Object]
O que é a diagramação ? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Processo de interpretação da informação ,[object Object],[object Object],[object Object],Título As páginas são lidas como grandes massas de formatos e cores, com elementos do primeiro plano contrastando com a área de fundo. Identificação de informações específicas, iniciando pelos gráficos. Analise gramatical do texto e leitura das frases.
Simplicidade e coerência ,[object Object],[object Object],[object Object],[object Object],[object Object]
Contraste ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Respiro ,[object Object]
Narrativa ,[object Object],[object Object]
Área gráfica segura ,[object Object],760 pixels de largura 410 pixels de altura
Área gráfica segura ,[object Object],760 pixels de largura 410 pixels de altura 560 pixels de largura
Regras “convencionais” de diagramação ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Não faça isso ! ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Diagramação Organizando o sistema de informação do site

More Related Content

What's hot

Metodologia para criação de sites
Metodologia para criação de sitesMetodologia para criação de sites
Metodologia para criação de sitesCelina Uemura
 
8 fazes do planejamento de sites
8 fazes do planejamento de sites8 fazes do planejamento de sites
8 fazes do planejamento de sitesIsaac Batista
 
Editora Revan - Proposta Site
Editora Revan - Proposta SiteEditora Revan - Proposta Site
Editora Revan - Proposta SiteMila Ramos
 
Como diagramar uma revista
Como diagramar uma revistaComo diagramar uma revista
Como diagramar uma revistaMarcos Carneiro
 
Criação de páginas web
Criação de páginas webCriação de páginas web
Criação de páginas webarturramisio
 
Planej Visual Os Quatros PrincíPios BáSicos
Planej Visual   Os Quatros PrincíPios BáSicosPlanej Visual   Os Quatros PrincíPios BáSicos
Planej Visual Os Quatros PrincíPios BáSicosrenatamruiz
 
Criação de Impressos
Criação de ImpressosCriação de Impressos
Criação de Impressosclafajardo
 
Apresentação Projeto Website Caso PMI AM - Ciclo de Palestras
Apresentação Projeto Website Caso PMI AM - Ciclo de PalestrasApresentação Projeto Website Caso PMI AM - Ciclo de Palestras
Apresentação Projeto Website Caso PMI AM - Ciclo de PalestrasRenato Borges, MBA, PMP,CBPP
 
Html - Capitulo 03
Html - Capitulo 03Html - Capitulo 03
Html - Capitulo 03Alvaro Gomes
 
Como tornar seu site atraente
Como tornar seu site atraenteComo tornar seu site atraente
Como tornar seu site atraenteSuzana Viana Mota
 
Criação de páginas web 1
Criação de páginas web 1Criação de páginas web 1
Criação de páginas web 1arturramisio
 

What's hot (20)

Aula 04 layout e composição do site
Aula 04   layout e composição do siteAula 04   layout e composição do site
Aula 04 layout e composição do site
 
Projeto de WEB Site
Projeto de WEB SiteProjeto de WEB Site
Projeto de WEB Site
 
Aula02 planejamento grafico
Aula02 planejamento graficoAula02 planejamento grafico
Aula02 planejamento grafico
 
Metodologia para criação de sites
Metodologia para criação de sitesMetodologia para criação de sites
Metodologia para criação de sites
 
8 fazes do planejamento de sites
8 fazes do planejamento de sites8 fazes do planejamento de sites
8 fazes do planejamento de sites
 
Diagramação 01.3
Diagramação 01.3Diagramação 01.3
Diagramação 01.3
 
Noções de planejamento visual
Noções de planejamento visualNoções de planejamento visual
Noções de planejamento visual
 
Diagramação
DiagramaçãoDiagramação
Diagramação
 
Workshop Básico de Direção de Arte
Workshop Básico de Direção de ArteWorkshop Básico de Direção de Arte
Workshop Básico de Direção de Arte
 
Editora Revan - Proposta Site
Editora Revan - Proposta SiteEditora Revan - Proposta Site
Editora Revan - Proposta Site
 
Como diagramar uma revista
Como diagramar uma revistaComo diagramar uma revista
Como diagramar uma revista
 
Criação de páginas web
Criação de páginas webCriação de páginas web
Criação de páginas web
 
Planej Visual Os Quatros PrincíPios BáSicos
Planej Visual   Os Quatros PrincíPios BáSicosPlanej Visual   Os Quatros PrincíPios BáSicos
Planej Visual Os Quatros PrincíPios BáSicos
 
Criação de Impressos
Criação de ImpressosCriação de Impressos
Criação de Impressos
 
Apresentação Projeto Website Caso PMI AM - Ciclo de Palestras
Apresentação Projeto Website Caso PMI AM - Ciclo de PalestrasApresentação Projeto Website Caso PMI AM - Ciclo de Palestras
Apresentação Projeto Website Caso PMI AM - Ciclo de Palestras
 
Html - Capitulo 03
Html - Capitulo 03Html - Capitulo 03
Html - Capitulo 03
 
Como tornar seu site atraente
Como tornar seu site atraenteComo tornar seu site atraente
Como tornar seu site atraente
 
Criação de páginas web 1
Criação de páginas web 1Criação de páginas web 1
Criação de páginas web 1
 
Construcao de Sites
Construcao de SitesConstrucao de Sites
Construcao de Sites
 
O design equilibrado9
O design equilibrado9O design equilibrado9
O design equilibrado9
 

Viewers also liked

Jornalismo de Revista: Diagramação
Jornalismo de Revista: DiagramaçãoJornalismo de Revista: Diagramação
Jornalismo de Revista: DiagramaçãoPetcom
 
IDENTIDADE VISUAL Apresentacao metodologia - design thinking inovação focada ...
IDENTIDADE VISUAL Apresentacao metodologia - design thinking inovação focada ...IDENTIDADE VISUAL Apresentacao metodologia - design thinking inovação focada ...
IDENTIDADE VISUAL Apresentacao metodologia - design thinking inovação focada ...Tellus
 
Diagramacao E Percepcao
Diagramacao E PercepcaoDiagramacao E Percepcao
Diagramacao E PercepcaoDaniel Castro
 
Composição e Diagramação
Composição e DiagramaçãoComposição e Diagramação
Composição e DiagramaçãoEd Marcos
 
Ling Midias Digitais Aula 1
Ling Midias Digitais Aula 1Ling Midias Digitais Aula 1
Ling Midias Digitais Aula 1Alan da Luz
 
Apresentação da disciplina_2013
Apresentação da disciplina_2013Apresentação da disciplina_2013
Apresentação da disciplina_2013Jp Martins
 
Composição e diagramação
Composição e diagramaçãoComposição e diagramação
Composição e diagramaçãoLuciana Santini
 
Bate-papo sobre Arquitetura de Informação - Parte III
Bate-papo sobre Arquitetura de Informação - Parte IIIBate-papo sobre Arquitetura de Informação - Parte III
Bate-papo sobre Arquitetura de Informação - Parte IIIlucattony
 
Introdução ao Audiovisual
Introdução ao Audiovisual Introdução ao Audiovisual
Introdução ao Audiovisual Vinícius Souza
 
Financiamento Audiovisual - AULA 3 | Lei do Audiovisual | Gilberto Toscano
Financiamento Audiovisual - AULA 3 | Lei do Audiovisual  | Gilberto Toscano Financiamento Audiovisual - AULA 3 | Lei do Audiovisual  | Gilberto Toscano
Financiamento Audiovisual - AULA 3 | Lei do Audiovisual | Gilberto Toscano Cultura e Mercado
 
Conceitos básicos da produção audio visual
Conceitos básicos da produção audio visualConceitos básicos da produção audio visual
Conceitos básicos da produção audio visualFrancisco Machado
 
[DIG2012] Criando um grid
[DIG2012] Criando um grid[DIG2012] Criando um grid
[DIG2012] Criando um gridEduardo Novais
 
Apostila recursos audiovisuais
Apostila recursos audiovisuaisApostila recursos audiovisuais
Apostila recursos audiovisuaisArlete Laenzlinger
 
Produção e Realização Audiovisual 1 - aula Som P2
Produção e Realização Audiovisual 1 - aula Som P2Produção e Realização Audiovisual 1 - aula Som P2
Produção e Realização Audiovisual 1 - aula Som P2Pedro Almeida
 

Viewers also liked (20)

Jornalismo de Revista: Diagramação
Jornalismo de Revista: DiagramaçãoJornalismo de Revista: Diagramação
Jornalismo de Revista: Diagramação
 
IDENTIDADE VISUAL Apresentacao metodologia - design thinking inovação focada ...
IDENTIDADE VISUAL Apresentacao metodologia - design thinking inovação focada ...IDENTIDADE VISUAL Apresentacao metodologia - design thinking inovação focada ...
IDENTIDADE VISUAL Apresentacao metodologia - design thinking inovação focada ...
 
Diagramacao E Percepcao
Diagramacao E PercepcaoDiagramacao E Percepcao
Diagramacao E Percepcao
 
Composição e Diagramação
Composição e DiagramaçãoComposição e Diagramação
Composição e Diagramação
 
Ling Midias Digitais Aula 1
Ling Midias Digitais Aula 1Ling Midias Digitais Aula 1
Ling Midias Digitais Aula 1
 
Apresentação da disciplina_2013
Apresentação da disciplina_2013Apresentação da disciplina_2013
Apresentação da disciplina_2013
 
Diagramacao ua
Diagramacao uaDiagramacao ua
Diagramacao ua
 
Composição e diagramação
Composição e diagramaçãoComposição e diagramação
Composição e diagramação
 
Bate-papo sobre Arquitetura de Informação - Parte III
Bate-papo sobre Arquitetura de Informação - Parte IIIBate-papo sobre Arquitetura de Informação - Parte III
Bate-papo sobre Arquitetura de Informação - Parte III
 
Introdução ao Audiovisual
Introdução ao Audiovisual Introdução ao Audiovisual
Introdução ao Audiovisual
 
Financiamento Audiovisual - AULA 3 | Lei do Audiovisual | Gilberto Toscano
Financiamento Audiovisual - AULA 3 | Lei do Audiovisual  | Gilberto Toscano Financiamento Audiovisual - AULA 3 | Lei do Audiovisual  | Gilberto Toscano
Financiamento Audiovisual - AULA 3 | Lei do Audiovisual | Gilberto Toscano
 
Conceitos básicos da produção audio visual
Conceitos básicos da produção audio visualConceitos básicos da produção audio visual
Conceitos básicos da produção audio visual
 
[DIG2012] Criando um grid
[DIG2012] Criando um grid[DIG2012] Criando um grid
[DIG2012] Criando um grid
 
DiagramaçãO Jornal Standart
DiagramaçãO Jornal StandartDiagramaçãO Jornal Standart
DiagramaçãO Jornal Standart
 
Apostila recursos audiovisuais
Apostila recursos audiovisuaisApostila recursos audiovisuais
Apostila recursos audiovisuais
 
Produção e Realização Audiovisual 1 - aula Som P2
Produção e Realização Audiovisual 1 - aula Som P2Produção e Realização Audiovisual 1 - aula Som P2
Produção e Realização Audiovisual 1 - aula Som P2
 
JORNAL PRONTO 2
JORNAL PRONTO 2JORNAL PRONTO 2
JORNAL PRONTO 2
 
Recursos audiovisuais
Recursos audiovisuaisRecursos audiovisuais
Recursos audiovisuais
 
mídias digitais
mídias digitaismídias digitais
mídias digitais
 
Recursos Audiovisuais - Resumo
Recursos Audiovisuais - ResumoRecursos Audiovisuais - Resumo
Recursos Audiovisuais - Resumo
 

Similar to Diagramação Organizando

Falando um pouco sobre Internet
Falando um pouco sobre Internet Falando um pouco sobre Internet
Falando um pouco sobre Internet Denis Budag
 
A usabilidade e_acessibilidade_nos_web_sites[1]
A usabilidade e_acessibilidade_nos_web_sites[1]A usabilidade e_acessibilidade_nos_web_sites[1]
A usabilidade e_acessibilidade_nos_web_sites[1]José Marques
 
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
 
2010.1 - PUB5AN - Marketing Digital AULA 03
2010.1 - PUB5AN - Marketing Digital AULA 032010.1 - PUB5AN - Marketing Digital AULA 03
2010.1 - PUB5AN - Marketing Digital AULA 03Neca Boullosa
 
Capitulo 11 Livro Nielsen
Capitulo 11 Livro NielsenCapitulo 11 Livro Nielsen
Capitulo 11 Livro NielsenLuiz Agner
 
Arquitetura de Informação - Rogério Pereira
Arquitetura de Informação - Rogério Pereira Arquitetura de Informação - Rogério Pereira
Arquitetura de Informação - Rogério Pereira Doisnovemeia Publicidade
 
Apresentacao Unicuritiba
Apresentacao UnicuritibaApresentacao Unicuritiba
Apresentacao UnicuritibamarceloMD
 
Design e Usabilidade
Design e UsabilidadeDesign e Usabilidade
Design e UsabilidadeClaudio Toldo
 
Html - capitulo 04
Html - capitulo 04Html - capitulo 04
Html - capitulo 04Alvaro Gomes
 
Design na mídia impressa e digital
Design na mídia impressa e digitalDesign na mídia impressa e digital
Design na mídia impressa e digitalOdair Cavichioli
 
Big images / Big Type
Big images / Big TypeBig images / Big Type
Big images / Big TypecomOn Group
 
Workshop Webwriting - 2ª Turma
Workshop Webwriting - 2ª TurmaWorkshop Webwriting - 2ª Turma
Workshop Webwriting - 2ª TurmaTIP
 
Oficina IV: Marketing de Busca: como alavancar sua marca na internet - Ciclo ...
Oficina IV: Marketing de Busca: como alavancar sua marca na internet - Ciclo ...Oficina IV: Marketing de Busca: como alavancar sua marca na internet - Ciclo ...
Oficina IV: Marketing de Busca: como alavancar sua marca na internet - Ciclo ...Pedro Cordier
 
Redação para Web
Redação para WebRedação para Web
Redação para WebGovBR
 
Aula 1 - Desenvolvimento do leiaute (1).pdf
Aula 1 - Desenvolvimento do leiaute (1).pdfAula 1 - Desenvolvimento do leiaute (1).pdf
Aula 1 - Desenvolvimento do leiaute (1).pdfssuser595b1e1
 

Similar to Diagramação Organizando (20)

659 html
659 html659 html
659 html
 
Falando um pouco sobre Internet
Falando um pouco sobre Internet Falando um pouco sobre Internet
Falando um pouco sobre Internet
 
A usabilidade e_acessibilidade_nos_web_sites[1]
A usabilidade e_acessibilidade_nos_web_sites[1]A usabilidade e_acessibilidade_nos_web_sites[1]
A usabilidade e_acessibilidade_nos_web_sites[1]
 
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
 
RPC.com.br - Produto
RPC.com.br - ProdutoRPC.com.br - Produto
RPC.com.br - Produto
 
2010.1 - PUB5AN - Marketing Digital AULA 03
2010.1 - PUB5AN - Marketing Digital AULA 032010.1 - PUB5AN - Marketing Digital AULA 03
2010.1 - PUB5AN - Marketing Digital AULA 03
 
Capitulo 11 Livro Nielsen
Capitulo 11 Livro NielsenCapitulo 11 Livro Nielsen
Capitulo 11 Livro Nielsen
 
Arquitetura de Informação - Rogério Pereira
Arquitetura de Informação - Rogério Pereira Arquitetura de Informação - Rogério Pereira
Arquitetura de Informação - Rogério Pereira
 
Guia para Desenvolver Interfaces Digitais Acessíveis
Guia para Desenvolver Interfaces Digitais AcessíveisGuia para Desenvolver Interfaces Digitais Acessíveis
Guia para Desenvolver Interfaces Digitais Acessíveis
 
Apresentacao Unicuritiba
Apresentacao UnicuritibaApresentacao Unicuritiba
Apresentacao Unicuritiba
 
Design e Usabilidade
Design e UsabilidadeDesign e Usabilidade
Design e Usabilidade
 
Html - capitulo 04
Html - capitulo 04Html - capitulo 04
Html - capitulo 04
 
Design na mídia impressa e digital
Design na mídia impressa e digitalDesign na mídia impressa e digital
Design na mídia impressa e digital
 
USABILIDADE.
USABILIDADE.USABILIDADE.
USABILIDADE.
 
Big images / Big Type
Big images / Big TypeBig images / Big Type
Big images / Big Type
 
Workshop Webwriting - 2ª Turma
Workshop Webwriting - 2ª TurmaWorkshop Webwriting - 2ª Turma
Workshop Webwriting - 2ª Turma
 
Oficina IV: Marketing de Busca: como alavancar sua marca na internet - Ciclo ...
Oficina IV: Marketing de Busca: como alavancar sua marca na internet - Ciclo ...Oficina IV: Marketing de Busca: como alavancar sua marca na internet - Ciclo ...
Oficina IV: Marketing de Busca: como alavancar sua marca na internet - Ciclo ...
 
O design equilibrado8
O design equilibrado8O design equilibrado8
O design equilibrado8
 
Redação para Web
Redação para WebRedação para Web
Redação para Web
 
Aula 1 - Desenvolvimento do leiaute (1).pdf
Aula 1 - Desenvolvimento do leiaute (1).pdfAula 1 - Desenvolvimento do leiaute (1).pdf
Aula 1 - Desenvolvimento do leiaute (1).pdf
 

More from Odair Cavichioli (20)

Projeto da embalagem
Projeto da embalagemProjeto da embalagem
Projeto da embalagem
 
O mercado de embalagens
O mercado de embalagensO mercado de embalagens
O mercado de embalagens
 
Novas atribuições da embalagem
Novas atribuições da embalagemNovas atribuições da embalagem
Novas atribuições da embalagem
 
Evolução da embalagem
Evolução da embalagemEvolução da embalagem
Evolução da embalagem
 
Design Thinking
Design ThinkingDesign Thinking
Design Thinking
 
Estratégia de comunicação
Estratégia de comunicaçãoEstratégia de comunicação
Estratégia de comunicação
 
Briefing
BriefingBriefing
Briefing
 
Introdução ao design de livro
Introdução ao design de livroIntrodução ao design de livro
Introdução ao design de livro
 
Gestão da comunicação
Gestão da comunicaçãoGestão da comunicação
Gestão da comunicação
 
Proporção Áurea
Proporção ÁureaProporção Áurea
Proporção Áurea
 
Grade de diagramação
Grade de diagramaçãoGrade de diagramação
Grade de diagramação
 
Composição gráfica
Composição gráficaComposição gráfica
Composição gráfica
 
Projeto visual
Projeto visualProjeto visual
Projeto visual
 
Comunica Visual Interna
Comunica Visual InternaComunica Visual Interna
Comunica Visual Interna
 
Mídia externa
Mídia externaMídia externa
Mídia externa
 
Cartaz e Poster
Cartaz e PosterCartaz e Poster
Cartaz e Poster
 
Outdoor
OutdoorOutdoor
Outdoor
 
Introdução a Gestalt
Introdução a GestaltIntrodução a Gestalt
Introdução a Gestalt
 
Vetor
VetorVetor
Vetor
 
Introdução a arte digital
Introdução a arte digitalIntrodução a arte digital
Introdução a arte digital
 

Diagramação Organizando