Archivo para Noviembre, 2009

Alineación en el diseño de una página Web

19 de Noviembre de 2009

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.

alineamiento_izquierda

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.

alineamiento_derecha

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.

alineamiento_centrado

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”.

alineamiento_justificado

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.

alineamiento_notanbueno

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.

alineamiento_marco

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.

alineamiento_mixto

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

19 de Noviembre de 2009

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.
color

Teoría del color, conceptos básicos

16 de Noviembre de 2009

¿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.

color-wheel1

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.

monochromatic

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.

analoga

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.

complementario

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.

split-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.

triadica

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.

tetradica

Elementos y principios de diseño

13 de Noviembre de 2009

Los principios son básicos y que aparecen en cualquier pieza de trabajo bien diseñado, ya sea para la web, un folleto, una tarjeta de negocios o para un anuncio. Ninguno de estos principios trabaja solo, por lo general trabajan juntos.

Elementos y principios

En el pasado hemos visto los elementos de diseño, es decir, tipo, línea, forma, textura. Consideremos estos como los bloques de construcción para un diseño. Los principios que veremos próximamente son los que hacen la estructura fuerte y lo mantiene unido. Los cinco principios que pueden ayudar a construir un diseño fuerte y hacer que se destaquen son:

Balance
Para crear un aspecto limpio y equilibrado, cada elemento debe tener una conexión visual con otro elemento de la página.

Proximidad
Cuando los elementos que están relacionados unos con otros se colocan juntos, se convierten en una unidad visual, debemos reducir el desorden y dar una estructura clara. Organizar la información en grupos apropiados es uno de las más rápidas y más fáciles maneras para mejorar los diseños.

Contraste
Si todo en la página tiene el mismo aspecto, vamos a tener un diseño bastante aburrido. Al usar contraste en el diseño, la página de inmediato tendrá un mayor atractivo. El contraste puede ser aplicado a las formas, colores, tipo y líneas.

Valores
El valor puede ser descrito simplemente como la relativa ligereza o la oscuridad de un objeto. Como contraste, el valor puede añadir profundidad y dimensión a sus diseños.

Color
Color y valor están estrechamente relacionados. El color tiene un poder increíble para crear un estado de ánimo y cambiar la intención de un diseño. Las opciones de color deben ser realizadas con cuidado para asegurar el éxito de cualquier diseño.

Contraste – Principios básicos del diseño

13 de Noviembre de 2009

¿Qué es el contraste en Diseño?

El contraste es una acentuación de las diferencias entre los elementos en un diseño. La mayoría de la gente piensa que sólo se aplica a los colores, pero por el contrario se puede trabajar con cualquier elemento del diseño. Por ejemplo, si tenemos un grupo de líneas que son todas del mismo tamaño, no hay contraste. Pero si una tiene mayor tamaño que las otras, contrastará con el resto.

El uso de contraste en Diseño:

Al aplicar contraste en el diseño Web, hay pensar más allá del color. El contraste de colores fácilmente puede ser exagerado. Pero mediante el uso de las diferencias más sutiles en como tamaños de fuente, formas de diseño, imágenes y estilos de texto, podemos tomar ventaja del mismo sin limitarnos tan solo al uso de contraste de colores.

Cómo incluir contraste en Diseños Web:

El contraste en el diseño Web se puede aplicar de muchas maneras:

  • Cambiar las fuentes. El tamaño de la fuente, el peso de la fuente, o familia de la fuente pueden proporcionar el contraste a su texto. Los titulares proporcionan una gran diferencia del texto que los rodea.
  • En los enlaces también podemos usarlo, con un cambio de color o subrayando el texto circundante.
  • Utilizando imágenes de diferentes tamaños y elementos. Si tenemos una sección de texto que es el foco principal de una página, podemos hacer uso de diferentes tamaños de elementos e imágenes que lo rodean.