Design de interfaces I

Design  de  Interfaces  

Profa.  Carolina  Toledo  IED  –  Projeto  Digital  e  Virtual  II  

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.    

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.    

O  movimento    •  A  teoria  da  Gestalt,  gerada  através  de  grande  pesquisa  e  experimentação,  sugere  uma  resposta  ao  porque  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.    

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.    

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.    

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.      

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.    

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.    

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.      

Leis  da  Gestalt  

•  Con?nuidade:    

Se  vários  elementos  de  um  quadro  apontam  para  o  mesmo  canto,  por  exemplo,  o  resultado  final  “fluira”  mais  naturalmente.      

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  esta  ligado  ao  alinhamento,  pois  dois  elementos  alinhados  passam  a  impressão  de  estarem  relacionados.      

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.    

Conceituação  da  Forma  

Certas  formas  só  podem  ser  compreendidas  se  ja  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  ja  ?vermos  visto  a  forma  inteira  de  um  elemento,  ao  visualizarmos  somente  uma  parte  dele  reproduziremos  esta  forma  inteira  na  memória.    

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.      

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.    

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.    

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.    

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.    

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.    

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.    

Observe  as  figuras  acima...    Você  notou  algo  de  estranho?    

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  po,  cerveja  ou  pasta  de  dentes.      Isso  acontece  quase  intui?vamente,  porque  você  ja  tem  uma  imagem  pré-­‐  estabelecida  desses  produtos.      Ja  se  sabe,  por  exemplo,  que  a  pasta  de  dentes  vem  em  tubo,  e  o  sabão  em  po,  em  caixa.      Além  disso,  nota-­‐se  que,  na  maioria  das  vezes,  adotam  uma  esté?ca  bastante  similar.    

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.    

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.    

Algumas  Categorias  de  Sites  Portais  –  apresentam  conteúdo  vasto,  dividido  por  seções  de  temas  variados  e  atualizados  diariamente,  na  maioria  dos  casos.      

Categorias  de  Sites  Portais    

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.        

Categorias  de  Sites  Sites  ins,tucionais    

Categorias  de  Sites  Sites  de  comércio  eletrônico  –  sites  que  disponibilizam  produ-­‐  tos  a  serem  comprados  pela  internet.    

Categorias  de  Sites  Sites  de    comércio    eletrônico  

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.    

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.    

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.        

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.  

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.    

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.    

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.    

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.    

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,  ja  que  com  a  alta  intera?vidade,  comunidades  e  métricas,  o  retorno  do  público  é  mais  intensificado.