Ritmo y repetición en la disposición de una página web

El ritmo es la más sutil y abstracta de las herramientas ‘de asociación’.

El ritmo ayuda a asociar elementos repitiendo una presentación o arreglo estilístico común. Esto funciona incluso cuando los elementos no están agrupados o alineados, pero funciona a menudo en conjunción con estas técnicas.

El ritmo es una técnica común en el diseño gráfico. Puede funcionar siempre que se repite un estilo. Los ejemplos familiares incluyen listas y encabezados publicados.

Es más fácil mostrar como funciona el ritmo o repetición a través de ejemplos.

Ejemplo simple de ritmo

Este recorte de la página inicial del Partido Republicano de EEUU (no implica una toma de partido), muestra ritmo y efecto.

El estilo del encabezado de la sección es repetitivo, todas las secciones están alineadas a la izquierda y separadas con un divisor horizontal común. Esto crea un ritmo. Una vez que usted ha decodificado uno o dos ejemplos, su cerebro crea una regla o patrón. Usted usa entonces esa regla para reconocer e interpretar ejemplos subsecuentes del encabezado.

"OK hosting ha traducido de manera profesional este y otros articulos sobre temas de interes para webmasters y diseñadores web, te invitamos a visitarnos para contratar web hosting de calidad en Mexico, con los planes de hospedaje, alojamiento web o host mas profesionales y accesibles, tambien te invitamos a registrar tu dominio .com o tu dominio .Mx, si aun no cuentas con una pagina web que esperas crea tu pagina web con nuestro programa de creacion en minutos sin conocimientos de programacion o diseño web, solo en okhosting ."

El cerebro aplica también reglas de esta manera al escanear una página web.

Usted nota rápidamente que los elementos del fondo están también claramente relacionados. Además de estar alineados horizontalmente, el ritmo se nota bastante en su tamaño regular, su espaciado regular y los estilos repetidos de las imágenes, los encabezados y los copies

Ejemplo: Asociar elementos usando sólo el ritmo (sin alineación o agrupamiento)

En este ejemplo, los 6 links de navegación principales no están todos agrupados o contenidos espacialmente, o alineados alrededor de algún eje común. Están asociados claramente como iguales, lo que se logra a través del ritmo.

El ritmo es creado a través de una cantidad de elementos estilísticos: fuente, disposición visual de cada elemento, y su arreglo circular.

Usar ritmo permite una disposición espaciosa e informal, usando un balance elegante, sin pérdida de claridad.

Ejemplo de falta de ritmo

Este es el menú del sitio de Skinnycorp (excelente en lo demás).

Es un buen ejemplo de falta de ritmo. Los objetos del menú del primer nivel deben tener tamaños regulares, para dejar claro de qué se tratan.

El resultado es un menú que es dominado por el espacio negativo gris oscuro. Es difícil concentrarse en los objetos de segundo nivel.

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