Se ha denunciado esta presentación.
Se está descargando tu SlideShare. ×

Curso Diseñando para la Web - Parte 1

Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Cargando en…3
×

Eche un vistazo a continuación

1 de 103 Anuncio
Anuncio

Más Contenido Relacionado

A los espectadores también les gustó (20)

Anuncio

Similares a Curso Diseñando para la Web - Parte 1 (20)

Curso Diseñando para la Web - Parte 1

  1. 1.  diseñando para la web
  2. 2. www.fondiu.cl facebook.com/fondiu.cl
  3. 3. diseño en la web: factores de éxito
  4. 4. diseño en la web • La Web es un medio, un soporte • Tiene sus propias limitaciones y sus propios códigos • Los límites nos dan un marco para trabajar (como los bordes de un lienzo) • Los códigos nos permiten tener un punto de partida (como una caja de pinturas y un pincel)
  5. 5. limitaciones • La Web es lenta • La Web tiene un lienzo variable • La Web debe "funcionar" (y no sólo ser mirada) • El usuario es impaciente • Al usuario no le interesa tu página • La Web no se comporta como el mundo físico
  6. 6. posibilidades • "Casi" todo es posible en la Web… si sabemos cómo hacerlo • Mientras más conozcamos nuestro soporte, más partido podemos sacarle
  7. 7. Códigos • No nos referimos al "código" de programación :) • Códigos son "costumbres" o "modales" que reflejan las expectativas de un usuario • Tal como cuando nos encontramos con alguien, esperamos que nos salude...
  8. 8. Códigos • De la misma forma, esperamos que un texto azul y subrayado sea un link; o que esa imagen arriba a la izquierda sea el logo de la página
  9. 9. Códigos • Los códigos y costumbres de los usuarios pueden variar según el entorno en el que ellos se mueven… Windows: cerrar ventana Mac OS: cerrar ventana a a la derecha la izquierda
  10. 10. Códigos • Los usuarios se enfrentan a la Web con ciertas expectativas, basadas en su experiencia del mundo real, y su experiencia con otros sistemas o páginas. • Entender y respetar los códigos lleva a la consistencia.
  11. 11. consistencia • La consistencia es la percepción de estabilidad de un sistema. • Ojo: la percepción • Podemos hacer un sistema sumamente estable, pero si le genera ansiedad al usuario, será percibido como inestable • (Piensa en un ascensor que funciona bien, pero que tiene los números cambiados)
  12. 12. consistencia • El usuario percibirá un sistema como estable en la medida de que se comporte una y otra vez según sus expectativas.
  13. 13. consistencia Un sistema estable… • Es familiar • Es placentero de usar • Es preferido amado por el usuario • Reduce ansiedad e incertidumbre • Le permite reutilizar lo que ya sabe • Ahorra tiempo y dinero
  14. 14. consistencia Claves para la consistencia • El usuario PRIMERO • El usuario SEGUNDO • El usuario TERCERO • Como diseñadores o encargados de interfaz, somos la "voz del usuario" • Entender comportamientos, expectativas y costumbres de nuestro público objetivo
  15. 15. consistencia Claves para la consistencia • No traiciones al usuario • No confundas al usuario • No hagas cosas "a espaldas" del usuario • No le pongas acertijos al usuario (a menos que estés diseñando un juego)
  16. 16. SIMPLICIDAD "La simplicidad es la sofisticación llevada a su grado máximo" - Leonardo da Vinci
  17. 17. SIMPLICIDAD No confundir "simplicidad" con "minimalismo"…
  18. 18. Simplicidad • Simplicidad es hacérselo lo más fácil posible al usuario. • Es darle lo indispensable (y nada más que lo indispensable) para cumplir su tarea. • Es evitarle información que no necesita • "Gracias, querida página Web, pero si quiero saber la hora me basta con mirar abajo a la derecha, no necesito que me la digas tú"
  19. 19. Simplicidad • Es evitar hacerle tomar decisiones innecesarias al usuario. • "Provide Good defaults" -> Que las opciones predeterminadas sean las que le faciliten más las cosas a la mayoría de tus usuarios.
  20. 20. Humildad • WTF: ¿Humildad? • Sí, humildad. • Muchos errores de interfaz y diseño se cometen por egocentrismo, o por suponer ciertas bobadas…
  21. 21. Humildad Listado de Bobadas • "La gente está interesada en nosotros" • "La gente estará feliz de jugar y usar nuestras innovaciones en interfaz Web" • "La gente tiene tiempo para ver y explorar nuestro sitio" • "A la gente le gustará el movimiento, la animación en nuestra página" • "Si me gusta a mí, le gustará al usuario"
  22. 22. Humildad La Triste y Desafiante Realidad • A la gente NO le interesa tu sitio > Hazlo interesante, no des la lata • La gente NO tiene tiempo para ver tu sitio > Hazlo rápido y fácil • NADIE quiere descubrir nuevas interfaces en tu sitio > Ajústate a las convenciones • A NADIE le interesa que sepas usar Flash > No lo uses gratuitamente
  23. 23. arquitectura de información
  24. 24. arquitectura de información • Diseñar para la Web no es sólo "hacer monos" o "dejar el sitio bonito". • Un diseñador no es un maquillador de información; es el responsable de que el contenido se estructure correctamente
  25. 25. arquitectura de información Lo que muchos creen que es Lo que EN REALIDAD debe ser un diseñador un diseñador
  26. 26. arquitectura de información Diseñar para la Web = Diseñar la experiencia del usuario en esa Web (grábatelo)
  27. 27. arquitectura de información Experiencia de usuario = UX (User eXperience)
  28. 28. arquitectura de información • Hacer AI significa diseñar primero el contenido y después la parte visual.
  29. 29. arquitectura de información • Parte importante de la experiencia de usuario es el contenido: • "Viembenido a nuestro zitio Web muy vonito y vien dizeñado" • Por ende, el contenido también es nuestra responsabilidad.
  30. 30. arquitectura de información • Nuestro primer producto debería ser un mapa del sitio. • JAMÁS hay que dar por hecho que el cliente sabe cómo estructurar su contenido (usualmente no sabe)
  31. 31. arquitectura de información • Cliente: "Bueno, podríamos tener una página Quiénes Somos…" • Diseñador eficiente: "¿Cuál sería el objetivo de esa página? ¿La necesitamos realmente? ¿Y si fusionamos ese texto en la portada?"
  32. 32. arquitectura de información • Al hacer AI, debemos siempre apuntar a: – Reflejar el esquema mental del usuario – Las páginas justas y necesarias (ni más, ni menos) – Simplicidad – Brevedad de textos – Facilidad de navegación – Jerarquizar y agrupar
  33. 33. arquitectura de información • Una vez que el contenido está claramente estructurado, podemos pasar a la parte visual. • (Y diseñar teniendo el contenido como punto de partida es mucho más fácil y efectivo).
  34. 34. www.fondiu.cl facebook.com/fondiu.cl
  35. 35. diagramación y layouts
  36. 36. diagramación • La disposición de los elementos en una página Web no es trivial. • El orden y la posición debe guiar al visitante, ayudarlo a encontrar la información que desea e invitarlo a explorar nuevos contenidos.
  37. 37. diagramación • LAYOUT: modo de ordenar y mostrar los elementos visuales • Existen varios layouts de páginas Web, los cuales sirven a propósitos determinados • Estos tipos nos dan un punto de partida para diagramar
  38. 38. diagramación • Además, existen ciertas zonas de la página que son universalmente conocidas: – Header (encabezado, donde va el logo y el menú principal) – Sidebar (columna angosta de información paralela) – Footer (pie de página, con info de contacto y datos de copyright)
  39. 39. diagramación 1. Sitio Corporativo 2. Portal 3. Blog 4. Catálogo 5. Portafolio 6. Directorio 7. Aplicación 8. Landing Page 9. Magazine
  40. 40. 1. sitio corporativo Sitio "clásico", se distingue por tener una imagen y frase potentes, descripciones de productos y servicios, y espacio para otros contenidos abajo.
  41. 41. 1. sitio corporativo Sitio "clásico", se distingue por tener una imagen y frase potentes, descripciones de productos y servicios, y espacio para otros contenidos abajo. Templatemonster.com
  42. 42. 2. Portal Se caracteriza por mezclar una gran variedad y cantidad de contenidos. Pensado para una intranet o para público masivo
  43. 43. 2. Portal Se caracteriza por mezclar una gran variedad y cantidad de contenidos. Pensado para una intranet o para público masivo msn.com
  44. 44. 3. blog Muy sencillo: privilegia el contenido escrito y la movilidad de los posts en el tiempo, y depende del sidebar para todo lo demás.
  45. 45. 3. blog Muy sencillo: privilegia el contenido escrito y la movilidad de los posts en el tiempo, y depende del sidebar para todo lo demás. Templatemonster.com
  46. 46. 4. catálogo Hecho para mostrar muchos productos de una sola vez y fomentar la exploración.
  47. 47. 4. catálogo Hecho para mostrar muchos productos de una sola vez y fomentar la exploración. Templatemonster.com
  48. 48. 5. portafolio Privilegia enormemente el contenido visual, útil para galerías de diseñadores, fotógrafos, arquitectos, etc.
  49. 49. 5. portafolio Privilegia enormemente el contenido visual, útil para galerías de diseñadores, fotógrafos, arquitectos, etc. Templatemonster.com
  50. 50. 6. DIRECTORIO Es el layout clásico de los buscadores, páginas amarillas, agregadores de contenido. Enfocado a las listas.
  51. 51. 6. DIRECTORIO Es el layout clásico de los buscadores, páginas amarillas, agregadores de contenido. Enfocado a las listas. bing.com
  52. 52. 7. aplicación Enfocado a que el usuario resuelva una tarea específica. Es usual que aproveche el máximo de espacio posible de la pantalla (ej: Gmail)
  53. 53. 7. aplicación Enfocado a que el usuario resuelva una tarea específica. Es usual que aproveche el basecamphq.com máximo de espacio posible de la pantalla (ej: Gmail)
  54. 54. 8. landing page La página en la que "aterriza" un usuario proveniente de una campaña. Diseño minimalista y orientado a una sola acción (CTA)
  55. 55. 8. landing page La página en la que "aterriza" un usuario proveniente de una campaña. Diseño minimalista y orientado a una sola acción (CTA) campaignmonitor.com
  56. 56. 9. magazine Diseño moderno, rompe con la estructura tradicional de "sitio" y equilibra imagen y texto por igual.
  57. 57. 9. magazine Diseño moderno, rompe con la estructura tradicional de "sitio" y equilibra imagen y texto por igual. thebolditalic.com
  58. 58. Layouts: fijo v/s líquido • El layout fijo mantiene siempre el mismo ancho, independiente del tamaño de la ventana.
  59. 59. Layouts: fijo v/s líquido • El layout líquido se expande en sentido horizontal, aprovechando al máximo el espacio de la ventana.
  60. 60. Layouts: semi-líquido • CSS en la actualidad permite layouts que permanecen fijos en un cierto ancho, permitiendo su líquidez sobre o bajo ese ancho (útil para sitios móviles).
  61. 61. grillas (grids) • El uso de grillas o cuadrículas son una ayuda para un layout eficiente. • Los layouts antes mostrados pueden ser dibujados sobre una grilla.
  62. 62. grillas (grids)
  63. 63. grillas (grids) • Sistemas de Grids: – 960 Grids (960.gs) – Zurb Foundation (foundation.zurb.com) – Less Framework (http://lessframework.com) • Las grillas deben ser una herramienta y no una cárcel. Aprende a usarlas y aprende a no usarlas cuando convenga
  64. 64. Espacio en blanco • El espacio en blanco permite al ojo diferenciar los distintos elementos, agrupar la información y descansar la vista. INCORRECTO CORRECTO alistapart.com
  65. 65. Espacio en blanco • Comunica elegancia • Actúa como un separador visual • Ayuda a dirigir la vista del visitante • Jerarquiza la información naldzgraphics.net
  66. 66. Espacio en blanco • "Color tipográfico": el uso del espacio en blanco en interlineados y entre caracteres determina qué tanto "mancha" una página el texto. thinkvitamin.com
  67. 67. Interfaces
  68. 68. interfaces ¿Qué es una Interfaz? • Intermediación entre un usuario y un sistema • Punto de contacto entre el usuario y una herramienta • Información sensorial que guía al usuario acerca del uso de una herramienta
  69. 69. interfaces • La interfaz de una silla es el lugar donde… apoyamos el trasero (punto de contacto entre el usuario y la herramienta)
  70. 70. interfaces • La interfaz de un ascensor son sus botones para controlarlo (intermediación e información de uso)
  71. 71. interfaces • La interfaz de una calle es su señalética (en postes y en el piso) y el trazado de la calle
  72. 72. interfaces ¿Qué es una Interfaz Web? • Es el intermediario entre el usuario y el contenido o tarea que le ofrece una página Web.
  73. 73. interfaces Una interfaz Web debe incluir: • Imagen de marca • Organización del contenido • Controles para las acciones del usuario • Feedback al usuario sobre las respuestas del sistema • Navegación a otras páginas
  74. 74. controles de interfaz Los controles de interfaz determinan cómo interactuará el usuario con el sistema… Y no, no da lo mismo.
  75. 75. controles de interfaz • Una buena interfaz permite que el usuario entienda y vea con claridad las consecuencias de sus acciones. • Además, le perdona los errores al usuario, y le permite deshacerlos o volver al estado anterior. • Recordemos: el usuario tiene expectativas acerca de cómo responderá el sistema a sus acciones.
  76. 76. controles de interfaz • Controles de acciones Vínculos, menús, botones, tabs… • Organizadores de contenido Paneles, ventanas, tablas, diálogos… • Ingreso de datos/selección de opciones Listas, casillas, cuadros de texto… • Informadores Etiquetas, tooltips, mensajes de estado…
  77. 77. controles de interfaz Controles de acciones – Permiten al usuario ejecutar tareas relacionadas con datos, como visitar otra página o enviar un formulario. – Vínculo – Menú – Botón – Tab (pestaña)
  78. 78. controles de interfaz Controles de acciones … Vínculo Botón Menú Tabs
  79. 79. controles de interfaz Organizadores de contenido – Contienen y separan información de modo de hacerla accesible y legible al usuario cuando la necesite. – Panel – Ventana – Tabla – Diálogo – Acordeón
  80. 80. controles de interfaz Organizadores de contenido … Panel Ventana
  81. 81. controles de interfaz Organizadores de contenido … Diálogo Tabla Acordeón
  82. 82. controles de interfaz Ingreso de datos o selección de opciones – Permiten al usuario ingresar información o elegir entre varias alternativas. – Combobox – Select – Checkbox – Botones de radio – Cuadros de texto
  83. 83. controles de interfaz Ingreso de datos o selección de opciones… Select (combo box) Select (list box) Checkbox Cuadros de texto Botones de radio
  84. 84. controles de interfaz Informadores – Entregan información contextual y complementaria que facilita las acciones del usuario y le permite saber la respuesta del sistema. – Tooltips y globos flotantes – Etiquetas – Mensajes de información – Barras de estado
  85. 85. controles de interfaz Informadores… Tooltip Etiqueta Mensaje de información Barra de estado
  86. 86. www.fondiu.cl facebook.com/fondiu.cl

×