Uploaded on

Presentación sobre diseño gráfico

Presentación sobre diseño gráfico

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Diseño gráfico from cdgonzalez71
    Are you sure you want to
    Your message goes here
    Be the first to like this
No Downloads

Views

Total Views
548
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
14
Comments
1
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Interacción persona-ordenadorEl diseño gráfico
  • 2. ObjetivosValorar la importancia del diseño en la interfazConocer los principios, métodos y herramientas deldiseño
  • 3. ContenidoObjetivos de un buen diseño de la interfazElementos morfológicos de la imagenUso del colorTécnicas de diseño gráficoIconosEjemplos
  • 4. Crear una interfaz transparenteNo obstruye el accesoEl usuario tiene una buena experiencia interaccionando conel sistemaLa interfaz casi no es detectadaObjetivos del diseño
  • 5. Considerar cada aspecto con un sentido del conjuntoConjuntar el diseño funcional y el visualLos controles deben tener un aspecto acorde a su función yfuncionar de acuerdo con su aspectoCuando el diseño visual clarifica sus funciones, la interfazresulta intuitivaObjetivos del diseño¿Cómo conseguirlos?
  • 6. Para representar algo utilizamos unos elementos queconstituyen un alfabeto gráfico. Estos elementosson:El puntoLa líneaLa formaLa luzEl colorEl tiempoEl tamañoEl formatoLa composiciónElementos de la imagen
  • 7. Elementos de la imagenEl puntoEl elemento más simplePosee una gran fuerzaatractiva como marcaSu situación puede establecer losejes básicos de la estructuraVarios puntos juntos se percibenagrupados creando formasUna secuencia de puntos puedeimprimir ritmo a la imagen,creando una dirección demovimientoAyuda a dirigir la visión delobservador
  • 8. Elementos de la imagenLa líneaOrganizan el espacioDeterminan ejes quedelimitan zonas deatracciónPueden crear texturas,profundidad ymovimientoSu dirección y grosor lesda una expresividad
  • 9. Define una superficie con unas dimensiones dadasFormas básicasCuadrado, triángulo y círculoFunción: definir y organizar el espacioPueden simular tridimensionalidad cuando serepresentan en perspectivaElementos de la imagenLa forma
  • 10. Elementos de la imagenLa luzContribuye a la composición de la escenaPuede sugerir profundidad y tridimensionalidadPuede modelar formas, superficies y volúmenesUna característica importante es la tonalidad, queincide en la captación de las formas:Un tono claro parece más claro cerca de un tono oscuro y vic.Un tono claro se expande rodeado de uno oscuroUn tono oscuro se comprime rodeado de uno claro
  • 11. Elementos de la imagenEl colorCaracterísticas:Tonalidad o matiz: longitud de ondaSaturación o intensidad: cantidad de blancoLuminosidad o claridad: cantidad de luzSistemas de color:Aditivo: combina radiaciones de distintalongitud de ondaUtilizado en las pantallas electrónicasSustractivo: combina pigmentos cian,magenta y amarilloUtilizado en el papel
  • 12. Elementos de la imagenEl colorPapel del color en la imagen:Contribuye a la recreación del espacioAyuda a simular la profundidad (sombreado)Sugiere distancia (difuminación progresiva del tono)Ayuda a dinamizar la composición a través de la interacción delos coloresLos colores claros son excéntricos y los oscuros concéntricosLos colores saturados producen un fuerte impacto y se relacionancon sensaciones dinámicas y alegres. Los colores no saturadostransmiten sensaciones débiles y más sutilesEl color transmite “sentimientos”Hay colores cálidos y fríos, ligeros y pesados, tristes y alegresLa percepción del color es subjetiva y depende de factoresculturales
  • 13. Elementos de la imagenEl colorFormas de relación dinámica entre los colores:Armonía: crea una composición con variaciones cromáticassuaves y graduales relacionando colores afinesContraste: yuxtapone colores diferentes entre sí,fundamentalmente colores complementarios:Rojo-verde, amarillo-violeta, azul-naranjaLa composición llama fuertemente la atenciónSi es muy acentuado puede reducir la legibilidad al producirsevibraciónEs necesario conocer las relaciones cromáticas para combinarcorrectamente los colores
  • 14. Elementos de la imagenEl tiempoSe puede simular el paso del tiempo en imágenesfijas, organizando adecuadamente el espacio:Usando diferentes intensidades lumínicas, contrastescromáticos, de textura, de escala...Jerarquizando los elementos representados, ordenándolossegún una cierta secuencia
  • 15. Elementos de la imagenEl tamañoEl tamaño establece un peso visual y unajerarquización en cuanto al espacio ocupado por elelementoAyuda a crear sensación de profundidad mediante laperspectiva
  • 16. Elementos de la imagenEl formatoEs la proporción del cuadro donde se muestra laimagenDebe favorecer la adaptación al campo visual humano,buscando una armonía entre las dimensionesInfluye decisivamente en la composición general y leda un significadoLos formatos horizontales son más estáticosLos formatos verticales y circulares son más dinámicos
  • 17. Elementos de la imagenLa composiciónEs la forma de ordenar y organizar los elementosmorfológicos de la imagen en el espacio estructuralque ofrece el formatoPrincipios: unidad y claridadSe puede crear diversidad y contraste para añadir dinamismo,aunque complica la composiciónHay que delimitar claramente el centro de interés, elque atraerá la mirada del espectador, y que dependede la composición
  • 18. Elementos de la imagenLa composiciónAlgunas reglas de composición:La zona inferior suele ser más estáticay sólida y la superior más dinámica yllamativaLa zona izquierda es más estable ypermite colocar pesos mayores sindesequilibrarA mayor tamaño, mayor pesocompositivo
  • 19. El color es un aspecto muy importante de la interfazPartes de la interfaz relacionadas con el color:Persona: sistema humano visualOrdenador: presentación de informaciónUso del color
  • 20. El color tiene un gran impacto en la presentación deinformaciónSi se usa adecuadamente mejora la presentaciónSu uso inapropiado puede reducir su funcionalidadEs un componente principal de las GUIEl uso de colores apropiados puede ayudar a lamemoria del usuario y facilitar la formación demodelos mentales efectivosUso del colorMotivación
  • 21. Modelos de color:Basados en la percepciónHSV: Matiz (Hue), Saturación (Saturation), Valor (Value). Usadopor artistas, diseñadores, fabricantesHLS: Matiz (Hue), Luz (Light), Saturación (Saturation).Desarrollado por TektronixBasados en los dispositivos de presentaciónRGB. Usado en los monitores de ordenadorYIQ/YUV. Usado en la transmisión de televisiónModelo CIE (Comisión Internacional sobre Iluminación)Uso del colorFundamentos del color
  • 22. Fundamentos del colorModelo RGBLos colores presentados en un monitor han de sertrasladados al espacio de color RGBProblema: no hay un mapeouno a uno entre los modelosperceptuales y los depresentaciónEl modelo CIE permitetraducciones del HSV al RGB
  • 23. El ojo humano contiene una lente y una retinaLa retina contiene receptores sensibles a la luz, losconos y los bastonesLos bastones proporcionan visión de nocheLos conos trabajan en niveles más altos de intensidad de luzLos conos contienen fotorreceptores sensibles al rojo (64%),al verde (32%) o al azul (2%)Fundamentos del colorEl ojo humano
  • 24. El ojo es sensible a un rango de longitudes de ondaMenos sensible a longitudes más cortas (azules)Más sensible a longitudes más largas (amarillos yanaranjados)Debido a la distribución física de los fotorreceptoresazules, podemos ver los azules mejor en la periferiaque en el frenteFundamentos del colorEl ojo humano
  • 25. Consecuencias de la organización física del ojo:Por la falta de fororreceptores azules,Las líneas azules delgadas (como el texto) tienden a verseborrosasPequeños objetos azules tienden a desaparecer cuando tratamosde enfocarlosLos colores que difieren sólo por la cantidad de azul no producenbordes clarosObjetos del mismo color pueden parecer marcadamentediferentes en color dependiendo del color del fondoFundamentos del colorEl ojo humano
  • 26. Ejemplo:Fundamentos del colorEl ojo humanoR: 255G: 102B: 0R: 255G: 102B: 100R: 255G: 0B: 102R: 255G: 100B: 102
  • 27. Ejemplo:Fundamentos del colorEl ojo humanoEl texto en azul tiende a verse borrosoEl texto en azul tiende a verse borrosoEl texto en azul tiende a verse borroso
  • 28. Ejemplo:Fundamentos del colorEl ojo humano
  • 29. Conclusión:El uso inefectivo de los colores puede causar vibraciones ysombras, imágenes que distraen al usuario y pueden forzar lavistaFundamentos del colorEl ojo humano
  • 30. La persona interactúa con el mundo a través demodelos mentales que ha desarrolladoAl diseñar una interfaz hay quedesarrollar las herramientas de la interfaz que le ayudarána realizar el trabajoayudar al usuario a desarrollar modelos mentales delsistema que faciliten su trabajoEl color ayuda a desarrollar modelos mentaleseficientes si se siguen unas pautasUso del colorUso efectivo del color
  • 31. Vincular significados prácticos e intuitivos a loscolores primarios, rojo, verde, amarillo y azul, queson fáciles de aprender y recordarMantener el esquema del color simple, utilizandopocos colores: 5±2Mantener el mensaje sencillo: no sobrecargar elsignificado del color vinculando más de un concepto aun sólo color. Conceptos diferentes = coloresdiferentesUso efectivo del colorSimplicidad
  • 32. Mantener el orden espectral y perceptual de loscolores: rojo, verde, amarillo, azul:El rojo se enfoca en el frenteEl verde y el amarillo se enfocan en medioEl azul se enfoca en el fondoEvitar cambiar el significado de los colores endiferentes pantallas, sobre todo cuando se usa paracodificar o agrupar informaciónEjemplo: color de fondo de campos no editablesUso efectivo del colorConsistencia
  • 33. Utilizar colores diferentes para conceptos diferentesNo utilizar varios matices del mismo color, sobre todo paralos azulesEvitar el uso de colores que aparecen diferentesdebido a la variación del color de fondoPueden ser percibidos por el usuario como colores diferentesy el significado se perderáUso efectivo del colorConsistencia
  • 34. El tiempo de búsqueda para encontrar unainformación disminuye si su color es conocido deantemano y sólo se aplica a ellaUtilizar colores estandarizadosEl uso del color mejora la estética y el atractivo dela interfaz, pero también la efectividad delprocesamiento de la información y el rendimientode la memoriaUso efectivo del colorClaridad
  • 35. Uso efectivo del colorClaridadLa usabilidad mejora alusar colores para agrupar informaciones relacionadasUtilizar códigos de color en los mensajesrojo = alertar al usuario de un erroramarillo = mensaje de advertenciaverde = progreso positivo
  • 36. Las personas tenemos un lenguaje de color basadoen el uso común y culturalEjemplo: el color del buzón de correo es efectivo para unicono de correo en un sistema de correo electrónicoUso efectivo del colorLenguaje de colorPara usar el color efectivamente debe conocerse alusuario y su entorno de trabajo
  • 37. Es más difícil usar el color efectivamente queinefectivamenteUsar una combinación equivocada para el fondo y el frentepuede crear ilusiones que forzarán la vistaUsar múltiples colores puros o colores muy saturadosobliga al ojo a reenfocar constantemente y causa fatigaUsar colores difíciles de enfocar para texto o líneasdelgadas causa fatiga y estrésUso efectivo del colorLenguaje de color
  • 38. Combinar colores para producir efectos positivosrequiere el conocimiento de ciertas técnicas, comolas combinaciones de colorUso efectivo del colorLenguaje de colorProgramming the user interface:principles and examples.Brown y Cunningham
  • 39. Existen reglas y sugerencias fáciles de seguirMarcus:Utiliza el color azul para el fondoUtiliza la secuencia de color espectral (rojo, anaranjado, amarillo,verde, azul, índigo y violeta)Mantén pequeño el número de coloresEvita usar colores adyacentes que difieran solamente en lacantidad de azulUtiliza colores brillantes para indicar peligro o para llamar laatención del usuarioSuger.: diseña la interfaz primero en blanco y negroUso efectivo del colorLenguaje de color
  • 40. Evita el despliegue simultáneo de colores espectralmenteextremos que estén altamente saturadosDescarta el color azul puro para texto, líneas delgadas yfiguras pequeñasEvita colores adyacentes que se diferencien sólo por lacantidad de azul que contienenLos operadores de edad avanzada necesitan niveles más altosde brillo para distinguir los coloresLos colores cambian de apariencia a medida que el nivel de luzambiental cambiaUso efectivo del colorLas reglas de Murch
  • 41. La magnitud de un cambio detectable en el color varía a travésdel espectroEs difícil enfocar hacia las orillas creadas solamente por el colorEvita utilizar el rojo y el verde en la periferia de presentacionesa gran escalaLos colores opuestos se ven bien juntosPara los observadores con deficiencias del color (ciegos al color),evita hacer distinciones de un sólo colorUso efectivo del colorLas reglas de Murch
  • 42. Uso efectivo del colorEjemplosPixelcentric (http://pixelcentric.net/x-shame/color.html)LegibilidadMac OS X QT 4 / 5,6Significado del colorMac OS X
  • 43. Uso efectivo del colorEjemplosInterface Hall of Shame(http://digilander.libero.it/chiediloapippo/Engineering/iarchitect/shame.htm)Easy CD CreatorSignificado del color(colores fijados en el código)
  • 44. Uso efectivo del colorEjemplosInterface Hall of Shame(http://digilander.libero.it/chiediloapippo/Engineering/iarchitect/shame.htm)IBM RealCDUso del colorWebformsMicrosoft Access
  • 45. DisposiciónCómo se colocan las cosas en la pantalla. Permite dar másimportancia a ciertas cosas. El orden de lectura es importantey varía según la culturaÉnfasisLos elementos realzados se ven antes y se perciben comomás importantes. Para enfatizar se usa la posición, el color ylos atributos del textoSi todos los elementos tienen el mismo peso la composiciónes aburrida y la navegación difícilTécnicas de diseño gráfico
  • 46. FocoEl punto focal es el centro de atención, el punto quenormalmente se ve antes. Se puede utilizar para dirigir alusuario a la información deseadaAlineaciónAyuda a conseguir equilibrio, armonía, unidad ymodularidad. Una alineación exacta y consistente es lamanera más fácil de mejorar la estética de la interfazTécnicas de diseño gráfico
  • 47. Los iconos se utilizan desde la primera interfazgráfica (Xerox Star) y son útiles por dos motivos:Las personas reaccionan instintivamente a las imágenesSon pequeños, importante para el espacio limitado de lapantalla de ordenadorLos iconos representan objetos y también funcionesIconos
  • 48. Factores que determinan el significado de un icono:Contexto. Entorno donde se utilizaFunción. Tipo de tarea en la que se utilizaForma representativa. Puede ser de tres tipos:Uso de un objeto concretoUso de un objeto abstractoUso de una combinación de ambos (iconos más comprensibles)IconosDiseñar con significado
  • 49. Tipos de iconos según forma representativa:a) Iconos similares: presentan el concepto a través de unaimagen análogab) Iconos ejemplares: sirven como ejemplosc) Iconos simbólicos: se utilizan para dar una referencia a unmayor nivel de abstracciónd) Iconos arbitrarios: no guardan relación y la asociación hade aprenderseIconosDiseñar con significado
  • 50. Tras decidir el objeto a incluir en el icono hay quedecidir cómo dibujarloMás detallado o más simplificadoRegla: incluir sólo los detalles imprescindiblesIconosCómo diseñar iconos
  • 51. Consiste en definir iconos coordinados querepresentan distintas acciones aplicables a unelementoEjemplo: depuración de códigoIconosEl lenguaje icónicoPunto deobservaciónavanzar retroceder borrar
  • 52. Diseñar un conjunto coordinado de iconos es mejorque hacerlo uno a unoReduce el esfuerzo en el diseño y el dibujoAsegura la consistenciaDa un estilo al productoHace que los iconos sean autoexplicativos y permite alusuario prever cómo seránLos sistemas complejos disponen de un lenguajeicónico simple y consistenteIconosVentajas
  • 53. IconosEjemplosbienmalMicrosoft WordZocWinCimMac OS X Browser ChimeraMac OS X Finder
  • 54. EjemplosLa información sencilla reduce la carga de memoria
  • 55. EjemplosInformación jerarquizada
  • 56. EjemplosInformación dispuesta por temas
  • 57. EjemplosSobrecarga informativa
  • 58. EjemplosMantenimiento de una misma estructura de navegación
  • 59. EjemplosUn fondo llamativo dificulta la lectura
  • 60. EjemplosLos iconos ayudan a identificar los contenidos
  • 61. EjemplosUso del color para distribuir la información
  • 62. EjemplosUso del color para resaltar y jerarquizar la información
  • 63. EjemplosEl contraste de color anima y estimula
  • 64. EjemplosContraste erróneo, rojo-azul, exige gran esfuerzo deacomodación visual
  • 65. EjemplosAgrupación lógica de datos
  • 66. EjemplosImagen global
  • 67. EjemplosRecomendacionesFacilitar la visibilidad - centrarse en el contenidoUtilizar diálogos simples y naturalesReducir la memorización haciendo visible toda lainformación – evitar desplazamientosReducir la complejidad de las acciones – prediccióny realimentaciónMarcar las opciones de navegación con claridadAgrupar los datos lógicamente – jerarquizar lainformación – mostrar sólo la necesariaFlexibilizar la presentación - personalizaciónDiseñar siguiendo una “imagen global”
  • 68. El diseño es importante para la usabilidad de lainterfazUn buen diseño aúna la funcionalidad con la estéticaEl diseño no es sólo cuestión de ‘buen gusto’. Estábasado en conocimientos fundados sobre lapercepción humanaExisten reglas de fácil aplicación que pueden ayudar arealizar un buen diseñoEs importante recurrir a las guías de estiloConclusiones