Estructura y diseño de un sitio web

Después de recopilar el contenido (textos, imágenes, logotipos, etc.) toda esta información debe ser organizada de forma que se cumpla con los objetivos que el cliente desea, es por esto que se dibuja: El diagrama de flujo, la estructura de la página principal etc.

• Gráfico de Flujo: se encarga de especificar la estructura conceptual y la organización del sitio y como el usuario fluye a través de tareas definidas y los pasos respectivos a realizar.

  
• Estructura de la Página: Es el elemento clave de la experiencia del usuario, se representa con un rectángulo, es una unidad de representación y se utilizan etiquetas para identificar páginas y archivos de datos de igual forma las relaciones se representan por líneas simples o conectores los cuales pueden ser etiquetados cuando una acción deba ser aclarada. Un elemento área, identifica un grupo de páginas que comparten una característica en común.
  
  
  
• Mapa del sitio: Muestra un mayor nivel de representación del sitio. Debe mostrar áreas principales, archivos HTML, páginas dinámicas de cada sección etc.

  
• La navegación debe ser clara y consistente los botones, hipervínculos y gráficos utilizados deben ser coherentes y deben indicar al usuario donde se encuentran dentro del sitio, adonde necesitan ir y cómo regresar a donde se encontraban.
• Escenario o Vistas de Usuario: después de los diagramas, se determinan las tareas que realizará el visitante típicamente. Implementar estas tareas permite observar la usabilidad del sitio también es recomendable reducir el número de pantallas y rutas que el usuario complete sus tareas más rápido.

Composición del diseño visual: Es muy importante lograr un diseño correcto para una página web, a fin de mantener la consistencia de todo el sitio. El diseñador puede tomar algunas libertades con los elementos de página, pero sin olvidar la información esencial ni modificar las partes fundamentales.

El Diseño Visual Parte Importante de la Arquitectura de la Información

El diseño gráfico de una página web es un aspecto de gran importancia. La imagen transmitida por el diseño de una página web debe causar una impresión positiva en el visitante del sitio web y debe captar su atención, ofreciendo una imagen que genere confianza en dicho visitante.

Como dice el refrán, “Una imagen vale más que mil palabras”.

Un logo atractivo también puede ser un elemento importante, ya que debe atraer la atención del visitante

Partes importantes del diseño visual de una página web

El texto es un elemento común en el diseño Es importante considerar cosas como:

• Opciones de letras: los diferentes tipos de letras dicen cosas diferentes sobre un diseño. Algunas lucen modernas. Asegúrate de que estás utilizando la herramienta adecuada para el trabajo.
•  Tamaño de letras: Asegúrate de que el tamaño de tus letras sean consistentes, suficientemente grandes para leerse y proporcionales para que el encabezado y el sub-encabezado resalten apropiadamente.
•  Espaciado: el espacio entre líneas y lejos de otros objetos es de importante consideración. Pero también deberías de pensar en el espaciado entre letras, aunque en Internet esto es de importancia menor, ya que no se tiene mucho control sobre ello.
• Anchura de las líneas: Generalmente las líneas de tu texto no deberían ser tan largas. Mientras más largas son, más difíciles son de leer. Pequeñas Columnas funcionan mucho mejor (así como ponen sus textos los periódicos).

• Color: Saber escoger el tipo de color de la página web que es punto importante, a la hora de escoger un color de fondo tener en cuenta que el texto debe de poder ser visible para el usuario.

•  Parrafeando: justificar el texto de tal manera que se puede leer y comprender la lectura. 

En cuanto a la navegación es importante en el diseño visual.  Una de las experiencias más frustrantes que puede tener en un sitio web es cuando no sabes en donde estás ni para dónde vas. Los botones para navegar en el sitio deberían ser fáciles de encontrar – hacia la parte de arriba de la página y fáciles de identificar. Deberían verse como botones de navegación y estar bien descritos. El texto de un botón debe estar bien claro en cuanto hacia donde te está llevando. Aparte del sentido común, es importante también hacer usable la navegación.

Otro punto importante también es la usabilidad. Con la tanta información e interacción que hay que efectuar en un sitio web, es importante que el  diseñador, lo proveas para todo. Eso significa que hagas tu sitio web utilizable.  Hacer prototipos es una herramienta común usada en diseño para de hecho “probar” un diseño. Esto se hace porque con frecuencia cuando utilizas un diseño, se llegue a notar pequeñas cosas que pueden hacer una gran diferencia.

Mantener las cosas alineadas es tan importante en el diseño Web, se debe tratar de mantener las cosas bien colocadas en una página web. La alineación hace tu diseño más ordenado y digerible, al igual que lo hace ver más pulido.

Sistemas de organización de contenidos

 

¿Para qué organizamos la información?

Organizamos la información de manera que las personas “usuarios” puedan encontrar las respuestas correctas a sus preguntas

 

La función de un arquitecto de información es organizar grandes cantidades de contenidos con el objetivo de que el usuario pueda manejarlos, navegar por ellos fácilmente y satisfacer sus necesidades de información. En otras palabras, organizar el desorden, hacer recuperable, localizable o accesible la información

Sistema de Navegación

 

 

La estructura invisible que sustenta un sitio web se teje a través de cinco elementos: sistemas de organización, de etiquetado, de navegación, de búsqueda y vocabularios o lenguajes documentales. Estos últimos cumplen la función de facilitar la recuperación de la información y se plasman en los metadatos

Los procesos de evaluación juegan un importante papel en la arquitectura de la información: el enfoque centrado en el usuario conlleva constantes pruebas para conocer cómo la audiencia interactuará en nuestro sitio y mejorar en consecuencia la experiencia de uso.

 

Sistema de Navegación

 

El sistema de navegación es importan ya que permite  prevenir que los usuarios puedan hallarse perdidos frente a nuestro web y experimenten sensaciones de confusión, frustración e ira, entre otras.

 

Por es importante tener en cuenta lo siguientes puntos.

 

·         Establecer un modo de ir de un sitio a otro dentro de la web

 

·         Comunicar al usuario la relación entre el contenido que está visualizando y la navegación del sitio. Debemos permitir que el usuario sepa en todo momento dónde se encuentra, hacia donde puede ir desde este punto y que partes del sitio ha visitado ya.

 

·         Permitir volver a la página de inicio rápidamente.

 

Diseño web

El diseño web es una actividad que consiste en la planificación, diseño e implementación de sitios web. No es simplemente una aplicación de diseño convencional, ya que requiere tener en cuenta la navegabilidad, interactividad, usabilidad, arquitectura de la información y la interacción de medios como el audio, texto, imagen, enlaces y vídeo.

La unión de un buen diseño con una jerarquía bien elaborada de contenidos, aumenta la eficiencia de la web como canal de comunicación e intercambio de datos, que brinda posibilidades como el contacto directo entre el productor y el consumidor de contenidos.

El diseño de páginas web se trata básicamente de realizar un documento con información hiperenlazado con otros documentos.

Estos documentos o páginas web pueden ser creadas:

• Creando archivos de texto en HTML, PHP, Asp, Aspx, JavaScript, JSP, Python, Ruby.
• Utilizando un programa WYSIWYG o WYSIWYM de creación de páginas.
• Utilizando lenguajes de programación del lado servidor, para generar la página web.

Etapas

Para el diseño de páginas web debemos tener en cuenta tres etapas:

1. El diseño visual de la información que se desea editar: En esta etapa se trabaja distribuyendo el texto, los gráficos, los vínculos a otros documentos y otros objetos multimedia que se consideren pertinentes. Es importante que antes de trabajar sobre el computador se realice un boceto o prediseño sobre el papel. Esto facilitará tener un orden claro sobre el diseño.
2. Estructura y relación jerárquica de las páginas del sitio web: Una vez que se tiene el boceto se pasa a 'escribir' la página web. Para esto, y fundamentalmente para manejar los vínculos entre documentos, se creó el lenguaje de marcación de hipertexto o HTML. Los enlaces que aparecen subrayados en este documento y otros de Wikipedia son ejemplos de hipertexto, puesto que al pulsar sobre ellos conducen a otras páginas con información relacionada. La importancia de la estructura y arborescencia web radica en que los visitantes no siempre entran por la página principal o inicial y en ese caso el sitio debe darle la respuesta a lo que busca rápido, además permitirle navegar por el sitio.
3. Posicionamiento en buscadores o SEO: Ésta consiste en optimizar la estructura del contenido para mejorar la posición en que aparece la página en determinada búsqueda. Etapa no gustosa por los diseñadores gráficos, porque a diferencia del texto, aún para el año 2012 no se pueden tener nuevos resultados en los buscadores con sitios muy gráficos.

El HTML consta de una serie de elementos que estructuran el texto y son presentados en forma de hipertexto por agente de usuario o navegadores. Esto se puede hacer con un simple editor de textos (debe guardarse como texto plano, sin ningún tipo de formato y con extensión .html o .htm). Aprender HTML es relativamente fácil, así que es sencillo crear páginas web de este modo. Esta era la única manera de generarlas hasta que aparecieron, a mediados de 1996, algunos editores visuales de HTML, como MS FrontPage y Adobe Dreamweaver. Con estas herramientas no es necesario aprender HTML (aunque sí aconsejable), con lo cual el desarrollador se concentra en lo más importante, el diseño del documento.

Accesibilidad

El diseño web debe seguir unos requerimientos mínimos de accesibilidad web que haga que sus sitios web o aplicaciones puedan ser visitados por el mayor número de personas. Para conseguir estos objetivos de accesibilidad se han desarrollado pautas como las del W3C: Pautas de accesibilidad al contenido Web 1.0 WCAG.

Análisis de sistemas de navegación de sitios Web

Muchos de los sitios Web que encontramos en Internet presentan una serie de enlaces hacia sus diferentes secciones a lo largo de todas sus páginas, como una manera de mostrar al usuario los contenidos del sitio. Estos menús de navegación pueden presentarse en diferentes formatos y organización, ya sean simples listas de opciones, sistemas gráficos, sistemas de pestañas, menús desplegables, etc.

Hoy en día, la gran popularidad experimentada mediante el uso de la Internet en los últimos años ha
provocado un crecimiento desordenado de la red y que infinidad de sitios Web hayan sido construidos sin tener en cuenta o perdiendo de vista su principal función. Este hecho se ha visto aumentado por la facilidad de uso de los programas de maquetación de páginas Web y el acercamiento de las tecnologías Web al gran
público en general, lo que ha provocado que infinidad de sitios Web hayan crecido sin tener en cuenta su principal función como sistemas que deben permitir a los usuarios recuperar y visualizar información.

Uno de los puntos fundamentales para la buena organización y visualización de la información son los sistemas de navegación, que se presentan como conjuntos de enlaces cuya finalidad consiste tanto en permitir la navegación por los contenidos, como presentar al usuario la estructura de la información para facilitar la comprensión y uso del site.

Para resumir, uno de los principios básicos de la Web estriba en el hecho de que los usuarios pueden moverse libremente por las diferentes secciones que componen un sitio Web o entre los infinitos volúmenes de información diseminados por millones de páginas Web distribuidas en servidores de todo el mundo.

Esta intrínseca característica de Internet provoca que en numerables ocasiones el usuario se sienta perdido en el ciberespacio y sienta incapacidad de encontrar el camino hacia la información que realmente le interesa. Tal y como comenta Jakob Nielsen en el libro “Usabilidad. Diseño de sitios Web” esta sensación de pérdida se produce cuando el usuario:

• No sabe dónde está: El usuario desconoce su situación actual en relación a la estructura global de la información del sitio Web y no percibe la relación que hay entre la página actual y el resto de páginas.
• No sabe dónde ha estado: El usuario desconoce la ruta de navegación que ha seguido hasta la posición actual y por consiguiente no es capaz de identificar las páginas ya visitadas.
• No sabe a dónde puede ir: El usuario no puede identificar los enlaces que contienen información relacionada con la página actual.

Es por eso, que debemos ayudarle a nuestros estudiantes a saber navegar, escoger y seleccionar la pagina correcta o medio correcta, esto es difícil señalarlo pero de igual manera mostrarte los mecanismos y lo que se debe tomar en cuenta y saber si es una adecuada pagina para revisar o no.

Interfaz Del Diseño Visual:

 

 

 

Por otra parte otro concepto de gran importancia es el diseño de interfaces el cual es el proceso de diseñar la representación física de la interfaz tal  como los usuarios la verán en sus pantallas, su objetivo principal es comunicar una funcionalidad, mediante el diseño y orden de  los elementos visuales de modo que se comprenda la aplicación y la forma correcta de operar la misma. Para lograr esto es importante seleccionar los contenidos apropiados, de forma que todo tenga sentido e igualmente pueda brindar la facilidad de uso en un determinado  módulo de aprendizaje.

 

Es de vital importancia que durante esta etapa tanto el diseñador de la interfaz, como el especialista en contenidos educativos, trabajen de forma coordinada para establecer los criterios y principios de acuerdo a la organización y navegación del sitio a desarrollar. De esta forma el especialista en contenido debe darle seguimiento al diseño visual como experto en la información educativa suministrada para evitar el exceso de información y gráficos que distraen el verdadero sentido del aprendizaje del recurso.