M2 Diseño Web
1 recomendación254 vistas
Este documento presenta los conceptos fundamentales para el diseño de un sitio web, incluyendo la planificación, el diseño centrado en el usuario, la usabilidad, los estándares y el posicionamiento. Se enfatiza la importancia de la planificación, el mapeo de contenidos, la separación de diseño y contenido, y el cumplimiento de estándares para lograr un sitio accesible y usable. También se discuten estrategias de posicionamiento técnico y social para mejorar la visibilidad del sitio.
M2 Diseño Web
- 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