diseño de interfaz
Tecnologías web
Lab. Diseño Gráfico 2009
Zara Hormazábal D.
El diseño web o digital hoy
La función de la “web 2.0” es netamente operativa, funcional e interactiva.

Como ya vimos la ...
¿Cómo afecta al diseño?
Por lo tanto el diseñador, no solo debe preocuparle el quot;lookquot; de un sitio, sino
preocupars...
Definición de diseño... para la web

Diseño de interacción
“El diseño de interacción es a la vez un campo de estudio y un p...
Definición de diseño... para la web

Diseño de interfaz
quot;En el contexto de interacción Humano-Computador tradicional: d...
Definición de diseño... para la web

Diseño visual
quot;Estudia los sistemas de información, con el objeto de convertir los...
Reglas básicas del diseño

¿cómo piensan los usuarios web?
- no son muy diferentes de los clientes de una tenda en la vida...
Reglas de “oro” del diseño

No hagas pensar a los usuarios

Una página debe ser obvia y explicarse a sí misma 1.

La naveg...
Reglas de “oro” del diseño

Usuarios curiosos e impacientes
Ofrece servicios sencillos, prácticos y directos

La satisfacc...
Reglas de “oro” del diseño

Un sitio forma parte de la imagen corporativa de una
organización
Su diseño debe ser atractivo...
Reglas de “oro” del diseño

Crea un discurso visual claro
Aaron Marcus


Organiza: para proveer una estructura limpia, con...
Reglas de “oro” del diseño

Jerarquizar y sacar mejor partido a los puntos focales
Organiza apropiadamente la página princ...
Reglas de “oro” del diseño

No temas al espacio en blanco
El espacio blanco refiere a las porciones de espacio que se crean...
Reglas de “oro” del diseño

Evita el exceso de información
La gente lee 25% más lento en pantalla que en papel

El 79% pre...
Reglas de “oro” del diseño

Los elementos convencionales, no innovar
Usa patrones y elementos a los que los usuarios ya es...
Reglas de “oro” del diseño

Prueba, prueba y vuelve a probar
Todo proyecto web debe probarse, es una ley natural de las pr...
Tendencias de diseño

Estructuras simples
Usa estructuras simples de 1 a 3 columnas

Un diseño simple funciona mejor (poco...
Tendencias de diseño

Diseño centrado
El diseño centrado ofrece: confianza, balance, simpleza.
Los patrones de diseño aline...
Tendencias de diseño

Fondos claros o neutros
La mayoría de los sitios tienen fondos planos, casi siempre blancos o
degrad...
Tendencias de diseño

Tintes de color brillantes usados con precisión
El diseño de los últimos años sobresale por los colo...
Tendencias de diseño

Espacio blanco
El espacio blanco no necesariamente debe ser blanco, simplemente de ser un
espacio.

...
Un buen sitio web
Es fácil de usar
Tiene información práctica, simple y bien redactada
Requiere de pocos clics para navega...
Un buen sitio web
Es accesible:

– usa colores contrastantes para facilitar la lectura

– usa etiquetas ALT en las imágene...
Referencias y bibliografía

Designing Effective User Interfaces by Suzanne Martin
“The psychology of computer programming”...
diseño de interfaz
Tecnologías web
Lab. Diseño Gráfico 2009
Zara Hormazábal D.
Diseño de Interfaces
Upcoming SlideShare
Loading in …5
×

Diseño de Interfaces

6,672 views

Published on

Published in: Design

Diseño de Interfaces

  1. 1. diseño de interfaz Tecnologías web Lab. Diseño Gráfico 2009 Zara Hormazábal D.
  2. 2. El diseño web o digital hoy La función de la “web 2.0” es netamente operativa, funcional e interactiva. Como ya vimos la nueva web es: •Dinámica, más de una funcionalidad y/u objetivos •Interacción con contenidos externos •No tenemos una dimensión exacta del tamaño hacia adentro y hacia abajo de contenidos. •Además no sabemos exactamente y no debemos limitar los tipos de elementos en un sitio (fotos, videos, arc. descargables, etc)
  3. 3. ¿Cómo afecta al diseño? Por lo tanto el diseñador, no solo debe preocuparle el quot;lookquot; de un sitio, sino preocuparse de varios parametros que afecten el diseño y al usuario. Ya no es sólo Diseño, es Experiencia de Usuario. Como vimos la Experiencia de usuario, es un trabajo más profundo que abarca sicología, estudios de comportamientos de usuario y además de uso de distintos medios técnologicos. Por lo mismo un diseñador quot;webquot; puede enfocarse a distintas disciplinas dentro del diseño.
  4. 4. Definición de diseño... para la web Diseño de interacción “El diseño de interacción es a la vez un campo de estudio y un punto de vista que se ocupa de diseñar experiencias interactivas. Estas experiencias pueden desplegarse desde cualquier medio (como por ejemplo: actos en vivo, productos, servicios, etc.) y no solamente el medio digital...” (Nathan Shedroff) “El diseño de interacción es una sub-disciplina del diseño que examina el rol del comportamiento y la inteligencia embebida en espacios físicos y virtuales, así como de la convergencia de las dimensiones físicas y digitales en la concepción de productos y servicios” (Wikipedia)
  5. 5. Definición de diseño... para la web Diseño de interfaz quot;En el contexto de interacción Humano-Computador tradicional: diseño de los elementos de la interfaz para facilitar la interacción del usuario con la funcionalidad.quot; (Jesse James Garret) Se denomina interfaz al conjunto de elementos de la pantalla que permiten al usuario realizar acciones sobre el Sitio Web que está visitando. Por lo mismo, se considera parte de la interfaz a sus elementos de identificación, de navegación, de contenidos y de acción. (http://www.guiaweb.gov.cl)
  6. 6. Definición de diseño... para la web Diseño visual quot;Estudia los sistemas de información, con el objeto de convertir los datos en formas visuales, teniendo en cuenta los procesos perceptivos (visión) y cognitivos. Con el fin de generar sistemas de información que interactúan con la comunidad y sus referentes significacionales, a través de los procesos comunicativos.quot; (Wikipedia) quot; Tratamiento visual de los elementos de texto y gráficos en la página y componentes de navegaciónquot; (Jesse James Garret)
  7. 7. Reglas básicas del diseño ¿cómo piensan los usuarios web? - no son muy diferentes de los clientes de una tenda en la vida real. - hacen clics porque les atrae o creen que son útiles - aprecian la calidad y la credibilidad. - no leen. Escanean. - son impacientes y esperan gratificaciones instantáneas - no siempre toman las mejores decisiones. - confían en su intuición. - desean tener el control sobre su navegador.
  8. 8. Reglas de “oro” del diseño No hagas pensar a los usuarios Una página debe ser obvia y explicarse a sí misma 1. La navegación debe ser clara, con pistas visuales adecuadas y enlaces fácilmente reconocibles. Los usuarios entienden mejor los sitios web diseñados en patrones en F 2. Reduciendo la incertidumbre de un usuario ante el sitio, ayudarás a que los usuarios cumplan sus objetivos. Si los usuarios no encuentran su camino, te abandonarán. 1. Del libro Don’t make me think de Steve Krug’s, primera ley de la usabilidad. 2. Del artículo F-Shaped Pattern For Reading Web Content de Jakob Nielsen's
  9. 9. Reglas de “oro” del diseño Usuarios curiosos e impacientes Ofrece servicios sencillos, prácticos y directos La satisfacción es el mejor “gancho” Aumenta la confianza de los usuarios, gratificando sus acciones correctas y ayudando a resolver las incorrectas.
  10. 10. Reglas de “oro” del diseño Un sitio forma parte de la imagen corporativa de una organización Su diseño debe ser atractivo y no exagerado Debe contar con una paleta de color apropiada, acorde al objetivo del sitio y a la imagen corporativa
  11. 11. Reglas de “oro” del diseño Crea un discurso visual claro Aaron Marcus Organiza: para proveer una estructura limpia, concistente y con navegación intuitiva. Economiza: Haz más con menos, empleando los principios de simplicidad, claridad, distinción y énfasis. Comunica: Coincide con la presentación a las capacidades del usuario al fin de que la comunicació sea más simple
  12. 12. Reglas de “oro” del diseño Jerarquizar y sacar mejor partido a los puntos focales Organiza apropiadamente la página principal del sitio Ofrece pistas que eviten incetidumbre No distraigas a los usuarios con imágenes, efectos o acciones inecesarias Diseña pensando en el usuario Simplicidad Un usuario busca información, no entretención y en este caso prefieren ver sitios basados en textos
  13. 13. Reglas de “oro” del diseño No temas al espacio en blanco El espacio blanco refiere a las porciones de espacio que se crean entre los elementos El buen uso de este espacio genera equilibrio, favorece la lectura y crea una composición estética Las estructuras complejas se vuelven ordenadas con espacio negativo suficiente Separa los elementos visuales, ayuda a generar jerarquía
  14. 14. Reglas de “oro” del diseño Evita el exceso de información La gente lee 25% más lento en pantalla que en papel El 79% prefieren escanear visualmente la información en vez de leerla a detalle Los usuarios leerán sólo el 20% del texto en una página promedio
  15. 15. Reglas de “oro” del diseño Los elementos convencionales, no innovar Usa patrones y elementos a los que los usuarios ya están acostumbrados Los patrones disminuyen la curva de aprendizaje porque la gente ya sabe que hacer, cuándo y qué esperar a cambio Las convenciones ayudan a generar confianza y credibilidad
  16. 16. Reglas de “oro” del diseño Prueba, prueba y vuelve a probar Todo proyecto web debe probarse, es una ley natural de las pruebas de usabilidad Hacer pruebas antes, durante y frecuentemente a un sitio sólo ayudarán a mejorar cada aspecto del sitio
  17. 17. Tendencias de diseño Estructuras simples Usa estructuras simples de 1 a 3 columnas Un diseño simple funciona mejor (pocos elementos, bien organizados) Los diseños en general se pueden entender al primer vistazo, sin tener que estar vagando para entender el concepto general.
  18. 18. Tendencias de diseño Diseño centrado El diseño centrado ofrece: confianza, balance, simpleza. Los patrones de diseño alineado a la izquierda cada vez son menos comunes, lo mismo que las estructuras líquidas.
  19. 19. Tendencias de diseño Fondos claros o neutros La mayoría de los sitios tienen fondos planos, casi siempre blancos o degradados en grises. Esta gama neutral, simple, y relajada es una base perfecta para colores vibrantes.
  20. 20. Tendencias de diseño Tintes de color brillantes usados con precisión El diseño de los últimos años sobresale por los colores juveniles y vibrantes, no sólo para los blogs, sino para sitios comerciales importantes. La Web 2.0 trajo a las tendencia en moda los verdes, anaranjados, azules y violetas aplicados a grandes titulos, iconos enormes y destellos de color a lo largo de los sitios.
  21. 21. Tendencias de diseño Espacio blanco El espacio blanco no necesariamente debe ser blanco, simplemente de ser un espacio. Texto grande Los textos más importante de la página son más grandes que el texto regular
  22. 22. Un buen sitio web Es fácil de usar Tiene información práctica, simple y bien redactada Requiere de pocos clics para navegarlo No tiene secciones en construcción ni contenido incompleto No usa pop‐ups No usa flash, animaciones, frames (marcos) ni imágenes innecesarias Pesa poco (menos de 100 – 150 kbs) Usa tipografias genéricas disponibles para cualquier usuario Es legible aún y cuando el texto cambie de tamaño Incluye archivos en formatos comunes DOC, RTF, PDF, JPG, MP3, etc. Usa enlaces con textos descriptivos y evita el uso de indicaciones como “haz clic aquí” Usa metadatos para catalogar y jerarquizar correctamente su contenido
  23. 23. Un buen sitio web Es accesible: – usa colores contrastantes para facilitar la lectura – usa etiquetas ALT en las imágenes – tiene índices de contenido – puede ser leído (u oído) aún sin CCS ni imágenes – provee todo su funcionamiento sin necesidad de Javascript – incluye textos alternativos para todo elementos no textual. Permite la retroalimentación o contacto, que además, es accesible y monitoreada constantemente. Tiene un buscador que produce resultados relevantes, especialmente para las páginas más consultadas.
  24. 24. Referencias y bibliografía Designing Effective User Interfaces by Suzanne Martin “The psychology of computer programming” by Gerald Weinberg “Designing Web Usability” by Jakob Nielsen [JN / DWU] “Prioritizing Web Usability” by Jakob Nielsen “Don’t Make Me Think” by Steve Krug “Usability for the Web: Designing Web Sites that Work” by Tom Brinck, Darren Gergle Scott Wood A Summary of Principles for User-Interface Design http://www.smashingmagazine.com El arte de crear (buenos) sitios web: diseño, desarrollo y estándares Miriam Avila, Isabel Villarreal e Ivan Santiesteban
  25. 25. diseño de interfaz Tecnologías web Lab. Diseño Gráfico 2009 Zara Hormazábal D.

×