Fases de Diseño de un sitio Web: II. Fase Preproducción

Un sitio web es un conjunto de documentos que guardan cierto tipo de relación entre ellos y están enlazados entre sí mediante vínculos o hiperenlaces.

Trabajo en local vs. trabajo en remoto

Para que un sitio web esté accesible desde Internet es necesario colocar los ficheros que lo componen en un servidor web público. Existen servidores que permiten publicar información en Internet de forma gratuita (http://www.gratisweb.com, http://www.yahoo.es). Al final de curso utilizaremos uno de esos servidores para publicar las páginas creadas a lo largo del curso. Normalmente no se trabaja directamente sobre los ficheros ubicados en el servidor web sino que se trabaja en un ordenador local.

El procedimiento habitual consiste en crear una carpeta o directorio en nuestro ordenador local con todos los ficheros del sitio web. Se crean, editan y modifican esos ficheros en local y cuando estamos satisfechos con el resultado es cuando nos conectamos a internet para copiar los ficheros en el servidor público. Como un sitio web es algo "vivo" que crece y cambia en el tiempo es necesario conectarse periódicamente a Internet para publicar las modificaciones realizadas.

Organigrama de contenidos

Una de las tareas importantes en la fase de diseño es establecer el organigrama que representará la estructura de contenidos de nuestro sitio web y que quedará parcialmente reflejada en la jerarquía de carpetas donde almacenemos todos los ficheros que vayamos creando. En el mundo de la impresión donde existen un conjunto de reglas establecidas en cuanto a la forma de estructurar el contenido (índice por materias, índice alfabético, capitulos, secciones, subsecciones, etc.) tanto los escritores como los editores y los lectores están familiarizados con la estructura de la información y la forma de acceder a ella. El web, sin embargo, es un nuevo espacio de información y podemos encontrar formas muy diversas de organizar el contenido.

Una de las formas de más frecuentes de organizar el contenido en la web es la estructura en forma de árbol donde quedan reflejadas las categorías y subcategorías de la información a almacenar. Es importante tener en cuenta que no todo lo que le parece lógico al diseñador del web le puede parecer lógico al futuro usuario, y ese es uno de los aspectos a tener en cuenta a la hora de estructurar el contenido. Uno de los errores típicos de las grandes compañías a la hora de diseñar sus sitios web es que estructuran la información reflejando la estructura interna de la empresa (departamentos, cargos, etc.) este tipo de estructura puede tener sentido para un empleado de la empresa pero carece de relevancia para un usuario que acceda por primera vez a esa página.

Algunos errores frecuentes

A continuación te ofrecemos algunos consejos para tratar de evitar los errores más frecuentes en la organización de tus contenidos:

• Evitar introducir demasiadas categorías. Un número muy grande de categorías puede confundir al usuario del web. Normalmente se recomienda no introducir más de siete que es el número máximo que puede reconocer un usuario medio.
• Evitar demasiados niveles de profundidad para una determinada categoría, conviene no superar los 4 niveles.
• Evitar utilizar estructuras establecidas que no tengan sentido para el usuario final (como por ejemplo la estructuración del web de una empresa atendiendo a sus departamentos.)

En la siguiente figura puedes ver cómo ha quedado la estructura de directorios para el sitio web de Telémaco. Cómo se trata de un sitio web sencillo sin demasiada información vemos que cada categoría se corresponde directamente con una página y sólo hemos necesitado crear directorios para archivar de forma independiente los ficheros multimedia.

El siguiente gráfico muestra el organigrama de contenidos que podría tener un sitio web más complejo como el del Departamento de Ingeniería Telemática de la Universidad Carlos III de Madrid .

Aplicación práctica

Tarea

Crea la estructura de contenidos de tu sitio web.

Procedimiento

1. Crea un directorio con el nombre de tu sitio web. En él almacenaremos todos los ficheros de contenido que vayamos creando.
2. Para hacerlo abre el explorador de Windows. Colocate en el directorio donde quieras almacenar tu sitio web pincha en un espacio en blanco con el botón derecho del ratón y te aparecerá un menú desplegable. Selecciona la opción nuevo -> carpeta y ponle nombre a tu sitio web. Conviene que el nombre no contenga espacios en blanco ni caracteres extraños. Si quieres que contenga varias palabras puedes separarlas con mayúsculas por ejemplo WebDeTelemaco.
3. Divide tu web en varias categorías.
4. Crea un directorio para cada una de ellas. Cada carpeta contendrá información de un conjunto de páginas relacionadas. Puedes crear subdirectorios si necesitas una clasificación adicional.
5. Crea directorios separados para los distintos tipos de ficheros multimedia. Por ejemplo una carpeta para imágenes, otra para archivos de audio, etc.
6. La estructura de directorios que crees en local será la que tengas también en remoto.
7. Crea también los ficheros de texto para cada una de las páginas que formarán tu sitio web. Para hacerlo sitúate en el directorio donde quieras guardar el fichero. Pulsa con el botón derecho del ratón y selecciona la opción nuevo -> Documento de texto. A continuación pon nombre al fichero que acabas de crear. Recuerda que el fichero debe tener extensión .html, es decir, deberá llamarse nombre.html donde deberás sustituir nombre por el nombre de cada una de tus páginas web. Evita los espacios en blanco en los nombres de ficheros.
8. Los ficheros de texto que acabas de crear son los que iremos editando más adelante para añadir los contenidos.
9. Escribe un documento llamado EstructuraWeb explicando la estructura de contenidos de tu sitio web. Este documento formará parte del documento DisenioWeb que tendrás que entregar al final de este módulo.

Tan importante como la estructura de un sitio web es su identidad. Gran parte de la identidad de un sitio web viene dada por su diseño de presentación. Forman parte importante del diseño de un web aspectos como la estructura del texto, la longitud y orientación de la página, los elementos gráficos que contiene, los iconos, tipografía, etc.

Los sitios web corporativos crean su propia identidad mediante una guía de estilo donde definen claramente todos estos aspectos.

Para decidir los colores de un sitio web conviene tener en cuenta algunos efectos conocidos como por ejemplo que el color celeste es uno de los que peor se lee en la pantalla de un ordenador. En la siguiente tabla puedes ver algunos de estos efectos:

Ejercicio

Tarea

Analiza los aspectos de presentación de distintos sitios web y reflexiona sobre cómo afectan los aspectos de presentación en el usuario.

Procedimiento

1. Lee el siguiente artículo titulado " Ideas de Jacob Nielsen sobre cómo escribir para la web " donde encontrarás principios importantes de diseño web. Este artículo es una traducción de la versión original en inglés que puedes encontrar en la página web de Jacob Nielsen http://www.useit.com/alertbox/9703b.html
2. Conéctate a la página web de Telefónica y Cola-Cola y observa su tipografía y colores característicos.
3. Conéctate a la página web del Departamento de Ingeniería Telemática y navega por sus distintas secciones fíjate en algunos de los siguientes aspectos de diseño:
   • Observa los colores característicos.
   • Observa las fotos que aparecen en la parte superior de cada página y que tratan de ilustrar brevemente el contenido de la página. Fíjate por ejemplo en la foto que aparece en el apartado personal. Muestra un conjunto de personas de distintas edades que dan la impresión de trabajar en equipo. Este tipo de fotografías pueden ayudar a transmitir una imagen del departamento.
   • Observa los tonos azules y grises que quieren dar un aspecto tecnológico.
   • Fíjate en el fondo cuadrículado que aparece en todas las fotos.¿Qué efecto te produce?
4. Discute con tus compañeros en el foro el diseño de los tres sitios web consultados teniendo en cuenta los principios de diseño que leiste en el artículo de Jacob Nielsen y el efecto que producen en el visitante los colores y otros aspectos de diseño.

El diseño de un sitio web comienza normalmente con un boceto en papel de las páginas más importantes donde se reflejan entre otras cosas:

• La distribución del espacio
• La elección de la paleta de colores
• Los elementos gráficos
• La tipografía

Aquí te mostramos a modo de ejemplo algunos de los bocetos realizados para las distintas páginas que formarán el sitio web de Telémaco.

Aplicación práctica

Tarea

Realiza el boceto de cada una de las páginas que compondrán tu sitio web. Conviene que incluyas al menos una página con una enumeración de elementos (similar a la página DireccionesDeInteres.html) para practicar el uso de las listas en HTML y una página con una distribución espacial compleja (similar a la página Fotos.html o Aficiones.html) para practicar el uso de las tablas en HTML.

Procedimiento

1. Observa los bocetos del sitio web de Telémaco.
2. Realiza en papel o con una herramienta gráfica (PowerPoint, Paint) el diseño de las páginas de tu sitio web. Haz sólo un primer boceto que te ayude a tener las ideas claras, en la siguiente etapa cuando analicemos la estructura de navegación de nuestro sitio web será necesario modificar ligeramente el diseño realizado para incluir los elementos de navegación (índices, etc.)
3. Puedes realizar tu diseño basándote en alguna de las páginas que has consultado hasta ahora si se ajusta a las necesidades de tu web.
4. Escribe un documento llamado PresentacionWeb explicando el diseño de presentación de tu sitio web (distribución espacial, colores, etc.). Si te has basado en el diseño de algún sitio web existente indica en el documento la dirección de las páginas que inspiraron tu diseño.
5. Guarda el boceto de tu sitio web y el documento explicativo (PresentacionWeb) Ambos documentos formarán parte del documento DisenioWeb que tendrás que entregar al final de este módulo.

Orientarse en el ciberespacio

El diseño de navegación consiste en establecer mediante hiperenlaces los caminos que puede recorrer el visitante de nuestro web para acceder a toda la información que contiene. Para hacer el diseño de navegación debemos responder a preguntas como: ¿cuál es la página de entrada a nuestro web? o ¿qué secuencia de páginas tiene que recorrer el visitante para llegar a determinada información o realizar determinadas tareas?

El diseño de navegación es fundamental para evitar en la medida de lo posible la desagradable sensación de "estar perdido en el ciberespacio". A diferencia de lo que ocurre con un libro en el que el usuario sabe perfectamente cómo moverse por la información en diferentes situaciones (para leerlo, para consultar un capítulo o una imagen concreta, para buscar cierto término en el índice analítico, etc.), el hiperespacio no tiene una estructura predefinida y es muy importante proporcionar al usuario mecanismos que le permitan moverse a través de la información y que sean lo más sencillos, prácticos e intuitivos posible ya que el visitante de nuestro web debe ser capaz de utilizarlos desde la primera vez que accede.

Una de las cosas a tener en cuenta a la hora de diseñar la navegación de un sitio web es que no todo lo que le parezca lógico al diseñador del web no tiene porqué parecerle lógico al usuario. Al igual que en el resto de las etapas de diseño es fundamental tener presentes las características de nuestra audiencia. En las siguientes secciones analizaremos los distintos tipos de navegación (local, global y paralela) y algunos mecanismos para presentarlos en nuestras páginas (enlaces, cuadros, metáforas, etc.)

Ejercicio

Tarea

Lee el capítulo relacionado con los aspectos de navegación de la guía de estilo titulada "Consejos para crear páginas web. Usabilidad"

Procedimiento

1. Puedes encontrar la guía completa en esta dirección: http://www.webestilo.com/guia/.
2. Puedes consultar los aspectos relacionados con el diseño de navegación seleccionando en el margen izquierdo los tres enlaces que aparecen en el apartado estructura (Estructura, Tipo de Estructura y Navegación).

Distintos tipos de navegación

Cuanto mayor es un sitio web más importante resulta utilizar una navegación clara y consistente. A continuación te presentamos algunas de las formas de navegación más frecuentes en el diseño de un sitio web que hemos denominado navegación global, local y paralela.

Entendemos por navegación global la que permite que el visitante se mueva entre las categorías principales del sitio web. Conviene que este mecanismo de navegación esté disponible desde todas las páginas.

Entendemos por navegación local aquella que permite al visitante moverse dentro de una única página. Este mecanismo es necesario para páginas muy grandes, y resulta útil siempre que la página no se pueda ver de una sola vez y requiera utilizar la barra de desplazamiento. Los sistemas de navegación local funcionan como un índice para buscar información dentro de una misma página. Este índice puede estar al principio de la página o aparecer en una barra lateral.

Cuando los sitios web son muy grandes y tienen varias subcategorías para cada categoría es necesario introducir otro mecanismo de navegación conocido como navegación paralela. Este mecanismo nos permite movernos por las subcategorías de una misma sección. Conviene que este mecanismo esté accesible desde todas las páginas.

Mecanimos para implementar los distintos tipos de navegación.

Los distintos tipos de navegación que hemos descrito en el apartado anterior pueden presentarse de varias formas (Enlaces de texto, imágenes simulando botones, barras laterales a modo de índice, etc.)

Además de estos mecanismos tradicionales de navegación que has podido ver en los webs consultados hasta ahora existen algunas formas de presentación más novedosas como las metáforas aunque no todos los diseñadores están de acuerdo en cuanto a la conveniencia o no de su uso.

La navegación basada en metáforas consiste en proporcionar un tema visual central y utilizarlo a lo largo del sitio de forma consistente de modo que los diferentes elementos del dibujo nos sugieran el tipo de contenido que se puede ver al pulsar sobre ellos. El uso de las metáforas no siempre es adecuado, a veces este tipo de diseño eliminan incluso el panel de control con los botones del navegador y el usuario se encuentra en su pantalla con una imagen sobre la que no siempre sabe como moverse. La compañía Metáfora Digital se dedica a diseñar sitios web siguiendo esta filosofía. Desde su página (http://www.metaforadigital.com/) puedes consultar algunos de los sitios diseñados con esta perspectiva (Maximo Dutty, La Caixa, Bayer, etc.) y sacar tus propias conclusiones.

Ejercicio

Tarea

Analiza y discute con tus compañeros los distintos tipos de navegación de un sitio web.

Procedimiento

1. En estas imágenes te mostramos la estructura de navegación del web del departamento de ingeniería telemática. Pulsa sobre el título de cada imagen para ver la página real en funcionamiento.
   
   

   Página de primer nivel

   
   

   Página de segundo nivel

   
   
   
2. Discute con tus compañeros en el foro Aspectos de Diseño las distintas formas de navegación de la página que te presentamos o de otras páginas que conozcas. Los mecanismos que te parecen más útiles y más intutitivos teniendo en cuenta lo que has leido hasta ahora sobre diseño de la navegación.

A continuación te mostramos el ejemplo de navegación que se ha diseñado para el sitio web de Telémaco completando el boceto que diseñamos en la fase anterior (diseño de presentación).

Aplicación Práctica

Tarea

Diseña los mecanismos de navegación para tu sitio web y su forma de presentación y envía el documento final de diseño. Es conveniente que el diseño de navegación incluya:

• Un mecanismo de navegación global (en todas y cada una de las páginas) que te permita enlazar con los apartados más importantes de tu web.
• Un mecanismo de navegación local a modo de índice (sólo en las páginas que sean más largas) que permita moverse dentro de la página desde el índice a cada una de las secciones y desde cada una de las secciones al índice.

Procedimiento

1. Observa los mecanismos de navegación diseñados para el sitio web de Telémaco.
2. Modifica dibujando en papel o con una herramienta gráfica (PowerPoint, Paint) el boceto de presentación que realizaste en la fase anterior para cada una de tus páginas para incluir los aspectos de navegación.
3. Escribe un documento llamado NavegacionWeb explicando el diseño de navegacion (global, local, etc.) de tu sitio web.
4. Puedes realizar tu diseño basándote en alguna de las páginas que has consultado hasta ahora si se ajusta a las necesidades de tu web, en ese caso debes incluir la referencia a dicha página en la explicación de tu diseño.
5. Escribe un documento llamado DisenioWeb. Este documento deberá contener al menos las siguientes secciones:
   • Titulo
   • Objetivo del sitio web (copia en esta sección el contenido del documento ObjetivosWeb)
   • Estructura del sitio web (copia en esta sección el contenido del documento EstructuraWeb)
   • Diseño de presentación (copia en esta sección el contenido del documento PresentacionWeb)
   • Diseño de navegación (copia en esta sección el contenido del documento NavegaciónWeb)
   • Boceto (si tu boceto está en papel indícalo en esta sección)
6. Envia al profesor el documento DisenioWeb. Para ello utiliza el enlace que aparece al principio de este documento.
7. Si has realizado el boceto de diseño en papel y no puedes escanearlo. Envíalo por correo ordinario al profesor del curso utilizando la siguiente dirección.

   M. Carmen Fernández Panadero
   Universidad Carlos III de Madrid
   Avda. Universidad, 30
   28911 Leganés
   Madrid. España