Diseno grafico dojo_v1

521 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
521
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
29
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Diseno grafico dojo_v1

  1. 1. fac eSIn ter David Ramos Valcárcel david@uvigo.es
  2. 2. Diseño  Grafico  de  Interfaces  de  Usuario     Tres  puntos  de  vista:       §  Usuario:  visión  personal  del  sistema,  diferente  y  compleja   de  gestionar   §  Programador:  necesidad  de  encajar  “piezas”   §  Diseñador:  mezcla  necesidades  à          Deseos  del  usuario  &  Recursos  del  programador       Intermediario  entre  usuario  y  programador  
  3. 3. Diseño  Grafico  de  Interfaces  de  Usuario   usuario  se  siente   responsable!!!   Se  diseña  para  los   capacidad  de  seducir   usuarios   al  usuario   UI  mal   diseñada     Calidad  de   UI  bien   interfaz  à  éxito   diseñada:   no  se   o  fracaso   encuentra  información   comodidad   usuario   en  la   compleja  en   incómoda   encuentra   navegación   el  uso   a  la  vista   lo  que   busca  
  4. 4. El  diseñador  se  encarga  de     §  Presentación:       captar  la  atención  inicial  del  usuario   prevalece  la  interacción  (facilidad  de  uso)  del  producto   abuso  de  presentación  (colores,  tipografías)  contraproducente     §  Interacción:     necesidad  de  conocer  dispositivos  y  características   enorme  diferencia  entre  dispositivos  (PC,  tablet,  móviles…)     §  Metáfora:     que  significa  cada  elemento  y  sus  implicaciones   ejemplo:  escritorios,  agendas…  
  5. 5. Modelo  del  diseñador  :  look-­‐and-­‐fell  –  IBM  1992       El porcentaje es acorde a la realidad del mercado???
  6. 6.     in cip ios pr
  7. 7. Principios  para  el  diseño  de  UI     Anticipación:  a  las  necesidades  del  usuario      cómo  va  a  buscar  la  información    cómo  invoca  las  funciones   Estructurar la información  cómo  interactúa  con  el  sistema     Percepción  del  color:  el  color  comunica    cuidado  con  el  abuso    problemas  con  el  contraste   Pruebas preliminares  diferencias  entre  monitores  y  dispositivos    máximo  3  a  5  colores      +  5  colores  à  distracción,  poco  profesional  
  8. 8. Principios  para  el  diseño  de  UI     Valores  por  defecto      usar  convenciones  estándares    en  función  del  dispositivo   Distintas versiones  formularios,  ventanas,  ayudas…     Consistencia  gráfica    usuario  se  familiariza  rápidamente    interpretación  rápida  del  significado  de  los  elementos    inconsistencia  à  pérdida  de  referencias  visuales          
  9. 9. Principios  para  el  diseño  de  UI     Productividad  del  usuario  delante  de  productividad     maquina    más  importante  facilidad  de  uso  que  “eficiencia  implementación”      usuario  desubicado  à  pérdida  de  tiempo  inestimable         Ley  de  Fitt    “modelo  del  movimiento  humano  que  predice  el  tiempo   necesario  para  moverse  rápidamente  desde  una  posición  inicial  hasta  una   zona  destino  final  como  una  función  de  la  distancia  hasta  el  objetivo  y  el   tamaño  de  éste”      elementos  grandes  para  funciones  importantes          
  10. 10. Principios  para  el  diseño  de  UI     Interfaces  explorables      seguimiento  fácil  de  interfaz    breadcrumbs  à  migas  de  pan               Uso  de  metáforas    constituyen  figuras  mentales  fáciles  de  recordar    asociaciones  modelo  mental  a  concepto  visual          
  11. 11. Colores  en  el  diseño   Es  un  elementos  subjetivo  
  12. 12.    
  13. 13. Colores  en  el  diseño   Son  del  mismo  color  las  celdas  A  y  B?  
  14. 14. Colores  en  el  diseño   Son  del  mismo  color  las  celdas  A  y  B?  
  15. 15. Colores  en  el  diseño   Difícil  de  representar     §  En  papel,  según  tipo:     brillo,  mate,  mantel…     §  En  pantalla:     CRT,  Marcas,  Configuración     §  Luz  externa   Como  representas  el  color  fluorescente???  
  16. 16. Colores  en  el  diseño   Modelos  de  color     §  RGB  (Red,  Green,  Blue)   0.0.0: Negro 255.255.255: Blanco 255.0.0: Rojo 0.255.0: Verde 0.0.255: Azul §  CMYK  (Cyan,  Magenta,  Yellow,  Key)  
  17. 17. Colores  en  el  diseño   RGB  &  CMYK   blue red green
  18. 18. Colores  en  el  diseño     Logotipos  e  imagen  de  marca  como  referencia           Las  marcas  registran  colores  à  hacer  uso  de  RGB,  CMYK.   Elegir  el  color  adecuado  à  aumenta  el  reconocimiento  de  marca   Hacer  uso  del  significado  à  en  función  de  lo  que  se  desee  vender   Hacer  uso  de  combinaciones  adecuadas     1.  Definir  la  gama  de  colores   2.  Escoger  color  de  fondo  à  ante  la  duda  blanco   3.  Seleccionar  colores  texto  à  contraste  con  fondo   4.  Logotipo  y  títulos  debe  contrastar  con  el  resto  del   contenido      
  19. 19.    
  20. 20.    
  21. 21.    
  22. 22.    
  23. 23.    
  24. 24. Uso  de  tipografías   conbinaciones  serif  y  sans  serif  para  obtener  contraste   textos largos: serif textos  cortos,  títulos:  sans  serif  (más  margen  de  uso)   no  más  3  tipos  diferentes   Tendencia  a  tipografias  grandes  
  25. 25. Legibilidad  no  es  una  opción,            es  una  NECESIDAD      
  26. 26. Posibles  combinaciones   Helvetica  /  Garamond     Caslon  /  Univers   Frutiger  /  Minion     Futura  /  Bodoni   Garamond  /  Futura   Gill  Sans  /  Caslon   Minion  /  Gill  Sans   Univers  /  Caslon   Bodoni  /  Futura   Myriad  /  Minion   Avenir  /  Warnock   Caslon  /  Franklin  Gothic   FF  Din  /  Baskerville   Trade  Gothic  /  Clarendon   Baskerville  /  Univers   Akzidenz  Grotesk  /   Garamond   Clarendon  /  Trade  Gothic   Franklin  Gothic  /  Baskerville   Warnock  /  Univers  
  27. 27. Formatos  gráficos   Vectoriales   SVG,  EPS,  PSD,  AI,  CDR,  FH11,  TIFF,  WMF,  PNG…     Mapas  de  bits    BMP,  JPG,  GIF,  PNG…      JPG  con  perdida  (60%):  22  KB      Sin  pérdida:  JPG:  133  KB   PNG:  162  KB   BMP:  549  KB      
  28. 28. Formatos  
  29. 29.     p roc eso
  30. 30. Proceso      
  31. 31.   tas   rram ien he
  32. 32. Wireframe  and  Mockup   Gliffy   Pidoco   ProtoShare   HotGloo  
  33. 33. Wireframe  and  Mockup   ProtoShare  Tour  -­‐    http://www.protoshare.com/tour/  (video)    
  34. 34. Diseño  gráfico  
  35. 35.     vo luc ión e
  36. 36.    
  37. 37.    
  38. 38.    
  39. 39.    
  40. 40.    
  41. 41.    
  42. 42.    
  43. 43.    
  44. 44. Evolución  diseño  web      
  45. 45.    
  46. 46.    
  47. 47.    
  48. 48.    
  49. 49.    
  50. 50. Evolución  diseño  web     Donde  ha  quedado  flash  ???    
  51. 51. Evolución  diseño  web      

×