SlideShare uma empresa Scribd logo
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

Mais conteúdo relacionado

Mais procurados

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
Cristiano Pires Martins
 
Projeto de WEB Site
Projeto de WEB SiteProjeto de WEB Site
Projeto de WEB Site
Ailton Adriano
 
Metodologia para criação de sites
Metodologia para criação de sitesMetodologia para criação de sites
Metodologia para criação de sites
Celina Uemura
 
8 fazes do planejamento de sites
8 fazes do planejamento de sites8 fazes do planejamento de sites
8 fazes do planejamento de sites
Isaac Batista
 
Noções de planejamento visual
Noções de planejamento visualNoções de planejamento visual
Noções de planejamento visual
Evandro Manara Miletto
 
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
Mercatto Comunicação
 
Editora Revan - Proposta Site
Editora Revan - Proposta SiteEditora Revan - Proposta Site
Editora Revan - Proposta Site
Mila 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 Palestras
Renato Borges, MBA, PMP,CBPP
 
Html - Capitulo 03
Html - Capitulo 03Html - Capitulo 03
Html - Capitulo 03
Alvaro Gomes
 
Como tornar seu site atraente
Como tornar seu site atraenteComo tornar seu site atraente
Como tornar seu site atraente
Suzana 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
 
Construcao de Sites
Construcao de SitesConstrucao de Sites
Construcao de Sites
Leandro Ciuffo
 

Mais procurados (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
 

Destaque

Jornalismo de Revista: Diagramação
Jornalismo de Revista: DiagramaçãoJornalismo de Revista: Diagramação
Jornalismo de Revista: Diagramação
Petcom
 
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 Percepcao
Daniel Castro
 
Composição e Diagramação
Composição e DiagramaçãoComposição e Diagramação
Composição e Diagramação
Ed Marcos
 
Ling Midias Digitais Aula 1
Ling Midias Digitais Aula 1Ling Midias Digitais Aula 1
Ling Midias Digitais Aula 1
Alan da Luz
 
Apresentação da disciplina_2013
Apresentação da disciplina_2013Apresentação da disciplina_2013
Apresentação da disciplina_2013
Jp Martins
 
Diagramacao ua
Diagramacao uaDiagramacao ua
Diagramacao ua
prof carlos
 
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 III
lucattony
 
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
 
DiagramaçãO Jornal Standart
DiagramaçãO Jornal StandartDiagramaçãO Jornal Standart
DiagramaçãO Jornal Standart
Nasson Paulo Sales Neves
 
Apostila recursos audiovisuais
Apostila recursos audiovisuaisApostila recursos audiovisuais
Apostila recursos audiovisuais
Arlete 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 P2
Pedro Almeida
 
Recursos audiovisuais
Recursos audiovisuaisRecursos audiovisuais
Recursos audiovisuais
Douglas Chanan
 
mídias digitais
mídias digitaismídias digitais
mídias digitais
Adriana Santana
 
Recursos Audiovisuais - Resumo
Recursos Audiovisuais - ResumoRecursos Audiovisuais - Resumo
Recursos Audiovisuais - Resumo
Demóstenes Muniz Brito
 

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

Semelhante a Webdesign - Diagramacao

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ção
Ricardo 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 Nielsen
Luiz 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
 
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
Universidade Federal do Rio Grande do Sul
 
Apresentacao Unicuritiba
Apresentacao UnicuritibaApresentacao Unicuritiba
Apresentacao Unicuritiba
marceloMD
 
Design e Usabilidade
Design e UsabilidadeDesign e Usabilidade
Design e UsabilidadeClaudio Toldo
 
Html - capitulo 04
Html - capitulo 04Html - capitulo 04
Html - capitulo 04
Alvaro 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 digital
Odair Cavichioli
 
USABILIDADE.
USABILIDADE.USABILIDADE.
USABILIDADE.
Fábio Santos
 
Big images / Big Type
Big images / Big TypeBig images / Big Type
Big images / Big Type
comOn Group
 
Workshop Webwriting - 2ª Turma
Workshop Webwriting - 2ª TurmaWorkshop Webwriting - 2ª Turma
Workshop Webwriting - 2ª Turma
TIP
 
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 Web
GovBR
 
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
ssuser595b1e1
 

Semelhante a Webdesign - Diagramacao (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
 

Mais de Odair Cavichioli

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

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

Webdesign - Diagramacao