• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Grade de diagramação
 

Grade de diagramação

on

  • 12,473 views

Estruturando a informação

Estruturando a informação

Statistics

Views

Total Views
12,473
Views on SlideShare
11,590
Embed Views
883

Actions

Likes
18
Downloads
716
Comments
1

16 Embeds 883

http://aulasjoaorafael.blogspot.com.br 449
http://programadorvisualhenrique.blogspot.com.br 199
http://programadorvisualhenrique.blogspot.com 87
http://goldengrids.posterous.com 43
http://www.aulasjoaorafael.blogspot.com.br 39
http://webdesignerhenrique.blogspot.com.br 30
http://aulasjoaorafael.blogspot.com 16
http://webdesignerhenrique.blogspot.com 5
http://aulasjoaorafael.blogspot.pt 4
http://www.facebook.com 4
http://www.aulasjoaorafael.blogspot.com 2
http://aulasjoaorafael.blogspot.de 1
https://www.facebook.com 1
http://webcache.googleusercontent.com 1
http://www.blogger.com 1
http://translate.googleusercontent.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • muito legal
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Grade de diagramação Grade de diagramação Presentation Transcript

    • Grade de diagramação Estruturando a informação
    • Definição
      • Segundo o dicionário Aurélio, diagramar significa:
        • “ Dispor graficamente os elementos da peça gráfica que deverão fazer parte de uma publicação”;
        • “ Elaboração de leiaute ou esquema em que aparecem devidamente calculados e representados todos os elementos que compõem o material”.
    • Evolução
      • O conceito de diagramação sempre existiu. Nos primórdios da civilização, nossos antepassados tentavam organizar o pensamento estruturalmente ao se comunicar.
      • Durante a Revolução Industrial, foi elaborado um conceito de grade (malha ou grid ) para a diagramação, servindo como guia para orientar a posição dos tipos móveis nas prensas mecânicas de impressão.
      • Com o tempo, os designers perceberam que a grade poderia organizar melhor as informações permitindo um controle de leitura do registro visual.
    • Movimentos que evoluíram a diagramação
      • Beaux-Art
      • Arts & Crafts
      • Art Nouveau
      • Construtivismo Russo
      • Dstijl
      • Bauhaus
      • Art Deco
      • Estilo Internacional
      • Revivalismo
      • Vernacular
      • New Wave
      • Art Punk
      • Academia de Arte Cranbook
    • Opiniões sobre grade de diagramação
      • Para os simpatizantes:
        • Fator essencial do projeto visual, possibilitando precisão, ordem e clareza das informações.
      • Para outros:
        • Oprime a criatividade, limitando o trabalho.
    • Regra dos terços
      • Tanto na pintura quanto na fotografia é comum o uso da grade para ajudar a compor visualmente uma imagem, enquadrando as informações de forma mais atraente.
    • Regra dos terços
    • Vantagens
      • Clareza:
        • Permite uma ordem sistemática de leitura, facilitando sua leitura e interpretação
      • Eficiência:
        • Uma vez que a estrutura foi planejada, um designer (ou vários) pode diagramar rapidamente uma quantidade enorme de informações
      • Economia:
        • É possível planejar melhor a utilização de todo o espaço disponível
      • Identidade:
        • A estrutura cria um padrão visual único, dando personalidade a composição
    • Elementos da grade
      • Margens
        • Espaços negativos que indicam o limite do conteúdo.
        • Ajudam a estabelecer a tensão geral dentro da composição.
        • Pode ser utilizada para:
          • Orientar o foco
          • Respiro
          • Área secundária de informação
    • Elementos da grade
      • Coluna
        • Alinhamento verticais que “bloca” a continuação de informação, contribuindo com a orientação da leitura.
        • Ajuda ao designer a dividir sua composição
        • A diferença da largura pode da mais peso a uma informação
    • Elementos da grade
      • Guias horizontais
        • Alinhamento horizontal que ajudam a orientar o sentido da leitura
        • Definem pontos de partida
        • Criam respiro entre as informações
    • Elementos da grade
      • Módulos
        • Unidades regulares que formam a grade
    • Elementos da grade
      • Zonas espaciais
        • Agrupamento de módulos utilizados para reunir uma informação
        • Sua disposição é que definirá
          • A geometrização
          • O agrupamento
          • A direção visual
    • Elementos da grade
      • Marcadores
        • Indicam a posição de informações secundárias ou elementos de repetição, como:
          • Cabeçalho
          • Rodapé
          • Nome de seção
          • Paginação
          • Créditos
          • Etc
    • Fases de desenvolvimento
      • Avaliação
        • Analisar as características do conteúdo e a existência de produção do material.
        • Deve-se prever problemas de posicionamento, como títulos muito cumpridos, corte de imagens e espaços vazios por falta de conteúdo.
        • A grade deve ser flexível e dinâmica. Uma grade boa deve permitir infinitas possibilidades para a exploração.
      • Diagramação
        • Dispor o conteúdo na grade desenvolvida, mantendo a unidade do conteúdo sem comprometer a composição.
    • Tipos de grade
      • Retangular
        • Versão mais simples que acomoda um longo texto corrido, como um livro.
        • Esse tipo causa cansaço, necessitando criar algo diferente para estimular a leitura.
    • Tipos de grade
      • Retangular
    • Tipos de grade
      • Colunas
        • É flexível e pode ser utilizado para separar diversos tipos de texto ou mesmo informação.
        • Pode ser composto por grades diferentes para tipo de conteúdo.
    • Tipos de grade
      • Colunas
    • Tipos de grade
      • Modular
        • Originário da Bauhaus e do Estilo Internacional suíço, utilizado combinar tipos de grades para unificação de conteúdo.
        • Quanto mais módulo, maior a flexibilidade, mas também aumenta o excesso de subdivisões, podendo gerar confusão ou redundância.
    • Tipos de grade
      • Modular
    • Tipos de grade
      • Hierárquico
        • Ordena as informações de forma semântica e ergonômica, dando mais peso e contraste para uma informação, variando a área viva em que ocupa.
        • É preciso fazer um estudo da interação ótica entre dos elementos para criar uma estrutura racional.
    • Tipos de grade
      • Hierárquico
    • Variação e violação
      • O designer não deve temer sua grade. A grade é um guia invisível que existe para orientá-lo e não limitá-lo.
      • Crie esboços e experimente novos arranjos, principalmente em páginas duplas.
    • Variação e violação
    • Modificações
    • Grade de coluna dimensional
    • Desconstruindo a grade
      • Nem sempre um conteúdo permite que uma grade consiga transmitir os valores de uma forma adequada.
      • As vezes, pode ser que necessite extrair um envolvimento emocional e intelectual mais complexo do público alvo.
      • Uma forma simples de fazer isso é deslocar colunas e guias para formar uma ilusão tridimensional.
    • Descontrução linguística
      • Usada para representar visualmente uma palavra ou utilizá-la como grafismo.
    • Descontrução ótica espontânea
      • Distribuição intuitiva, alterando os elementos de acordo com seus contrastes visuais.
    • Descontrução pictórica (conceitual)
      • Representação ilusória de um tema, mantendo uma unidade de acordo com a idéia central.
    • Operação aleatória
      • Construção intuitiva de acordo com o olhar e sensibilidade do designer.
      • Essa técnica exige muito controle sobre o acaso.
      • Um o artista pinta seu quadro jogando a tinta sobre a tela, mas sabe que surgiram certos padrões por causa do tamanho do pincel ou movimento do punho.
    • Referência bibliográfica
      • As informações contidas nessa apresentação foram elaboradas com base na minha experiência profissional que, em algum momento, podem contradizer o que é explicado na teoria.
      • Existem algumas informações que são encontradas na Wikipédia. Porém, como seu conteúdo pode ser alterado por qualquer pessoa, sua credibilidade é questionável. Só utilize informações da Wikipédia se você já conhece o assunto e concorda com as definições.
      • Estudo de caso, revista Aventura&Ação #154
        • http://www.extremos.com.br/Revista/Aventura-e-Acao/154/regra-dos-tercos/
      • Diagramação – Elementos e Tipos de Grids
        • Cristiane Schiavenin
        • http://chocoladesign.com/diagramacao-%E2%80%93-elementos-e-tipos-de-grids
      • Talmud Project
        • Small Design Firm Inc.
        • http://www.davidsmall.com/portfolio/talmud-project/
      • Grid: Construção e Desconstrução
        • Timothy Samara
        • Editora Cosac Naify
        • 2008
    • Grade de diagramação Estruturando a informação Odair Cavichioli Júnior www.odaircavichioli.com.br