Normal
0

21

false
false
false

ES
X-NONE
X-NONE

/* Style Definitions */
table.MsoNormalTable
{mso-style-name:”Tabla normal”;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-qformat:yes;
mso-style-parent:””;
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin-top:0cm;
mso-para-margin-right:0cm;
mso-para-margin-bottom:10.0pt;
mso-para-margin-left:0cm;
line-height:115%;
mso-pagination:widow-orphan;
font-size:11.0pt;
font-family:”Calibri”,”sans-serif”;
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-fareast-font-family:”Times New Roman”;
mso-fareast-theme-font:minor-fareast;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;}

Normal
0

21

false
false
false

ES
X-NONE
X-NONE

/* Style Definitions */
table.MsoNormalTable
{mso-style-name:”Tabla normal”;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-qformat:yes;
mso-style-parent:””;
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin-top:0cm;
mso-para-margin-right:0cm;
mso-para-margin-bottom:10.0pt;
mso-para-margin-left:0cm;
line-height:115%;
mso-pagination:widow-orphan;
font-size:11.0pt;
font-family:”Calibri”,”sans-serif”;
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-fareast-font-family:”Times New Roman”;
mso-fareast-theme-font:minor-fareast;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;}

Usando la Alineación en la disposición y el diseño de una página web

La alineación funciona asociando visualmente una cantidad de elementos. Cuando usted ve una cantidad de elementos alineados, cree instintivamente que esos elementos son iguales a los otros, o que comparten alguna otra propiedad común.

Ésta es una herramienta realmente útil para permitir rápidamente a un usuario saber qué están mirando al trazar relaciones instantáneas entre diferentes elementos.

Cómo Funciona la Alineación en el Diseño Gráfico

La alineación funciona con cualquier elemento de la pantalla: párrafos de texto, imágenes, botones, fotografías, links, e incluso combinaciones de todos ellos.

Aunque los elementos alineados son comunmente agrupados espacialmente, no tienen porqué estarlo. La alineación funciona a lo largo de la pantalla entera, incluso cuando el eje está quebrado por otro elemento. Sin embargo, acomodar elementos en una línea o rejilla es más fuerte porque se beneficia también del agrupamiento.

La alineación del borde superior o izquierdo es más fuerte que la alineación del borde derecho o inferior, debido al flujo natural de la cascada. Los grupos que están alineados por sus bordes izquierdo o superior se ven más importantes que si estuvieran alineados por sus bordes derecho o inferior.

Los ejes de alineación que comienzan cerca del origen (la parte de arriba-izquierda de la pantalla) son superiores a aquellos que se ubican más a la derecha o más abajo. Ésta es una manera útil de indicar una jerarquía visual, particularmente cuando usted tiene demasiados elementos para acomodar en una cascada. Vea el primer ejemplo de abajo. Los links de navegación de mayor nivel sólo están asociados por su eje de alineación. Los links de segundo nivel se acomodan a lo largo de un eje que comienza fuera del origen. Esto los hace inferiores a los links de primer nivel – incluso se estuvieran encima de algunos de los links de primer nivel.

En este ejemplo, los links de segundo nivel (Warranties, Car preparation…) son aún inferiores a todos los links de mayor nivel (HOME, ABOUT, CARS FOR SALE).

Aunque los links de segundo nivel son superiores al link de CARS FOR SALE, éste está asociado con los links de primer nivel de más arriba por su eje de alineación. Como ese eje está más cerca del origen que el eje de los links de segundo nivel, todos los elementos que están en él son superiores a los miembros del eje de segundo nivel.

Alineamiento en Páginas Web Usando Rejillas

Las rejillas son una herramienta realmente útil para el diseño de páginas, y especialmente para formularios. Una vez que usted encuentra un diseño que parece funcionar porque usa ejes de alineación fuertes y complementarios, puede tomar la rejilla compuesta por esos ejes y reutilizarla en otras páginas. Reutilizar disposiciones basados en rejillas comunes (invisibles) puede fortalecer la consistencia de un sitio.

Ésta es la página inicial de la compañía de diseño gpin.co.uk (escala de 75%). Encuentro la excelente imagen de arriba atrayente a primera vista, pero la página es realmente difícil de recorrer, debido a una disposición caótica. Pienso que una manera de hacer más útil a este diseño sería aplicar una disposición simple basada en una rejilla.

Alineamiento: Ejemplo Simple

En este ejemplo, hay cuatro ejes de alineación en funcionamiento:

– Hay tres links de navegación de máximo nivel (Home, Cars for Sale, About)

– "About" contiene también un grupo de seis links más. Mientras éstos podrían ser vistos ya sea como links de primer o segundo nivel, están distinguidos claramente por el hecho de que se ajustan a ejes invisibles separados.

– El texto en el cuerpo principal está todo alineado a la izquierda, lo que unifica claramente a los párrafos.

– Los links del pie de página están unificados por un alineamiento con el mismo eje horizontal.

La misma imagen, con los ejes de alineación marcados

Un ejemplo de alineación más complejo

– Hay al menos 10 ejes de alineación en efecto en esta página.

– Note los 3 paneles de anuncios de productos contra el fondo. No tienen alineación común, lo que sugiere un link más débil que las ‘Marketplace Areas’, por ejemplo. En la ausencia de agrupación por alineación o contención, se asocian repitiendo un estilo.

Ejemplo de disposición web con alineación insuficiente

– Los cuadros de contenido principal no están alineados, ya sea por sus bordes izquierdos o superiores.

– Es imposible adivinar cuál de los cuadros contendrá el contenido principal, cuál contendría la información secundaria, o cuál miraría usted primero.