Como diseñadores web, debemos tener mucho en cuenta al iniciar un proyecto. Uno de los segmentos más grandes que trabajan con diseños y sistemas para ordenar el espaciado. Normalmente, los diseñadores trabajarán con una biblioteca CSS espaciada por la cuadrícula, pero hay muchas formas de implementar diseños creativos.
Hoy analizaremos la proporción de oro y cómo puede aplicar lecciones simples en su trabajo de diseño. La mayoría de las técnicas discutidas son aplicables a una amplia gama de artes y diseño, pero nos centraremos en el aspecto digital. Junto con la proporción de oro, considere otras herramientas útiles que pueden ayudar en el desarrollo de diseños de sitios.
La proporción divina
La proporción divina también se conoce como la proporción de oro. Es una constante matemática muy similar a 1.618 utilizada para describir la relación entre dos elementos. Esta relación se ha utilizado desde el período del Renacimiento temprano, cuando los conceptos de arte new age explotaron en la escena.
Los artistas durante este período de tiempo consideraron que la proporción era mágica y tenían poderes divinos místicos cuando se integraron en el trabajo de diseño. Hace cientos de años esto se aplicaba principalmente a cosas como la arquitectura, las esculturas y las pinturas, pero hoy podemos usar estas mismas técnicas en nuestro arte digital.
La relación se describe mejor matemáticamente. Es un poco confuso entenderlo al principio, pero podemos reemplazar cada variable utilizada en la ecuación con números reales, solo así las cosas comenzarán a tener sentido un poco más. Solo trabajamos con 2 variables - llamémoslas una y segundo. Los elementos están trabajando dentro de una proporción de oro cuando a + b / a es equivalente a a / b.
Puede probar esto con cualquier valor de ambas variables para ver lo que obtiene. En última instancia, querrás terminar con 1.61803398 (o solo 1.618) como respuesta. Dado que las proporciones con las que trabajamos no están establecidas en un valor específico, podemos asumir que cualquier número de valores equivale a una proporción igual. Esto deja nuestro trabajo de diseño flexible y relativo al tamaño en lugar de estar dentro de un dominio de números absolutos.
Funciones matemáticas dentro de la relación
Un truco interesante se forma al trabajar solo con la proporción y las variables de nuestro sistema total. Tomemos, por ejemplo, el sistema de cuadrícula 960 dividido en 2 columnas. No sabemos qué tan grande es hacer cada columna para mantener nuestro diseño dentro de las proporciones divinas, pero tenemos suficientes números para resolverlo.
960 (representado en unidades de píxeles) mantiene nuestro valor de a + b. Entonces podemos dividir 960 en 1.618 para obtener el valor de nuestro lado más largo, que está representado por nuestra variable a. En este caso 960 / 1.618 sale a 593px.
Usando esta nueva información, podemos restar 593 de 960 para obtener el ancho de nuestra columna lateral: 367. Si queremos verificar nuestra respuesta, podemos tomar 593 + 367 (960) y dividirla por nuestro mayor valor de lado 593. los cálculos que debe obtener un valor de retorno de ~ 1.618, exactamente igual a nuestra relación de oro. ¡Ta-da!
Esta técnica es esencial cuando se trata de desarrollar diseños fluidos para sitios web dinámicos. La proporción divina ayuda a mantener las cosas organizadas de la manera más orgánica y natural. Si lo desea, puede organizar su diseño en diseños de 3 o 4 columnas. Con esa opción, necesitarás probar cuál es exactamente el aspecto que buscas y cuál será el tamaño total de tu diseño.
Si está atascado en calcular una proporción fija para su sitio, no se preocupe por las cosas pequeñas. La proporción divina solo sirve para guiarlo como diseñador, no para forzar las ideas en su garganta a usar valores numéricos exactos en todas partes. Siempre que su diseño pueda sostener su propio peso y mantener una sensación uniforme a lo largo de la página, debería estar bien.
Como regla general, puede utilizar la proporción 5: 3 en su lugar, aunque no es exactamente igual a la proporción áurea, debería proporcionar resultados lo suficientemente cercanos como para tener en cuenta los errores.
Esbozando la regla de los tercios
Al optimizar el diseño de su sitio, las cosas no siempre salen perfectas. Esta es la forma de diseño web y ciertamente no hay razón para seguir las pautas exactas aquí. La Regla de los tercios es casi un hombre perezoso simplificado? Manera de aplicar una proporción de oro.
No va a proporcionarte resultados pobres o sitios web deformes, ni mucho menos. Pero es un enfoque relajado para diseñar relaciones que muchos encontrarán superiores a los cálculos exactos.
La regla establece que puedes dividir cualquier maqueta o pieza de arte en nueve cuadrados iguales. Esto se logra colocando 2 líneas verticales y 2 horizontales igualmente espaciadas en toda la imagen. Los cuatro puntos en la imagen donde se encuentran sus líneas son los puntos calientes. para su sitio web. O, en términos generales, esas áreas deben contener el contenido más importante dirigido por el usuario.
Un enfoque interesante para este problema resuelve dividir cada columna en mitades nuevamente. Esto le da una cuadrícula distribuida uniformemente entre su sitio con proporciones establecidas en todos los ámbitos. De esta manera, su casilla superior izquierda contendrá la mayor parte de la marca de su sitio (¿logotipo, navegación, área de encabezado?). Alternativamente, su casilla superior derecha puede contener una división de información de menor importancia que desciende verticalmente por su sitio.
Enfocarse en cada punto interno del diseño del sitio puede ayudarlo a determinar dónde mantener los encabezados, botones, enlaces, etc. Para reafirmar esto no es una regla estricta que todos los diseñadores deben seguir para controlar sus diseños. Esto es simplemente una ideología que se ha aplicado a innumerables principios de diseño y se ha demostrado que funciona con diseños de sitios web complejos. Es aún más fácil trabajar con él, ya que el software de diseño de Adobe incluye herramientas para habilitar cuadrículas en sus archivos. ¿Cuánto más fácil podrían ser las cosas?
El rectángulo dorado
Como su nombre indica, es posible crear un rectángulo dorado aplicando la misma proporción que hemos estado analizando geométricamente. El lado más largo de su rectángulo debe contener su valor más largo, o variable una, mientras que el lado más corto representaría tu variable segundo valor. Esta forma también se puede aplicar mucho en diseños de diseño y otras piezas de gráficos, incluidos logotipos e iconos más pequeños.
Estas piezas especiales de geometría pueden guiarlo para descubrir casi cualquier problema de diseño o elemento con el que pueda estar preocupado. Más específicamente, puede delinear imágenes de stock o pantallas Flash de lujo ubicadas dentro del contenido de su sitio. Estos rectángulos también se pueden usar en el pie de página o en las áreas de la barra lateral para marcar elementos individuales o widgets.
Por supuesto, el uso más prominente para esto es en contenido dinámico. Al colocar galerías de fotos u obras en una cartera, debe considerar rectángulos dorados como su delimitador. Los sitios web de comercio electrónico pueden hacerlo mucho mejor con esta relación intacta al mostrar los productos no solo en filas, sino en columnas ricas en contenido espaciadas uniformemente dentro de rectángulos dorados.
No estoy aquí para sugerir que todos los elementos de su página estén pavimentados con rectángulos dorados. De hecho, hay muchas consideraciones cuando se trata de alineación y cuadrículas para mantenerse al tanto de cualquier falla de diseño que pueda estar creando. Esta es solo otra herramienta además de las innumerables otras que se utilizan para crear un hermoso diseño.
Conclusión
Hemos revisado un poco más allá de la superficie del Golden Ratio para descubrir cómo se puede implementar en los trabajos de diseño moderno. Los sistemas de rejilla pueden ser delicados y el trabajo dentro de las proporciones divinas permite que los espacios fijos y elásticos de la habitación respire y caiga en su lugar. No debes basar todo tu diseño en estas constantes matemáticas. Pero puede obtener una gran ventaja comenzando en este sector y considerando el diseño de cuadrícula de su sitio web.
Hay algunas increíbles plantillas de cuadrícula gratuitas disponibles para descargar para ayudar durante este proceso. Estos son excelentes si no estás seguro de saltar de cabeza en las proporciones de diseño y quieres trabajar en un terreno sólido primero.
Intente aplicar estas ideas en su próximo diseño y vea cómo resultan las cosas. Los diseños y las estructuras orgánicas, junto con las matemáticas naturalmente potentes, pueden hacer para un diseño de sitio web asombroso.