Páginas splash (intro). Pros y Contras
¿Qué es una Página Splash?
Una página Splash es una página de introducción a su sitio Web antes de la página principal (home).
El usuario llega a esa página antes de que se le dé permiso de ingresar a la verdadera página principal.
Se caracterizan por ofrecer una o dos de las siguientes características:
- Gráfico o logotipo
- Animación o películas flash
- Elección de la forma de entrar en el sitio (flash / no flash, etc)
- Requisitos técnicos (navegador, versión, etc)
Las páginas Splash suelen ser muy populares, especialmente entre algunos diseñadores, ya que son una manera de mostrar sus habilidades en Flash y otras tecnologías en una sola página. Pero antes de salir corriendo a construir su propia página de bienvenida, debes considerar todos los pros y los contras.
Pros de páginas Splash
- Las páginas Splash son de carga rápida, reciben toda la información rápidamente en la primera página sin necesidad de desplazarse.
- Las páginas Splash se aseguran de que sus usuarios vean la animación flash al menos una vez.
- Son una excelente manera de mostrar tu trabajo.
- Las páginas Splash permiten a sus usuarios a elegir la tecnología del sitio que quieren.
- Utilizan el servidor de logs para ver el desglose de sus clientes reales.
Contras de páginas Splash
- La usabilidad de una página de bienvenida es completamente nula.
- A muchos usuarios no les gustan las páginas de bienvenida y según estudios el 25% de los visitantes deja el lugar después de ver una página de ingreso.
- Las páginas Splash rompen los motores de búsqueda. Dado que muchas páginas de bienvenida, solo incluyen una animación en flash no es posible la optimización para los motores de búsqueda y si se añade contenido a la página de comentarios puede ser penalizado por spamdexing.
- La animación puede ser repetitiva. A los usuarios que hayan visto el flash mas de una vez, ya no les apetece volver a pasar por el de nuevo, pero si se ha olvidado de incluir la opción “saltar” no tendrán mas remedio que hacerlo y eso será doblemente molesto.
Mi Opinión de las páginas Splash
Me parecen molestas, y no creo que las ventajas de elegir el sitio que mejor se adapte a mi navegador sea mayor que el fastidio de pasar por ellas.
Relentifica y entorpece el proceso comunicacional, puede llegar a frustar al visitante (especialmente si es un visitante asiduo) y agrega un paso extra para que el usuario pueda llegar al contenido que busca de dicho sitio web.
Personalmente, no las recomiendo. Pero una vez que hayas revisado todos los pros y los contras, debes tomar su propia decisión.
Cuándo utilizar formato JPEG o GIF para imágenes Web
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.
Aspectos básicos del diseño Web Colocación y Posición de los elementos.
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.
Formatos gráficos
Aunque hay cientos de formatos de archivos gráficos existen navegadores web que sólo admiten algunos de ellos. Aquí describiremos los diferentes formatos de archivos gráficos que están disponibles para los diseñadores web y cuándo deben usarse.
Los formatos de archivos gráficos soportados por los navegadores web más populares son Graphic Interchange Format (GIF), Joint Photographic Experts Group (JPEG), Portable Network Graphics (PNG) y gráficos vectoriales. Algunas de las propiedades de los archivos gráficos son:
Transparencia – esta característica permite que la imagen sea de mayor o menor grado de opacidad, y sólida a totalmente transparente.
Compresión - esta característica permite que la imagen se almacene en un archivo mucho menor mediante el uso de un algoritmo matemático para manejar grupos de píxeles como un solo tema.
Entrelazado – el entrelazado permite que la imagen se cargue en primer lugar de las filas impares y luego volver y sacar las filas pares. Permite al visitante a ver la imagen antes.
Animación - la animación da la apariencia de movimiento por medio de una serie sucesiva de imágenes. Los Gifs animados no requieren un plug-in de navegador y pueden trabajar en casi todos los dispositivos.
Carga progresiva – la carga progresiva es similar a entrelazar ya que sólo carga una parte de la imagen al principio, pero no se basa en filas alternas y permite al usuario ver la imagen más rápidamente.
GIF
Se originó en la década de 1980 y fue adoptado por los diseñadores de web en la década de 1990 como el formato gráfico preferido para páginas web. Los archivos GIF utilizan un algoritmo de compresión que mantiene archivos de pequeño tamaño para una carga rápida.
Se limitan a 256 colores (8 bits) y apoyan la transparencia y los gráficos entrelazados. También es posible crear gráficos animados usando el formato GIF. Todos los navegadores pueden visualizar los archivos GIF.
Ventajas del GIF :
* La mayoría da amplio apoyo de formato gráfico.
* Los diagramas se ven mejor en este formato.
* Soporta la transparencia.
JPEG
Los archivos JPEG son comprimidos con apoyo de “color verdadero” (24 bits) y son el formato preferido para las fotografías en materia de calidad de imagen. JPEG admite un formato progresivo que permite una imagen casi de inmediato con mejora de calidad como el resto de cargas.
A diferencia de un archivo GIF, la compresión de archivos JPEG puede ser controlada por el diseñador, que permite diferentes niveles de calidad de imagen y tamaño de archivo.
Ventajas JPEG:
* Ración media de compresión de grandes velocidades de descarga.
* Produce excelente calidad de fotografías y dibujos complejos.
* Soporta 24-bit de color.
PNG
Es un formato bastante reciente que se presentó como una alternativa a los archivos GIF. PNG admite hasta 24 bits de color, con transparencia y entrelazado puede contener una descripción breve texto de contenido de la imagen para el uso de motores de búsqueda.
Desafortunadamente, la mayoría de los navegadores no soportan PNG y los que lo apoyan, no son compatibles con todas sus características todavía. Pero eso cambiará en el futuro.
Ventajas PNG:
* Supera la limitación de 8-bits de color del GIF.
* Permite la descripción de texto de la imagen para el uso de motores de búsqueda.
* Soporta la transparencia.
Gráficos Vectoriales
La mayoría de los gráficos web son imágenes de mapa de bits o mapas de bits, que consisten en una rejilla de píxeles de colores. Dibujo e ilustraciones deben ser creadas como gráficos de vectores que consisten en descripciones matemáticas de cada elemento que compone las líneas de las formas y el color de la imagen. Los gráficos vectoriales se crean mediante la elaboración de programas tales como Adobe Illustrator y Macromedia Freehand y son la elección de artistas gráficos para crear dibujos. Los gráficos vectoriales se debe convertir a GIF, JPEG o PNG para ser utilizados en una página web.
¿Qué formato debemos utilizar?
Podemos elegir entre el formato GIF o JPEG para la mayoría de usos. Pero, dado que el tamaño de archivo de un archivo GIF es generalmente mas pequeño que el tamaño de archivo de un archivo JPEG, la mayoría de los diseñadores utilizan el formato GIF para los fondos, cajas, marcos y cualquier otro elemento gráfico.
La mayoría de los diseñadores seleccionan el formato JPEG para las fotografías e ilustraciones en la compresión para no comprometer la calidad visual de la imagen.
GIF y JPEG son un apoyo universal y la elección del diseñador es determinada para el elemento gráfico que utilice.
Optimización de Páginas Web
Todos queremos tener la web más atractiva y dejar a nuestros visitantes con los ojos abiertos y completamente deslumbrados. Por lo general un diseño muy atractivo implica gran cantidad de elementos gráficos, aumentando el tamaño de la página. Aquí hablaremos de algunos consejos útiles sobre cómo mantener un diseño web atractivo, pero con descargas rápidas.
Debido a la tasa media de ancho de banda de Internet por ordenador, los webmasters dejan de desarrollar sitios web complejos cargados con fuertes elementos gráficos. En casos extremos se pueden encontrar sitios web que toman unos minutos para cargar el contenido en su navegador. Por supuesto el usuario no va a esperar ese tiempo para que un sitio web cargue, y pasará a la siguiente página web en sus resultados de búsqueda.
¿Entonces por qué algunos webmasters aún desarrollan páginas de carga lenta? Principalmente debido a la falta de conocimiento de sencillas técnicas de optimización de gráficos que les permitan mantener un sitio web atractivo, manteniendo el tamaño de página más pequeño.
¿Cuántos somos conscientes del hecho de que un cuadro con esquinas redondeadas puede conseguirse utilizando el código CSS solamente, sin la necesidad de cualquier imagen gráfica. Los que están familiarizados con CSS saben que un nivel relativamente alto de la programación es necesario, los errores más comunes pueden tener relación con la optimización de las soluciones simples.
Se podría hacer la afirmación de que lo que un diseñador Web puede hacer con el software gráfico es imposible de aplicar al código. No estoy de acuerdo. Cuando el diseño está terminado y está listo para cortarlo en pequeñas imágenes a utilizar en el código html, la creatividad se ha probado. Todo lo que se hace en esta etapa afectará al tamaño de página total. Si el diseño contiene formas redondeadas que se superponen unas a otras o zonas con gradientes de color, entonces deberemos cortarlas con cuidado para que el resultado sea tamaño de archivo pequeño.
Veamos lo que significa cortar eficientemente:
- No hacer cortes grandes que contiengan gran cantidad de colores diferentes. Utilizaremos un pequeño número de cortes en cada porción contieniendo un número limitado de colores.
- No haremos una gran parte que contenga la estructura del mismo gráfico. Cortarmeos una pequeña parte de él y se repetirá en el código. Esto suele ser un error muy común que los webmasters / programadores hacen cuando se trata de fondo de color degradado.
- No usaremos el formato de archivo JPEG siempre. En algunos casos, un formato GIF será mucho menor en tamaño. Una regla de oro – un segmento con un elevado número de colores será más pequeño de tamaño con el formato JPEG en lugar del formato GIF, y lo contrario también es cierto. Comprobaremos cada opción por separado. Cada 1KB que nos permita reducir el tamaño de archivo de la imagen finalmente se sumará a una reducción significativa en el tamaño de página.
- Si tenemos texto sobre un fondo de color sólido, utilizaremos el código para crear el fondo en su lugar. Recordemos que se puede definir tanto el estilo de fuente y color de fondo de la zona utilizando CSS.
Técnicas avanzadas
Gráficamente la optimización de un sitio web es algo más que saber hacer optimizaciones de la imagen. Existen algunas técnicas avanzadas que requieren un alto nivel de programación. CSS2 tiene mucho más que ofrecer que el CSS. Aunque no todos los navegadores han adoptado esta norma todavía se debe estar listo para cuando lo hagan. JavaScript también nos da un conjunto de opciones para crear algunos efectos interesantes sin necesidad de sobrecargar la página con Flash. El uso de herramientas limitadas, como JavaScript, frente a una aplicación avanzada, como Flash para crear los efectos deseados puede ser difícil. Sin embargo, pensemos en el resultado del esfuerzo que puede diferenciar el sitio web de los demás. Obtendremos un atractivo sitio web de aspecto profesional y que carga rápidamente.
Regreso al futuro
Las PDAs, teléfonos móviles y ordenadores portátiles mini son usados con conexiones a inalámbricas para navegar por Internet, la publicación de páginas web de carga rápida mejorará la experiencia de navegación, no sólo para aquellos que utilizan conexiones de gran ancho de banda, sino también hará que el usuario tenga una experiencia de navegación fácil.
Para aquellos que insisten en que la optimización del diseño web no es necesaria porque todos tendrán conexiones de banda ancha alta con el tiempo, estoy de acuerdo, hasta cierto punto. Sin embargo, las empresas de software están creando aplicaciones que utilizan más ancho de banda porque saben que están disponibles para que se utilicen. Acostumbrémonos a optimizar bien las páginas web, porque este juego del gato y el ratón no terminará nunca, y es mejor aprender las reglas del juego, que ser mordido.
¿Por qué buena Navegación es importante?
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.
¡Felices fiestas y prospero año nuevo!
En estas fiestas, el equipo de A2sistemas le acerca un especial saludo a todos nuestros clientes y público en general.
Desde aquí, queremos desearles lo mejor para el 2010 donde se colmen todas sus expectativas, en paz y armonía y agradecerles su confianza. Esperamos poder seguir estando a la altura de sus exigencias y necesidades, seguiremos trabajando duro para seguir mejorando.
Prometemos regresar a nuestro compromiso el próximo 7 de Enero con más noticias y comentarios de interés.
¡Felices Fiestas y Próspero Año Nuevo!
Alineación en el diseño de una página Web
La mayoría de los desarrolladores Web, cuando piensan en la alineación piensan en el atributo o la propiedad CSS. Pero la alineación de los elementos de la página es tan importante como si el texto está justificado o su imagen flota a la izquierda. La alineación proporciona el marco estructural de un diseño. La alineación puede afectar el estado de ánimo de la página, así como su eficacia para conseguir su mensaje.
Pero el diseño de la página puede ser tan estructurado, con un sistema rígido que es evidente, o puede ser más sutil. Si entendemos cómo alinear los elementos de manera efectiva en la página web, seremos capaces de romper las reglas de una manera eficaz también.
Estas imágenes muestran una página Web con tres simples elementos y cómo podemos diseñar dichos elementos de la página para crear diseños diferentes.
La alineación a la izquierda es, probablemente, la alineación más común en cualquier diseño. Es organizada y segura. Proporciona un ambiente conservador para cualquier diseño, ya que es confortable y familiar.
El alineado a la derecha es similar a la alineado a la izquierda en la que todos los elementos están de acuerdo pero alineados en el lado derecho del contenedor. Esta disposición es un poco menos común que la alineación a la izquierda, y proporciona una sensación de diseño menos conservador.
La forma más sencilla de hacerlo es con propiedades CSS, movemos los elementos a la derecha y luego los obligamos a permanecer por debajo de otros en el flujo del documento.
El centrado en las alineaciones es popular en el diseño web, especialmente con los diseñadores noveles. El centrado proporciona un enfoque convencional, pero hay que tener cuidado, ya que si centramos el diseño puede parecer plano y aburrido, a menos que lo hagamos realmente bien. Cuando la alineación está perfectamente equilibrada, no hay nada que el ojo pueda enfocar, de modo que el diseño se ve plano.
El centrado es fácil de hacer. Sólo tenemos que utilizar el CSS para alinear los distintos elementos de la página Web.
Algo que recordar cuando se utilizan las alineaciones de centrado, es que los grandes bloques de texto pueden ser muy difíciles de leer.
“En caso de duda, no centremos”.
El justificado de los diseños es muy similares a los diseños centrados, pero en lugar de tener un borde dentado en el elemento de texto, se centra en ambos lados. Los diseños justificados tienen un aspecto más formal y sencillo que los diseños centrados, y pueden crear un diseño más elegante.
Los diseños justificados utilizan las mismas técnicas de centrado que la alineación centrada, también se añade la propiedad text-align al estilo de cualquier bloque de texto para justificarlo.
Hay una sutil diferencia entre esta imagen y la imagen de página de alineación centrada. En este ejemplo, la imagen y el título están muy centrados en el diseño -, pero el texto está alineado a la izquierda. El texto no coincide con la alineación del resto de la página.
En la página siguiente ofrecemos una sugerencia de cómo solucionar este problema.
Este diseño utiliza un centrado de elementos en un punto. En cambio, hay un borde visible alrededor del texto. Esto resuelve el problema que teníamos en el ejemplo anterior, porque está claro que el cuadro de texto es lo que está centrado.
Este diseño también tiene la ventaja de resolver el problema del textos centrados que son difíciles de leer.
La estructura de este diseño esta creada por la asociación de los diferentes elementos. Por ejemplo, las líneas de cabecera con la parte inferior de la imagen. El bloque de texto se alinea en la misma línea vertical como el titular.
La mayoría de los diseñadores Web prefieren este tipo de diseño porque ofrece más interés en el mismo. No es tan conservador como las alineaciones a la izquierda o a la derecha y tampoco es tan plano como un diseño centrado.
Contraste y colores de fondo
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.
Teoría del color, conceptos básicos
¿Qué es la teoría del color?
La teoría del color es un conjunto de principios para crear combinaciones de color armoniosos. Las relaciones de color se pueden representar visualmente con una rueda de colores – el espectro de color envuelto en un círculo.
La rueda de colores es una representación visual de la teoría del color:
Las combinaciones de colores armoniosos son llamados esquemas de color. Los esquemas de color armoniosos permanecen independientemente del ángulo de rotación.
Esquemas clásicos de color:
Combinación de colores monocromáticos
El esquema de color monocromático utiliza variaciones de luminosidad y la saturación de un solo color. Este esquema se ve limpio y elegante. Los colores monocromáticos van bien juntos, produciendo un efecto calmante. El esquema monocromático es de fácil visualización, sobre todo en tonos azul o verde.
Colores Análogos
El esquema de color análogo utiliza colores que son adyacentes entre sí en la rueda de color. Un color se utiliza como color dominante, mientras que otros son utilizados para enriquecer. El esquema análogo es similar al monocromático, pero ofrece más matices.
Combinación de colores complementarios
El esquema de color complementario consta de dos colores que están uno enfrente del otro en la rueda de color. Este esquema se ve mejor cuando se coloca un color cálido en contra de un color frío, por ejemplo, rojo contra verde-azul. Este esquema es intrínsecamente de alto contraste.
Split de colores complementarios
La división de régimen complementario es una variación del régimen complementario estándar. Se utiliza un color y los dos colores adyacentes a su complementario. Esto proporciona un alto contraste sin la fuerte tensión del esquema complementario.
Triádica de colores
El esquema de color triádica utiliza tres colores equidistantes en la rueda de color. Este esquema es muy popular entre los artistas, ya que ofrece un contraste visual fuerte, manteniendo la armonía y la riqueza de color. El esquema triádico no es tan contrastante como el esquema complementario, pero parece más equilibrado y armonioso.
Tetrádica (Doble Complementario) Combinación de colores
El tetrádicos (doble complementarios) del sistema son más variados, ya que utilizan dos pares de colores complementarios. Este régimen es difícil de armonizar, si los cuatro colores se utilizan en cantidades iguales, el sistema puede parecer desequilibrado, por lo que debe elegir un color para ser dominante o someter a los colores.
