() translation by (you can also view the original English article)
Las matemáticas están en todas partes, inclusive dónde no las esperarías. Puedes encontrar radios y constantes matemáticos en arquitectura, pero también en los instrumentos que usamos para hacer música. De hecho, encontrarás matemáticas en ciertos juegos que hemos practicado y, por lo tanto, no debería de sorprenderte también que las matemáticas jueguen un rol importante en el diseño web. Pero… ¿qué rol juegan?, y ¿cuál es ese rol? Además, ¿cómo podemos usar estos radios, constantes y teorías para hacer nuestros diseños web más hermosos?
Las matemáticas están…¡en todas partes!
Walt Disney inclusive, una vez hizo una película sobre el Pato Donald en Matematicalandia. En este vídeo —disponible en YouTube—, ellos le presentan las matemáticas a los niños y, además, les enseñan para qué se usan las matemáticas. En el vídeo muestran que un radio matemático se usa para definir las notas de nuestros instrumentos musicales, además, que un rectángulo matemático puede encontrarse, tanto en la arquitectura moderna como en la antigua. Pero también, podemos encontrar, exactamente, ese mismo rectángulo en algunas muestras de arte Renacentista, por ejemplo, la famosa obra de Leonardo Da Vinci.
La lección general es simple: puedes usar algunos principios básicos de matemática para diseñar en orden y de forma más hermosa en tus propios diseños.
Un Poquito de Historia
En la Grecia antigua, había un grupo élite de matemáticos, quienes se hacían llamar; los Pitagóricos. Los Pitagorianos tenían como su emblema: el Pentagrama. Ellos eligieron esta forma debido a su perfección matemática. La forma lineal del pentagrama, ya contiene “el radio de oro”; ¡tres veces! Además, hay toneladas de rectángulos de oro que están ocultas dentro de esta forma, de hecho, estas son las mismas formas rectangulares que están presentes en la obra máxima; La Mona Lisa.
Cría de Conejos
Un tiempo durante el siglo 12 y 13, vivió un talentoso matemático italiano. Su nombre era Leonardo Pisano Bigollo, aunque es posible que lo conozcas mejor como Fibonacci. En su libro: Liber Aci, él observo la reproducción natural de los conejos. En este mundo ideal de él, en dónde ningún conejo jamás moriría y cada conejo individual empezaría a reproducirse tan rápido cómo fuera posible, él se dio cuenta de que este ciclo contenía una secuencia especial de números. Esta secuencia más tarde se conoció como: Los Números de Fibonacci.
Lo que hay de especial en esta secuencia de números es que; si divides un número seleccionado con el número anterior de la secuencia, obtendrás (aproximadamente) el mismo resultado , todo el tiempo. Este número es, aproximadamente; 1.618, mejor conocido cómo Phi. Cuánto más avanzas en la secuencia, cuánto más el resultado de la división se convierte en Phi. Fibonacci, también se enteró que esta secuencia no solamente se encontraba en la reproducción de los conejos, sino que también en otras cosas en la naturaleza, tales como el arreglo de las semillas en un girasol.
El Radio de Oro
Cómo ya debes de saber; Phi es una constante muy prominente en diseño; esto es debido al radio de 1 a 1.618 que es mejor conocido cómo: La Proporción Áurea o El Radio de Oro, —pero al que a menudo se refieren como; la Sección Áurea o Sección de Oro, la Medida de Oro o Radio Divino—. Si se crea un rectángulo de acuerdo a éste radio, obtienes una forma conocida como: Rectángulo Divino o Dorado.
El Rectángulo Divino o Dorado que se muestra aquí; demuestra cómo se puede dividir infinitamente (y sobre todo, perfectamente).
El Radio de Oro y el Rectángulo Dorado es usado en muchas formas de arte y diseño. Durante el período Renacentista, muchos artistas proporcionaron a sus obras de arte este radio y también este rectángulo. En la antigua Grecia, los arquitectos usaban este rectángulo en el diseño de los edificios; el Partenón, es un buen ejemplo de esto. Incluso en la arquitectura moderna, el rectángulo dorado tiene una fuerte presencia.
Pero… ¿Qué lo hace tan especial? Bueno, debido a que este número; Phi, encuentra sus origines en la naturaleza, los seres humanos automáticamente nos encontramos a gusto con este radio. Debido a que estamos tan familiarizados con este radio, naturalmente, activa una sensación de equilibrio y armonía. Por esa razón, usar éste radio puede garantizar una composición equilibrada de tus elementos en el diseño.
Ejemplos de El Radio de Oro en el Diseño Web
Incluso antes de empezar a pensar en aplicar este radio a nuestros diseños, primero deberíamos echar un vistazo a unos cuantos ejemplos que ya usan el radio.
Un buen ejemplo es este sitio web, debido a que su diseño contiene múltiples casos de éste radio. En la imagen abajo, puede ver una toma de pantalla del sitio web. Como puedes ver, he usado los colores para marcar las diferentes columnas. La anchura de la columna principal con la publicación del blog contenida en ella, es más o menos 1.618 veces tan grande como la barra lateral con los anuncios. Un cálculo rápido en la parte inferior demuestra esto.
Pero no solamente este sitio usa el radio de oro en su anchura total, sino que también fue aplicado a algunas de las partes más pequeñas del sitio.
Ahora echemos un vistazo rápido a la columna principal, y después, dentro del contenido. Cómo podrás ver a continuación, el elemento que contiene es de aproximadamente: 1.618 veces tan grande que el contenido para leerse dentro de este elemento.
Otro buen ejemplo es el famoso blog; Smashing Magazine. Su columna principal tiene una anchura total de un poco más de 700 pixeles. Luego, cuándo divides este número entre 1.618 (el radio de oro), obtendrás como resultado un ancho de 435 pixeles, más o menos. La anchura exacta de la barra lateral.
¿Cómo puedes aplicar este Radio a tus Próximos Diseños?
El lienzo de una pintura y la anchura de un edificio, ambos tienen un ancho fijo, pero los monitores que muestran nuestro trabajo varían en tamaños. Por lo tanto —y especialmente en los diseños fluidos o líquidos—, hay una variable extra que deberá tomarse en consideración cuando calculamos el radio de oro.
Sin embargo, hay una manera fácil de superar este problema. Cuándo quieras calcular el ancho de un elemento de acuerdo al radio, lo único que necesitas tomar es la anchura del elemento-principal, que es el elemento contenedor. En nuestro primer y, también en el último ejemplo, esta fue la anchura completa de un sitio web: 1190px/1.618=735px; cómo puedes apreciar; 1190 es el ancho total que tendrá el sitio web, luego se dividió entre el radio de oro, y se obtuvo una medida de 735px que será el ancho de la columna principal. En el segundo ejemplo, fue solamente la anchura de una parte más pequeña: su columna principal; que es el resultado de dividir: 735px / 1.618 = 435px, es el ancho de la barra lateral.
De todos modos, cuándo ya has determinado la anchura del elemento contenedor, ahora deberías dividir este valor entre Phi. Y el resultado te dará la anchura del elemento principal. Ahora, todo lo que queda es restar el resultado del elemento principal del ancho original y eso te dará el ancho de la columna secundaria.
Si por alguna razón tuvieras problemas para recordar el valor de Phi, o suponiendo que eres un perezoso para llenar algunos números en la calculadora, te sugiero usar Phiculator. ¿Qué hace? Bueno, esta pequeña aplicación requiere que llenes un valor (por ejemplo, el ancho de lo que será el elemento contenedor) y automáticamente calculara el ancho correspondiente. Inclusive, puedes pedirle a la calculadora que te de los números enteros, así qué, ya no tendrás que preocuparte por los números decimales.
La Regla de Tres
Otra famosa división matemática es: la regla de tres. ¿Qué hace? Bueno, esta regla puede ayudarte a crear una composición más equilibrada al dividir tu lienzo o área de trabajo en nueve partes iguales. ¿Cómo se hace? La regla es un poco similar a la del Radio de Oro, cómo la división por 0.62 es muy similar a 0.67; qué es igual a tener: dos tercios.
Fotografía
Una forma de arte donde la regla de tres es usada muy a menudo es en la Fotografía, ya que es una guía fácil y rápida para obtener una buena composición. Es por esa razón, que probablemente encontraras una función en tu cámara digital que divide su pantalla LCD en nueve partes iguales. Inclusive, algunas mini cámaras dSLR, también tienen esta función, como ubicar unos pocos puntos de luz en el visor al enfocar.
¿Cómo funciona?
Usando la regla de tres, dividirás tu lienzo horizontalmente y verticalmente en tres partes iguales. Y esta división te dará; nueve rectángulos iguales; cuatro líneas y cuatro puntos de intersección. A partir de ahí puedes crear una composición interesante y equilibrada usando estas líneas y puntos de intersección.
La clave en una buena composición, obviamente, se encuentra en el posicionamiento de los elementos correctamente. Cuando usas la regla de tres, hay dos cosas con las que puedes posicionarte.
La primera son las líneas usadas para dividir el lienzo. En fotografía, cosas con una forma larga y recta son, a menudo, alineadas a estas líneas. En diseño, los elementos con esta misma forma, como las barras laterales, también pueden alinearse a estas líneas.
La segunda cosas para alinear son los puntos donde sus líneas divisoras se interceptan. Necesitaras poner uno o dos objetos en este punto, porque demasiados, por otro lado, arruinarían la composición.
Un buen ejemplo de esto fue una fotografía que encontré en el sitio web de fotografías Flickr. Cómo verás abajo, el fotógrafo alineo la fila de los edificios con la línea superior y en el punto de intersección de la esquina superior derecha encontrarás una casa que es la qué más se destaca por su color. Debido a que ya es un punto focal, alinearla con el punto de intersección le añadió una buena composición y una sensación de balance o equilibrio.
La fotografía en flickr la puedes encontrar aquí.Hemos visto la regla de tres aplicada a la fotografía, pero ¿qué te parece aplicarla al diseño web? ¿Podemos encontrar ejemplos de eso?
La Regla de Tres en Diseño Web.
Un buen ejemplo de la regla que ha sido aplicado a un diseño web es, nuevamente, éste sitio web. He preparado una imagen que podrás ver abajo. Muestra lo siguiente; a la derecha: la barra lateral esta alineada muy cerca de la línea vertical de la derecha. A la izquierda, puedes ver que los artículos están ubicados en los puntos de intersección.
Las dos alineaciones que viste arriba crean una sensación de armonía en el diseño del sitio web.
Aplicando la Regla de Tres a tu próximo Diseño
Exactamente, ¿cómo se puede aplicar la Regla de Tres al diseño de tu sitio web? Nuevamente, la variación de la anchura de nuestro lienzo puede ocasionarnos algunos problemas. Cuando usemos la misma técnica como lo hicimos con el Radio de Oro, aunque, después de todo estaremos bien.
Para llevar a cabo la división, debes tomar el ancho completo de tu elemento contenedor y dividirlo entre 3. Luego, tendrás que dibujar una línea, o una guía (lo que más te convenga), tienes que hacerlo dos veces sobre los valores que obtuviste (como resultado de multiplicarlos por 2 para conseguir la posición de la segunda línea).
Aunque la segunda parte de la división puede darte algunos problemas. La altura de nuestro lienzo, también, es variable, por lo tanto, dividir esta variable entre 3 nos da algunos problemas. Por otro lado, la forma que uso para evitar esto es; calcular la altura de la división con un radio de 16:9 (ancho de pantalla) o simplemente usar la altura del elemento contenedor. Dividir el ancho del elemento contenedor entre 16 y multipliques ese resultado por 9, y así habrás obtenido tu altura. Ahora puedes dividir este numero por 3, nuevamente, y dibujar las líneas y las guías, respectivamente.
Cuando consigues las guías, entonces puedes ubicar tus elementos de acuerdo a estas guías. También puedes alinear tus elementos con estas líneas y debes poner algunos elementos de sumo interés y contraste en los puntos de intersección.
Sistema de Guías.
Para empezar, no puedes pensar en Guías o Cuadriculas como lo has estado haciendo con las matemáticas, pero lo son. Estas dividiendo tu lienzo en diferentes columnas y medianiles, esta división por dos o por tres, la he visto hasta por 16, y es realmente matemático.
Muchas personas argumentan que el sistema de guías limita tu creatividad, debido a ha qué estas limitando tu libertad con un sistema de guías. Sin embargo, no creo que esto sea verdad, como aprendí por medio de un libro llamado Vormator, a través del cual aprendes que las limitaciones actualmente aumentan tu creatividad. Esto es porque pensaras constantemente en soluciones para la creatividad con esto del sistema de guías en mente, de otro modo, nunca hubieras pensado en esas ideas si no tuvieras esas restricciones de las guías.
La razón por la cuál el sistema de guías funciona es porque pueden guiarte en el agrandamiento, posicionamiento y alineación del diseño de tu sitio web. Pueden ayudarte en la organización y eliminar el desorden de contenido. Pero sobre todo, es que son fáciles de usar.
Otra buena razón para usar guías es que las reglas fueron hechas para romperse, ¿o no es así? Si “rompe" sus guías de vez en cuando, no esta mal. ¡Todo lo contrario! Romper su guía puede crear un interés especial para un elemento específico de la página. Esto puede ayudarte a alcanzar ciertos objetivos, como un llamado a la acción porque destaca más con esto.
¿Cómo crear una buena Guía?
No hay una verdadera forma para construir un buen sistema de guías, porque como ellas giran alrededor del contenido y ningún contenido es el mismo. Pero por el bien de ellas, demostrare un simple proceso de cómo construir una guía de 6 columnas en un medio de trabajo con un ancho de 960pixeles.
Primero, dividiremos el ancho total de nuestro lienzo entre 6 y así obtendremos el ancho total de cada columna, de las 6 para ser exactos. El resultado de esta división es 160 pixeles, como podrás apreciar en la imagen de abajo.
Luego, crearemos una imagen de una columna y duplicaremos esta después. De esta manera es más fácil crear nuestras completas guías después, así no tendremos que repetir este paso para cada columna.
Vamos a decidir sobre el tamaño de nuestro medianil, y creo que 20 pixeles será suficiente. El medianil deberá ser añadido en ambos lados de la columna, así que debemos dividirlo entre dos. Si no hacemos esto, cada medianil tendrá un ancho de 40 pixeles. Como puedes ver en la imagen debajo, hemos añadido un medianil de 10 pixeles a cada lado.
Ahora podemos duplicar esta imagen hasta que alcancemos el total de 960 pixeles nuevamente, y hemos creado (básicamente) nuestro propio sistema de guías.
¡Soy perezoso!
No te preocupes, si eres perezoso, no tienes por qué vivir sin las guías. Hay bastantes sistemas de guías que podemos conseguir en Internet. Uno de mis favoritos y estoy seguro que has escuchado al respecto anteriormente, es el famoso sistema de guías 960, que tiene un marco para CSS y un archivo PSD con todas las guías instaladas.
Conclusión
Espero haberte mostrado que las matemáticas pueden ser bellísimas cuando las aplicas al diseño, y te he dado suficientes técnicas para que las uses en tus próximos diseños. Sin embargo, se cuidadoso, hay muchas cosas más que se requieren para hacer de un diseño un éxito, y por lo tanto, usar estas técnicas no son una garantía para obtener buenos diseños pero seguramente te ayudaran y te guiaran en el proceso de hacer uno.
¡Gracias por leer este artículo!
