Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Design Theory
Webdesign

Usando Alineación para Mejorar tus Diseños

by
Length:MediumLanguages:
This post is part of a series called Design School for Developers.
Choosing a Grid System
An Introduction to Composition

Spanish (Español) translation by Rodney Martinez (you can also view the original English article)

La alineación es una de esas cosas que va de la mano cuando trabajas con un sistema de guías. El tema de alineación no es simplemente un asunto de escoger si o no quieres alinear el texto o las imágenes a la izquierda o la derecha de un diseño (aunque esas decisiones obviamente son relevantes) en lugar de eso, empleamos alineación para mejorar nuestros diseños. La alineación apropiada en tus diseños los hará visualmente más atractivos y, también, más fácil para los usuarios poder escanear el contenido que está sobre la página, subconscientemente también ofrecerá una experiencia de lectura relajante.

Todos los elementos en su diseño tendrán que estar alineados en alguna manera, ya sea que éste sea sólo texto sin formato en su página, imágenes mezcladas con texto (o incluso encabezados), vídeos, botones y llamados a la acción, enlaces (dentro de textos o en módulos tales como una sección de navegación) o en cualquier otros elementos que pueda tener.

Las guías le ayudarán a resolver algunos problemas con la alineación o decisiones que tenga que tomar en su diseño, pero en lo que necesita enfocarse es en cómo los diferentes elementos, grupos de elementos o módulos en particular en su diseño trabajan en conjunto. He resaltado desde el comienzo la importancia de una coherente experiencia de usuario y conseguir la alineación correcta es una de esas cosas realmente importantes que ayudan a mejorar la experiencia de los usuarios.

La alineación nos permite hacer decisiones conscientes sobre donde serán colocados los elementos y cómo interactuaran entre ellos. Crear buenas alineación conecta el vacío visual entre cada elemento en su diseño, ayudándonos a crear relación entre los elementos que tenemos. De lo contrario, tendríamos un diseño que consta de bloques de texto e imágenes por todas partes, teniendo poco sentido sin ningún sentido de estructura.


¿Debería alinear todo?

Como explique en el artículo anterior sobre guías, parece ser que muchas personas no les agradan las guías porque las encuentran muy estrictas, que a menudo aplastan cualquier oportunidad de creatividad dentro de un diseño.

Esto es, totalmente, comprensible. Las guías son un montón de columnas y filas que, en esencia, nos ayudan a crear bloques, CSS, por lo general, dispone los elementos en un arreglo cuadrado. Sin embargo, reconocer una oportunidad apropiada para romper nuestro sistema de guías, puede ser muy difícil.


Mezclando la Alineación en sus Diseños

No todos los elementos en su diseño web tienen que tener una alineación. Algunas veces, dependiendo de su diseño o de la forma en la que usted trabaja, ésto puede ahora su creatividad. En lugar de eso, piense acerca de como puede mezclar sus alineaciones. De esta manera, todavía estará seguro de que hay un patrón para que cada elemento o módulo en su sitio web, sin embargo, al mezclar las alineaciones; usted estará asegurando que todavía está creando algo de interés visual que mantendrá a sus usuarios explorando el sitio web.

Mezclando la alineación, también significa; que usted puede jugar con las composiciones y las guías un poco más, en vez de usar un sistema de guías de 6 columnas, porque no introducir otra guía que usted puede superponer, tales como un sistema de guías de 4 columnas.

An example of grid overlay - 6 columns with 4 column layout overlaid. Built in Gridset App.
Un ejemplo de superposición de guías, seis columnas con una composición de cuatro columnas superpuestas. Integrando la aplicación Gridset App.

Mientras no sea tan estricto en romper por completo su sistema de guías, sino que introduzca una guía nueva con la que pueda trabajar, ofreciendo más alineación y opciones de composición en sus diseños.

Mezclar la alineación no sólo significa que usted introduce nuevas guías, columnas o extras en su estructura. Sino que use guía actual para mezclar cuales elementos alinear con cual columna. Por ejemplo, puede tener sus elementos del encabezado alineado a los bordes de las primeras y de las últimas columnas, sino que, además, puede decidir en alinear el texto del cuerpo principal a la primera y hasta la segunda de las últimas columnas. Lo mejor es que una guía le ofrece casi una cantidad interminable de opciones de alineación, incluso con algo tan pequeño como una guía de 4-6 columnas.

Mezclar la alineación es una forma de mantener a sus usuarios interesados y alerta mientras navegan un sitio web. En vez de conservar los elementos similares, éste introduce otro nivel de enfoque para los elementos en su diseño, sin embargo, subconscientemente puede ser eso.


Alinear los Elementos Principales de Diseño

Texto

Las opciones de alineación principal que usted tenga para su texto son muy similares las opciones disponibles en CSS; izquierda, derecha, centrado o justificado. Bastante claras, por ejemplo; si alinea su texto a la izquierda entonces éste fluirá hacia la izquierda, si alinea su texto a la derecha, entonces éste gravitará hacia la derecha.

Justified text is always questionable; it can have an adverse effect on the readability of the content www.awwwards.com
El texto justificado siempre es cuestionable, ya que puede tener un efecto adverso en la legibilidad del contenido, www.awwwards.com

En lugar de eso, lo que usted quiere tener en mente es cuán conveniente son éstas alineaciones para su texto y cómo se ajustan a su diseño. Por ejemplo, pequeñas cantidades de texto pueden funcionar bien en una alineación centrada, aunque esto será más confuso y difícil de leer en trozos de texto más largos. Asimismo, con los encabezados esto podría funcionar bien en su diseño para alinearlos al centro, aunque esto depende del tamaño del texto y donde está siendo colocado. Por ejemplo, un encabezado con la alineación centrada, puede que no funcione bien cuando éste tiene una parte de texto más larga que él texto que está alineado a la izquierda y que está directamente debajo.

The unusual centrally aligned forms inputs of wearemovingthings.com
La inusual alineación al centro de las casillas del formulario  de wearemovingthings.com

Además, tiene que pensar acerca de las culturas que pueden estar expuestas a su diseño y su sitio web. En algunas culturas, por ejemplo, leen de derecha a izquierda, aunque en las culturas occidentales se de izquierda a derecha y de arriba hacia abajo.

Debido a las culturas de lectura de occidente de izquierda a derecha, probablemente sería muy difícil tener una cantidad de texto más larga alineada hacia la derecha. En lugar de eso, usan esas alineaciones que puede ser más difíciles de leer en cantidades muy pequeñas, en más de una característica de diseño tales como; en un pie para la dirección o la información de contacto, o en el encabezado con una lista de enlaces de navegación.

Imágenes

Alinear las imágenes puede ser difícil, porque la alineación que usted debería usar para cada imagen es relativa al tamaño de la imagen. Las imágenes más pequeñas son, naturalmente, más fáciles de ubicar en su contenido en una forma que no altera el contenido, mientras que las imágenes más granes tienden a alterar el flujo de la lectura más y son, por lo tanto, más difíciles de colocar dentro de su contenido.

Usted tiene dos opciones; colocar sus imágenes fuera del flujo de contenido (por ejemplo, entre párrafos o al comienzo o al final del contenido) o puede calcular una manera para ubicar sus imágenes en sus guías.

La primera opción es bastante fácil de implementar. Sin alterar el flujo de texto, usted puede colocar imágenes en una columna con una anchura completa o con una anchura personalizada y centrar los elementos dentro del área. Esto es suficiente y todavía luce bien, mientras funciona bien cuando disminuye el tamaño de un sitio web, si éste es flexible.

mixed-alignment

La segunda opción puede ser un poco más complicada, dependiendo de cómo decida colocar las imágenes dentro de su contenido. Usted tiene varias opciones. Primero, puede tener las imágenes perfectamente alineadas (a la izquierda o a la derecha) con su texto o puede tener las imágenes sobresaliendo ligeramente, pasando el borde del contenido.

De esta forma, su imágenes pueden ser colocadas dentro del ancho de una columna completa en el contenido, con el resto del contenido fluyendo alrededor de la imagen. Esto no altera el flujo de la lectura tanto como si la imagen estuviera colocada por completo dentro del área de contenido, pero ésto también añada interés a su diseño, para que usted cree otra área o alineación para sus elementos que mantendrán su diseño visualmente fresco y más atractivo.

Imágenes de fondo

Alinear las imágenes de fondo es una de esas pequeñas cosas difíciles, todo es relativo a su diseño y su tema, así como también al tamaño de la imagen de fondo.

Así como con las alineaciones de los texto, la alineación de sus imágenes de fondo puede ser muy parecidas a las reglas CSS; ¿ajustada, absoluta, hacia arriba o hacia abajo, a la izquierda o a la derecha? De verdad, esto depende de su diseño y de cómo su imagen de fondo se ajustará con esa. Si su diseño tiene un patrón, entonces piense como el patrón se alinea con los elementos de su diseño, usted quiere asegurarse de que se alinea perfectamente con sus elementos o además, o podría quiera el diseño completamente.

Además, piense sobre como luce si usted tiene una imagen de fondo grande y como esa se ajusta con su diseño. Si son más largas tienen un gran enfoque, entonces quizá piense como sus otros elementos y módulos pueden adaptarse con ese diseño. Por ejemplo, ¿podría su cuerpo de texto alinearse con los bordes del diseño? Todo se trata de cuestionarse sobre como sus imágenes funcionan con otras partes de su diseño y como usted puede trabajar con ellas para hacer que su diseño sea más refinado y trabaje mucho mejor en conjunto.

Grupos de Elementos

Cuando yo describo un elemento de un grupo, pienso en éste en una forma muy diferente a como describiría un módulo.

Cuando piense en términos de módulos; tanto en diseño como cuando desarrollo del diseño del sitio web, pienso en ellos como en las partes de un grupo de elementos, relacionados unos a otros, los cuales están  muy cercas entre sí. Ejemplos de módulos para mí son grupos de enlaces, una imagen para resaltar y texto superpuesto o encabezados, es decir; cualquier cosa que puede estar agrupada es un patrón, es un patrón repetible o un módulo independiente.

Sin embargo, un grupo de elementos es un grupo de elementos en su diseño, lo cual no necesariamente tienen que estar unos cerca de otros. Por ejemplo, un grupo de elementos podría ser tanto los elementos del encabezado (logotipo y enlaces de navegación, por ejemplo) así como también los objetos del pie del sitio (quizás otro grupo de enlaces, junto al aviso de derechos de autor). Estos son grupos de elementos y, entonces, usted puede alinear estos grupos de elementos en su diseño. Aunque el encabezado y el pie pueden que no estén visibles en el mismo espacio de pantalla como unos de otros, éstos usos sutiles de alienación harán que sea más intenso, visualmente más atractivo y un diseño mucho más consistente.

Otros ejemplo de grupos de elementos son simplemente tanto el texto como las imágenes de su página principal o, incluso, puede ser tan sencillos como un conjunto de enlaces de navegación o elementos. Por ejemplo, en una navegación más compleja, usted puede tener los enlaces de texto principales, pero además, puede tener un “sub-encabezado” más pequeño para los enlaces. Además de eso, usted podría tener un icono arriba o abajo de los enlaces de texto. Si bien, estos son todos pedazos individuales y esas tres partes componen un enlace, todos los enlaces individuales puede componer un módulo de una navegación compleja, pero además, pueden organizarse como un grupo de elementos, que usted puede alinear con otros grupos en su diseño.


Asignaciones

Ahora que sabe todo acerca de la alineación en sus diseños (y con sus guías) quiero que empiece viendo sus diseños y vea como se alinean todos los elementos. Intente agrupar diferentes elementos, grupos de elementos y mire la alineación de texto e imágenes en su diseño.

Vea que puede hacer para crear un mejor diseño a través de las propiedades de alineación de cada elemento en su diseño. Usando el sistema de guías de su última tarea, trabaje para alinear todos los elementos en su diseño usando los consejos que recibió hoy en ésta publicación.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.