Share
Las matemáticas están en todas partes, incluso donde no las esperarías. Puedes encontrar razones matemáticas y constantes en la arquitectura, pero también en los instrumentos que usamos para hacer música. Puedes encontrar las matemáticas en ciertos juegos que jugamos, y por lo tanto no debería sorprenderte que las matemáticas desempeñen un papel importante en el diseño web también. ¿Pero cuál es este papel? ¿Y cómo podemos usar estas proporciones, constantes y teorías para hacer que nuestros diseños web sean más hermosos??
Walt Disney una vez hizo una película sobre Donald Duck en Mathmagicland. En este video, disponible en YouTube, presentan a los niños las matemáticas y para qué se usan. Muestra que se usa una proporción matemática para definir las notas en nuestros instrumentos, y que se puede encontrar un rectángulo matemático tanto en la arquitectura antigua como en la moderna. Además, podemos encontrar este mismo rectángulo exacto en el arte del Renacimiento, por ejemplo, el famoso Leonardo Da Vinci.
La lección general es simple: puedes usar algunos principios matemáticos básicos para diseñar el orden y la belleza en tus propias creaciones..
En la antigua Grecia había un grupo de matemáticos de élite que se llamaban a sí mismos los Pitagóricos. Los pitagóricos tenían el pentagrama como su emblema. Eligieron esta forma debido a su perfección matemática: ¡la forma lineal del pentagrama ya contiene la proporción de oro ya tres veces! Además, hay toneladas de rectángulos dorados ocultos dentro de la forma también, estos son los mismos rectángulos dorados que están presentes en la Mona Lisa.
Un rato después de eso, en el 12.th y 13th Siglo, vivió un talentoso matemático italiano. Su nombre era Leonardo Pisano Bigollo, aunque quizás lo conozcas mejor como Fibonacci. Por su libro Liber Aci, Observó la cría natural de conejos. En este mundo ideal de él, donde ningún conejo moriría y cada conejo individual comenzaría a reproducirse lo antes posible, descubrió que este ciclo contenía una secuencia especial de números. Esta secuencia más tarde se conoció como la Números de Fibonacci.
Lo que es tan especial de esta secuencia es que si divide un número elegido con el número anterior en la secuencia, obtendrá (aproximadamente) el mismo número, cada vez. Este número es aproximadamente 1.618, mejor conocido como Phi. Cuanto más avanzas en la secuencia, más se acerca el resultado de la división a Phi. Fibonacci también descubrió que esta secuencia no solo se encuentra en la cría de conejos, sino también en otras cosas de la naturaleza, como la disposición de semillas en un girasol..
Como ya sabrá, Phi también es una constante muy prominente en el diseño; Esto se debe a que una proporción de 1 a 1.618 se conoce mejor como Proporción de oro - a menudo referido como el sección dorada, Media dorada o la Proporción divina. Si creas un rectángulo de acuerdo con esta proporción, obtienes una forma conocida como Rectángulo dorado.
The Golden Ratio y el Golden Rectangle se utilizan en muchas formas de arte y diseño. En el período del Renacimiento, muchos artistas proporcionaron sus obras de arte de acuerdo con esta proporción y rectángulo. En la antigua Grecia, los arquitectos utilizaron 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é es lo que hace que esta relación sea tan especial? Debido a que este número, Phi, encuentra su origen en la naturaleza, nosotros, los humanos, nos sentimos automáticamente cómodos con esta proporción. Debido a que estamos tan familiarizados con esta relación, naturalmente provoca una sensación de equilibrio y armonía. Por esa razón, el uso de esta relación puede garantizarle una composición equilibrada de sus elementos..
Antes de comenzar a pensar en aplicar la proporción a nuestros diseños, primero debemos ver algunos ejemplos que ya usan la proporción..
Un buen ejemplo es este sitio web, ya que su diseño alberga varios casos de relación. En la imagen de abajo, puedes ver una captura de pantalla de este sitio web. Como puedes ver, he usado dos colores para marcar las diferentes columnas. El ancho de la columna principal con las publicaciones del blog es más o menos 1.618 veces más grande que la barra lateral con los anuncios. Un cálculo rápido en la parte inferior prueba esto.
Pero este sitio web no solo utiliza la proporción áurea en su ancho total, sino que también se aplica a algunas de las partes más pequeñas del sitio web..
Echemos un vistazo rápido a la columna principal, y luego el contenido dentro. Como puede ver a continuación, el elemento que contiene es aproximadamente 1.618 veces más grande que el contenido que se debe leer dentro de este elemento.
Otro buen ejemplo es el famoso blog Smashing Magazine. Su columna principal tiene un ancho total de poco más de 700 píxeles. Cuando divide este número por 1.618, el resultado es aproximadamente 435: el ancho exacto de la barra lateral.
El lienzo de una pintura y el ancho de un edificio tienen un ancho fijo, los monitores que muestran nuestro trabajo varían en tamaño. Por lo tanto, y especialmente en diseños de fluidos, hay una variable adicional que se debe tener en cuenta al calcular la proporción de oro.
Sin embargo, hay una manera fácil de superar este problema. Cuando quiere calcular el ancho de un elemento de acuerdo con la proporción, solo necesita tomar el ancho de su elemento padre, por lo tanto, el elemento que lo contiene. En nuestro primer y último ejemplo, este era el ancho completo de un sitio web. En el segundo ejemplo, esto era solo el ancho de una parte más pequeña: su columna principal.
De todos modos, cuando hayas determinado el ancho del elemento que contiene, ahora debes dividir este valor por Phi. El resultado te dará el ancho del elemento principal. Ahora, todo lo que queda por hacer es restar el resultado del elemento principal de su ancho original, esto le dará el ancho de la columna secundaria.
Si tiene algún problema para recordar Phi, o cuando solo es perezoso para completar algunos números en una calculadora, sugiero usar Phiculator. Esta pequeña aplicación requiere que completes un valor (el ancho del elemento que contiene) y calcula automáticamente el ancho correspondiente. Incluso puede pedirle que calcule con números enteros, por lo que tampoco tiene que preocuparse por los números decimales.
Otra famosa división matemática es la regla de los tercios. Esta regla puede ayudarlo a crear una composición equilibrada al dividir su lienzo en nueve partes iguales. La regla es un poco similar a la Proporción Dorada, ya que la división por 0.62 es muy similar a 0.67, lo que equivale a dos tercios.
Una forma de arte donde la regla de los tercios se usa muy a menudo está en la fotografía, ya que es fácil y rápido. guía para conseguirte una buena composición. Es por esto que es probable que encuentre una función en su cámara digital que divide su pantalla LCD en nueve partes, utilizando la regla de los tercios. Incluso algunos dSLR tienen esta función, ya que colocan unos pocos puntos de luz en el visor al enfocar.
Usando la regla de los tercios, dividirás tu lienzo horizontalmente. y Verticalmente en tres. Esta división te da nueve rectángulos iguales, cuatro líneas y cuatro puntos de intersección. Puede crear una composición interesante y equilibrada utilizando estas líneas y puntos de intersección.
La clave en una buena composición, obviamente, reside en posicionar sus elementos correctamente. Al usar la regla de los tercios, hay dos cosas con las que puede posicionarse.
Las primeras son las líneas utilizadas para dividir el lienzo. En la fotografía, las cosas con una forma larga y recta a menudo se alinean con estas líneas. En diseño, las cosas con esta misma forma, como una barra lateral, también se pueden alinear con estas líneas.
Las segundas cosas a alinear son los puntos donde se intersecan las líneas divisorias. Tendrá que poner uno o dos objetos en estos puntos, ya que demasiado aún matará su composición.
Un buen ejemplo de esto lo encontré en el sitio web de fotografía Flickr. Como puede ver a continuación, el fotógrafo alineó la fila de edificios con la línea superior y, en el punto de intersección superior derecho, encontrará una casa que se destaca más por su color. Ya que es un punto focal por sí mismo, alinearlo con el punto de intersección se suma a una buena composición y una sensación equilibrada.
flickr fotografia encontrada aqui Hemos visto la regla de los tercios aplicada a la fotografía, pero ¿qué hay de aplicarla al diseño de sitios web? ¿Podemos encontrar ejemplos de eso??
Un buen ejemplo de la regla que se aplica al diseño web es, nuevamente, este sitio web. He preparado una imagen que podéis ver a continuación. Muestra que, a la derecha, la barra lateral está alineada muy cerca de la línea vertical de la derecha. A la izquierda, puede ver que los artículos están posicionados en los puntos de intersección.
Las dos alineaciones que ves arriba crean una sensación de armonía en el diseño de este sitio web.
Entonces, ¿cómo se puede aplicar exactamente la regla de los tercios al diseño de su sitio? Una vez más, el ancho variable de nuestro 'lienzo' puede traer algunos problemas. Sin embargo, cuando usamos la misma técnica que usamos con la proporción áurea, estaremos bien..
Para aplicar la división, debes tomar el ancho completo de tu elemento contenedor y dividirlo por tres. Luego tiene que dibujar una línea (o una guía, lo que más le convenga) dos veces sobre el valor que obtiene como resultado (multiplíquelos por dos para obtener la posición de la segunda línea).
Sin embargo, 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 por tres nos dará algunos problemas. La forma en que lo uso para solucionar esto, es calcular la 'altura' de la división con una relación de 16: 9 (pantalla panorámica) o simplemente usar la altura del elemento que lo contiene. Divide el ancho del elemento que contiene por 16 y multiplica ese número por 9 y obtendrás una altura. Ahora puedes volver a dividir este número entre 3 y dibujar las líneas / guías.
Cuando haya configurado las guías, ahora puede colocar sus elementos de acuerdo con estas guías. Alinee sus elementos con las líneas, y debe poner algunos elementos de interés y contraste en los puntos de intersección.
Puede que no creas que las cuadrículas son matemáticas, pero lo son. Estás dividiendo tu lienzo en diferentes columnas y canales, esta división por dos, tres, y he visto hasta dieciséis, es realmente matemática..
Mucha gente argumenta que los sistemas de red limitan su creatividad, porque está limitando su libertad con un sistema de red. No creo que esto sea cierto, ya que el libro llamado Vormator me enseñó que las limitaciones en realidad aumentan tu creatividad. Esto se debe a que usted pensará en soluciones teniendo en cuenta estos límites, mientras que estas ideas nunca se hubieran pensado si no tuviera estas restricciones..
La razón por la que los sistemas de rejilla "funcionan" es que pueden guiarlo en el tamaño, posicionamiento y alineación del diseño de su sitio web. Pueden ayudarlo a organizar y eliminar el desorden del contenido. Pero lo más importante, son fáciles de usar.
Otra buena razón para usar cuadrículas es que las reglas deben romperse, ¿no es así? Si 'rompes' tu cuadrícula de vez en cuando, no está mal. ¡De lo contrario! "Romper" la cuadrícula puede crear un interés especial para un elemento específico en la página, porque está en contraste con el resto. Esto puede ayudarlo a lograr ciertos objetivos, como una llamada a la acción que se destaca más por este motivo..
No hay una forma real de construir un buen sistema de cuadrícula, ya que giran en torno al contenido y ningún contenido es realmente el mismo. Pero en aras de esto, demostraré un proceso simple para construir una cuadrícula de 6 columnas en un entorno de 960 píxeles de ancho..
Primero, dividiremos el ancho total de nuestro lienzo por 6 para que tengamos el ancho total de cada columna. El resultado de esta división es de 160 píxeles, como se puede ver a continuación en la imagen..
En segundo lugar, crearemos una imagen de una columna, la duplicaremos más adelante. De esta manera es más fácil crear nuestra cuadrícula completa después, ya que no tenemos que repetir este paso para cada columna.
Decidiremos el tamaño de nuestra canaleta, creo que bastarán 20 píxeles. El canal debe agregarse a ambos lados de la columna, por lo que debemos dividirlo en dos. Si no hacemos esto, nuestro canal tendrá 40 píxeles de ancho. Como se puede ver en la imagen de abajo, hemos agregado un canal de 10 píxeles en cada lado..
Ahora podemos duplicar esta imagen hasta que alcancemos el total de 960 píxeles nuevamente, y nos hemos creado una cuadrícula (básica)..
No te preocupes incluso si eres perezoso no tendrás que vivir sin redes. Hay muchos sistemas de redes agradables y gratuitas disponibles en Internet. Mi favorito, y estoy seguro de que lo has escuchado antes, es el famoso sistema de cuadrícula 960.gs, que tiene un marco CSS y un archivo PSD con todas las guías instaladas..
Espero haberte mostrado que las matemáticas pueden ser hermosas cuando se aplican al diseño, y que te he dado suficientes técnicas para usarlas en tu próximo diseño. Sin embargo, tenga cuidado, se requieren muchas otras cosas para que un diseño sea un éxito y, por lo tanto, el uso de estos trucos no es garantía de un buen diseño, pero sí pueden ayudarlo y guiarlo en el proceso de creación de uno..
Gracias por leer!
Accentsconagua