No public Twitter messages.

Facebook
RSS

Layout tips: Rítmo vertical

Comentarios desactivados en Layout tips: Rítmo vertical
Ene - 8 - 2011
jitachi

Ritmo vertical

Es un problema común cuando estamos creando el Layout de nuestro sitio web, elegimos un estándar como el 960.gs o 1140px entre algunos frameworks, éstos solo se encargan del factor horizontal, de la maquetación en columnas, pero…

¿qué pasa cuando tratamos de establecer las distancias verticales?

Muchos de nosotros iniciamos tratando de ‘al cálculo’ determinarlas, que 40px ‘tantito más, tantito menos’ y para el otro elemento es algo totalmente incierto, nos rompemos la cabeza muchas veces tratando de hallar una manera lógica de fijarlo y en la mayoría de los casos terminamos insatisfechos teniendo demasiado o muy poco espacio en blanco en nuestro resultado final.

A continuación les diré —en lo personal— como resuelvo éso…

Hay algo llamado Rítmo vertical, el cual se trata de establecer una frecuencia de allturas basados en nuestra tipografía, de esta manera tendrémos una maquetación más cómoda en lectura y más balanceada en elementos, suena un poco complejo pero aquí va con palabras sencillas.

Si tenemos una tipografía de 12px tenemos una altura de linea de 18px (150%) en lo personal dejo uno o dos pixeles más (19~20px) basado en 165%, y hago un patrón vertical, que combinado con el Grid antes mencionado resulta así:

Ritmo + Grid

A partir de ésto tenemos una cuadrícula basada en tipografía la cual determinará las medidas verticales de todos los elementos (es ahí en donde viene lo interesante), todas las imágenes y elementos serán múltiplos de nuestro patrón vertical, por ejemplo: un elemento podrá tener de Alto 2 ritmos = 38px (basados en un ritmo de 19px), por ejemplo:

En la imagen podemos apreciar un botón perfectamente localizado entre dos ritmos (38px) y 4 columnas, esta técnica nos ayuda también en determinar algunos tamaños de nuestros elementos. No obstante el ritmo puede ser simétrico o asimétrico.

Ritmo Simétrico

Usará el patrón como línea guía, por ejemplo en la tipografía para el bloque de texto podemos colocarla como si fueran renglones de una libreta rayada, por ejemplo:

Ritmo vertical en texto

Muchos de los elementos, inclusive la imagen están dentro de los ritmos establecidos, a diferencia de los ritmos verticales asimétricos.

Ritmo Asimétrico.

A diferencia del anterior descrito, el asimétrico sitúa los elementos a la mitad del ritmo, ésto es usado frecuentemente en titulares , por ejemplo:

Ritmo Asimetrico en titulares

Éste es un claro ejemplo de como ubicar titulares o subtitulares en un ritmo asimétrico, este tipo de rítmo es más usado para proteger la jerarquía.

Ritmo vertical y Jerarquía

Una vez que tenemos colocados los elementos de manera vertical, tenemos que cuidar el aspecto de la jerarquía, por principio de Gestalt en base a proximidad, los elementos más próximos serán considerados como un grupo. Teniendo ésto claro, podemos establecer ‘n’ cantidad de ritmos para marcar la jerarquía y espacio en blanco deseado.

Ritmo & Jerarquía

En éste ejemplo tenemos declarada una jerarquía de la siguiente manera:

  • 1R (1 Ritmo = 19px) para Elementos del mismo grupo
  • 2R (2 Ritmos = 38px) para Elementos de distintos grupos

Por último también podemos situar pequeñas composiciones:

Ritmo & Composiciones

A diferencia de los elementos individuales que traté, también podemos establecer pequeñas composiciones que no están individualmente en el Ritmo, pero que en Composición si lo están, en la imagen podemos apreciar que el Subtitular junto con el ícono y la descripción están dentro de 2 ritmos, no obstante internamente no lo están. Ésto también es válido tomándolo como un pequeño grupo, composición o juego tipográfico.

Todo ésto es el proceso de como resuelvo el problema de la ubicación vertical, jerarquía y espacio en blanco, está basado en algunos buenos recursos (los cuales a continuación mencionaré) pero está modificado y personalizado a mi manera de trabajo, cada quien lo amoldará a como más cómodo se sienta.

Recursos:

El resultado de los pequeños fragmentos que púse para que puedan apreciar como luce después de aplicar un ritmo vertical (y 960.gs), está aquí:  Ejemplo y el Wireframe (la construcción) por aquí

Los Comentarios estn cerrados.

Prepárate para hace

Como apasionados de la programación que somos, no podemos dejar ...

Impresionantes estil

Hoy os recopilamos unos estilos de capa para Photoshop cortesía ...

¿Una imagen vale m

Qué difícil es a veces plasmar una idea simplemente porque ...

Horas buscando fuent

En cualquier trabajo tanto de diseño gráfico como web, las ...

Más trucos impresci

Seguimos con nuestros post dedicados a ayudarte en cómo sacar ...

Sponsors

  • Cheap reliable web hosting from WebHostingHub.com.
  • Domain name search and availability check by PCNames.com.
  • Website and logo design contests at DesignContest.net.
  • Reviews of the best cheap web hosting providers at WebHostingRating.com.