La ley de tercios, simetría, regla de impares y espacio negativo son conceptos de fotografía que hoy me hacen un mejor profesional de desarrollo web. Te explico a continuación cómo se integra en mi trabajo.
En uno de los muchos grupos de desarrollo web en los que estoy encontré una persona preguntando, ¿cómo podía embellecer su página web?. Si bien podría ser una pregunta bastante ambigua, también es importante tener criterio para podernos responder (a nosotros mismos o a otros frontends) cuando estamos diseñando una página web.
pero, ¿qué factores pueden marcar la diferencia entre un diseño “feo” y uno “bonito”?
3 años de experiencia en fotografía, (se que es poco, pero es trabajo honesto) me han enseñado bastantes cosas, entre ellas: composición. Se puede definir como la manera en que organizamos nuestros elementos en un encuadre, llámese fotografía o página web.
Te voy a mencionar un par de leyes de composición, que seguro te puedan ayudar en tu próximo gran proyecto.
Imagina 2 líneas verticales y 2 horizontales distribuidas de manera equidistante creando una cuadrícula de 3x3 donde las intersecciones son los puntos de interés,
Un lugar ideal para un Call To Action, mostrar tu producto estrella, entre otros ¿…no?
Screenshot tomado de: https://www.microsoft.com/es-co
Cuando el equilibrio y la perfección tuvieron un hijo, nació la simetría. Esta, es tal vez la ley de composición favorita de Thanos, todo perfectamente equilibrado.
La página web de Apple es un buen ejemplo de esta ley, todo está perfectamente equilibrado, todo es simétrico, los botones, la imagen, el menú, los colores, no hay un lado en el que tengan más elementos que en otro.
imagina que pusieran todo de un solo lado, y el otro lo dejan vacío… seguramente sentirás que la página se cae de lado, eso evita la simetría.
Nuestro cerebro está siempre dispuesto a encontrar patrones, colores, texturas, formas. y así como en la fotografía te puedes aprovechar de eso para llamar la atención en una imagen, tú puedes aprovecharte de eso para organizar tu página web.
Piensa en una tienda virtual, ¿de qué lado está el menú con los filtros? ¡Lado izquierdo!. Páginas como Amazon, Mercadolibre, Aliexpress, OLX entre otras siguen el mismo patrón. hacer lo mismo permitirá que tus usuarios no tengan que esforzarse por buscar tus filtros, ya sabrán donde está. como ejercicio pregúntate donde se suele encontrar el carrito de compras, el botón de login o tu foto de perfil.
Otro ejemplo de esta ley es la pagina de Huawei, ¿te das cuenta como todos los bordes están redondeados? botones, cards, containers, ¡incluso en los teléfonos! bueno… no conozco celulares con bordes afilados, pero la idea es clara.
Tal vez algunas personas con TOC no estén muy de acuerdo conmigo, pero en diseño es mejor ver 3, 5, 7 elementos, que 2, 4 u 8.
Claro, esto no quiere decir que si tienes 4 elementos en tu menú de navegación debas agregar un más por que si. recuerda que funcionalidad y diseño van de la mano, diseño no es forma o color, diseño es que algo funcione bien. si tu silla super moderna de 2 patas hará que todo el que se siente allí se va a caer, dejame decirte que tu silla tiene un mal diseño.
y por supuesto, esto no aplica para absolutamente todo, aunque a la hora de hacer elegir un plan a un cliente… esta ley puede ser la mejor opción.
Esta norma es una de mis favoritas, las personas tienden a pensar que un espacio en blanco es un espacio que si o si se tiene que ocupar, y no! no es así.
El espacio negativo se puede entender como el espacio que no estás usando, pero que no lo estés usando no significa que no sea útil, no agobies a tus usuarios con mucha información en un solo lugar, solo harás que ignore la mayoría.
https://www.logitech.com/en-us/headsets
En este ejemplo, ¿podrías decirme en la página de que empresa estoy y en qué sección?
Te das cuenta que el espacio en blanco o negativo no es inútil, permite facilitar la lectura, además de dar ese aspecto minimalista que está tan de moda últimamente.
Si continuas investigando, te darás cuenta que existen muchas más leyes de composición aplicadas a la fotografía, y si eres cuidadoso, podrás darte cuenta que se pueden aplicar al desarrollo web.
Y ¡no! No tienes que estudiar fotografía para ser un gran desarrollador frontend, pero si podrías iniciar con el Curso de Diseño para Desarrolladores.
Wow estoy estudiando producción audiovisual y desarrollo web, y me encanta encontrar formas de unir ambos mundos.
Muy buen aporte. ¿También aplicaría lo de la teoría de color, cierto?
Si señor, completamente
Muy buenos consejos, demasiado útiles.
Gracias a ti por leer, espero los apliques pronto
Además de desarrollar me gusta la fotografía, me encanto el post como se utiliza el conocimiento de un área en otra.
Wow buen aporte!
Gracias por la información, es un tema importante que no debemos olvidar; ya que nos funcionará para ejecutar bien nuestros proyectos.
Muy bien!!! Estos temas me gustan y también me son muy cercanos por mi formación de artista visual.
Mucha de estas reglas vienen desde la Antigüedad Clásica con Platón, Vitruvio entre otros. Sus teorías tuvieron un gran impacto en el Renacimiento que fue el momento espacio-temporal donde más se evidenciaron las investigaciones de este tipo, porque el centro dejó de ser Dios para ser el Hombre. Es en este momento que surge la perspectiva y cambió nuestra forma de ver.
Porque aunque no lo crean nuestra forma de ver no es natural, es una construcción. (tema complejo que en un comentario no se puede abordar, pero muy interesante)
Para complementar recomiendo que investiguen sobre la “Regla de Oro” y el Hombre de Vitruvio (En el caso de este último deben ir a la fuente original (Vitruvio) y además recomiendo los aportes que Leonardo da Vinci le hizo en el Renacimiento)
Felicidades @JuanDanielRR
Gracias por estos valiosos consejos.
super bueno, lo voy a aplicar de inmediato
Excelente, el curso que sigo en mi ruta es propiamente el de Sistemas de Diseño, que bien y que buen articulo, gracias.
Muy buen aporte, aplicando la experiencia de un tema en otra área diferente.
es sorprendente como un papel diferente influye mucho en una pagina web, aunque me gustaría que se representara algún ejemplo con la secuencia de Fibonacci
La secuencia de Fibonacci es bastante compleja de encontrar, principalmente por que depende de MUCHOS mas elementos en el encuadre, y eso va en contra de mantener una composición “mas limpia”, claro que se puede! pero es mas complejo… me quedo con la tarea de hacer un ejemplo
No estaría nada mal, gracias por leer
Por primera vez soy el primero en opinar! jej
Opino que: No soy fotógrafo y creía que el tema era como muy obvio de realizar pero con algunos cursos y blogs como el de Juan me doy cuenta de que es un tema bastante serio y relevante.
realmente serio, hablando puramente de fotografia imagiante que te contratan para retratar un matrimonio, sera uno de los mejores recuerdos que tendra esa pareja y sus fotos seran para toda la vida, no se podran repetir nunca… ¿que fotos entregarias? no puedes salir con cualquier cosa
Gracias por los consejos…
Gracias a ti por leer!
Me encanto el blog, cuando entiendes la composición verás que lo puedes aplicar y aprecia la arquitectura, el cine, la decoración, etc.
Hola! tienes toda la razón, no se si conoces Bogotá, pero para mi el mejor plan es caminar por la 7ª, solo por eso. Sientes que los edificios son mas que eso (ni se diga del cine)
@JuanDanielRR actualmente vivo en Bogotá y es lo que más amo de esta ciudad. Aún no he tenido la oportunidad de tomar fotos pero es un plan que tengo en mente
Daniel no se si ya te lo había dicho pero la estas rompiendo! increible contenido!!! :platzilove:
Gracias Bernando! eres un Crack, no por nada estas en PM
Es muy buen aporte para lo audiovisual en general! empezaré a implementarlo en el desarrollo actual que tengo de una web! y en mis proyectos de animación e ilustración 3D.