1. Curso-Taller Latinoamericano a Distancia
MÓDULO 2
Diseño Web
Docentes:
Daniel Espíndola – Mariana Fossatti

2. Planificación
• Todo empieza con lápiz y papel
• Lo primero es escribir el proyecto y hacer un
esquma previo de nuestra futura web

3. El equipo de trabajo
Como en toda tarea es importante la
conformación de un equipo de trabajo,
el mínimo estaría conformado por:
Coordinador general
y de contenidos
Programador Diseñador gráfico

4. ¿Por dónde empezar? PÚBLICOS
• Objetivos del sitio
– En relación a los objetivos, misión y visión
de la organización: ¿para qué la web?
• Público destinatario
– Perfil de los usuarios que visitarán la
página: ¿qué tipo de contenidos buscan,
cómo podemos satisfacer sus necesidades?
• ¿Existen diferencias entre el público objetivo
de la web y el público objetivo de la
organización?

5. ¿Por dónde empezar? IMAGEN
• ¿Qué imagen queremos transmitir?
• ¿Cómo nos gustaría que la gente describiera
nuestra? Por ejemplo, “divertida”, “seria”,
“moderna”…
• Elaborar un listado de varios sitios web que
entendemos que funcionan bien y pensemos por
qué... tomar nota de los buenos y malos
ejemplos

6. ¿Por dónde empezar? CONTENIDOS
• ¿De dónde sale el contenido?
• ¿Documentos ya existentes, material creado
especialmente, se genera a partir de la actividad
de la organización?
• ¿Quién será el responsable de crear el contenido?
• ¿Quién será el responsable de subirlo?
• ¿Quién será el responsable de aprobarlo?

7. Diseño centrado en el usuario: un
concepto fundamental
• Es común el error de realizar el sitio centrado
en lo tecnológico o desde lo estético
• Sin embargo, el mejor sitio no es el mas
lindo, sino el mas usado
• La consigna es que el usuario se sienta
cómodo en la navegación, en la búsqueda de
la información, en la interacción con un
entorno agradable y una programación
dinámica
• Nuestro usuario objetivo, debe quedar
satisfecho con lo que ofrece nuestra web, ya
sea información, compra/venta,
comunicación, interacción, etc.

8. Tener en cuenta...
• Los distintos tipos de • Las variadas
usuarios: condiciones de acceso
– Público objetivo y a la Web:
visitantes ocasionales – Conexiones
– Nivel de manejo de – Equipos
Internet – Navegadores
– Idiomas
– Discapacidades

9. Un buen diseño es:
• Comprensible, intuitivo y amigable
• Eficaz para destacar los contenidos
• Útil para las necesidades del usuario
• Pensemos en el éxito de un sitio como Google frente a la sencillez y
el minimalismo de su diseño.

10. Usabilidad
• Determina una experiencia satisfactoria en la
interacción del usuario con el sitio
• Un sitio usable es fácil de aprender a usar, el
usuario “no se pierde”, encuentra aquello que
está buscando rápidamente y accede sin
dificultad al contenido
• Un sitio poco usable es difícil de acceder y
navegar, presenta errores y puede llegar a
frustrar al usuario

11. Aspectos de la usabilidad
en el diseño de una web
• La usabilidad es un concepto integral. Depende de
muchos elementos que componen el “todo” que es el
sitio web
– Arquitectura de información
– Diseño estético
– Estándares
– Accesibilidad
– Encontrabilidad

12. Arquitectura de información
• Analizar y definir cómo va a estar estructurada la
información en el sitio
• Hacer un mapa de contenidos (en papel o digital) para
definir las secciones del sitio, su organización en
jerarquías y sus interacciones a través de hipervículos,
botones y menúes
– Es recomendable analizar sitios similares como
fuente de comparación e inspiración
• Fundamental para la USABILIDAD: es el momento de
pensar en la futura experiencia del usuario: ¿a cuántos
clics está lo que busca?

13. A modo de ejemplo: algunas
secciones habituales
• Inicio o Home
• Información institucional
• Novedades
• Eventos
• Áreas para usuarios registrados
• Buscador interno

14. Diseño estético
• Define el aspecto visual de la web: colores,
imagen corporativa, estilo de fuente, títulos,
encabezados, botones, menús, disposición de las
imágenes, logotipo, elementos multimedia, etc.
• Debe facilitar la transmisión de información
• Priorizar los contenidos y la usabilidad, antes
que la presentación estética

15. Errores de diseño habituales
• Página principal que tarda en cargar
• Página de entrada o “intro” sin ninguna utilidad
(agrega un clic más al acceso)
• No puedo volver a la home... dónde estoy?
• “Untitled document”: una página sin título
• Títulos excesivamente largos, muchas mayúsculas
acentos o espacios
• Confusión visual: muchos efectos, tipografías
complicadas, imágenes pesadas
• Páginas muy extensas, tipo “sábana”
• Links a áginas vacías o “en construcción”

16. Que esto no pase muy seguido...

17. En diseño web “menos es más”
• No recargar la página con animaciones
innecesarias
• Adecuado manejo de imágenes (pequeñas pero
nítidas y de bajo “peso”)
• Claridad en los vínculos (subrayados, cambio
de color al pasar con el ratón sobre ellos)
• Menú de navegación intuitivo
• Adecuado ordenamiento de la información (de
los mas importante a lo menos)
• Evitar espacios en blanco
• Datos de contacto visibles
• Cabezales y pie de páginas similares en todas
las secciones, boletines y comunicaciones
(genera identidad)

18. Separación entre presentación y
contenido
• Actualmente lo habitual es crear sitios con Hojas de Estilo en
Cascada (CSS por su sigla en inglés) que permiten manejar la
presentación de manera independiente al contenido
• Se define una plantilla o “template” que será la misma para
cada una de las páginas que componen el sitio
• Todas las páginas del sitio tendrán un mismo aspecto, aún
cuando varíe su contenido
• Esto separa la tarea de gestión de contenidos de la de diseño:
ya no es necesario diagramar la página cada vez que se quiere
modificar el contenido

19. Cumplimiento de estándares
• Los estándares para el diseño web ayudan a resolver
problemas habituales de usabilidad:
– Usuarios con diferentes navegadores ven la información de
forma diversa o no pueden acceder a ella
– La información queda obsoleta e inaccesible a causa del avance
de los formatos de presentación
• La W3C es un organismo que creó normas para que la
información no presente errores en el lenguaje (código) en
que está escrita una web, y que cualquier navegador pueda
leer ese lenguaje de la misma manera
• Una web que respeta estándares será más útil, accesible y
visitada

20. Accesibilidad
• Implica acceso universal a la Web, independientemente del
tipo de hardware, software, infraestructura de red, idioma,
cultura, localización geográfica y capacidades de los usuarios
• Consiste en conseguir que la información se presente
independientemente de los equipos y aplicaciones que se
empleen para navegar
• La W3C desarrolló Pautas de Accesibilidad al Contenido en la
Web (WCAG) que proponen soluciones de diseño y una serie
de puntos de verificación que ayudan a detectar posibles
errores

22. Pocisionamiento: visibilidad y
encontrabilidad
• Un sitio corre el riesgo de "no existir" si sus contenidos no
han sido indexados por los principales buscadores
• Es importante que nuestro sitio esté bien posicionado
dentro de su área temática en relación a otros
• Una web bien posicionada figurará entre los primeros
resultados de búsqueda para las palabras claves
relevantes que la describen y será así más “encontrable”
y por lo tanto, visible

23. Posicionamiento técnico
• Consiste en tomar medidas para que el sitio sea
indexado automáticamente por los buscadores
– Dar de alta el sitio en algunos de los más importantes
buscadores de Internet (Google, Yahoo!, Bing)
– Procurar que la web sea enlazada en otros sitios para
aumentar su relevancia en los buscadores
– Incluir el sitio en directorios temáticos, nacionales y
regionales

24. Posicionamiento social
• Consiste en un conjunto integral de acciones orientadas
a desarrollar una red social alrededor de nuestros
contenidos
• Para organizaciones pequeñas con objetivos y público
específicos es más efectivo y relevante

25. Consejos de posicionamiento social
• Crear contenido original y de calidad
• Publicar con frecuencia
• Tener presencia en las principales redes sociales
generalistas, como Facebook y Twitter
• Integrar redes sociales específicas
• Facilitar la suscripción y distribución de
contenidos (e-boletines, RSS)

26. En síntesis...
• Planificación: lápiz y papel antes que nada
• Diseño centrado en el usuario
• Usabilidad:
– Arquitectura de información
– Diseño estético: separación diseño-contenido
– Estándares
– Accesibilidad
– Encontrabilidad: posicionamiento técnico y
social

27. Para profundizar...
• Video: Consejos para lanzar hoy un buen sitio web, 4:41 minutos
http://www.youtube.com/watch?v=uAjXZEkI3jA
• Guía para el Desarrollo de Sitios Web – Gobierno de Chile
http://guiaweb.gob.cl
• Guías breves sobre estándares de la W3C
http://www.w3c.es/divulgacion/guiasbreves/
• Secrets of the top Marketing and Social Media blogs (sobre
posicionamiento social)
http://moblogsmoproblems.blogspot.com/2009/04/secrets-of-top-marke