Curso-Taller Latinoamericano a Distancia

MÓDLO 2Diseño Web

Docentes: Daniel Espíndola – Mariana Fossatti

Planificación

• Todo empieza con lápiz y papel• Lo primero es escribir el proyecto y hacer

un esquma previo de nuestra futura web

Como en toda tarea es importante la conformación de un equipo de trabajo, el mínimo estaría conformado por:

Coordinador general Coordinador general y de contenidosy de contenidos

Diseñador gráficoDiseñador gráficoProgramadorProgramador

El equipo de trabajo

¿Por dónde empezar? Definamos...

• 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?

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.

Tener en cuenta...

• Los distintos tipos de usuarios:– Público objetivo y

visitantes ocasionales

– Nivel de manejo de Internet

– Idiomas– Discapacidades

• Las variadas condiciones de acceso a la Web:– Conexiones – Equipos – Navegadores

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.

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

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

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 clicks está lo que busca?

A modo de ejemplo: algunas secciones habituales

• Inicio o Home• Información institucional• Novedades• Eventos• Áreas para usuarios registrados• Buscador interno

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

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)

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

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

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

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

Posicionamiento técnico

• Consiste en tomar medidas para que el sitio sea indexado por los buscadores

• Los buscadores “visitan” los sitios con programas llamados “arañas” que recorren la web buscando información

• A esta información le aplican un algoritmo que calcula la posición relativa de la página en las búsquedas

Consejos de posicionamiento técnico

• Buenos contenidos, relevantes y con palabras clave descriptivas de la información que queremos difundir

• Más texto que imágenes, animaciones y código de programación (el texto es más fácil de indexar)

• “Dar de alta” el sitio manualmente en algunos de los más importantes buscadores de Internet (Google, Yahoo!, Windows Live y Ask)

• 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

• Hacer seguimiento de las estadísticas del sitio (por ejemplo, con Google Analytics)

Posicionamiento social

• Consiste en un conjunto integral de acciones orientadas a desarrollar una red social relevante alrededor de nuestros contenidos

• Para organizaciones pequeñas con objetivos y público específicos es más efectivo y relevante

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)• Enviar invitaciones personales y/o masivas a

nuestra base de datos contactos para suscribirse al sitio

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/

• Consejos para principiantes de SEO (sobre posicionamiento técnico (http://www.maestrosdelweb.com/editorial/seointro/)

• Secrets of the top Marketing and Social Media blogs (sobre posicionamiento social)http://moblogsmoproblems.blogspot.com/2009/04/secrets-of-top-marketing-and-social.html