La belleza de la proporción, la razón áurea en la web

Luego de muchas conversaciones acerca de como debería ser una web, me di cuenta que para mucha gente la web continua siendo un territorio sin reglas; pese a que hay ideas bastante claras sobre principios de diseño aplicado al arte, creación de materiales impresos, desarrollo de productos, arquitectura y varias otras.

Las web modernas deben llenar no solamente las expectativas de los propietarios. Las web y aplicaciones de hoy deben también cumplir las exigencias de un público globalizado, diverso y rico en preferencias. Por ello resulta vital que se utilicen ideales de belleza tan universales como sea posible. Esos ideales de belleza son por tanto aquellos que utilizamos de forma innata y en los que la naturaleza es rica, tal es el caso de la proporción áurea.

Golden Ratio - Proporción Áurea

El número áureo (también llamado número de oro, razón extrema y media, razón áurea, razón dorada, media áurea, proporción áurea y divina proporción ) es un número irracional , representado por la letra griega φ (phi) (en minúscula) o Φ (Phi).

Además de su belleza matemática, su carácter misterioso como número irracional y la aparente armonía que otorgaba a las proporciones, los artistas clásicos utilizaron la razón áurea tras comprobar que aparecía en numerosos diseños de la naturaleza, comenzando por las mismas proporciones del cuerpo humano. Esto les llevaba a pensar que la razón áurea era algo así como un canon divino implantado en el universo. Hoy sabemos que la llamada ‘proporción divina’ tiene que ver con los procesos de crecimiento y optimización de las formas.

Esta proporción ha sido usada por pintores, escultores, arquitectos, matemáticos, escritores, fotógrafos, novelistas, cineastas, músicos y un largo etcétera en diversas épocas. También es utilizado por los diseñadores gráficos de nuestro tiempo. En lo personal encuentro interesante la idea de aplicar la razón áurea al diseño web. ¿Comó se ha aplicado? y  ¿Cómo podemos utilizarla nosotros?

Marcas y Logotipos

Hurgando un poco por la web, encontré que la proporción áurea ha sido aplicada en diseño de logotipos de varias marcas reconocidas. Estos diseñadores han sabido utilizar esta proporción para transmitir esas nociones de ‘proporción’ y ‘armonía’ que las marcas desean asociar con ellas.  Les dejo acá un enlace al artículo y algunas imágenes interesantes.

La Proporción Áurea en el diseño de logotipos (http://www.brandemia.org/la-proporcion-aurea-en-el-diseno-de-logotipos)

Pero de lo que va este artículo es del ¿cómo aplicar la proporción áurea al diseño web? así que vamos a ver algunas ideas y aplicaciones prácticas de esta proporción y algunas herramientas que nos facilitaran el ponerla en uso.

Diseño Web

Al diseñar el aspecto visual de un sitio web o la creación de imágenes en general, el dilema de elegir proporciones surge inevitablemente. Por ‘elegir proporciones’ nos referimos a la idea de diseñar un espacio que contenga la información de un sitio web o la información visual de una imagen. En ocasiones, estas decisiones se vuelven más simples al crear las cajas contenedoras de información(“div”) de forma proporcional, lo suficientemente grandes para contener la información.

Al utilizar una proporción como la proporción áurea, esta relación de aspecto no se altera por la expansión o contracción. El contenido de un sitio web puede ser mostrado en cualquier tamaño y todavía tendría sentido, ya que no se basa en el mundo físico. El colocar la información de un sitio web dentro de un div que tiene las proporciones áureas permitiría una presentación de la información que sigue las ideas clásicas de la belleza visual. Además, ya que el rectángulo de oro se puede dividir en cuadrados para crear rectángulos áureos más pequeños, la información puede ser incrustada como divs con estas proporciones una dentro de otra.

El Mito de la Lectura Superficial. Investigaciones con eyetracking (http://blog.pucp.edu.pe/item/162324/lectura-superficial)

Algunos estudios acerca del comportamiento de los usuarios mientras navegan, como el citado arriba, indican que las webs se leen desde arriba a la izquierda, en diagonal, hacia abajo a la derecha, perdiendo importancia según se va bajando. Los elementos más importantes tienen que ir siguiendo esta tendencia. Información de importancia se coloca dentro del rectángulo más grande, con información de la sub-categoría en los rectángulos más pequeños. El resultado sería un diseño espacial y visualmente agradable, con información organizada de forma conceptual por el tamaño relativo. Podemos apreciar esto en el diseño del sitio web de Twitter.

Legibilidad

No es que la gente lea menos, los sitios web todavía no están diseñados para que el usuario pueda leer textos extensos cómodamente.

LecturaLa legibilidad se define como la capacidad de una forma para poder ser descifrada y se basa especialmente en la eficiencia de la palabra visible. Existen reglas, o al menos, principios, para la legibilidad tipográfica. Para lograr textos más legibles debemos tener en cuenta estos factores:

  • La forma del tipo
  • Su organización en el espacio
  • Su tamaño (cuerpo)
  • Longitud de línea
  • Distribución de blancos: interletra, interpalabra, interlineado, ubicación del texto en relación al tamaño de la página.
  • La jerarquización de la información.

La proporción áurea también puede ser utilizada para logar mayor legibilidad, ya que nos permite establecer valores o al menos rangos para estos factores. En los siguientes artículos se nos explica mejor como podemos utilizar la razón áurea para el calculo de los factores de legibilidad.

[Cómo calcular tamaños tipográficos para Web] (http://www.cristalab.com/tutoriales/como-calcular-tamanos-tipograficos-para-web-c113111l/)

[Tipografía Básica] (http://tipografiabasica.wordpress.com/)

[Secret Symphony: The Ultimate Guide to Readable Web Typography] (http://www.pearsonified.com/2011/12/golden-ratio-typography.php)

Herramientas

Para finalizar y animarlos a que utilicen esta proporción en sus diseños, les dejo acá algunas de las herramientas que encontré y me parecieron útiles.

Golden Ratio Typography Calculator. Nos calcula a partir del ancho de línea el tamaño de la tipografía y el interlineado o bien calcular en base al tamaño de la letra. También puede calcular en base a cantidad de caracteres por línea y permite visualizar el aspecto de el punto en tal tipografía, de un listado básico de tipografías.

Type Scale. Permite previsualizar y elegir la escala tipográfica adecuada para tu proyecto y experimentar con el tamaño de la tipografía, escala y diferentes fuentes web.

The Golden Grid. Es un sistema de rejilla para web. Es producto de la búsqueda de un sistema perfecto de rejilla moderno. Su intención es ser una herramienta de CSS para los sitios web basados en cuadrícula o rejilla. Incluye ejemplos y hojas de estilo para layout, proporciones comunes para tipografía, imágenes y vídeos.

BlockLayer – Golden Ratio Calculator. Permite calcular las dimensiones de objetos proporcionales utilizando la razón áurea, para objetos rectangulares, círculos, elipses y triángulos.

Un comentario en “La belleza de la proporción, la razón áurea en la web

  1. Pingback: Simplicidad es Elegancia, tendencias de diseño web | Tecnologías de Información y Sistemas

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s