Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Fundamentos do Grid - parte 1

9,761 views

Published on

Published in: Education

Fundamentos do Grid - parte 1

  1. 1.   Todo o trabalho de design envolve a solução de problemas visuais e de organização de elementos: Blocos  de   texto   Imagens   Tabelas  
  2. 2. Vantagens   Introduz  uma  ordem  sistemá8ca  no  Layout   Diferencia  8pos  de  informação   Facilita  a  leitura   Rapidez  na  diagramação   Vários  colaboradores  no  mesmo  projeto  
  3. 3. Construir  um  grid  eficaz   significa  destrinchar  seu   conteúdo  em  termos  de  suas   qualidades  visuais  e  semân8cas   de  seu  espaço  8pográfico  
  4. 4. O  projeto  de  um  grid  depende  de  duas  fases  de  desenvolvimento:   Primeira  fase   Avaliação  das  caracterís8cas  informa8vas  e  as  exigências  de   produção  do  material   Prevenção  de  eventuais  problemas  como:   Títulos  compridos  demais   Cortes  de  imagens   Espaços  vazios  por  falta  de  material  
  5. 5. O  projeto  de  um  grid  depende  de  duas  fases  de  desenvolvimento:   Segunda  fase   Dispor  o  conteúdo  de  acordo  com  as  diretrizes  montadas  no  grid   O  grid  NUNCA  pode  prevalecer  sobre  a  informação   Oferecer  uma  unidade  geral  sem  destruir  a  viltalidade  da   composição   Variedade  de  soluções  inesgotável  
  6. 6. Elementos  do  Grid  
  7. 7. Um  grid  é  formado  por   Colunas   Módulos   Margens   Guias   horizontais   Zonas   Marcadores   espaciais  
  8. 8. Margens   Colunas   Guias   Zonas   espaciais   Módulos   Marcadores  
  9. 9. Colunas  –  Alinhamentos  ver8cais  que  criam  divisões  horizontais  entre  as  margens   Módulos  –  Unidades  individuais  de  espaço  separadas  por  intervalos  regulares   Marcadores  :  Indicadores  de  Localização   Zonas  espaciais:  Grupos  de  módulos,  que  juntos,  formam  campos  dis8ntos.   Cada  campo  pode  receber  uma  função  específica  .  Ex:  Imagens  ou    bloco  de  texto   Guias  horizontais:  Alinhamento  para  orientação  dos  olhos  no  formato   Margens  :  Espaços  “nega8vos”  entre  o  limite  da  página  e  o  conteúdo  

×