secuencia de Fibonacci

el número áureo en la web

nautilus: web de oro

Tanto Euclides como Fibonacci nos han dejado en herencia recursos matemáticos muy útiles a la hora de conseguir diseños web equilibrados y estéticamente atractivos.

Puedes servirte del teorema del corte dorado de Euclides o de la serie de Fibonacci, para diseñar una retícula que te asegure una distribución armónica de todos los contenidos en tu diseño web.

ratio aureo

Euclides descubrió que la división de planos y rectas más armónica para el ojo humano es la que guarda la el ratio dorado ( número áureo  o proporción áurea ), que sería una proporción 3:5. Se trata de dividir un elemento en dos según las proporciones dadas por el número áureo, de manera que la longitud total es al mayor como la longitud mayor al menor:

El ratio dorado se consigue al dividir la longitud de una línea por 1,62 (en relidad el número es infinito), aquí un trocito para abrir boca:

1.61803398874989484820458683436563811772030917980576286213544862270526046281890 244970720720418939113748475408807538689175212663386222353693179318006076672635 4433389086595939582905638322661319928290267880675208766892501711696207…

Es un número algebraico irracional, una proporción, no una unidad. Este número posee unas propiedades fascinantes ya que esta proporción se encuentra tanto en la geometría como en la música, en las matemáticas, en la naturaleza: la forma como las flores disponen sus pétalos, las galaxias, las caracolas… Los renacentistas se servían de esta ratio dorado para estructurar sus obras de arquitectura, pintura y escultura. Los fotógrafos lo utilizan en sus composiciones y los diseñadores actuales también lo aplican a sus cuadrículas.

La serie de Fibonacci en la web

La divina proporción (AKA) Nautilus aureus

La serie de Fibonacci es una sucesión de números naturales que se suman cada uno con el anterior hasta el infinito. El cociente entre dos números consecutivos de esta serie tiene como límite el número áureo, y las distancias entre dos números seguidos de la serie, produce una imagen muy armónica y atractiva estéticamente.

0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987, 1597, 2584, 4181, …

Los números se pueden interpretar como distancias en píxeles o en centímetros para crear las retículas.

Si estructuras los bloques de contenido de un sitio web conforme a la serie de Fibonacci, la estructura global será visualmente mucho más armónica que si lo hacemos siguiendo una noción artísica, una necesidad o simplemente el azar. Un diseño web estructurado de este modo puede retener más tiempo a los visitantes en tu página web.

Si tenemos en cuenta estas enseñanzas matemáticas a la hora de diseñar nuestos sitios web haremos más agradable la vida de los internautas y contribuiremos a una mayor usabilidad de nuestro sitio web.

Una versión simplificada del corte dorado

Preciosos rectángulos áureos

Una versión simplificada del corte dorado es la regla de los tercios: Dividir una composición en tercios vertical y horizontalmente, es una forma sencilla de aplicar el corte dorado sin tener que hacer demasiados cálculos:

Divide un rectángulo en tres partes iguales horizontal y verticalmente, después divide el tercio superior de nuevo en tres partes, y finalmente divide cada una de sus columnas por la mitad para crear un poco más de una cuadrícula. Repite los pasos para tener unas cuantas reglas de cuadrículas de tercios donde disponer diferentes opciones de diseño.

Si te gusta el tema del número áureo puedes ampliar tu información visitando la Wikipedia, de donde son estas imágenes.

Juana Corbalán de Corbax

6 comentarios en “La web de oro o la divina proporción”

    1. Hola, puedes ver, por ejemplo, el uso de estas secuencias numéricas en todos los diseños de los distintos sitios web de Siemens
      Gracias por comentar.

  1. La sección aurea es una proporción usada en el diseño y la pintura desde los tiempos de durero, el el diseño web siempre estará vigente, buen artículo

    1. Huberto Cánovas

      Estamos de acuerdo. En Blade Runner 2049 quedé impresionada por su belleza. Gracias por comentar, un saludo: Huberto.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Ir arriba