Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Web Development
Code

La Proporción Áurea en Diseño Web

by
Difficulty:IntermediateLength:ShortLanguages:

Spanish (Español) translation by David Castrillón (you can also view the original English article)

Las matemáticas son hermosas. ¿Suena esto un poco extraño? Seguro que lo pensé cuando empecé a diseñar. Las matemáticas son tan rígidas y muchas veces aburridas, o así pensé. Te sorprenderías al descubrir que los diseños más estéticamente agradables, las obras de arte, los objetos y las personas incluso tienen matemáticas en común. Específicamente la proporción áurea, también conocida como la divina proporción, que es designada por el signo Φ de la letra griega (phi). Este tutorial cubre la anatomía y el diseño de un sitio web y cómo se relaciona la proporción áurea.


1. Anatomía de una Página Web

Los elementos de una página web son como los órganos; son vitales para que una página web funcione adecuadamente y sea estéticamente agradable.

Estos son los principales elementos de una página web. Hay muchas formas de organizarlas pero este es quizás el diseño básico más común utilizado en línea.


2. Contenedor

Todas las páginas web utilizan un contenedor y para el mismo propósito; para contener los elementos de la página, sin embargo la forma en que se lleva a cabo varía. Por ejemplo, la etiqueta body o un div se utiliza más comúnmente. En el pasado, incluso una tabla se ha utilizado (no utilices una tabla como tu contenedor de página, es un método depreciado). Piensa en el contenedor como las paredes externas de tu casa en las que luego se colocan tu dormitorio, la cocina, la sala de estar, etc..

Tipos de contenedores:

  1. Líquido: Se expande para llenar el ancho de la ventana del navegador.
  2. Fijo: Un ancho específico que eliges el cual no cambia sin importar el tamaño de la ventana del navegador.


3. Encabezado

El encabezado no es realmente un elemento específico aunque algunos pueden considerar que lo es. Más generalmente se usa al referirse a la parte superior de la página web donde se encuentran tu logo, la navegación, el eslogan, etc.. Muchas personas prefieren mantener estos elementos contenidos dentro de un div para que sea más fácil darle estilos a la página, la separación del elemento o al contenido del elemento. La cabecera se consideraría un contenedor por lo que tendríamos dos tipos para elegir: líquida o fija como se mencionó anteriormente.


4. Logo

Tu logotipo es tu identidad y tu marca. La colocación más común para el logo es dentro de la cabecera, alineada a la izquierda. Leemos de izquierda a derecha, de arriba a abajo, por lo que tu logo será probablemente el primer elemento que los visitantes miren.


5. Navegación

La navegación de la página es uno de los elementos más importantes; tus visitantes necesitan utilizarla en tu sitio Web. Debería ser fácil de encontrar y de usar, razón por la cual casi siempre se encuentra dentro de la cabecera o al menos cerca de la parte superior de la página. A veces se utilizan ambos tipos de navegación para sitios web de alto contenido.

Tipos de navegación:

  1. Horizontal: Una serie de enlaces aparece en línea, generalmente conocido como "navegación".
  2. Vertical: Una serie de enlaces que se muestran como una pila vertical, generalmente conocido como "menú".


6. Contenido Principal

Como todo el mundo sabe (o debería), el contenido es el rey! Cuando la gente visita tu sitio, este es el elemento que se busca principalmente. Debe ser el punto de enfoque principal de una página web para que los visitantes encuentren rápidamente lo que buscan.


7. Barra lateral

La barra lateral es el elemento con tu contenido secundario tal como publicidad, búsqueda, enlaces de suscripción (RSS, Twitter, correo electrónico, etcétera), métodos de contacto, etcétera. Este elemento no es necesario aunque muchos sitios web lo utilizan. Es más a menudo alineado a la derecha pero se puede alinear a la izquierda o a ambos lados (dos laterales) mientras que no afecten la visualización del contenido principal. Para sitios web que utilizan navegación vertical y horizontal, la barra lateral a menudo se sustituye por el elemento de navegación vertical.


8. Pie de página

Al final de una página web siempre se debe usar un pie de página para que tus visitantes sepan que han alcanzado el final de tu página web. Como el encabezado, el pie de página no es realmente un elemento específico, sino más bien una sección contenedora. Dentro de tu pie de página estará la información de derechos de autor, legal y de contacto principalmente. Es una buena idea incluir algunos enlaces a las secciones más importantes de tu sitio como la parte superior de la página, página de inicio, página de contacto, etcétera. Algunos sitios web utilizan esta área como una oportunidad para mencionar material relacionado u otra información importante.


9. "Espacio en blanco"

Esta es cualquier área de la página web que no está cubierta por tipografía u otros contenidos. Podrías sentir el fuerte impulso de llenar tanto espacio como sea posible !pero no lo hagas! El espacio vacío es tan importante para un buen diseño como el contenido que se utilizará. Se puede ver cómo el sitio de NetTuts utiliza el espacio vacío muy eficazmente para ayudar a guiar a los visitantes a través del contenido, crear un balance de página y darle un buen sentido de separación del contenido.

Así, esto cubre la anatomía de una página web. Ahora vamos a echarle un vistazo a cómo la proporción áurea se refiere a estos elementos.


10. La Proporción Áurea y Utilizando Cuadrículas

¿Recuerdas antes cuando te dije que las matemáticas eran hermosas? Percibimos el atractivo visual basado en la relación (es decir, la proporción áurea). Durante miles de años artistas, diseñadores, arquitectos, etc. han intencionalmente o no, utilizado una relación común en su trabajo que es estéticamente agradable. ¿Cuál es el número mágico? 1.62 (realmente 1.618...) No entraré en los detalles del origen de este número pero te diré cómo usarlo.

Utilizar la proporción áurea es muy simple. Digamos que deseas encontrar el ancho de las columnas del contenido principal y de tu barra lateral. Tomarías el ancho total de tu área de contenido (usaremos 900px para este ejemplo) y que se divida por 1.62. Como se muestra en el ejemplo anterior dividimos 900px por 1.62 y obtenemos 555.55px. No tenemos que ser exactos por lo que lo redondeamos a 555px. Ahora ya sabes que tu principal elemento de contenido será de 555px de ancho y tu barra lateral será de 345px! ¿Qué tan fácil es esto?

¡Pero espera! La diversión no se detiene allí. También puedes aplicar la proporción áurea a la anchura de otro elemento en relación con su altura o viceversa. Esto produce elementos estéticamente placenteros con las proporciones de la Proporción Áurea.


11. Utilizando Rejillas

Aunque si eres como la mayoría de la gente, no querrás sacar una calculadora cada vez que desees utilizar esta relación. Para simplificar el proceso, podemos utilizar una cuadrícula simple. Todo lo que hacemos es dividir la anchura o la altura en tercios.

Cada división puede reducirse aún más en tercios, produciendo una cuadrícula más detallada. Si lees el artículo anterior "Una Mirada Cercana al framework Blueprint CSS", verás que el framework Blueprint CSS utiliza un sistema de cuadrícula detallada. La cuadrícula no sólo hace el diseño más fácil y rápido sino que también crea un diseño estéticamente agradable! Si no utilizas ya una cuadrícula de diseño, ahora puede ser un buen momento para darle una oportunidad. Puedes descargar una plantilla de cuadrícula para Fireworks, Photoshop y más desde http://960.gs, que es otro fantástico marco CSS que utiliza cuadrículas.

Como se puede ver, Tuts+ sigue la proporción áurea bastante bien. El tercio superior de la página se divide otra vez en tercios para mostrar cómo incluso la sección de encabezado se descompone en incrementos más pequeños de los tercios, muy cerca de la proporción áurea. No es de extrañar por qué es tan atractivo el diseño de NetTuts!

Si eres nuevo en el diseño te animo altamente a encontrar algunos sitios populares, evaluar la disposición de sus elementos y cómo cumple la proporción áurea y las cuadrículas. Entonces tómate tu tiempo para practicar el uso de la proporción áurea con sus elementos y colocarlos en tu diseño utilizando una cuadrícula.

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.