Bajo una misma grid

Cuando un desarrollador frontend empieza un proyecto siempre se planea varias preguntas cuando está analizando el diseño: ¿Cuantas columnas tiene el diseño? ¿De cuanto es el gutter entre columnas?… Son preguntas lógicas para un frontend pero desgraciadamente a veces cuesta cuadrar un sistema de columnas en un diseño que no fue pensado con esa estructura.

Si a nivel de diseño fue una decisión intencionada, no me meto. Pero la mayoría de veces es por descuido. Cada vez más diseñadores gráficos (y otras disciplinas) se aventuran a diseñar webs sin conocimientos previos (os animo a leer este artículo que trata sobre ello).

En la mayoría de proyectos, por un tema de costes, practicidad, estandarización, tiempos de desarrollo… yo suelo usar Bootstrap. Este frame work utliza un sistema de columns que por defecto viene con 12 columnas y 1.5rem de gutter (si no sabéis lo que es un rem os animo a leer este artículo). Esto valos los podemos alterar sin problema:

  • Podemos poner 10 columnas con 2rem de gutter
  • Podemos poner 7 columnas con 20px de gutter
  • Podemos poner 20 columnas con 0.5em de gutter

…y así podríamos estar todo el día. Pero lo que no podemos es trabajar a 12 columnas y que de repente en el diseño nos encontremos con 7 o 5 columnas (imposible de hacer con 12 columnas). Y ahora me diréis que podemos hacer 5 columnas y centrarlas… ¡Parches hay siempre! Pero se trata de hacer las cosas bien. Establezcamos un sistema de columnas coherente y sigámoslo cuando diseñamos. Es cierto que el diseño a veces se puede permitir ciertas licencias (forzar salto de línea, desigualar paddings…) pero el trabajo de un desarrollador es establecer una norma y que se aplique a todos los elementos por igual, las excepciones siempre conllevan más trabajo.

En definitiva, hay que se más emp´tico con el trabajo que se va a encontrar el siguiente en la cadena de producción de un proyecto. Creativos sí, pero responsables.

 

Deja un comentario