GUÍA DE PROYECTOS WEB

1. ¿Para qué necesita el sitio web la organización? 2. ¿Para qué necesita el sitio web la audiencia a

la que se dirige? 3. ¿Qué información de la organización es útil

para la audiencia? 4. ¿Qué imagen de la organización quiero

proyectar en mi audiencia? 5. ¿Qué servicios interactivos entregaré a través

del Sitio Web? 6. ¿Quiénes pueden ayudarme a realizar el

proyecto?

Planificación inicial

Las respuestas a estas preguntas permitirán dar forma a los siguientes elementos de análisis:

Objetivo: definir las metas del proyecto; éstas deben ser generales y específicas, con el fin de contar con el mayor detalle posible de lo que se desea conseguir.

Audiencia: hacia qué grupo de personas (uno o más) estará enfocado el sitio.

Tecnología: qué servicios interactivos se incorporarán al sitio y qué infraestructura se necesita para sustentar dichos servicios.

¿QUÉ QUIERO DE MI SITIO WEB?

Identificación de los tipos de tecnología que se emplearán en el sitio.

¿Cuál será la experiencia del usuario?

Definición de servicios interactivos

Evaluar los servicios que se ofrecen actualmente a los clientes

Identificar unidades gestoras de información

Analizar procesos y elaborar diagramas de flujo

Identificar contenidos y procesos que puedan ser publicados

Investigación profunda de la audiencia a través de técnicas de investigación:

*Encuestas *Arquetipos de usuarios

*Escenarios de uso

Bajo presupuesto: sistema empático.

Definición de la Audiencia

Conjunto de métodos y herramientas que permiten organizar los contenidos, para ser encontrados y utilizados por los usuarios, de manera simple y directa.

Arquitectura de la Información

Metodología de la Arquitectura de la Información

1. Definición de Contenidos del Sitio 3. Definición de los Sistemas de Navegación

1.1. Inventarear 3.1. Global

1.2. Clasificar 3.2. Local

1.2.1. Orientado a la audiencia 3.3. Contextual

1.2.2. Orientado a una tarea

1.2.3. Temático 4. Definición del Diseño Visual

1.3. Card Sorting 4.1. Wireframe

1.4. Benchmarking 4.2. Diseño de Interacción

4.3. Bocetos de Diseño

2. Definición de la Estructura del Sitio 4.4. Borradores de Página

2.1. Estructura

2.1.1. Secuencial

2.1.2. Hipertextual

2.1.3. Jerárquica

2.2. Mapa de Sitio

2.2.1. Secciones

2.2.2. Niveles

2.2.3. Contenidos relacionados

Proceso de Diseño Web

Ejemplo de Mapa de Sitio

Ejemplo de Wireframe

Diseño de Interacción (diagrama de flujo)

BOCETO DE DISEÑO

Los mapas del sitio representan estructuras, los

wireframes represetan pantallas y los diagramas de

flujo representan lo que hace el usuario.

PRE-PUBLICACIÓN CHECKLIST (evaluación final)

Actividades Online

o Registrar el Sitio en Buscadores: es la actividad mediante la cual el Sitio Web comienza a formar parte de los directorios y buscadores de Internet.

o Generar Enlaces con Otros Sitios: varios de los algoritmos que usan los sitios de búsqueda y los directorios para incluir un sitio y mostrarlo en los primeros lugares, revisan la cantidad de enlaces «desde sitios importantes» que llegan al sitio.

o Ofrecer Elementos de Fidelización: se refiere a ofrecerle a los usuarios motivos diversos para volver al sitio; puede ser un boletín de noticias en el que se envíen enlaces con contenidos de interés; información útil de áreas relevantes, etc.

Plan de Lanzamiento

Actividades Offlineo Imagen Corporativa: la dirección del Sitio Web debe

incorporarse en la imagen corporativa de la organización para que todo documento la incluya (desde informes internos, hasta tarjetas de visita). De esta manera, se logrará una unidad muy concreta en términos comunicacionales y se dejará diseminada esa dirección en todos lugares, permitiendo difundirlo y hacerlo conocido entre quienes deseen ponerse en contacto o revisar información provista por la organización.

o Actividades de Prensa: en el lanzamiento del Sitio Web se debe ofrecer un elemento tecnológico atractivo y no sólo confiar en que la aparición del Sitio Web sea la noticia. Por lo anterior, se debe definir cuál de las funcionalidades del sitio podrá ser destacada, para transformarla en la noticia que convoque a los medios.

¿Cómo distribuir los contenidos en un sitio web?

Los 4 pasos básicos para organizar la información son:

• Dividir la información en unidades lógicas.• Establecer una jerarquía por orden de importancia

y generalidad.• Utilizar esta jerarquía para establecer relaciones

entre las piezas de información.• Analizar el sistema estética y funcionalmente.

Subdividiendo la InformaciónLos usuarios prefieren pequeñas piezas de información que se pueden hojear y localizar rápidamente.

-Los usuarios no leen las páginas en pantalla, las miran por encima . Si son largas, las guardarán o las imprimirán.

-Las pequeñas piezas de información son perfectas para los enlaces. Quien pulsa un enlace espera encontrar información específica relacionada con el tema que estaba viendo, no un libro entero de información que filtrar.

-Tampoco es necesario subdividir la información demasiado o los usuarios se cansarán de pulsar enlaces. El máximo para una Web con documentos de referencia es de una a 3 páginas de información impresa.

-Un formato uniforme para organizar y presentar la información permite a los usuarios aplicar su experiencia anterior con el “Site” a la hora de explorarlo y buscar información, permitiéndoles en cierta manera, adivinar como está organizada la información.

Sitios Mal Diseñados

http://arngren.net/

http://hosanna1.com/

http://www.lingscars.com/

Sitios Bien Diseñados

http://www.presidencia.gob.mx/

http://canacine.org.mx/

http://www.floreria-zyanya.com/

Estructurar el Contenido de la Página

En árbol: Esta estructura está compuesta por una página principal que enlaza con otras páginas, las cuales, a su vez, enlazan con otras páginas de nivel inferior. De esta manera se agrupan las páginas web en niveles, de tal modo que para llegar del primero al último se debe pasar por todos los intermedios. Esta estructura es poco navegable si tenemos una web con muchas páginas, porque para ver las páginas de otra rama tenemos que retroceder hasta la página principal, haciendo la navegación muy pesada.

En lista: Esta estructura es la opuesta a la anterior. En ella no existe página principal ya que todas están en el mismo nivel. Para llegar a la última página hay que recorrer todas las anteriores. Es una estructuración muy adecuada para la presentación de manuales o aplicaciones donde el usuario deba recorrer forzosamente una serie de páginas web para conseguir su objetivo.

Mixta: Esta estructura es una combinación de las dos anteriores. Las páginas están jerarquizadas en niveles, los cuales a su vez están conectados entre sí en forma de lista. Esta estructura es mucho más navegable y práctica, puesto que permite poder desplazarse de rama en rama sin necesidad de volver a la página principal para hacerlo.

En red: Esta estructura supone que todas las páginas de la web están conectadas entre sí, por lo que es una estructura más compleja y menos ordenada. Su ventaja es que desde cada página podemos ir a cualquier otra del sitio. No obstante, requiere mucha planificación para evitar ofrecer al visitante un caos de enlaces innecesarios.

Elementos que Contendrá el Proyecto Web

1. Título del Proyecto.2. Objetivos (general y particulares).3. Definición de Servicios Interactivos (¿cuáles y por qué).4. Planteamiento de posible personal adscrito al proyecto en

el caso hipotético de que se contara con presupuesto, para operarlo de manera formal (sólo mencionar qué tipo de personal y argumentar brevemente el por qué).

5. Definición de Audiencia/Arquetipos de Usuario (plantear 4 arquetipos de usuario).

6. Índice de contenidos.7. Mapa de sitio.8. Wireframe (sólo del Home)9. Boceto de Diseño (sólo del Home)10.Checklist11.Actividades de Lanzamiento (sólo online)12.Publicación del proyecto web en wix.com