Design de interfaces I

753 visualizações

Publicada em

Design de interfaces I

Publicada em: Design
0 comentários
2 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
753
No SlideShare
0
A partir de incorporações
0
Número de incorporações
1
Ações
Compartilhamentos
0
Downloads
23
Comentários
0
Gostaram
2
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Design de interfaces I

  1. 1. Design  de  Interfaces   Profa.  Carolina  Toledo   IED  –  Projeto  Digital  e  Virtual  II  
  2. 2. Gestalt   Apesar  das  diferentes  atuações  e  suas   par?cularidades,  o  obje?vo  do  design  é  sempre  o   mesmo:  projetar  conceitos,  equilibrando  esté?ca  e   funcionalidade.       Para  isso,  é  fundamental  o  entendimento  dos   conceitos  gerais  da  percepção  visual.       A  gestalt  é  considerada  pelos  mais  conceituados   profissionais  da  área  a  gramá?ca  subliminar  da   alfabe?zação  visual.    
  3. 3. O  movimento   •  O  movimento  gestal?sta  teve  início  na  Viena  do  século  XIX,   através  dos  estudos  do  filósofo  Von  Ehrenfels.  A  Gestalt   firmou-­‐se  como  a  primeira  Escola  de  Psicologia   Experimental  e  atuou  principalmente  no  campo  da  teoria   da  forma,  com  contribuição  relevante  aos  estudos  da   percepção,  linguagem,  inteligência,  aprendizagem,   memória,  mo?vação,  conduta  exploratória  e  dinâmica  de   grupos  sociais.     •  O  termo  Gestalt,  no  seu  sen?do  mais  amplo,  significa  uma   integração  de  partes  em  oposição  à  soma  do  “todo”.  É   comumente  traduzido  para  o  inglês,  espanhol  e  português   como  estrutura,  figura,  forma.    
  4. 4. O  movimento     •  A  teoria  da  Gestalt,  gerada  através  de  grande  pesquisa   e  experimentação,  sugere  uma  resposta  ao  porquê  de   umas  formas  agradarem  mais  e  outras  não.  Ela  afirma   também  que  o  cérebro  só  consegue  perceber,   decodificar  e  assimilar  uma  imagem  ou  um  conceito   pela  sua  totalidade  e  não  pelas  partes  separadas  que   formam  este  todo.     •  Sendo  assim,  existem  algumas  leis  básicas  da  Gestalt   que  explicam  o  processo  psicológico  de  captação  e   entendimento  de  alguma  imagem  ou  idéia.    
  5. 5. Leis  da  Gestalt   •  Pregnância  da  forma:       Este  é  um  dos  conceitos  mais  importantes  da  Gestalt.  Ele   demonstra  que  todas  as  formas  tendem  a  ser  percebidas   em  seu  caráter  mais  simples:  uma  espada  e  um  escudo   podem  tornar-­‐se  uma  reta  e  um  círculo.       Quanto  melhor  for  a  organização  visual  da  forma  do   objeto,  em  termos  de  facilidade  de  compreensão,  rapidez   de  leitura  e  interpretação,  melhor  será  o  seu  grau  de   pregnância.    
  6. 6. Leis  da  Gestalt   •  Unidade:     As  unidades  formais  são  percebidas  através  da   relação  dos  elementos  que  as  cons?tuem.       Uma  ou  mais  unidades  podem  ser  percebidas   dentro  de  um  todo  pela  percepção  isolada  e   combinação  dos  elementos  como:  pontos,  linhas,   planos,  volume,  cores,  brilho,  sombra,  textura  etc.    
  7. 7. Leis  da  Gestalt   •  Segregação:   Este  conceito  demonstra  a  capacidade   percep?va  de  separar,  iden?ficar,  evidenciar  e   destacar  unidades  formais  em  uma  composição.      
  8. 8. Leis  da  Gestalt   •  Unificação:     Consiste  na  semelhança  e  igualdade  produzidos   pelo  campo  visual.       A  unificação  também  acontece  por  fatores  como   harmonia,  coerência  da  linguagem  e   organização.    
  9. 9. Leis  da  Gestalt   •  Semelhança:     Os  objetos  similares  tendem  a  se  agrupar.  A   similaridade  pode  acontecer  na  cor  dos  objetos,   na  textura.       Estas  caracterís?cas  podem  ser  exploradas   quando  desejamos  criar  relações  ou  agrupar   elementos  na  composição  de  um  layout.    
  10. 10. Leis  da  Gestalt   •  Proximidade:     Os  elementos  são  agrupados  de  acordo  com  a   distância  a  que  se  encontram  uns  dos  outros.   Assim,  elementos  próximos  entre  si  tendem  a   ser  percebidos  como  um  grupo.      
  11. 11. Leis  da  Gestalt   •  Con?nuidade:     Se  vários  elementos  de  um  quadro  apontam   para  o  mesmo  canto,  por  exemplo,  o  resultado   final  “fluirá”  mais  naturalmente.      
  12. 12. Leis  da  Gestalt   •  Clausura:     Ou  “fechamento”,  o  princípio  de  que  a  boa  forma  se   completa,  se  fecha  sobre  si  mesma,  formando  uma  figura   delimitada.  O  conceito  de  clausura  relaciona-­‐se  ao   fechamento  visual,  como  se  completássemos  visualmente  um   objeto  incompleto.       Ocorre  geralmente  quando  o  desenho  do  elemento  sugere   alguma  extensão  lógica,  como  um  arco  de  quase  360o  sugere   um  círculo.  O  conceito  de  boa  con?nuidade  está  ligado  ao   alinhamento,  pois  dois  elementos  alinhados  passam  a   impressão  de  estarem  relacionados.      
  13. 13. Conceituação  da  Forma   A  forma  pode  ser  definida  como  a  imagem  visual.  Ela  informa  sobre  o  aspecto   estrutural  do  objeto.  A  forma  é  o  resultado  de  interação  entre  o  objeto  e  o   meio.     A  conceituação  da  forma  acontece  em  seis  princípios:     •  Forma  ponto  –  unidade  mais  simples  existente  na  comunicação  visual.     •  Forma  linha  –  uma  sucessão  de  pontos  ou  ponto  em  movimento.     •  Forma  plano  –  uma  sucessão  de  linhas  que  se  expressa  nas  duas   dimensões  do  espaço.     •  Forma  volume  –  algo  que  se  expressa  por  projeção  nas  três  dimensões  do   espaço.     •  Forma  –  configuração  real  –  Demonstra  a  captação  real  da  imagem,  como   numa  fotografia.     •  Forma  –  configuração  esquemá?ca  –  Demonstra  a  percepção  do  objeto   real  num  conceito  estrutural.    
  14. 14. Conceituação  da  Forma   Certas  formas  só  podem  ser  compreendidas  se   já  a  conhecermos,  ou  se  ?vermos  consciência   prévia  de  sua  existência.       Da  mesma  maneira,  a  experiência  passada  fa-­‐   vorece  a  compreensão:  se  já  ?vermos  visto  a   forma  inteira  de  um  elemento,  ao  visualizarmos   somente  uma  parte  dele  reproduziremos  esta   forma  inteira  na  memória.    
  15. 15. Categorias  Conceituais   Técnicas  visuais  aplicadas       Estas  técnicas  visuais  podem  fornecer   informações  valiosas  no  processo  de  criação,   gerando  conceitos  e  agregando  significados  para   a  produção  visual.       Porém,  devem  ser  u?lizadas  de  acordo  com  a   necessidade  conceitual  do  projeto.      
  16. 16. Categorias  Conceituais   •  Clareza  –  manifestação  visual  bem  organizada,  unificada,   harmoniosa  e  equilibrada.     •  Simplicidade  –  esta  aplicação  é  caracterizada  pela   organização,  harmonia  e  síntese  visual,  gerando  boa   pregnância  da  forma.     •  Complexidade  –  complicação  visual  por  numerosos   elementos.  Se  organizado  pode  gerar  harmonia  e  interesse.       •  Minimidade  –  simplicidade,  naturalidade,  gerando  boa   pregnância  pela  economia  de  elementos.    
  17. 17. Categorias  Conceituais   •  Profusão  –  manifestação  visual  muito  carregada  com   excesso  de  detalhes  e  ornamentos.     •  Coerência  –  resultado  de  uma  aplicação  visual  integrada   e  harmoniosa  e  diretamente  vinculada  ao  conceito.     •  Exageração  –  técnica  que  recorre  a  configurações   extravagantes  para  uma  expressão  visual  intensa.     •  Arredondamento  –  suavidade  e  maciez  transmi?das   geralmente  por  formas  orgânicas.    
  18. 18. Categorias  Conceituais   •  Transparência  –  transmite  a  sensação  de  profundidade  e   de  realidade.     •  Redundância  –  enfa?zar  ou  chamar  atenção  através  da   repe?ção.     •  Ambigüidade  –  concorrência  por  indefinição  geométrica   ou  orgânica  da  forma  induzindo  a  mais  de  uma   interpretação.     •  Espontaneidade  –  aparente  falta  de  planejamento  visual.    
  19. 19. Categorias  Conceituais   •  Aleatoriedade  –  disposição  rítmica  e  não  seqüencial.     •  Fragmentação  -­‐  decomposição  dos  elementos  em  peças   separadas     •  Su?leza  –  transmite  delicadeza  através  de  acabamentos   elegantes  e  refinados.     •  Difusidade  –  transmite  a  sensação  de  diluição  da   imagem,  re?rando  dela  precisão  e  transportando  o   observador  a  um  ambiente  subje?vo.      
  20. 20. Categorias  Conceituais   •  Distorção  –  drama?zação  com  o  propósito  de   sensibilizar.     •  Profundidade  –  técnica  com  obje?vo  de  gerar  uma   perspec?va  tridimensional.     •  Seqüencialidade  –  elementos  organizados  e  dispostos  de   modo  congnuo.     •  Ruído  –  interferências  que  perturbam  a  harmonia  ou  a   ordem  a  fim  de  criar  pontos  de  interesse.      
  21. 21. Conceito   Para  começar  a  projetar  deve-­‐se  estar  sempre  atento  aos   princípios  do  design,  como:       •  conceito     •  originalidade   •  simplicidade   •  pregnância     •  legibilidade     Eles  são  importantes  para  a  fundamentação  dos  seus   projetos.    
  22. 22.                       Observe  as  figuras  acima...     Você  notou  algo  de  estranho?        
  23. 23. Conceito   Em  um  supermercado,  os  produtos  são  facilmente  iden?ficados   pela  sua  embalagem.  Mesmo  à  distância,  consegue-­‐se   reconhecer,  sem  ler  os  nomes,  o  que  é  sabão  em  pó,  cerveja  ou   pasta  de  dentes.       Isso  acontece  quase  intui?vamente,  porque  você  já  tem  uma   imagem  pré-­‐  estabelecida  desses  produtos.       Já  se  sabe,  por  exemplo,  que  a  pasta  de  dentes  vem  em  tubo,  e   o  sabão  em  pó,  em  caixa.       Além  disso,  nota-­‐se  que,  na  maioria  das  vezes,  adotam  uma   esté?ca  bastante  similar.    
  24. 24. Conceito   Cada  categoria  de  produtos  tem  um  conceito,  uma  imagem  a   transmi?r.       É  isso:  o  conceito  nada  mais  é  do  que  um  conjunto  de   informações  representadas  por  elementos  gráficos  (como  cor,   ?pografia,  imagens  etc.)  e  que,  juntos,  transmitem  uma  idéia.       Agora,  você  deve  estar  se  perguntando:  mas  o  que  isso  tem  a   ver  com  criação  de  sites?  Tudo!       Os  sites  também  devem  transmi?r  conceitos,  de  acordo  com  a   sua  categoria.    
  25. 25. Categorias  de  Sites   Todo  site  tem  que  transmi?r  um  conceito,  isto  é,  uma  idéia  do   que  se  trata.       No  caso  de  um  site  para  o  público  infan?l,  por  exemplo,  é   adequada  a  u?lização  de  cores  alegres,  fontes  diver?das,  muitas   ilustrações  e  desenhos,  animações,  joguinhos  intera?vos,   criando  um  ambiente  lúdico.       Além  disso,  o  site  deve  condizer  com  a  categoria  à  qual   pertence.  Um  portal  infan?l  deve  possuir  diversos  links  para   outras  áreas  de  interesse  que  atraiam  a  criança.    
  26. 26. Algumas  Categorias  de  Sites   Portais  –  apresentam  conteúdo  vasto,  dividido  por  seções  de  temas  variados   e  atualizados  diariamente,  na  maioria  dos  casos.      
  27. 27. Categorias  de  Sites   Portais    
  28. 28. Categorias  de  Sites   Sites  ins,tucionais  -­‐  sites  de  empresas  ou  ins?tuições  que  apresentam  seus   serviços  e  produtos.  É  o  contato  direto  da  empresa  com  seus  clientes.        
  29. 29. Categorias  de  Sites   Sites  ins,tucionais    
  30. 30. Categorias  de  Sites   Sites  de  comércio  eletrônico  –  sites  que  disponibilizam  produ-­‐  tos  a  serem   comprados  pela  internet.    
  31. 31. Categorias  de  Sites   Sites  de     comércio     eletrônico  
  32. 32. Categorias  de  Sites   Sites  de  ins,tuições  financeiras  -­‐  agências  virtuais,  que  disponibiliza  serviços   como,  acesso  a  sua  conta  e  pode  realizar  transações.    
  33. 33. Categorias  de  Sites   Sites  pessoais  ou  por8ólios  -­‐  apresentam  trabalhos  já  realizados,  mostrando   sua  experiência  profissional,  currículo  etc.  Esses  sites  não  se  restringem  a   profissionais  do  design,  também  podem  divulgar  ar?stas,  músicos,  es?listas   ou  qualquer  profissional  liberal.    
  34. 34. Categorias  de  Sites   Blogs  (por8ólios)  -­‐  uma  tendência,  onde  designers  ou  qualquer  profissional   expõem  seus  projetos  em  blogs  porpólios.  Assim,  há  muita  intera?vidade   com  os  leitores  e  mais  rapidez  para  a  atualização.        
  35. 35. Categorias  de  Sites   Sites  de  entretenimento  -­‐  sites  desenvolvidos  para  o  lazer  do  usuário.   Voltados  para  o  público-­‐alvo,  onde  o  entretenimento  expõe  o  produto  ou   conceitualiza  a  marca.  
  36. 36. Categorias  de  Sites   Sites  de  no>cias  –  são  sites  direcionados  a  informar,  com  atualização  intensa   e  conteúdo,  além  da  u?lização  de  tecnolo-­‐  gias,  como  RSS,  e  informa?vos  via   e-­‐mail,  disponibilizando  aos  usuários  informações  com  mais  rapidez.    
  37. 37. Categorias  de  Sites   Hotsites  -­‐  são  sites  desenvolvidos  para  um  curto  prazo  de  exposi-­‐  ção,  onde   são  divulgados  novos  produtos.  Nesta  modalidade  de  site,  a  criação  tem  a   oportunidade  de  reforçar  o  conceito  da  marca  e  vender  uma  a?tude.    
  38. 38. Categorias  de  Sites   Sites  de  rede  social  -­‐  esta  modalidade  de  site  entrou  como  uma  febre  no   mercado  e  hoje  demonstra  claramente  sua  função.  O  que  parecia  um  simples   site  de  relacionamento  demonstrou  com  a  formação  de  comunidades  que   pode  servir  de  medida  para  empresas  e  uma  resposta  direta  do  público  aos   produtos  lançados.    
  39. 39. Categorias  de  Sites   Site  de  exibição  de  vídeos  -­‐  o  nascimento  do  YouTube  marca  a  revolução  na   veiculação  de  vídeos  na  web,  tornando-­‐os  acessíveis  para  qualquer  pessoa,   em  qualquer  lugar.    
  40. 40. Tendências   Foco  no  público-­‐alvo.  Esta  é  uma  das  principais  tendências  do  mercado   digital.     Direcionando  ao  público  os  produtos,  as  idéias,  os  conceitos  e  todo  o  nicho   de  informações,  as  empresas  podem  ganhar  cada  vez  mais  o  mercado,  já  que   com  a  alta  intera?vidade,  comunidades  e  métricas,  o  retorno  do  público  é   mais  intensificado.    

×