84

Cómo te puede ayudar la fotografía en el desarrollo web

20652Puntos

hace un mes

Curso de Sistemas de Diseño
Curso de Sistemas de Diseño

Curso de Sistemas de Diseño

Facilita las tareas de diseñadores y desarrolladores en el proceso de creación de software. Conoce estrategias para presentar sistemas de diseño y usarlos como herramientas de discusión que faciliten la toma de decisión entre equipos.

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.

Ley de tercios

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,

Microsoft haciendo uso de la ley de tercios

Un lugar ideal para un Call To Action, mostrar tu producto estrella, entre otros ¿…no?

Screenshot tomado de: https://www.microsoft.com/es-co

Simetría

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.

https://www.apple.com/

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.

Patrones

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.


https://shop.huawei.com/co/

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.

Regla de los impares

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.

https://www.apple.com/

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.

Espacio negativo

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.

Curso de Sistemas de Diseño
Curso de Sistemas de Diseño

Curso de Sistemas de Diseño

Facilita las tareas de diseñadores y desarrolladores en el proceso de creación de software. Conoce estrategias para presentar sistemas de diseño y usarlos como herramientas de discusión que faciliten la toma de decisión entre equipos.
Juan Daniel
Juan Daniel
@JuanDanielRR

20652Puntos

hace un mes

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
7
15751Puntos

Wow estoy estudiando producción audiovisual y desarrollo web, y me encanta encontrar formas de unir ambos mundos.

5

Muy buen aporte. ¿También aplicaría lo de la teoría de color, cierto?

3
7108Puntos

Muy buenos consejos, demasiado útiles.

3
20652Puntos
un mes

Gracias a ti por leer, espero los apliques pronto

2
5715Puntos

Excelente, el curso que sigo en mi ruta es propiamente el de Sistemas de Diseño, que bien y que buen articulo, gracias.

2
12512Puntos

Muy buen aporte, aplicando la experiencia de un tema en otra área diferente.

2
4613Puntos

Gracias por estos valiosos consejos.

2

Daniel no se si ya te lo había dicho pero la estas rompiendo! increible contenido!!! :platzilove:

1
20652Puntos
un mes

Gracias Bernando! eres un Crack, no por nada estas en PM

2
163Puntos

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

2
20652Puntos
un mes

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

1
163Puntos
un mes

No estaría nada mal, gracias por leer

2
14301Puntos

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.

1
20652Puntos
un mes

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

2
6890Puntos

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.

2
20652Puntos
un mes

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)

1
6890Puntos
un mes

@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

2
1545Puntos

super bueno, lo voy a aplicar de inmediato

2
1391Puntos

Gracias por el aporte y también por tus consejos.

2

Gracias por la información, es un tema importante que no debemos olvidar; ya que nos funcionará para ejecutar bien nuestros proyectos.

2
5483Puntos

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

2
22Puntos

Además de desarrollar me gusta la fotografía, me encanto el post como se utiliza el conocimiento de un área en otra.

2

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.

2
13194Puntos

Wow buen aporte!