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;}

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;}

El poder de la proximidad en la disposición de una página web

La manera más simple de asociar una cantidad de elementos es agruparlos juntos.

Lo que hace el agrupar es hacer que los objetos similares se vean similares.

De ese modo, el ojo puede descifrar un título (por ejemplo) e inmediatamente asociar ese título con todos los objetos a su alrededor. Haciendo similares a los objetos similares, el agrupamiento hace que los objetos diferentes se vean diferentes. "¿Porqué están los objetos en ese grupo en lugar del otro grupo..? Deben ser diferentes."

El diseño 2D usa una serie de técnicas de agrupamiento, desde párrafos y márgenes hasta barras de navegación y elementos de formulario agrupados.

Así como con otras herramientas de diseño y creacion de paginas web , el agrupamiento con proximidad se basa en fuerzas contrastantes, en este caso espacios en blanco. Si todos los elementos están espaciados cercanamente, la proximidad se vuelve menos efectiva.

Ejemplo simple de agrupamiento a través de la proximidad

Estos íconos en el sitio del diseñador Jakub "Jimmac" Steiner están agrupados claramente en 2 grupos usando la proximidad, y contención sutil.

El problema de agrupamiento en páginas web

El agrupamiento necesita espacios en blanco, su fuerza opositora, para existir. Estos botones de navegación están agrupados tan juntos, que los botones y etiquetas son equidistantes, lo que podría definitivamente confundir a los usuarios.

 "Ok Hosting Mexico te ofrece planes de host profesional con soporte para ASP .NET y  PHP , contrata tu plan de web hosting al mejor precio y registra tu nombre de dominio con la empresa lider en Mexico. "

Agrupar elementos de formularios

En este formulario, es claro lo que significa cada uno de los dos botones de radio (‘Normal’ & ‘Simplificado’) debido a la proximidad de cada botón con su respectiva etiqueta.

Es también obvio qué campo tiene un error, debido a la proximidad.

Compare lo que pasa cuando me equivoco con respecto a la proximidad.

Lo único que cambia es el espaciado entre los elementos, y el formulario se vuelve de pronto difícil de interpretar.

Grupos múltiples en la disposición de una página

Este ejemplo usa la agrupación y los espacios en blanco muy efectivamente para identificar elementos relacionados:

</p