Este documento describe varios factores clave para el diseño exitoso de sitios web. Explica que la web tiene sus propias limitaciones y códigos que deben respetarse, como esperar que los textos azules sean links o que las imágenes superiores izquierdas sean logos. También destaca la importancia de la simplicidad, consistencia, humildad y arquitectura de información al estructurar el contenido antes de lo visual. Finalmente, presenta diferentes tipos de layouts y la utilidad de las grillas para organizar elementos en la página.

1. 
diseñando
para la web

2. www.fondiu.cl
facebook.com/fondiu.cl

20. diseño en la web:
factores de éxito

21. 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)

22. 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

23. posibilidades
• "Casi" todo es posible en la Web… si
sabemos cómo hacerlo
• Mientras más conozcamos nuestro
soporte, más partido podemos sacarle

24. 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...

25. 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

26. 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

27. 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.

28. 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)

29. consistencia
• El usuario percibirá un sistema como estable
en la medida de que se comporte una y otra
vez según sus expectativas.

30. 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

31. 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

32. 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)

33. SIMPLICIDAD
"La simplicidad es la sofisticación llevada a su
grado máximo"
- Leonardo da Vinci

34. SIMPLICIDAD
No confundir "simplicidad" con "minimalismo"…

35. 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ú"

36. 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.

37. Humildad
• WTF: ¿Humildad?
• Sí, humildad.
• Muchos errores de interfaz y diseño se
cometen por egocentrismo, o por suponer
ciertas bobadas…

38. 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"

39. 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

40. arquitectura
de información

41. 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

42. arquitectura de información
Lo que muchos creen que es Lo que EN REALIDAD debe ser
un diseñador un diseñador

43. arquitectura de información
Diseñar para la Web
=
Diseñar la experiencia del
usuario en esa Web
(grábatelo)

44. arquitectura de información
Experiencia de usuario
=
UX
(User eXperience)

45. arquitectura de información
• Hacer AI significa diseñar primero el
contenido y después la parte visual.

46. 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.

47. 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)

48. 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?"

49. 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

50. 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).

51. www.fondiu.cl
facebook.com/fondiu.cl

52. diagramación
y layouts

53. 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.

54. 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

55. 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)

56. diagramación
1. Sitio Corporativo
2. Portal
3. Blog
4. Catálogo
5. Portafolio
6. Directorio
7. Aplicación
8. Landing Page
9. Magazine

57. 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.

58. 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

59. 2. Portal
Se caracteriza por
mezclar una gran
variedad y cantidad de
contenidos. Pensado
para una intranet o
para público masivo

60. 2. Portal
Se caracteriza por
mezclar una gran
variedad y cantidad de
contenidos. Pensado
para una intranet o
para público masivo
msn.com

61. 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.

62. 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

63. 4. catálogo
Hecho para mostrar
muchos productos de
una sola vez y
fomentar la
exploración.

64. 4. catálogo
Hecho para mostrar
muchos productos de
una sola vez y
fomentar la
exploración.
Templatemonster.com

65. 5. portafolio
Privilegia
enormemente el
contenido visual, útil
para galerías de
diseñadores,
fotógrafos, arquitectos,
etc.

66. 5. portafolio
Privilegia
enormemente el
contenido visual, útil
para galerías de
diseñadores,
fotógrafos, arquitectos,
etc. Templatemonster.com

67. 6. DIRECTORIO
Es el layout clásico de
los buscadores,
páginas amarillas,
agregadores de
contenido.
Enfocado a las listas.

68. 6. DIRECTORIO
Es el layout clásico de
los buscadores,
páginas amarillas,
agregadores de
contenido.
Enfocado a las listas.
bing.com

69. 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)

70. 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)

71. 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)

72. 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

73. 9. magazine
Diseño moderno,
rompe con la
estructura
tradicional de "sitio"
y equilibra imagen y
texto por igual.

74. 9. magazine
Diseño moderno,
rompe con la
estructura
tradicional de "sitio"
y equilibra imagen y
texto por igual.
thebolditalic.com

75. Layouts: fijo v/s líquido
• El layout fijo mantiene siempre el
mismo ancho, independiente del
tamaño de la ventana.

76. Layouts: fijo v/s líquido
• El layout líquido se expande en sentido
horizontal, aprovechando al máximo el
espacio de la ventana.

77. 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).

78. 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.

79. grillas (grids)

80. 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

81. 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

82. Espacio en blanco
• Comunica elegancia
• Actúa como un separador
visual
• Ayuda a dirigir la vista del
visitante
• Jerarquiza la información
naldzgraphics.net

83. 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

84. Interfaces

85. 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

86. interfaces
• La interfaz de una
silla es el lugar
donde… apoyamos
el trasero (punto
de contacto entre
el usuario y la
herramienta)

87. interfaces
• La interfaz de un
ascensor son sus
botones para
controlarlo
(intermediación e
información de
uso)

88. interfaces
• La interfaz de una
calle es su
señalética (en
postes y en el piso)
y el trazado de la
calle

89. interfaces
¿Qué es una Interfaz Web?
• Es el intermediario entre el usuario y el
contenido o tarea que le ofrece una
página Web.

90. 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

91. controles de interfaz
Los controles de interfaz determinan
cómo interactuará el usuario con el
sistema…
Y no, no da lo mismo.

92. 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.

93. 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…

94. 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)

95. controles de interfaz
Controles de acciones …
Vínculo Botón
Menú
Tabs

96. 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

97. controles de interfaz
Organizadores de contenido …
Panel Ventana

98. controles de interfaz
Organizadores de contenido …
Diálogo
Tabla
Acordeón

99. 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

100. controles de interfaz
Ingreso de datos o selección de opciones…
Select (combo box) Select (list box) Checkbox
Cuadros de texto
Botones de radio

101. 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

102. controles de interfaz
Informadores…
Tooltip Etiqueta
Mensaje de información
Barra de estado

103. www.fondiu.cl
facebook.com/fondiu.cl