Advertisement
  1. Web Design
  2. UI Design
Webdesign

Haciendo Tus Diseños Web Mas Efectivos Con la Proporción Áurea

by
Length:ShortLanguages:

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

La Proporción Áurea es usada en los maquetados gráficos de toda clase, especialmente para equilibrar contenido que tiene mucho texto. Puede ayudar a los diseñadores a crear jerarquía y atraer la mirada de los usuarios a áreas específicas. ¡Revisa los siguientes ejemplos de sitios web y ve cómo los diseñadores están haciendo uso de ella!

¿Qué es la Proporción Áurea?

La Proporción Áurea es una relación matemática, comúnmente encontrada en la naturaleza, y usada en teoría de diseño clásico para crear composiciones equilibradas Aproximadamente equivale a 1.6180, es también conocida como "La Media Áurea", la "Sección Áurea", y es representada con la letra griega Phi "ϕ".

Un "Rectángulo Áureo o Dorado" es un rectángulo cuya longitud es 1.6180 veces su anchura. Por ejemplo, un div que tiene un lado de 300px y otro de 300 * 1.6180  ≈ 485px se pudiera decir que es un rectángulo áureo.

Si cortas un cuadrado perfecto de éste rectángulo dorado, te quedará otro rectángulo áureo.

Puedes hacer lo mismo con el rectángulo mas pequeño, luego lo mismo otra vez, indefinidamente, dándote ésta imagen familiar:

La Sucesión de Fibonacci

La Sucesión de Fibonacci es similar a la Proporción Áurea, pero no exactamente. Es una serie de números donde el siguiente número en la secuencia es la suma de los dos anteriores. Por ejemplo: 0,1,1,2,3,4,7

Si comenzamos con un cuadrado perfecto, entonces le agregamos otro tenemos un rectángulo.

Sigue añadiendo cuadrados al lado más largo.

Entonces agregamos otro cuadrado, igual a la longitud mas larga de toda la forma:

Una y otra vez:

Esto puede continuar indefinidamente, dándonos el mismo efecto que nuestro Rectángulo Áureo, pero ésta vez aumentando en lugar de disminuir. Tanto la Proporción Áurea y la Sucesión de Fibonacci nos dan similarmente proporciones atractivas.

Analicemos ahora sitios web donde podemos verlos en acción.

Ejemplo #1: YStudio

yourlocalstudio.dk

¿De Qué Se Trata Este Sitio Web?

"Your Local Studio" es un estudio de diseño y desarrollo con base en Copenhague, Dinamarca. Se especializa en trabajar con conceptos visuales de cualquier forma para crear experiencias que mejoran los entornos.

¿Como usa la Media Áurea?

El sitio web aquí usa la media Áurea en dos de sus tres páginas. La página de inicio es una visión general conceptual de piezas de trabajo clave. Sin embargo, cuando visitas la página del estudio mezcla un poco del maquetado web tradicional con formas rectangulares de la media áurea mientras te desplazas hacia abajo en la página.

¿Por Qué es Eficaz?

¿Quieres destacarte entre la multitud? Yourlocalstudio (YLS) ha hecho eso al utilizar la proporción áurea en el diseño de su sitio web. El diseño presenta un aspecto progresista con sistema de grilla definido. Pudieras argumentar que éstos días todo se parece a bootstrap.. observa mas y mas sitios buscando llamar la atención con un maquetado mas estructuralmente dinámico .

Ejemplo #2: Mashable

mashable.com

¿De Qué es el Sitio Web?

Mashable es un sitio web de noticias; una fuente de información, conocimiento y recursos para la "generación conectada".

Como Utiliza la Media Áurea

He usado la prueba de Proporción Áurea de UX Triggers para demostrar como Mashable usa la sucesión de Fibonacci en su maquetado. El maquetado del contenido es flexible, con el titular a la izquierda y los enlaces a mas noticias a la derecha, separados por las grillas.

Por Qué es Eficaz

La Proporción Áurea es eficaz aquí, pues permite un sitio impulsado por contenido para dar a la tipografía espacio para respirar. Sitios similares pueden aparecer mas densamente llenos de contenido, usando maquetados tradicionales de grillas, pero Mashable demuestra que la Proporción Áurea puede ser eficaz incluso cuando es invisible.

Ejemplo #3: Jackson & Kent

www.jandk.fr

¿De Qué es el Sitio Web?

Jackson & Kent es una agencia de producción web de Francia. Se especializan en servicios digitales como HTML5, CSS3, Drupal, WordPress, PHP/MySQL, Flash, etc.

Como Usa la Medida Áurea

La captura de pantalla de arriba muestra como el maquetado inclulye principalmente trabajos de clientes anteriores. También presenta un bloque de contenido sobre la agencia misma y una barra de navegación en el centro de la pantalla. El botón de contacto, como se muestra abajo, también usa la media áurea como un sistema de grilla para organizar el maquetado de una forma única.

Por Qué es Eficaz

El ejemplo aquí te anima a seccionar el sitio web y explorar su contenido horizontalmente. La vista cuadriculada y formas de bloques de diferentes tamaños hacen el contenido más interesante visualmente. Como lo usuarios probablemente ven el contenido en una computadora de escritorio (asi como en tabletas), hay números de paginación en la navegación del eje horizontal. Ésta es una manera inovadora de ver cada fragmento de contenido, pero también el UI en general.

Conclusión

La proporción áurea naturalmente conduce los ojos de los usuarios a puntos específicos dentro de una interfaz de usuario. Como concepto puede ayudarte a pensar sobre la colocación de contenido y usar la jerarquía eficazmente. La combinación de maquetado, tipografía, color y principios generales te ayudarán a llevar tus diseños al próximo nivel.

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.