Presentación sobre el diseño y desarrollo del sitio web de Cáritas Latinoamériica y el Caribe

1. Proyecto
Diseño y desarrollo del sitio web de
Cáritas Latinoamérica y el Caribe
www.caritaslac.org

2. Diseño Web - Estrategia y Marketing digital - Social Media
Diseño Gráfico - Diseño editorial - Identidad corporativa - Fotografía
agenciacreativa.mx
facebook.com/amasbmx
twitter.com/amasbmx

3. ¿Cuál es el propósito del sitio web?
Si se pudiera generar una sola frase para determinar el propósito de un
sitio web, ¿cuál sería?

4. ¿Cuál es el propósito del sitio web?
Si se pudiera generar una sola frase para determinar el propósito de un
sitio web, ¿cuál sería?
- vender
- generar suscriptores
- generar prospectos a un producto o servicio
- convencer acerca de cierto tema
- generar llamadas o comunicaciones

5. Simple:
El propósito de un sitio web es
generar respuesta,
manifestada en algún tipo de
acción del visitante

6. ¿Cómo logramos generar respuesta?:

7. ¿Cómo logramos generar respuesta?:
DISEÑO CENTRADO
EN EL USUARIO

8. Proceso:
1.- Análisis, briefing y objetivos
2.- Arquitectura de la información
3.- Requerimientos de contenido
4.- Usabilidad y escritura para web
5.- Programación
6.- Diseño Gráfico y Comunicación Visual

9. Proceso:
1.- Análisis, briefing y objetivos
2.- Arquitectura de la información
3.- Requerimientos de contenido
4.- Usabilidad y escritura para web
5.- Programación
6.- Diseño Gráfico y Comunicación Visual

10. Análisis y brie ng
- No hay claridad de cómo se ha trabajado el sitio web,
- Se contaba un equipo de trabajo con coordinación regional en Argentina
- Se elaboro una intranet que tuvo poco uso, era poco amigable para el usuario.
- La idea del intranet era tener un sitio para ver experiencias, materiales, documentos, memorias de
encuentros, talleres, publicaciones.
- Había mucha dificultad en la promoción.
- Se necesitaba cumplir la inquietud de reuniones via electrónica, o compartir documentos especia-
les para usuarios registrados.
- Se busco tener una especie de documentos colaborativos trabajados en línea hasta que se lle-
gase al documento definitivo.

11. Objetivos
Desarrollar un sitio web centrado en el
usuario que permita establecer una
proyección clara del trabajo que se lleva a
cabo en Cáritas Latinoamérica y el Caribe,
así como la labor de cada uno de los
países que conforman esta región.

12. Objetivos
• Tener presencia en internet
• Informar públicamente sobre el ser y quehacer de Cáritas
• Facilitar la coordinación y la comunicación entre regiones
• Compartir documentos y materiales para reproducir
• Maximizar el tamaño de audiencia para llevar el mensaje a un
mayor numero de personas
• Compartir agendas de cada región

13. Usuarios
Definición de

14. Target 1
Target 2
Target 3

15. Target 1
Personal de Cáritas, directores, responsables de pastoral social,
dirigentes de otras pastorales, Cáritas Internationalis, etc.
Target 2
Target 3

16. Target 1
Personal de Cáritas, directores, responsables de pastoral social,
dirigentes de otras pastorales, Cáritas Internationalis, etc.
Target 2
Publico en general interesado en el tema social, de pastoral, de
organizaciones sociales, comunidad parroquial, etc.
Target 3

17. Target 1
Personal de Cáritas, directores, responsables de pastoral social,
dirigentes de otras pastorales, Cáritas Internationalis, etc.
Target 2
Publico en general interesado en el tema social, de pastoral, de
organizaciones sociales, comunidad parroquial, etc.
Target 3
Público en general que este navegando en internet.

18. Proceso:
1.- Análisis, briefing y objetivos
2.- Arquitectura de la información
3.- Requerimientos de contenido
4.- Usabilidad y escritura para web
5.- Programación
6.- Diseño Gráfico y Comunicación Visual

19. Arquitectura de
la información

20. Card sorting

21. Card sorting
Card ¿Qué?

22. Card sorting
Para realizar una organización de categorías centrada en el usuario, utilizaremos la
técnica denominada 'card sorting' u ordenación de tarjetas.
Se basa en la observación de cómo los usuarios agrupan y asocian entre sí un
número predeterminado de tarjetas etiquetadas con las diferentes categorías temáti-
cas del sitio web.
De esta forma, partiendo del comportamiento de los propios usuarios, es posible
organizar y clasificar la información de un sitio web conforme a su modelo
mental.

23. Card sorting
Objetivo: agrupar las categorías libremente en el número de secciones que crea
que corresponde
- No es una prueba o evaluación de conocimientos
- Criterio de agrupación: por similitud con su sección
- Si lo desea se pueden proponer categorías nuevas.

24. Diseño de información
- Estructura de los documentos
- Como se despliega la información en cada página
- Navegación
- Localización de los botones, fotos, bloques de texto ligero
- Mockups/Esquemas

25. Eye tracking
¿Cómo lee un usuario en internet?

26. Eye tracking
Eyetrack 2010 y nuevo estudio en febrero del 2011 por otros investigadores
- El 53% escanea la información y el 47% es lector más metódico.
- Lectura web es más profunda que la de información impresa.
- La lectura promedio en una web es del 20% de la información escrita
- Los usuarios leen el 28% de las palabras si dedican el 100% de tiempo a la lectura.
Fuente: useit.com

27. Eye tracking

28. Eye tracking

29. Propuesta de landing page

30. Proceso:
1.- Análisis, briefing y objetivos
2.- Arquitectura de la información
3.- Requerimientos de contenido
4.- Usabilidad y escritura para web
5.- Programación
6.- Diseño Gráfico y Comunicación Visual

31. Requerimientos de contenido:
- Texto
- Video
- Audio
- Infografías
- White papers
- Gráficas
- Ilustraciones
- Fotos

32. Requerimientos de contenido:
¿Con qué contenido se cuenta?
¿Cual se debe modificar?
¿Cuál se debe eliminar?
¿Cuándo debe quedar listo?

33. Requerimientos de contenido:
¿Con qué contenido se cuenta?
¿Cual se debe modificar?
¿Cuál se debe eliminar?
¿Cuándo debe quedar listo?
¿Quién lo hará?

34. Proceso:
1.- Análisis, briefing y objetivos
2.- Arquitectura de la información
3.- Requerimientos de contenido
4.- Usabilidad y escritura para web
5.- Programación
6.- Diseño Gráfico y Comunicación Visual

35. Buenas prácticas:
En estructura:
Facilitar el escaneo
Textos modulares (Paginación, leer +)
Tamaño de letra, contraste con el fondo
Uso de negritas, viñetas

36. Buenas prácticas:
En el estilo de comunicación (textos usables)
Titulación descriptiva.
Lenguaje sencillo y claro.
Estilo adecuado al publico al que nos dirigimos: formal, coloquial, etc

37. Buenas prácticas:
En posicionamiento
Investigación de keywords y uso oportuno en títulos, textos e imágenes
Linkeo dentro del texto, evitar la url completa.
Enlaces descriptivos, uso de anchor text

38. Proceso:
1.- Análisis, briefing y objetivos
2.- Arquitectura de la información
3.- Requerimientos de contenido
4.- Usabilidad y escritura para web
5.- Programación
6.- Diseño Gráfico y Comunicación Visual

39. Palabras clave (posicionamiento)
Son las palabras o frases que el usuario
escribe en los buscadores para encontrar
productos, servicios o información sobre un
tema específico.

40. Palabras clave (posicionamiento)
Son las palabras o frases que el usuario
escribe en los buscadores para encontrar
productos, servicios o información sobre un
tema específico.

41. Palabras clave (posicionamiento)
Son una herramienta fundamental en la re-
dacción de contenido, pero deben estar
cuidadosamente enfocadas y relacionadas
al tema específico. Deben definir el tema del
sitio web

42. Palabras clave (posicionamiento)
Son una herramienta fundamental en la re-
dacción de contenido, pero deben estar
cuidadosamente enfocadas y relacionadas
al tema específico. Deben definir el tema del
sitio web

43. Ejercicio
En una hoja cada persona debe haceruna
lista de 20 palabras clave y 10 frases que
definan el sitio y el tema del sitio web.

44. Proceso:
1.- Análisis, briefing y objetivos
2.- Arquitectura de la información
3.- Requerimientos de contenido
4.- Usabilidad y escritura para web
5.- Programación
6.- Diseño Gráfico y Comunicación Visual

45. Visual
- La parte gráfica, estética, colores, tipografía, imagenes,
gradientes
- Lo que ve el usuario
- Se busca unidad
- Genera confianza y experiencia agradable
- Esta al final de todo el proceso

46. Visual

47. ¡GRACIAS!
agenciacreativa.mx
facebook.com/amasbmx
twitter.com/amasbmx