0
Curso-Taller Latinoamericano a Distancia MÓDLO 2 Diseño Web Docentes:  Daniel Espíndola – Mariana Fossatti
Planificación <ul><li>Todo empieza con lápiz y papel </li></ul><ul><li>Lo primero es escribir el proyecto y hacer un esqum...
Como en toda tarea es importante la conformación de un equipo de trabajo, el mínimo estaría conformado por: Coordinador ge...
¿Por dónde empezar? Definamos... <ul><li>Objetivos del sitio </li></ul><ul><ul><li>En relación a los objetivos, misión y v...
Diseño centrado en el usuario: un concepto fundamental <ul><li>Es común el error de realizar el sitio centrado en lo tecno...
Tener en cuenta... <ul><li>Los distintos tipos de usuarios: </li></ul><ul><ul><li>Público objetivo y visitantes ocasionale...
Un buen diseño es: <ul><li>Comprensible, intuitivo y amigable </li></ul><ul><li>Eficaz para destacar los contenidos </li><...
Usabilidad <ul><li>Determina una  experiencia satisfactoria  en la interacción del usuario con el sitio </li></ul><ul><li>...
Aspectos de la usabilidad  en el diseño de una web <ul><li>La usabilidad es un concepto integral. Depende de muchos elemen...
Arquitectura de información <ul><li>Analizar y definir cómo va a estar estructurada la información en el sitio </li></ul><...
A modo de ejemplo: algunas secciones habituales <ul><li>Inicio o Home </li></ul><ul><li>Información institucional </li></u...
Diseño estético <ul><li>Define el aspecto visual de la web: colores, imagen corporativa, estilo de fuente, títulos, encabe...
En diseño web “menos es más” <ul><li>No recargar la página con animaciones innecesarias </li></ul><ul><li>Adecuado manejo ...
Separación entre presentación y contenido <ul><li>Actualmente lo habitual es crear sitios con Hojas de Estilo en Cascada (...
Cumplimiento de estándares <ul><li>Los estándares para el diseño web ayudan a resolver problemas habituales de usabilidad:...
Accesibilidad <ul><li>Implica acceso universal a la Web , independientemente del tipo de hardware, software, infraestructu...
 
Pocisionamiento: visibilidad y encontrabilidad <ul><li>Un sitio corre el riesgo de &quot;no existir&quot; si sus contenido...
Posicionamiento técnico  <ul><li>Consiste en tomar medidas  para que el sitio sea indexado por los buscadores </li></ul><u...
Consejos de posicionamiento técnico  <ul><li>Buenos contenidos , relevantes y con palabras clave descriptivas de la inform...
Posicionamiento social <ul><li>Consiste en un conjunto integral de acciones orientadas a  desarrollar una red social relev...
Consejos de posicionamiento social <ul><li>Crear contenido original y de calidad </li></ul><ul><li>Publicar con frecuencia...
Para profundizar... <ul><li>Video: Consejos para lanzar hoy un buen sitio web, 4:41 minutos  http://www.youtube.com/watch?...
Upcoming SlideShare
Loading in...5
×

M2 DiseñO Web

1,363

Published on

Segundo Módulo del curso latinoamericano a distancia "Gestión de Sitios Web para Organizaciones Sociales". Organizado por Sinergianet: sinergianet.com.uy/inicio/

Published in: Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,363
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
43
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "M2 DiseñO Web"

  1. 1. Curso-Taller Latinoamericano a Distancia MÓDLO 2 Diseño Web Docentes: Daniel Espíndola – Mariana Fossatti
  2. 2. Planificación <ul><li>Todo empieza con lápiz y papel </li></ul><ul><li>Lo primero es escribir el proyecto y hacer un esquma previo de nuestra futura web </li></ul>
  3. 3. 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 Diseñador gráfico Programador El equipo de trabajo
  4. 4. ¿Por dónde empezar? Definamos... <ul><li>Objetivos del sitio </li></ul><ul><ul><li>En relación a los objetivos, misión y visión de la organización: ¿para qué la web? </li></ul></ul><ul><li>Público destinatario </li></ul><ul><ul><li>Perfil de los usuarios que visitarán la página: ¿qué tipo de contenidos buscan, cómo podemos satisfacer sus necesidades? </li></ul></ul>
  5. 5. Diseño centrado en el usuario: un concepto fundamental <ul><li>Es común el error de realizar el sitio centrado en lo tecnológico o desde lo estético </li></ul><ul><li>Sin embargo, el mejor sitio no es el mas lindo, sino el mas usado </li></ul><ul><li>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 </li></ul><ul><li>Nuestro usuario objetivo, debe quedar satisfecho con lo que ofrece nuestra web, ya sea información, compra/venta, comunicación, interacción, etc. </li></ul>
  6. 6. Tener en cuenta... <ul><li>Los distintos tipos de usuarios: </li></ul><ul><ul><li>Público objetivo y visitantes ocasionales </li></ul></ul><ul><ul><li>Nivel de manejo de Internet </li></ul></ul><ul><ul><li>Idiomas </li></ul></ul><ul><ul><li>Discapacidades </li></ul></ul><ul><li>Las variadas condiciones de acceso a la Web: </li></ul><ul><ul><li>Conexiones </li></ul></ul><ul><ul><li>Equipos </li></ul></ul><ul><ul><li>Navegadores </li></ul></ul>
  7. 7. Un buen diseño es: <ul><li>Comprensible, intuitivo y amigable </li></ul><ul><li>Eficaz para destacar los contenidos </li></ul><ul><li>Útil para las necesidades del usuario </li></ul><ul><li>Pensemos en el éxito de un sitio como Google frente a la sencillez y el minimalismo de su diseño. </li></ul>
  8. 8. Usabilidad <ul><li>Determina una experiencia satisfactoria en la interacción del usuario con el sitio </li></ul><ul><li>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 </li></ul><ul><li>Un sitio poco usable es difícil de acceder y navegar, presenta errores y puede llegar a frustrar al usuario </li></ul>
  9. 9. Aspectos de la usabilidad en el diseño de una web <ul><li>La usabilidad es un concepto integral. Depende de muchos elementos que componen el “todo” que es el sitio web </li></ul><ul><ul><li>Arquitectura de información </li></ul></ul><ul><ul><li>Diseño estético </li></ul></ul><ul><ul><li>Estándares </li></ul></ul><ul><ul><li>Accesibilidad </li></ul></ul><ul><ul><li>Encontrabilidad </li></ul></ul>
  10. 10. Arquitectura de información <ul><li>Analizar y definir cómo va a estar estructurada la información en el sitio </li></ul><ul><li>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 </li></ul><ul><ul><li>Es recomendable analizar sitios similares como fuente de comparación e inspiración </li></ul></ul><ul><li>Fundamental para la USABILIDAD: es el momento de pensar en la futura experiencia del usuario: ¿a cuántos clicks está lo que busca? </li></ul>
  11. 11. A modo de ejemplo: algunas secciones habituales <ul><li>Inicio o Home </li></ul><ul><li>Información institucional </li></ul><ul><li>Novedades </li></ul><ul><li>Eventos </li></ul><ul><li>Áreas para usuarios registrados </li></ul><ul><li>Buscador interno </li></ul>
  12. 12. Diseño estético <ul><li>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.‏ </li></ul><ul><li>Debe facilitar la transmisión de información </li></ul><ul><li>Priorizar los contenidos y la usabilidad , antes que la presentación estética </li></ul>
  13. 13. En diseño web “menos es más” <ul><li>No recargar la página con animaciones innecesarias </li></ul><ul><li>Adecuado manejo de imágenes (pequeñas pero nítidas y de bajo “peso”)‏ </li></ul><ul><li>Claridad en los vínculos (subrayados, cambio de color al pasar con el ratón sobre ellos)‏ </li></ul><ul><li>Menú de navegación intuitivo </li></ul><ul><li>Adecuado ordenamiento de la información (de los mas importante a lo menos)‏ </li></ul><ul><li>Evitar espacios en blanco </li></ul><ul><li>Datos de contacto visibles </li></ul><ul><li>Cabezales y pie de páginas similares en todas las secciones, boletines y comunicaciones (genera identidad) ‏ </li></ul>
  14. 14. Separación entre presentación y contenido <ul><li>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 </li></ul><ul><li>Se define una plantilla o “template” que será la misma para cada una de las páginas que componen el sitio </li></ul><ul><li>Todas las páginas del sitio tendrán un mismo aspecto, aún cuando varíe su contenido </li></ul><ul><li>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 </li></ul>
  15. 15. Cumplimiento de estándares <ul><li>Los estándares para el diseño web ayudan a resolver problemas habituales de usabilidad: </li></ul><ul><ul><li>Usuarios con diferentes navegadores ven la información de forma diversa o no pueden acceder a ella </li></ul></ul><ul><ul><li>La información queda obsoleta e inaccesible a causa del avance de los formatos de presentación </li></ul></ul><ul><li>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 </li></ul><ul><li>Una web que respeta estándares será más útil, accesible y visitada </li></ul>
  16. 16. Accesibilidad <ul><li>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 </li></ul><ul><li>Consiste en conseguir que la información se presente independientemente de los equipos y aplicaciones que se empleen para navegar </li></ul><ul><li>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 </li></ul>
  17. 18. Pocisionamiento: visibilidad y encontrabilidad <ul><li>Un sitio corre el riesgo de &quot;no existir&quot; si sus contenidos no han sido indexados por los principales buscadores </li></ul><ul><li>Es importante que nuestro sitio esté bien posicionado dentro de su área temática en relación a otros </li></ul><ul><li>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 </li></ul>
  18. 19. Posicionamiento técnico <ul><li>Consiste en tomar medidas para que el sitio sea indexado por los buscadores </li></ul><ul><li>Los buscadores “visitan” los sitios con programas llamados “arañas” que recorren la web buscando información </li></ul><ul><li>A esta información le aplican un algoritmo que calcula la posición relativa de la página en las búsquedas </li></ul>
  19. 20. Consejos de posicionamiento técnico <ul><li>Buenos contenidos , relevantes y con palabras clave descriptivas de la información que queremos difundir </li></ul><ul><li>Más texto que imágenes, animaciones y código de programación (el texto es más fácil de indexar)‏ </li></ul><ul><li>“ Dar de alta” el sitio manualmente en algunos de los más importantes buscadores de Internet (Google, Yahoo!, Windows Live y Ask)‏ </li></ul><ul><li>Procurar que la web sea enlazada en otros sitios para aumentar su relevancia en los buscadores </li></ul><ul><li>Incluir el sitio en directorios temáticos, nacionales y regionales </li></ul><ul><li>Hacer seguimiento de las estadísticas del sitio (por ejemplo, con Google Analytics)‏ </li></ul>
  20. 21. Posicionamiento social <ul><li>Consiste en un conjunto integral de acciones orientadas a desarrollar una red social relevante alrededor de nuestros contenidos </li></ul><ul><li>Para organizaciones pequeñas con objetivos y público específicos es más efectivo y relevante </li></ul>
  21. 22. Consejos de posicionamiento social <ul><li>Crear contenido original y de calidad </li></ul><ul><li>Publicar con frecuencia </li></ul><ul><li>Tener presencia en las principales redes sociales generalistas, como Facebook y Twitter </li></ul><ul><li>Integrar redes sociales específicas </li></ul><ul><li>Facilitar la suscripción y distribución de contenidos (e-boletines, RSS)‏ </li></ul><ul><li>Enviar invitaciones personales y/o masivas a nuestra base de datos contactos para suscribirse al sitio </li></ul>
  22. 23. Para profundizar... <ul><li>Video: Consejos para lanzar hoy un buen sitio web, 4:41 minutos http://www.youtube.com/watch?v=uAjXZEkI3jA </li></ul><ul><li>Guía para el Desarrollo de Sitios Web – Gobierno de Chile http://guiaweb.gob.cl </li></ul><ul><li>Guías breves sobre estándares de la W3C http://www.w3c.es/divulgacion/guiasbreves/ </li></ul><ul><li>Consejos para principiantes de SEO (sobre posicionamiento técnico ( http://www.maestrosdelweb.com/editorial/seointro/ ) </li></ul><ul><li>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 </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×