Las imágenes GIF

Utilizaremos archivos GIF para las imágenes que tienen un número reducido de colores.
Los archivos GIF se reducen siempre a no más de 256 colores.  El algoritmo de compresión para los archivos GIF es menos complejo que para los archivos JPEG.

El formato GIF no es apropiado para imágenes fotográficas o imágenes con gradiente de colores por su número limitado de colores.

Imágenes JPEG

Utilizaremos imágenes JPEG para fotografías e imágenes que tienen millones de colores. JPEG utiliza un algoritmo de compresión complejo que le permite crear gráficos más pequeños aunque nos hace perder algo de la calidad de la imagen. A esto se llama una “pérdida” de compresión, porque parte de la información de la imagen se pierde cuando la imagen se comprime.

El formato JPEG no se adapta a las imágenes con texto, grandes bloques de color sólido, y formas simples con bordes nítidos. Esto es porque cuando la imagen se comprime,el guardado no es tan agudo como lo sería con otro formato.

Las imágenes PNG

El formato PNG se desarrolló como un reemplazo para el formato GIF. Los gráficos PNG tienen una tasa de compresión mejor que las imágenes GIF que dan como resultado imágenes más pequeñas que el mismo archivo guardado como un archivo GIF. Los archivos PNG ofrecen una transparencia alfa.

Las imágenes PNG y GIF no son muy adecuadas para las fotografías. Es posible obtener en torno al tema de bandas que afecta a las fotografías guardadas como archivos GIF con colores reales, pero esto puede dar lugar a imágenes muy grandes. El otro problema con PNG es que sus características especiales no están bien soportadas por Internet Explorer.

Cuando se comienza un nuevo diseño, no importa la metodología, estamos comenzando desde una página en blanco.
No hay nada en la página web – así que lo primero que haremos es poner algo en ella.

Pero, vamos a pensar en la colocación de los elementos o los vamos a colocar  sin ton ni son?
Un buen diseñador no permite que la posición y colocación se produzca de forma aleatoria.
Primero hay que pensar en:

• Lo que es el elemento
• Cómo el elemento se refiere a los objetivos de la página
• Donde el elemento encaja con los demás elementos de la página

El elemento que se está colocando

Hay muchos elementos comunes en una página Web, tales como: titulares, navegación, imágenes, contenidos textuales y administrativos. Saber lo que es cada elemento,ayuda a determinar donde debe ser colocado en la página. Por ejemplo, normalmente no pondríamos un título de página Web en la parte inferior de la página. La navegación se encuentra generalmente en la izquierda o en la parte superior y la administración se encuentra más comúnmente en la parte inferior.

El elemento en relación a los objetivos

Si conocemos los objetivos y las metas de la página esto será fundamental para su colocación.
Normalmente los anuncios se encuentran en lugares similares en las páginas Web.  Si el objetivo es hacer que la gente haga clic en ellos, los colocaremos en lugares donde históricamente la gente mira y haga clic para así cumplir con nuestros objetivos.

Dónde están los otros elementos de la página

De alguna manera esto parece ser la parte más evidente del diseño – después de todo si ya tenemos un logotipo en la parte superior izquierda, no vamos a colocar contenido en la parte superior de la misma. Pero también hay que pensar en el contexto de sus posiciones. Colocar un bloque de anuncios en medio de un bloque de texto implica un sentido de conexión entre los dos elementos. La colocación de una línea horizontal después de un título o línea puede crear un sentimiento de desconexión entre el título y el contenido. Donde situemos los elementos puede marcar la diferencia.

Encontrar los puntos de interés en tu página

Los puntos de interés son los puntos centrales de un diseño – los lugares donde el ojo es atraído. Al cambiar el espacio en torno a esos puntos de interés puede afectar la manera en que esos temas se ven en la página.

Por ejemplo, una imagen puede ser el punto focal de tu página Web.  Puedes optar por centrar la imagen en la página, pero eso es aburrido y plano. En su lugar puedes jugar con los otros elementos en la página y cambiar los márgenes alrededor de la imagen para crear un diseño que aumente el interés en el dibujo.

Vamos a poner un ejemplo usando tres elementos: un titular, una foto, y una leyenda. Podemos elegir centrar todos los elementos pero con eso conseguiremos un diseño aburrido y no tendremos una jerarquía visual clara. Nuestro ojo será atraído por la imagen porque es una imagen, no por la posición que tiene en el diseño.

Con sólo hacer un par pequeños cambios en la posición de los elementos y de los márgenes alrededor de la imagen, el diseño resultante es más atractivo a la vista. Debido a que el espacio entre el título y la imagen es diferente al de la leyenda y el espacio de la imagen, tenemos la sensación de que el título pertenece a la imagen.

La navegación web es uno de los elementos más cruciales en la determinación de la eficacia de un sitio web.
Para que la navegación web se eficaz, ante todo debe tener sentido. Si bien siempre hay espacio para la creatividad, los sitios web bien diseñados tienden a tener esquemas de navegación similar.

Un diseñador de páginas web siempre debe tener en cuenta la finalidad básica de la web y la audiencia prevista en el diseño de los elementos de navegación. La mayoría de sitios web existentes tienen a bien informar al visitante sobre un producto o servicio o vender realmente ese producto o servicio. Por lo tanto, hay algunas pautas básicas a seguir:

Asegurémonos de que todos los elementos de la navegación están claros y que los vínculos tienen el uso de las convenciones estándar de los enlaces, tales como botones, menús, subrayando del texto o cambio de color en el ratón.

Cuando no utilicemos los enlaces convencionales, hay que indicar explícitamente al visitante que se trata de un enlace. Por ejemplo, supongamos que diseñamos una página web en la que se utiliza un mapa que muestra distintas ciudades y deseamos que el usuario haga clic en el nombre de la ciudad para obtener información sobre la misma. Hemos de asegurarnos de informar al usuario que haga clic en el nombre de la ciudad para obtener más información acerca de ella.

Recuerde la regla de los “Tres clics”. Los estudios han demostrado que la mayoría de los usuarios no suelen hacer clic en más de tres enlaces para obtener la información que desean. Así, cada página del sitio web debe ser accesible dentro de esos tres clics.

No se recomienda el uso de flash o de otro tipo de página de bienvenida en el sitio web. Hay que mantener el diseño de la página web de sencillo y atractivo. Pero si decidimos usar uno, asegurémonos de usar la etiqueta META REFRESH, que permita al visitante saltar la página de inicio después de unos segundos y proporcionar  un botón en el que pueda hacerse clic, claramente marcado para que el visitante puede pasar la página de entrada e ir directamente a su página de inicio, de lo contrario un gran porcentaje de los visitantes no volverán jamás. Recuerde que la mayoría de los visitantes buscan información, no entretenimiento.

Elementos de navegación

Top Menús - La barra de menú de la página normalmente se encuentra debajo de la cabecera que contiene el logotipo del sitio. Estos elementos de menú pueden ser individuales, menús desplegables, o con ampliación. Cada elemento del menú puede ser representado por un gráfico o solo de texto.

Lateral izquierdo de navegación – La navegación del lado izquierdo normalmente se implementa como la columna A o área de texto en la parte superior izquierda de la página web. Al igual que el menú superior, cada elemento puede ser un simple enlace o un menú en expansión.

Lateral derecho de navegación – La navegación del lado derecho no se utiliza muy a menudo, pero cuando se utiliza, se implementa como una columna o área de texto en la parte superior derecha de la página web. La mayoría de los diseñadores utilizan esta área para la publicidad en lugar de navegación del sitio.

Menús de fondo – Los menús de fondo pueden ser una barra de menú o pie de página.

Elementos importantes de navegación

Enlaces – Todas las páginas del sitio web deben estar dentro de dos o tres clics de la página de inicio. Las páginas importantes se deben estar a un clic. El tipo de sitio web  determina los vínculos que son más destacados.

Cajas de inicio de sesión - Las cajas de inicio de sesión deben ser bien visibles. Los lugares comunes son parte superior izquierda, arriba a la derecha o dentro de la cabecera de la página.

Carros de la compra - Si usted usamos un carrito de compra para vender productos, debemos mostrar el botón de compra en un lugar destacado sobre cada página. La localización más común es la parte superior derecha justo debajo o como parte de la cabecera.

Botones de Orden – Si utilizamos botones de orden individual deben ser grandes y visibles. Usaremos el menor número de clics para entrar a la página.

Barra de migas – La barra de migas, son los vínculos o representación gráfica de dónde nos encontramos. La barra de migas generalmente está situada en la parte superior izquierda de la página justo debajo de la cabecera. Cada palabra es un enlace a la página anterior. Suelen estar en esta forma: Inicio-> Artículos-> Marketing

Enlaces externos – Los enlaces externos pueden ser utilizados en cualquier lugar, pero son más utilizados dentro de las áreas de texto de la página web. Pueden ser referencias a más información que se encuentra en otro sitio, a los productos recomendados, o para cualquier otra cosa.

Anuncios – Los anuncios son normalmente gráficos o texto con un hipervínculo asociado. Los anuncios pueden ser colocados en cualquier lugar de una página web, pero normalmente se utilizan sólo en el banner, por el lado derecho de la página, debajo de los elementos de navegación en el margen izquierdo, en la parte inferior de la página o intercalados en las zonas de ensayo de las página. Los estudios demuestran que los anuncios “por encima de la tapa” son más eficaces.
( “Por encima de la tapa” se refiere a la zona de una página web que es visible sin tener que desplazarse.)

Elementos descargables – Si ofrecemos elementos descargables, tales como archivos de audio, video o pdf, asegurémonos de informar al usuario del tamaño del archivo o si hay una aplicación para utilizar el archivo. Si se necesita una aplicación, proporcionaremos un vínculo a la aplicación. Por ejemplo, proporcionaríamos un vínculo de Acrobat, si estamos ofreciendo archivos PDF.

Mapa del Sitio - Un mapa del sitio es una buena forma de la distribución de todo el sitio para sus visitantes. Es sólo una lista jerárquica de cada página del sitio.

Resumen

Un sistema de navegación bueno puede aumentar el número de páginas vistas por cada visitante. Esto a su vez puede aumentar las suscripciones, los clientes, ventas, los miembros  y hacer que el sitio web sea más exitoso.

El contraste es una parte importante del diseño Web, ya que muchas veces significa la diferencia entre una página que se ve muy bien y una página que es ilegible o dolorosa para mirar. Pero a veces puede ser difícil decidir qué colores funcionan bien en contraste con los demás. Esta tabla nos ayudará en los colores y contrastes de frentes y fondos.

Una cosa que debemos tener en cuenta es que el contraste es algo más que el brillo de un color que se compara con el fondo. Como podemos ver, algunos de estos colores son muy brillantes y vibrantes sobre el color de fondo – como el azul sobre negro. Pero la etiqueta nos marca que es como tener un contraste pobre, porque si bien es brillante, hace que el texto sea difícil de leer. Si fuéramos a crear una página con texto azul sobre un fondo negro, causaríamos rápidamente un gran cansancio en la vista de nuestros lectores.