Color en las paginas web

El diseñador de páginas web debe tener en cuenta que el color es mucho más que un elemento decorativo. En el diseño web, siempre se debe pensar

que la creación que se está llevando adelante tiene como finalidad gustar al destinatario,  el usuario de la página web, y no simplemente satisfacer el

gusto del propio creador o de su cliente.

Al elaborar una página web debemos tener en cuenta el tipo de usuario que la misma va a tener. El gusto por los colores y sus diferentes

combinaciones se encuentra íntimamente relacionado con la edad, nivel socio-económico, la cultura a la que pertenece, nivel educativo e incluso el

país o región del mundo a la cual se pertenece.

Todos estos elementos deben ser tenidos en cuenta a la hora de diseñar una página web, no solo para definir los colores que se emplearán en el

diseño. Los colores tienen diferentesimbología según la cultura a la que se pertenezca y el gusto por los mismos es variable con la edad.

Los colores también influyen en el estado de ánimo de las personas. Mientras que algunos colores tienden a dar sensación de paz y tranquilidad, otros

resultan irritantes o estimulantes.

No se debe despreciar el efecto psicológico que los colores de nuestra página web tendrán sobre nuestros usuarios. La mayoría de los usuarios de

internet basan su navegación en la web en aspectos que están más ligados al  sub-consiente que a aspectos racionales, sobre todo si la navegación

está relacionada con el ocio.

Uso de los colores enfocado en los usuarios según su edad

No hay que ser un gran observador para ver cuales son los colores preferidos por las personas de acuerdo a su edad.

Si observamos a un grupo de jóvenes, veremos que se visten con colores fuertes o tienen algunos elementos de este tipo de colores. Los niños

también se sienten atraídos por los colores fuertes. Si observamos los colores con los que se diseñan los juguetes, veremos que en éstos predominan

esta clase de colores.

Si nos encontramos diseñando una página web destinada a niños o adolescentes, debemos tener en cuenta este gusto por los colores fuertes. Si

diseñáramos una página web destinada al público infantil con colores pastel o con gran influencia de los grises, seguramente los usuarios ni siquiera

terminarán la carga de la misma cuando ya estén buscando otra.

El siguiente es un ejemplo de una página web diseñada para público infantil cuyos colores son los adecuados:

El empleo de colores fuertes y un marcado contraste caracterizan a esta página, que es notoriamente destinada a un  público infantil. En las páginas

destinadas a los adolescentes, si bien los colores pueden ser también llamativos, puede apreciarse el empleo de otros colores.

El público adulto tiene por lo general una tendencia a disfrutar de colores más sobrios. En las páginas destinadas a este tipo de público, la gama de

colores muestra una clara tendencia a alejarse de los colores estridentes. A modo de ejemplo, mostramos la siguiente página:

El empleo del color gris acompañado de verdes en tonos opacos, hace que esta página sea mayoritariamente del gusto de un público adulto. La

austeridad del diseño también denota claramente el tipo de público para el cual está destinada.

Uso de los colores enfocado en los usuarios según el género

Aún a edades tempranas, hay diferencias en la predilección de colores según el género. En el caso de los adultos, mientras que las mujeres tienen

tendencia a preferir colores suaves y fríoso una combinación de estos, en los hombres la tendencia indica que prefieren los colores cálidos, como el

rojo o el naranja.

Esto es aplicado en muchos tipos de páginas web. Por ejemplo, es notorio que las páginas destinadas a los deportes tienen combinaciones de colores

cuya base son los colores cálidos, mientras que en páginas cuyo público predominante es el femenino, como páginas de cocina, jardín, hogar y modas,

las preferencias de los diseñadores profesionales se inclinan por los colores suaves y fríos.

Usos de los colores según otros tipos de público

El nivel socio-cultural también influye en la preferencia de colores. Mientras que el público con un nivel educativo y económico entre medio y bajo tienen

una marcada tendencia a gustar de los diseños confeccionados con colores primarios y fuertes, el público con mayor nivel educativo y económico

prefiere los colores más apagados.

El significado de los colores es muy variable entre diferentes culturas, por lo que la ubicación geográfica de los usuarios también debe ser tenida en

cuenta a la hora de seleccionar la paleta de colores.

Por ejemplo, mientras que en occidente las bodas y las vestimentas de las novias tienen una íntima relación con el color blanco, el mismo color en

culturas orientales está vinculado con los funerales.

¿Cómo hacer que la paleta de colores tenga el efecto deseado?

Una vez definida la paleta de colores para la página, debemos ver como hacemos para lograr que estos colores tengan el efecto visual deseado. No

basta con colocar el color en los diferentes elementos de la página web, sino que además debemos hacer que estos elementos sean fácilmente

visibles, empleando uno de los principios básicos del diseño web: el contraste.

Para ello es absolutamente necesario el empleo de otros colores, que pueden ser neutros u opuestos a los colores que integran la paleta. Por ejemplo,

si empleamos imágenes con colores fuertes, estas imágenes pueden ser distribuidas sobre un fondo negro o de colores pálidos, haciendo que sea

sencillo contrastar y separar cada uno de los elementos. En el siguiente ejemplo hemos tomado una página de juegos para niños, la cual está diseñada

con elementos de colores fuertes y llamativos.

Para lograr que estos elementos se destaquen y sean de sencilla visualización, el diseñador ha empleado un fondo que va desde el blanco hasta el gris

pálido, lo que hace que los elementos, sobre todo las imágenes, se vean perfectamente definidas.

En una palabra, además de definir el tipo de color de nuestra página, debemos pensar en como resaltar los elementos coloreados empleando colores

opuestos para, por contraste, marcar, definir y resaltar cada uno de los elementos.

Empleo del color en el diseño de páginas web

El color tiene el poder de transmitir sensaciones. Es sabido que los rojos, amarillos ynaranjas resultan estimulantes e inclusive irritantes, mientras

que los verdes y los azulesbrindan una sensación de tranquilidad y sosiego.

Es por esta razón que los diseñadores web emplean las diferentes combinaciones de colores (en adelante denominaremos paleta de colores) para

que sean el complemento del mensaje que los contenidos de la página.

La adecuación de la paleta de colores al mensaje que la página debe transmitir a sus usuarios, es una de las claves del éxito de cualquier diseño. Los

usuarios de internet dedican muy poco tiempo a decidir si se quedan o no en una página, por lo que esta primera impresión resulta fundamental.

¿Qué es el color y cómo lo percibimos?

Nuestro cerebro tiene la capacidad de recibir las señales que le envían los ojos, cuya función es recibir la luz que llega del entorno. Los diferentes

materiales tienen la capacidad de reflejar y absorber diferentes colores (que en definitiva son diferentes longitudes de onda) y los reflejos de los

materiales estimulan los terminales nerviosos de nuestros ojos que es lo que nuestro cerebro recibe.

Así por ejemplo, cuando un material no refleja ninguno de los colores, nosotros percibimos el color negro; por el contrario, cuando un material refleja

todos o casi todos los colores, tenemos la percepción del color blanco. Cuando un cuerpo absorbe los colores rojos y azules, lo vemos de color verde;

cuando un cuerpo absorbe los colores verdes y azules, lo vemos rojo. Los diferentes grados de reflexión de los colores de la luz por parte de los

materiales son los que nos dan los diferentes matices.

Combinación de colores

Cuando un objeto o figura de un color dado se encuentra en contacto con otro objeto de color diferente, se produce lo que llamamos  combinación de

colores. En el diseño web, el contrasteentre los diferentes colores empleados para decorar y los colores propios de las imágenes, resulta

determinante a la hora de definir la estética de la página.

Las propiedades de los colores (luminosidad, valor, temperatura y saturación), hace que haya muchas variedades de colores y, por ende, muchas

posibilidades de combinaciones y contrastes.

El contraste entre elementos con diferencias en la luminosidad de los colores, puede verse muy claramente en la combinación del color blanco con el

negro, ya que estos son los extremos de la luminosidad.

El contraste por luminosidad es uno de los más empleados en el diseño de páginas web, fundamentalmente en el destaque de los textos sobre el

fondo sobre el que se colocan. En la siguiente figura, podremos apreciar combinación de colores cuya diferencia radica en la luminosidad.

También es posible emplear los demás tipos de contrastes de colores, como los contrastes por el valor, por la saturación, etc.

Cuando el contraste se produce entre colores complementarios, las diferencias son muy nítidas, aunque las diferencias que se producen son

extremas, lo que hace que debamos emplear este tipo de contraste de color con sumo cuidado, porque se pueden producir estridencias que pueden

dar problemas estéticos importantes al diseño en su conjunto.

Hasta hace unos años, era frecuente encontrar diseños web en los que se empleaba una combinación de colores seleccionados de una paleta muy

exigua, de apenas 256 colores, dada la tecnología que se empleaba para formar colores en los monitores. Con el avance tecnológico de los últimos

años, esto se ha resuelto y los diferentes hardware y software pueden crear e interpretar una gama de colores de varios millones de ellos, lo que

permite una gran libertad a los diseñadores web.

Tipografía aplicada al diseño web

Actualizado el 18/01/2010 < > 3 Cometarios

Resumen: Veamos las nociones básicas sobre como usar buenos estilos de texto a nuestras páginas web.

En el diseño de páginas web se emplean muchas clases de componentes. Las páginas web tienen como finalidad principal transmitir uno o varios mensajes al usuario de internet, para lo que debe emplear elementos adecuados para lograr este objetivo. Las imágenes y el texto son los elementos

más empleados para la mencionada transmisión de ideas, aunque con la aplicación de nuevas tecnologías adquieren cada vez más fuerza otros tipos de elementos, como los sonidos y los videos.

Esta transmisión de ideas en imágenes y texto se produce en forma totalmente diferente. Mientras que a través de la imagen puede accederse en forma mucho más rápida al mensaje o la idea que se quiere transmitir, el volumen y la profundidad de conceptos que pueden transmitirse con el lenguaje escrito en un mismo espacio es muchísimo mayor, por lo que ambos elementos resultan necesariamente complementarios para lograr una buena comunicación.

Integración de los textos en el diseño

Es frecuente encontrar en las páginas web un párrafo precedido de un elemento gráfico, generalmente una imagen. Este tipo de configuración es muy eficaz y consiste en llamar la atención del usuario sobre el elemento gráfico para luego completar la exposición de la idea mediante el empleo del lenguaje escrito. Veamos un ejemplo:

Imagen y texto

Apreciarán que lo primero que se distingue en este diseño, es cada una de las imágenes dispuestas junto a cada texto. Sin embargo, para poder comprender adecuadamente lo que se pretende transmitir, luego de haber sido seducidos por la imagen debemos leer el texto que se encuentra junto a ella.

Vista una página desde el punto de vista estético y en su conjunto, los textos se comportan también como un elemento gráfico, y poseen ,además, algunos atributos que comparten con éstos, como color, tamaño y forma. Es muy frecuente que elementos gráficos como imágenes o fotografías, cuenten con texto como parte de los mismos. Teniendo en cuenta todo esto, es obvio que no debemos considerar a los textos solo como el método de desarrollar una idea, sino que además debemos incluirlo en el diseño de la página desde el punto de vista gráfico. En la antigüedad, la escritura estaba formada por la representación de objetos, y en muchos casos, como las pinturas y relieves del antiguo Egipto, la escritura ya formaba parte del diseño estético de muchas obras de arte.

Tamaño, tipo. legibilidad y color de la tipografía

Tamaño de las fuentes

La escala para determinar los tamaños de las fuentes tiene una historia tan larga como la historia de la imprenta. En el diseño web, así como en el uso de fuentes en programas informáticos, se emplean los siguientes tipos de escalas para determinar el tamaño de las fuentes o tipografías como puede verse en el siguiente artículo. En el mismo artículo se puede además observar cómo se pueden determinar otros atributos de las fuentes, como la tipografía, el color y el grosor.

La determinación correcta del tamaño de las fuentes es muy importante, tanto para obtener una buena legibilidad de los textos, como desde el punto de vista estético. Existen muchas formas de establecer los tamaños de las fuentes, pero la más recomendable es establecer un tamaño de fuente para toda la página y luego hacer variaciones del tamaño empleando porcentajes o ems.

Las medidas más aconsejables para los textos, es de 11 puntos para la fuente y 13 puntos para el interlineado, ya que brindan una lectura descansada.

Tipos de fuentes

Dadas las características especiales de la visualización de textos en monitores, existen algunas consideraciones a tener en cuenta a la hora de establecer los tipos de fuentes con los que se visualizarán los textos de nuestra web. Existe controversia entre los especialistas en el tipo de fuente que es más legible. Mientras que algunos sostienen que las fuentes del tipo Serif (Times New Roman o Georgia) son más legibles, mientras que otros, la mayoría, sostienen que lo son las fuentes del tipo Sans Serif (arial, verdana, tahoma).

Lo más conveniente es el empleo de una sola fuente, o dos, para toda la página para luego modificar los atributos de la misma, de forma de poder establecer diferencias entre los diferentes tipos de texto (títulos, subtítulos, párrafos, etc.) que se establecerán en la página. En algunas ocasiones, dado que el diseño lo requiere, es posible que se deban establecer más de un tipo de letras, pero aún en este caso es conveniente limitar al mínimo la cantidad de fuentes utilizadas.

Se debe tener en cuenta que los navegadores y sistemas operativos soportan tipos de letras diferentes, por lo que será necesario establecer un tipo de letras y algunos suplentes. Esto se establece en el CSS de la siguiente manera:

font: italic bold 18px arial, helvetica, verdana;

Debe tenerse en cuenta que cada tipo de letra designado debe estar separada de las otras por una coma. Estableciendo las fuentes de esta forma, si el navegador no encuentra una fuente, establecerá la siguiente. Si el diseño requiere un tipo de letra determinado, el suplente debe tener características similares.

Legibilidad de la tipografía

Un aspecto importante en el diseño web es la legibilidad de los textos, ya que la dificultad para leerlos puede hacer que el visitante opte por retirarse de la página.

Por norma general se acepta que aquellas tipografías diseñadas para mejorar la legibilidad en los textos impresos no son convenientes para los textos de la web, ya que contienen elementos que necesitan de resoluciones mayores que las que ofrecen los monitores.

Para esto se han diseñado algunas tipografías que resultan particularmente útiles para ser aplicadas en el diseño de elementos que se van a visualizar en monitores, entre ellos las páginas web. Estas tipografías son, por ejemplo, Tahoma, Verdana y Georgia, que permiten una fácil lectura aún cuando se empleen tamaños pequeños. Veamos dos ejemplos de texto con tipografías de atributos iguales (pequeño tamaño) con excepción del tipo de fuente. En el primero se emplea Times New Roman, mientras que en el segundo es Arial:

Este es un texto

escrito en letras

de pequeño tamaño

Este es un texto

escrito en letras

de pequeño tamaño

Tampoco resulta conveniente el empleo de tipografías diseñadas con ornamentaciones, ya que las mismas pueden resultar de dificultosa lectura en tamaños normales o pequeños. Este tipo de fuentes ornamentales son útiles solo para emplear en los títulos y como parte de los gráficos.

También es importante recordar que muchas tipografías, a pesar de estar diseñadas para su empleo en informática, no se encuentran estandarizadas, por lo que algunos ordenadores podrían no visualizarlas, empleando en su lugar la tipografía que viene “por defecto” en el navegador.

Otro aspecto que influye en la legibilidad del texto en una página web es el uso de mayúsculas. Hay diseñadores web, generalmente novatos, que tienden a usar las mayúsculas como recurso para enfatizar textos en las páginas web. Para palabras sueltas es un recurso respetable, pero para frases o párrafos enteros, más que enfatizar dificulta la lectura por lo que el efecto se pierde. Mira este ejemplo:

LEE ESTE TEXTO ESCRITO EN MAYÚSCULAS Y VALORA TÚ MISMO SI CUESTA MÁS LEERLO QUE UN TEXTO NORMAL O NO.

Color de la tipografía de una web

El color de las tipografías, si bien deben integrarse con el resto del diseño, no debe rebajar la visibilidad de los textos. Para obtener una buena legibilidad de los textos que se publican en una página web, el color que se emplea en las fuentes debe contrastar nítidamente con el color del fondo donde es colocado. Un bajo contraste, hace que el texto se vuelva difícil de leer.

En el siguiente ejemplo, el color de los textos resalta claramente del fondo, de forma que se vuelve muy sencilla su lectura, haciendo que los usuarios puedan acceder a estos contenidos con total comodidad.

Contraste del texto

Las fuentes pueden tener diferentes grosores, pero las letras cuyo grosor es mayor a lo normal, solo deben ser empleadas en caso de que se quiera resaltar una parte del texto, ya que su uso continuo también resulta ser una dificultad para la lectura.

Disposición de los textos en una página web

En aquellos sitios donde se debe colocar textos de gran extensión, es conveniente que el mismo se encuentre dividido en párrafos no muy largos, de modo que el usuario pueda realizar un rápido recorrido por el texto y no se “pierda” con facilidad.

Además es aconsejable la utilización de diferentes niveles de titulación (<h1> <h2> <h3>, etc.) para ordenar la secuencia de los textos, lo que también facilita al usuario encontrar aquellas partes del texto que le resulten más atractivas.

Un ejemplo de ello es este mismo artículo, en el cual puede apreciarse la división en párrafos y la colocación de subtítulos, de forma que sea realmente sencillo orientarse en el texto, hacerse un resumen de los temas que se tratan y encontrar los mismos con facilidad.

La disposición en párrafos sirve además como elemento decorativo. La inclusión de un texto de grandes dimensiones puede hacer que el conjunto pierda estética. La inclusión de títulos y subtítulos con fuentes, tamaños y colores diferentes al resto del texto, no solo hace que sea más sencillo y agradable leerlos, sino que además, haciendo una correcta utilización de estos atributos, se colabora en el embellecimiento de la página.

También es útil la creación de listas, ya sean ordenadas / numeradas <ol> o desordenadas / sin numeración <ul>. Las listas se leen muy bien en pantalla, son fáciles de escanear y atraen la atención de visitante.

http://www.lawebera.es/diseno-web

12 ELEMENTOS QUE TODA PAGINA DE INICIO DEBE TENER

Publicado por Marketing Communications

19/02/13 13:24

inCompartir 1

Si usted está considerando realizar un rediseño de su Sitio Web o se está preguntando cómo generar más Leads de su sitio, hay varios elementos

críticos que nunca se debe olvidar incluir.

Lo que primero aconsejamos es revisar la página de inicio. Esta es sin duda, una de las zonas más importantes de un sitio web. Es la puerta de entrada

de una empresa frente al mundo virtual, y, en muchos casos, es donde se genera la mayor parte del tráfico.

Sin embargo, dada la importancia de la página de inicio, resulta sorprendente que muchos hacen un pobre trabajo de generación de Leads o ventas en

este lugar. Con tanta dedicación y atención, ¿por qué el rendimiento de estas páginas tan mediocre?

La respuesta es simple. Una página de inicio tiene que usar muchos sombreros y servir muchas audiencias que vienen de muchos lugares diferentes.

Es diferente a un Landing Page (página de destino) específica, donde se genera tráfico de un canal específico dado un mensaje específico para tomar

una acción específica. Los Landing Pages tienen una mayor tasa de conversión, ya que están dirigidos y son más relevantes para el visitante.

Pero ¿cómo se puede aumentar la tasa de conversión de una página de inicio si no esta dirigida a un público específico como es el caso de

un Landing Page?

Para que una página de inicio trabaje bien tiene que cumplir con su propósito y contener elementos claves que atraigan tráfico, eduquen a sus

visitantes, y conviertan a navegadores en compradores. Los 12 elementos esenciales que voy a discutir le ayudará a hacer precisamente eso.

12 Elementos que debe tener su Página de Inicio

1. Titular

En 3 segundos un Sitio Web debe responder necesariamente la pregunta ¿Qué ofrece este sitio? ¿Y qué hay para mi (beneficio)? Cree titulares claros

y simples.

2. Subtitulares

Sus subtitulares deben ofrecer una breve descripción de lo que usted hace y vende. Evite palabras técnicas o complicadas. Sea diferente y demuestre

valor. No hable sólo de usted y empresa.

3. Beneficios

No es importante solamente describir lo que hace, sino que porqué vale la pena, porqué importa. Los prospectos desean saber acerca de sus

beneficios y ventajas.

 

4. Llamado(s) a la Acción principal(es)

Incluya múltiples llamados a la acción (CTA) sobre la primera pantalla (antes de mover el scroll) con el objetivo de lograr conversiones. 

5. Funcionalidades

Adicionalmente a los beneficios, liste las funcionalidades claves, esto entrega a las personas una mejor idea de lo que tratan sus productos y servicios.

6. Testimoniales (Prueba de clientes)

Los testimoniales son una prueba poderosa de confianza. En Internet todo se basa en la confianza. Incluya lo que sus clientes opinan de su empresa.

Incorpore fotos y datos del cliente.

7. Indicadores de éxito

Adicionalmente a los testimoniales, premios y reconocimientos son importantes de incluir. Generan una primera buena impresión además de reforzar

confianza.

8. Navegadores

Para minimizar las tasas de rebotes, sus visitas necesitan crear un camino claro hacia su sitio desde la página de inicio. Asegúrese de que sus

navegadores estén visibles en la parte superior de su sitio. Y manténgalos simples.

9. Imágenes de soporte

Muchas personas son principalmente visuales. Asegúrese de utilizar imágenes que claramente refuercen lo que usted ofrece. Videos cortos son

importantes también. No utilice fotos de stock de gente de negocio tipo, eso pierde credibilidad.

10. Ofrezca contenido

Para generar más Leads de su Sitio y Página de Inicio específicamente, entregue contenido que sea valorado como un ebook, guía, artículo,

suscripción a un Newsletter, entre otros.

11. Recursos

Más del 70% de las visitas a su sitio no están listas para comprar. Asegúrese de ofrecer un vínculo a su centro de aprendizaje, recursos o biblioteca

donde puedan aprender más de lo que usted hace o vende.

12. Llamados a la Acción secundarios

Cuando las visitas terminan en la última de su página de inicio, no olvide incorporar un nuevo llamado a la acción (CTA). Esto aumenta la probabilidad

de conversión. Los CTA no son exclusivos de la parte superior.

http://www.leadsrocket.com/blog/bid/270375/12-ELEMENTOS-QUE-TODA-PAGINA-DE-INICIO-DEBE-TENER

Diseño de la estructura

En la Web no existe una metodología concreta para crear hiperdocumentos o sitios web completos. Por el contrario, existen multitud de estructuras organizativas tanto en lo visual como en lo conceptual, que pueden provocar una gran desorientación al usuario. Es por eso, que a la hora de elaborar un hipertexto se deben establecer una serie de reglas para que el sistema sea coherente (visual y cognoscitivamente), y para que no se produzca duplicación de informaciones o reiteración de esfuerzos a la hora de recopilar o introducir la información, y de crear la red hipertextual. Como la macroestructura común de información debe constituirse a partir de una serie de microestructuras, éstas deben construirse siguiendo unas reglas mínimas que favorezcan su articulación en la estructura global. Por lo tanto, las reglas deben establecer:

 Los tipos de documentos que pueden entrar a formar parte del sistema

 Los datos de identificación del documento: título, autor, descripción, localización, fecha de introducción, fecha de la última consulta, nivel de acceso, etc.

 El formato de introducción del texto: estructuración del texto, posición de las páginas, modelo gráfico utilizado, etc.

 El tipo de relación entre los documentos: normas que indican qué documentos pueden relacionarse, lugares dentro del documento en donde se deben encontrar esas relaciones (en todo el documento o en una parte del mismo), presentación visual de enlaces, etc.

 El acceso a los documentos: recomendaciones para el uso del hipertexto en la búsqueda de información, etc.

    

Los editores web actuales permiten automatizar una serie de tareas que antes constituían una afanosa labor, como la creación automática de tablas de contenido y herramientas de búsqueda, creación de barras de navegación y exploración o botones con enlaces de trayectoria vertical y horizontal (de páginas primarias a secundarias y viceversa, de orden secuencial anterior-siguiente-arriba, etc.) siguiendo el árbol y jerarquías establecidas en la estructura, etc. Un aspecto clave y fundamental es la facilidad que ofrecen estos editores para organizar losarchivos y carpetas del sitio web y para construir la propia estructura del sitio y los enlaces entre documentos, ofreciendo esquemas visuales generales de todo el conjunto de nodos y sus relaciones jerárquicas y horizontales, o esquemas parciales de parte de esa estructura jerárquica y/o en red. Sólo hay que seleccionar la carpeta o archivo elegido, arrastrarla y soltarla sobre el lugar que queramos que ocupe en el árbol que representa la estructura de nodos, y ya tenemos creada de forma automática la red jerárquica y sus relaciones, los enlacesestructurales y de trayectoria, etc.

Por otro lado, los editores web también facilitan otras labores al ofrecer plantillas de diseño general de sitios web y "esqueletos" completos de estructuras y modelos para webs personales, webs de presencia corporativa, webs de discusión, webs de proyectos, webs de soporte al cliente, webs de colaboración en grupo, etc. Utilizando dichas plantillas, sólo tenemos que introducir el contenido y añadir o quitar las páginas que falten o sobren a lo largo y ancho de la estructura propuesta. Los editores actuales también suelen incluir una serie de herramientas y complementos que facilitan otras labores complejas o tediosas para el diseñador web, como asistentes para interfaz de bases de datos, inclusión de contadores, barras de vínculos, efectos dinámicos, subprogramas java, controles ActiveX, etc.

Diseño de la página

Es importante tener en cuenta que la unidad básica de información de un documento hipertextual no es la página, sino la pantalla.

Así pues, el diseño de la página y la disposición de los elementos dentro de ella para ser vistos en pantalla, son uno de los aspectos principales a la hora de diseñar el hiperdocumento. Las páginas deben tener un esquema ordenado y legible de un vistazo. He aquí dos ejemplos de disposición de página, la imagen de la izquierda muestra una página ilegible y desordenada, mientras que la imagen de la derecha, que sigue un esquema ordenado, facilita la navegación y comprensión del contenido.

                 

Fuente: Universidad de Zaragoza. Manual de Estilo WWW. http://wzar.unizar.es/cdc/manual/M_2_8.1.html

En el encabezamiento de los documentos es imprescindible que aparezca el título destacado y el uso de gráficos sensibles o botones de cabecera que indiquen los recorridos posibles para orientar la navegación.

Fuente: Universidad de Zaragoza. Manual de Estilo WWW. http://wzar.unizar.es/cdc/manual/M_2_7.html

También es corriente la utilización de un logotipo u otro sello gráfico que identifique la imagen institucional u oficial, comercial, etc. del sitio web.

En el diseño de las páginas hay que tener en cuenta una serie factores como: enlaces locales y ayudas a la navegación, encabezamiento de documentos, tipografía (contraste visual, esquema y diseño de páginas, tipos de letras, establecimiento de títulos y subtítulos, etc.). Creación de pies de página con información sobre el autor, e-mail de contacto, enlaces a otras páginas relacionadas, fechas de creación y actualización, etc.

En este sentido, también los editores web actuales facilitan la labor de ofrecer un diseño de páginas homogéneo y coherente para el sitio web ya que ofrecen diferentes modelos y estilos de plantillas para todo un sitio web o para páginas concretas: páginas principales, páginas de búsqueda, formularios, página de preguntas más frecuentes, tablas de contenido, página con diseño a dos columnas, etc., o realizan otras labores de forma casi automática, como poner al día las páginas si se utiliza un sistema modular de actualización para tratar un conjunto enorme de páginas que puedan actualizarse de forma conjunta.

Fuente: Universidad de Zaragoza. Manual de Estilo WWW. http://wzar.unizar.es/cdc/manual/M_2_3.html

Los documentos hipertextuales destinados a ser leídos mediante la pantalla de un ordenador tienen su propio lenguaje. En muchos casos, se convierte en una práctica común convertir un texto en hipertexto, por medio de la simple traslación de un texto a lenguaje HTML y la partición del texto secuencial completo en bloques de texto más pequeños que pasan a convertirse en nodos y que se conectan unos a otros mediante unos enlaces que siguen más o menos la misma estructura lineal que tenía el texto primitivo.

Hay que tener en cuenta que el texto impreso en papel necesariamente presenta una disposición para la lectura secuencial, mientras que el hipertexto permite otro tipo de disposición: la lectura multisecuencial  y que esta posibilidad o facultad de lectura se lleva a cabo por medio del establecimiento de otro tipo de estructuras que le diferencian del texto tradicional. El hipertexto en la Web implica una nueva manera de presentar el texto y el conocimiento que nada tiene que ver con el texto lineal.

Al transferir textos impresos a hipertexto, la primera operación que hay que realizar es convertir un texto completo en pequeños bloques de texto (o nodos) que luego uniremos en múltiples trayectos o recorridos mediante los enlaces. Sin embargo, este es sólo un primer paso. El diseño de un hipertexto es una labor muy compleja. Los editores de páginas web que, en realidad, son sistemas de gestión de hipertextos, nos facilitan esta labor.

Por supuesto que existen tipos de documentos, en los cuales no tiene ningún sentido separar el texto en bloques de nodos más pequeños para ser puestos en la red. Una novela de intriga se debe leer empezando por el principio y siguiendo, de forma secuencial, hasta el final. La tecnología hipertextual se debe aplicar con algún fin coherente. Es muy útil para las obras de consulta y referencia, los artículos y textos científicos, manuales, etc. Estas obras impresas ya contienen básicamente todo lo que también necesita el hipertexto: capítulos, párrafos, contenido, índices de palabras claves, referencias bibliográficas, etc. Estas obras no se leen página a página y el hipertexto permite hojear los bloques de información ayudado por la estructura de navegación y las búsquedas directas.

Un buen hipertexto tiene que ofrecer al usuario una estructura de navegación fácil de manejar, la fragmentación de la información en bloques debe tener sentido en sí misma y la estructuración de los bloques de información por medio de los enlaces deber ser coherente conceptualmente. El autor de un sitio web debe ofrecer al usuario toda la estructura y la infraestructura necesaria para facilitar la exploración, la navegación y las búsquedas mediante un lenguaje de fácil comprensión y utilización por el lector.

El diseño de la página principal es clave ya que es el primer sitio al que accede el usuario y esta primera impresión, tanto en relación al diseño como a la información en ella ofrecida, condicionará al usuario para que sienta o no la necesidad de adentrarse en el sitio.

Página principal de Virtual Tourist. Ofrece un buen diseño acorde con el tema, contenidos y servicios ofrecidos (mapa mundi navegable, directorio, acceso a los servicios, foro), junto a unos excelentes sistemas de navegación y búsqueda. http://www.virtualtourist.com/

También es un aspecto clave a tener en cuenta que, en la Web, el lector puede convertirse en lector activo, y pasar de ser lector a ser usuario si se incluyen las herramientas adecuadas para que este usuario interactúe no sólo con los contenidos, sino con el propio autor del sitio web (por medio de un formulario, un e-mail de contacto, etc.), o con otros usuarios a través del establecimiento de un foro o una discusión en línea, un chat dentro del propio sitio web, etc.

Y, por supuesto, una vez creado un sitio web, lo más importante es darlo a conocer. Esta labor se realiza dando de alta el sitio en los principales buscadores e incluyendo metadatos para que los principales robots y agentes indicen nuestras páginas.

http://www.hipertexto.info/documentos/diseg_web.htm