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.

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.

Dejar un comentario

*